Epic Image Widget

Mar, 25 2022Epic Image Widget

Creating a simple image widget is very easy with bigcommerce "Widget Template" API.
it contains from two main parts:

  1. Schema:

basically schema is group of options that user can pick and chose from, it allow you to customize your layout by making fields values dynamically inserted by the user, then taking that those information from the schema and parse it in template.

bigcommerce support various amount of schema options one of the popular schema options is the "array" type.

arrays are basically a repeatable data that user can add as much as he want and for each one of those we can have as much as customizable data.

[
    {      
        "type": "array",      
        "label": "Image List Items",      
        "id": "images",      
        "defaultCount": 3,      
        "entryLabel": "Image Item",      
        "schema": [        
            {          
                "type": "tab",          
                "label": "Design",          
                "sections": [            
                    {              
                        "settings": [                
                            {
                              "type": "imageManager",
                              "id": "imageUrl",
                              "default": {
                                "src": "https://bridge490.qodeinteractive.com/wp-content/uploads/2021/07/slider-image-2.jpg",
                                "type": "IMAGE_MANAGER"
                              }
                            }           
                        ]            
                     }          
                 ]        
           }      
        ]    
    }  
]

the upper code is basically just inserting a block with "array" type  we give it a "label" that make the user know what this block is for
then we give it an "id" which is what we use in handlebars to use this tab values
the "entry Label" is what we provide to each item in this array as a name.
moving forward the schema array is a group of inputs that get generated dynamically for each image, this can be multiple fields or single field.
in our case we are using the "imageManager" type input which allow us to either upload or choose an image from our system and then use that image.
default object is basically the default values for each tab.

2. Template:
basically template is the part where we write plain HTML, bigcommerce uses handlebars to parse there HTML, we took values of the schema and parse them in here.

{{#each images}} <img class="responsive-image {{_.id}}" src="{{imageUrl.src}}" /> {{/each}}

this simple code just loop through the images in the schema and for each image in the images we took the "imageUrl" attribute and use the src from it. this will allow us to render the url of the image we have chosen.
you can also notice that we used {{_.id}} which will generate a dynamic uuid for each element in the loop.
this can be helpful to use so that when you are rendering multiple items of blocks you can make each one styled depending on that {{_.id}}

HAPPY CODING!!