Lots of people think that it is pretty challenging to create and update custom widgets in bigcommerce, this is right but there are tons of ways to do that very easily, such as the Epic Page Builder Widget app, Postman, and Widget Builder tool.
To create and update custom widgets, we prefer using Postman and Widget Builder tools, which are free instead of the Epic Page Builder Widget app, which costs $50 to get the functionality of creating and updating custom widgets.
To create and update custom widgets in bigcommerce, read this information
As you may be aware, you can create or update custom widgets through APIs using applications such as Postman or Insomnia. However, this approach can be complex since it involves combining schema and HTML into a single file. Additionally, you need to create different requests for updating and creating widgets.
The widget builder provides a local preview feature for your widgets. To simplify your work, you can utilize a widget builder, which allows you to keep the schema and HTML of a widget separate in a file, making it easier to manage. Furthermore, the widget builder offers a convenient way to preview your customizations. However, it is important to note that this method only enables the creation of new widgets and does not offer the capability to edit existing ones if we do not have the UUID of that widget.
To address this limitation, an alternative approach is to utilize Postman to retrieve the data of the existing widgets from the store and add them to the widget builder. In this case, you will need the UUID of the widget that you wish to update. By incorporating this method, you can fulfill the requirements of updating existing widgets while utilizing the convenience of the widget builder.
Let’s see how to do it:
To begin, let’s look at the prerequisites you need before getting started:
- Postman
- widget builder installed
- API Credential
In case, if you don’t have API Credential or widget builder installed follow the given steps to fulfill these scarcities:
In order to obtain the API Credential, follow these steps
1. Log in to your store with the owner account and then, go to Settings and scroll down you’ll see the API section, and then, click on Store-level API accounts.
2. Click on the + Create API account and, make sure that the Token type is selected as V2/V3 API token and give a Name as well as set the Content to modify and then, click on the save button, and after, a text file will automatically download.
To install the Widget Builder
Before installing the widget builder you should meet the below prerequisites:
- Node.js v14.0.0
- NPM v6.14
- A BigCommerce store account
- API Credential.
Follow these steps to install the widget builder
1. Firstly, go to the command terminal and, run the “node -v” And “npm -v” commands to check the version of them.
2. Additionally, Clone widget-builder repository.
3. Navigate to the widget-builder cloned directory and open the terminal there and then, run the given commands.
npm install
npm run build
npm install -g4. After installing, run the below command to check the widget-builder information.
widget-builder -h5. And then, configure your API Credentials of the store with Widget Builder. To do this run “widget-builder init” you will be asked to enter Client ID, Access Token, and API Path, you have to add them correctly.
Note– To reset store configuration, run the widget-builder init command in the same directory.
Now, let’s go through the steps to create new custom widgets:
1. To get started, run the following command in your widget-builder cloned directory.
widget-builder create Image-widgetAfter running the above command, you will get the below output and your widget text will open automatically by your browser on port 8080.
2. Now, you can edit the files “schema.json” and “widget.html” as you wish. You will automatically set up the “Config.json” file when you run the “widget-builder start “<widget-name>” command or when you save your widget files and preview locally.
widget-builder publish Image-widget
Moving on to updating widgets in Bigcommerce, let’s follow these steps:
1. Firstly, open Postman and make a request to get the data of all the existing widgets, we need the id to update widget if we don’t know the UUID of that widget (If you know the UUID widget which you want to update you can skip this first and second step).
2. You’ll get a response as a result, In the response section of Postman from all the data of widgets find the widget which you want to edit with the help name you can verify easily and copy that UUID.
3. After coping, Paste the UUID at the end of the URL and hit the Send button to get the only data of one widget which we want to edit.
4. After clicking on the Send button, you’ll get a response as a result in the response section you can see the schema and template data, just copy them and go to the Widget Builder directory and open the terminal there and create a widget with the same name as the widget which you want to edit or if you want to change the name of the widget you can change it.
After running the above command, you will get the output, and your widget will be created and automatically open in your browser on port 8080.
5. Navigate to the created widget folder and create a file called widget.yml and Paste the UUID of the widget you want to edit.
6. Replace the schema data of the widget (copied from the Postman response) in the “schema.json” file, and replace the template data in the “widget.html” file. Before replacing, make sure to convert the format of the template data from JSON to HTML. you can change with the help of any AI tool or dynamically.
7. Make the desired changes to the “schema.json” and “widget.html” files as per your needs. Additionally, you can preview the changes locally using the command “widget-builder start ”.
8. To conclude, when you’re satisfied with the updates, use the command “widget-builder publish <widget-name>” to make your changes live.
Please contact us at manish@bay20.com or call us at +91-8800519180 for any support related to Bigcommerce. You can also visit the Bigcommerce development page to check the services we offer.
