{"componentChunkName":"component---src-templates-post-js","path":"/bigwidget","result":{"pageContext":{"content":{"raw":"{\"nodeType\":\"document\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"BigWidget is a tool to help make \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Page Builder widget templates\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://developer.bigcommerce.com/api-docs/store-management/widgets/overview#widget-templates\"}},{\"nodeType\":\"text\",\"value\":\" 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: \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"https://www.npmjs.com/package/big-widget\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://www.npmjs.com/package/big-widget\"}},{\"nodeType\":\"text\",\"value\":\"\",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"npm i -g big-widget\",\"marks\":[{\"type\":\"code\"}],\"data\":{}}],\"data\":{}},{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"I started this project with two goals:\",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"ordered-list\",\"content\":[{\"nodeType\":\"list-item\",\"content\":[{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Learn how to make a tool with a command-line interface\",\"marks\":[],\"data\":{}}],\"data\":{}}],\"data\":{}},{\"nodeType\":\"list-item\",\"content\":[{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Make the process of building and deploying custom Page Builder widget templates a little easier.\",\"marks\":[],\"data\":{}}],\"data\":{}}],\"data\":{}}],\"data\":{}},{\"nodeType\":\"heading-2\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Making the CLI\",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"I used \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"yargs\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://www.npmjs.com/package/yargs\"}},{\"nodeType\":\"text\",\"value\":\" to create the CLI, \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"inquirer\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://www.npmjs.com/package/inquirer\"}},{\"nodeType\":\"text\",\"value\":\" to prompt the user for input like the widget template name and the store's API credentials, \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"execa\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://www.npmjs.com/package/execa\"}},{\"nodeType\":\"text\",\"value\":\" to automate the initialization of a new git repository for each template, and \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"chalk\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://www.npmjs.com/package/chalk\"}},{\"nodeType\":\"text\",\"value\":\" to make the CLI a little more pleasing to look at.\",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"heading-2\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Making my life easier\",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"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.\",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"The tool comes with four \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"boilerplate templates\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://github.com/hatertron3000/big-widget/tree/master/templates\"}},{\"nodeType\":\"text\",\"value\":\" that implement some of the most common widget features:\",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"unordered-list\",\"content\":[{\"nodeType\":\"list-item\",\"content\":[{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"array\",\"marks\":[{\"type\":\"bold\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\": an \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"array\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://developer.bigcommerce.com/stencil-docs/page-builder/widget-ui-schema#array-type\"}},{\"nodeType\":\"text\",\"value\":\" of schemas for creating widgets with \",\"marks\":[],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"n\",\"marks\":[{\"type\":\"italic\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\" items (like an image carousel with a configurable number of slides)\",\"marks\":[],\"data\":{}}],\"data\":{}}],\"data\":{}},{\"nodeType\":\"list-item\",\"content\":[{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"featured products\",\"marks\":[{\"type\":\"bold\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\": a template that queries the \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Storefront GraphQL API\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://developer.bigcommerce.com/api-docs/store-management/widgets/tutorials/dynamic-widgets\"}},{\"nodeType\":\"text\",\"value\":\" to retrieve dynamic product data and display it on the storefront.\",\"marks\":[],\"data\":{}}],\"data\":{}}],\"data\":{}},{\"nodeType\":\"list-item\",\"content\":[{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"settings demo\",\"marks\":[{\"type\":\"bold\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\": a template that implements one of each of the \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"UI input types\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://developer.bigcommerce.com/stencil-docs/page-builder/schema-settings\"}},{\"nodeType\":\"text\",\"value\":\".\",\"marks\":[],\"data\":{}}],\"data\":{}}],\"data\":{}},{\"nodeType\":\"list-item\",\"content\":[{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"tab\",\"marks\":[{\"type\":\"bold\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\": a template that renders two \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"sections in a tab\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://developer.bigcommerce.com/stencil-docs/page-builder/widget-ui-schema#tabs-and-sections\"}},{\"nodeType\":\"text\",\"value\":\" with text, productId, and productImage input types.\",\"marks\":[],\"data\":{}}],\"data\":{}}],\"data\":{}}],\"data\":{}},{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"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.\",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"You can check out the code on github here: \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"https://github.com/hatertron3000/big-widget\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://github.com/hatertron3000/big-widget\"}},{\"nodeType\":\"text\",\"value\":\"\",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"heading-2\",\"content\":[{\"nodeType\":\"text\",\"value\":\"See a Demo\",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Check out \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Tom Robertshaw's (@bobbyshaw)\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://twitter.com/bobbyshaw\"}},{\"nodeType\":\"text\",\"value\":\" video demonstrating BigWidget to see it in action: \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"https://youtu.be/XySdLfwDX3M\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://youtu.be/XySdLfwDX3M\"}},{\"nodeType\":\"text\",\"value\":\"\",\"marks\":[],\"data\":{}}],\"data\":{}}]}","references":[]},"headline":"I built BigWidget","summary":{"summary":"I built a tool with a CLI that could make my life a little easier."},"publishedDate":"2021-06-05T00:00-05:00","slug":"bigwidget","thumbnail":{"gatsbyImageData":{"images":{"sources":[{"srcSet":"//images.ctfassets.net/fp1mn1nwu0hx/1htvT7ii7P4B8DVdtXNk29/6ce46561dca23a7837172820e10d2e31/bigwidget-square.png?w=320&h=320&q=50&fm=webp 320w,\n//images.ctfassets.net/fp1mn1nwu0hx/1htvT7ii7P4B8DVdtXNk29/6ce46561dca23a7837172820e10d2e31/bigwidget-square.png?w=640&h=640&q=50&fm=webp 640w,\n//images.ctfassets.net/fp1mn1nwu0hx/1htvT7ii7P4B8DVdtXNk29/6ce46561dca23a7837172820e10d2e31/bigwidget-square.png?w=1280&h=1280&q=50&fm=webp 1280w","sizes":"(min-width: 1280px) 1280px, 100vw","type":"image/webp"}],"fallback":{"src":"//images.ctfassets.net/fp1mn1nwu0hx/1htvT7ii7P4B8DVdtXNk29/6ce46561dca23a7837172820e10d2e31/bigwidget-square.png?w=1280&h=1280&q=50&fm=png","srcSet":"//images.ctfassets.net/fp1mn1nwu0hx/1htvT7ii7P4B8DVdtXNk29/6ce46561dca23a7837172820e10d2e31/bigwidget-square.png?w=320&h=320&q=50&fm=png 320w,\n//images.ctfassets.net/fp1mn1nwu0hx/1htvT7ii7P4B8DVdtXNk29/6ce46561dca23a7837172820e10d2e31/bigwidget-square.png?w=640&h=640&q=50&fm=png 640w,\n//images.ctfassets.net/fp1mn1nwu0hx/1htvT7ii7P4B8DVdtXNk29/6ce46561dca23a7837172820e10d2e31/bigwidget-square.png?w=1280&h=1280&q=50&fm=png 1280w","sizes":"(min-width: 1280px) 1280px, 100vw"}},"layout":"constrained","width":1280,"height":1280},"title":"BigWidget Square Logo","fixed":{"src":"//images.ctfassets.net/fp1mn1nwu0hx/1htvT7ii7P4B8DVdtXNk29/6ce46561dca23a7837172820e10d2e31/bigwidget-square.png?w=250&q=50","srcSet":"//images.ctfassets.net/fp1mn1nwu0hx/1htvT7ii7P4B8DVdtXNk29/6ce46561dca23a7837172820e10d2e31/bigwidget-square.png?w=250&h=250&q=50 1x,\n//images.ctfassets.net/fp1mn1nwu0hx/1htvT7ii7P4B8DVdtXNk29/6ce46561dca23a7837172820e10d2e31/bigwidget-square.png?w=375&h=375&q=50 1.5x,\n//images.ctfassets.net/fp1mn1nwu0hx/1htvT7ii7P4B8DVdtXNk29/6ce46561dca23a7837172820e10d2e31/bigwidget-square.png?w=500&h=500&q=50 2x,\n//images.ctfassets.net/fp1mn1nwu0hx/1htvT7ii7P4B8DVdtXNk29/6ce46561dca23a7837172820e10d2e31/bigwidget-square.png?w=750&h=750&q=50 3x","width":250,"height":250}}}},"staticQueryHashes":["3159585216"]}