DEV Community

Dev-Sandbox
Dev-Sandbox

Posted on

Bigcommerce Widget Migration

Hi Everyone,
In BigCommerce, currently there is no option to move the widgets from one store to another store. This will be a big problem in the case of having the staging and production account.

I am having a partial automated and partial manual solution for this.

The below is a postman script which needs the below inputs. These inputs can be set in the environment variable.

Env Variables
source_widget_template_id
source_template_file
source_store_hash
source_access_token
destination_widget_template_id
destination_template_file
destination_store_hash
destination_access_token

Code(Put in the "Tests" tab in Postman).

// Get Source Placement
const sourceWidgetRequest = {
  url: 'https://api.bigcommerce.com/stores/'+pm.environment.get('source_store_hash')+'/v3/content/placements?template_file='+pm.environment.get('source_template_file')+'&widget_template_uuid='+pm.environment.get('source_widget_template_id'),
  method: 'GET',
  header: {
    'Content-Type': 'application/json',
    'X-AUTH-TOKEN': pm.environment.get('source_access_token')
  }
};

const destinationWidgetRequest = {
  url: 'https://api.bigcommerce.com/stores/'+pm.environment.get('destination_store_hash')+'/v3/content/placements?template_file='+pm.environment.get('destination_template_file')+'&widget_template_uuid='+pm.environment.get('destination_widget_template_id'),
  method: 'GET',
  header: {
    'Content-Type': 'application/json',
    'X-AUTH-TOKEN': pm.environment.get('destination_access_token')
  }
};

let widgetUpdateRequest = {
  url: 'https://api.bigcommerce.com/stores/'+pm.environment.get('destination_store_hash')+'/v3/content/widgets',
  method: 'PUT',
  header: {
    'Content-Type': 'application/json',
    'X-AUTH-TOKEN': pm.environment.get('destination_access_token')
  }
};


pm.sendRequest(sourceWidgetRequest, (srcError, srcResponse) => {
    if(srcError){
        console.log("srcError", srcError);
    }else{
        // Get the widget configuration.
        let srcWidgetResponse = srcResponse.json();
        console.log(srcWidgetResponse.data);
        if(srcWidgetResponse.data.length > 0){
            let srcWidgetConfiguration = srcWidgetResponse.data[0].widget.widget_configuration;
            console.log("source_widget_configuration",srcWidgetConfiguration);

            // Get Destination Placement.
            pm.sendRequest(destinationWidgetRequest, (destError, destResponse) => {
                if(destError){
                    console.log("destError", destError);
                }else{

                    let destWidgetResponse = destResponse.json();
                    console.log(destWidgetResponse.data);
                    if(destWidgetResponse.data.length > 0){
                        let destWidgetConfiguration = destWidgetResponse.data[0].widget.widget_configuration;
                        console.log("destination_widget_configuration_id",destWidgetConfiguration._.id);
                        widgetUpdateRequest.url = widgetUpdateRequest.url+"/"+destWidgetConfiguration._.id;
                        delete srcWidgetConfiguration._;
                        widgetUpdateRequest.body= {
                            mode: 'raw',
                            raw: JSON.stringify({ "widget_configuration": srcWidgetConfiguration,"upgrade": true })
                        };
                        console.log("final_update", widgetUpdateRequest);

                        pm.sendRequest(widgetUpdateRequest, (finalError, finalResponse) => {
                            if(finalError){
                                console.log("finalError",finalError);
                            }else{
                                console.log("update_done", finalResponse);
                            }
                        });
                    }
                }
            });

        }
    }
});

Enter fullscreen mode Exit fullscreen mode

Once setting up the script and the environment variables the widget configuration will be copied from source to the destination store.

Before running the script,

  1. The Widget template must be created in the destination store.
  2. Wherever needed, the widget template must be dragged and dropped in the page and published from page builder.

CORE ALGORITHM FOR SCRIPT

  • Get the placements using source widget template id and the source template file.
  • In this, we will get the widget configuration configured for the widget template file in that specific template.
  • Get the placements using destination widget template id and the destination template file.
  • In this get the destination widget id.
  • Update the source widget configuration in destination widget.

Open for any suggestions for upgradation or any ideas. Thanks.
Happy Hacking :)

Top comments (0)