Speroteck Speroteck

New tools do not always immediately offer effective work schemes; it takes some time to refine and adapt them to specific requests.

Today, we will talk about the Widget Builder tool for working with Bigcommerce widgets. Our expert from the Speroteck Bigcommerce Team, Valentyn Kovalenko, knows exactly how to simplify work with this tool and optimize efforts and time.

Valentyn Kovalenko (SFCC Developer)

“Today I want to share my own work experience and talk about the general capabilities of the Bigcommerce platform, as well as what tools this platform offers.

Thanks to the functionality of the Bigcommerce platform, users can create their own website pages using certain widgets. These widgets allow you to place conditional blocks on the page – in principle, the process is similar to the Lego constructor. Developers can also create their own custom widgets for the site using the command line tool – Widget Builder. This tool is considered relatively new, but still quite undeveloped.

Imperfect command-line tools Widget Builder.

Unfortunately, the entire functionality offered by Bigcommerce’s toolkit is limited to configuring data to connect to an existing site, as well as creating and loading new widgets. For developers, this means that all actions related to getting, updating, and deleting widgets require the use of the Widget Builder API.

Therefore, the developer will have to use additional programs to interact with the API, which in turn increases development time and requires additional steps and efforts from developers.

Basic developer workflow when creating a new widget using tools from Bigcommerce.

One of the main rules of developers is to avoid the so-called “building bikes”. Therefore, instead of creating a widget from scratch, the developer needs to get an existing widget from another site, which he adapts to his needs.

To do this, the developer must contact the Widget Builder API using the Postman application, specify the necessary data and make a request.

After that, the developer will receive a large JSON file that can contain thousands of lines of code:

After receiving the JSON file, the developer needs to perform the following actions:

• Find the necessary widget by name
• Return to the development environment
• Create a folder with the name of the widget
• Return to Postman
• Find and copy data by template key
• Then return to the development environment again
• Create the necessary file
• Insert and format data from template
• Then – return to Postman
• Find and copy data already by schema key
• Return to the development environment again (how many times have I repeated this already?)
• Then create the necessary file and insert the data

Only after all these actions described above, the developer can begin the real development of the widget.

Unfortunately, this kind of action needs to be performed every time a developer wants to retrieve, update, or remove a widget (not to mention interacting with multiple widgets).

The origin of the script idea and its functionality.

The prerequisite for the development was the presence of code fragments in the API documentation. With such an initial base and a desire to optimize routine processes as much as possible, I began development.

At first, the script was only sketches of similar fragments from the API, was located between the project files and had limited functionality. However, over time, looking at potential opportunities and eliminating potential flaws, I expanded its functionality and optimized the code to its current state.

What is a script that has functionality and how does it improve development?

Currently, the script is a NodeJS batch module presented in the form of a commandline tool solution, just like the main tool from Bigcommerce.
Thanks to the interactive menu and API, the developer is offered several interaction options:

Extracting all widgets from the site.
The script receives data about existing widgets on the site via API, creates a separate folder with the name of the widget and downloads all the necessary data files. If the folder for the widget already exists, the script overwrites the files.

Extracting a widget by ID.
Similar functionality, but with the ability to clarify a specific widget name.

Extracting widgets from the list available on the site.
The script scans all existing widgets and displays them to the user in the form of a dynamic list, in which the user can choose the option.

Updating the existing widget on the storefront by name.
The script gets the name of the widget, scans the folder for the corresponding ID, checks whether the widget exists on the site page, and offers to update the existing version or create a new one.

Update several widgets on the site page from the list in the directory.
The script scans the directory with widgets, filters folders according to the presence of necessary files and displays to the user a dynamic list in which the user can choose the necessary widgets for updating.

This functionality greatly simplifies the process of creating and updating widgets.

It provides convenient access to data without the need to use additional programs. The script effectively automates monotonous tasks and allows developers to focus on real development.

In addition, it enables the simultaneous management of multiple widgets and makes it easy to move widgets from one site to another, which increases the productivity of working with many widgets.”

WRITTEN BY: Valentyn Kovalenko, Speroteck BigCommerce team.