Documentation
Return to merchant console

Activating Variations: BigCommerce

Suggest Edits

Purpose of this document

Thes document provides implementation instructions for the custom JavaScript (custom JS) and published variable approaches to activate Buy with Prime variations for ecommerce sites provided by BigCommerce. Note: The custom JavaScript (JS) approach supports quantity, whereas the published variable approach doesn't support quantity.

Pre-requisites

To support variations and quantity, the Buy with Prime button code must already be added to the merchant ecommerce site.
Important: Currently, you can't import more than 100 variants for a product from Seller Central to the merchant console.
If you need guidance to generate and install the Buy with Prime button code go to set up Buy with Prime.

Custom JS approach

Overview

A custom JS approach is available to add the Buy with Prime button for products with variations. In addition to variations this approach also supports quantity. This approach can be implemented through this function:
window.bwp.updateWidget(selectedSku, selectedQuantity, variantSkus);
The function should be called by the product detail page when the shopper changes the selected product variation on the page or the product quantity.

For example, if there are separate selectors for size and color, the function should be called when either is changed, to refresh the Buy with Prime button. No additional change is required for the Buy with Prime button to load on the product detail page. One of the options is to use Stencil theme objects to retrieve the variation value.

The approach requires technical expertise to implement and maintain the solution. This solution requires coding capabilities to develop, test and deploy the custom JS changes to the ecommerce site. As with the Buy with Prime button, if the theme is updated, verify that the custom JS code isn't overwritten.

Sample code is provided to show how the custom JS approach works to get the necessary input parameters and to call the custom JS function. To track the variation and quantity change on the product detail page the function uses the following:
• Theme objects
• Custom JS

The new values are passed to the Buy with Prime button within the native event handler function provided by the ecommerce service provider:
window.bwp.updateWidget(selectedSku, selectedQuantity, variantSkus);

This document includes sample code, which might require modification for your site. Developers need to define the optimal configuration for these three elements:
• Applicable event listeners
• Pull updated variations information
• Call the function window.bwp.updateWidget JS

Custom JavaScript approach

Interface

window.bwp.updateWidget:  
Input:  
  selectedSku String - SKU that's selected and must be reflected in the Buy with Prime button.  
  selectedQuantity Integer - Quantity selected by Shopper to be passed to checkout and other flows.  
  variantSkus List<String> - List of variation SKUs that are shown on the product detail page.  
Output:  
  Void

Steps for installing the function

Note: It's recommended to use Script Manager to avoid heavy development work.

Note: Delete the following line from the button code, if present:

<script defer src="https://code.buywithprime.amazon.com/default.variant.selector.bigcommerce.js"></script>

Step 1- Go to Store Front, and then choose Themes.

Step 2- On the current Theme, choose Advanced. Make a Copy of the theme. Name the copy, and then choose Save. A new Theme is added to the list of themes.

Step 3- Click on the three dots next to the theme copy you created. Then, choose Edit Theme Files.

Step 4- Open the file: /templates/components/products/product-view.html

Step 5- Find the class “productView-details” or the outermost element that contains all the product information. If data-product-sku is present in the file, then no action is required. Your code might look as follows:

<dd class="productView-info-value" data-product-sku{{#if schema}} itemprop="sku"{{/if}}>{{product.sku}}</dd>
  
If data-product-sku isn't present in the file, then add it to the element that contains “productView-details” after the class as in the example below:
<dd class="productView-info-value" data-product-sku>{{product.sku}}</dd>

Step 6- Open file: /templates/components/products/add-to-cart.html

Step 7- Find class “form-increment” or the parent element of the quantity input field.
To get the quantity value add this code: data-product-quant

Step 8- Choose Save All Files.

Step 9- Choose Apply to apply the modified theme.

Step 10- Return to Home → Store Front → Script Manager.

Step 11- Click Create Script. Choose the following parameters.
• Location on Page: Footer
• Select Store pages
• Category: Essential
• Script type: Script
Add the following code and Save. Note: The script is immediately added to the page on (re)load.

<script>
    const getQuantity = () => {
    return document.querySelector("[data-product-quant] input");
    };
    const getQuantityValue = () => {
        return Number(getQuantity().value);
    }
    const getSku = () => {
        return document.querySelector('[data-product-sku]');
    }  
    const fireUpdate = () => {
                let quantity = getQuantityValue();
                let curSku = getSku().textContent;
                let variantSkus = [];
                window.bwp.updateWidget(curSku, quantity, variantSkus);
    }
let formIncrementButtons = document.querySelectorAll('[data-product-quant] button');
formIncrementButtons.forEach(formIncrementButton => {
    formIncrementButton.addEventListener('click', () => {
        setTimeout(() => {
            fireUpdate();
        }, 100);
    });    
});

let observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === 'childList') {
            setTimeout(() => {
                fireUpdate();
            }, 100);
        }
      });
});
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

let skuElem = getSku()
if (skuElem) {
    observer.observe(skuElem, config);
}

</script>

Step 12- Proceed to the last section of this document to perform Function validation steps.

Published variable approach

Overview

A published variable approach is available to add the Buy with Prime button for products with variations. However, this approach doesn't support quantity. It uses event hooks to update the Buy with Prime button when shoppers switch between product variations. When the shopper switches between variations on a product detail page, the Buy with Prime button is refreshed.
If the ecommerce site supports published variable approach, an additional line of code needs to be added to the Buy with Prime button code to implement it. If the theme is updated, the merchant needs to ensure that the Buy with Prime button code persists.

Instructions for implementing published variable approach

Update Buy with Prime button code.

These instructions explain how to add the Buy with Prime button for products with variations on ecommerce sites provided by BigCommerce. For BigCommerce, insert the following line of code into the second line of the Buy with Prime button code from the console:

First 2 lines of the current Buy with Prime button code:

<!-- Beginning of Buy With Prime Widget -->

<script defer src="https://code.buywithprime.amazon.com/bwp.js"></script>

<div
...
...

First 3 lines of the Buy with Prime button code after inserting published variable line: 

<!-- Beginning of Buy With Prime Widget -->

<script defer src="https://code.buywithprime.amazon.com/bwp.js"></script>

<script defer
src="https://code.buywithprime.amazon.com/default.variant.selector.bigcommerce.js"></script>

<div
...
...

Activate SKUs for the product detail pages on your website

You must activate the SKU setting on your BigCommerce website administrator console:

  1. Go to Settings, choose Display, and then navigate to Product Settings.
  2. For Show Product’s SKU?, select Yes, show the product’s SKU in my store.

Note: When you activate the SKU setting, the SKU can appear on product detail pages.

Additional steps for activating Buy with Prime variations

Verify that the following actions have been taken.
• The Offer Prime toggle is turned on for the product or its variations in the merchant console.
• The product SKU or its variations SKU in the merchant console corresponds to the SKU on the merchant's catalog.
• The product SKU or its variations SKU has inventory in Amazon's fulfillment network.
• The Buy with Prime button code was generated based on the correct domain for the merchant ecommerce site.

Function validation steps

After the function is installed, check the following on the merchant ecommerce site:
• The Buy with Prime button is correctly displayed when switching between variations.
• The correct variation SKU is passed to the checkout when the Buy with Prime button is clicked.
• If Buy with Prime quantity support has been implemented (requiring the custom JS approach), the quantity value is passed to the checkout when the Buy with Prime button is clicked.
• If Buy with Prime button is not working, rollback the variations implementation:

  1. Turn off Offer Prime toggle for product variations in the merchant console.
  2. Rollback Buy with Prime variation changes.

Updated about 2 months ago