< Home

I built BigWidget

BigWidget is a tool to help make Page Builder widget templates for BigCommerce stores. It provides a CLI to generate boilerplate code to create a widget template and integrates with the BigCommerce widgets API to deploy a custom widget template to a BigCommerce store. You can install it with npm: https://www.npmjs.com/package/big-widget

npm i -g big-widget

I started this project with two goals:

  1. Learn how to make a tool with a command-line interface

  2. Make the process of building and deploying custom Page Builder widget templates a little easier.

Making the CLI

I used yargs to create the CLI, inquirer to prompt the user for input like the widget template name and the store's API credentials, execa to automate the initialization of a new git repository for each template, and chalk to make the CLI a little more pleasing to look at.

Making my life easier

Page Builder is a spiffy WYSIWYG tool that BigCommerce provides to create content on a storefront. It comes with some pre-built widget templates but sometimes I wanted to extend or replace them with my own. Before BigWidget, doing so was a very tedious process that involved writing a schema in JSON, converting an HTML template into a JSON-safe string, and packaging it all up to deploy to a REST API. I got tired of copy/pasting things into Postman and writing very similar JSON, so I automated a few things with BigWidget.

The tool comes with four boilerplate templates that implement some of the most common widget features:

  • array: an array of schemas for creating widgets with n items (like an image carousel with a configurable number of slides)

  • featured products: a template that queries the Storefront GraphQL API to retrieve dynamic product data and display it on the storefront.

  • settings demo: a template that implements one of each of the UI input types.

  • tab: a template that renders two sections in a tab with text, productId, and productImage input types.

Once BigWidget generates the boilerplate code, you can modify the GraphQL query, schema, and template to meet your requirements. When you're ready to test your work, you can use BigWidget to push the template to your store where it will become available in Page Builder.

You can check out the code on github here: https://github.com/hatertron3000/big-widget

See a Demo

Check out Tom Robertshaw's (@bobbyshaw) video demonstrating BigWidget to see it in action: https://youtu.be/XySdLfwDX3M