Purpose of this document

This document provides implementation instructions for the custom JavaScript (custom JS) approach to activate Buy with Prime variations. These instructions support ecommerce sites provided by WooCommerce.

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.

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 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.

Installation instructions for custom JS 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 given product detail page.  
Output:  
Void

Steps for installing the function on WooCommerce

Step 1 - Create child themes.
To avoid losing theme customization, don't update the parent theme. Create a Child theme to make customizations. Read more about using child themes here: https://www.wpbeginner.com/beginners-guide/wordpress-child-theme-pros-cons

Step 2 - Locate page elements.
In this sample store, using the Storefront theme, the quantity input element has attribute name=‘quantity’ and is placed inside a

tag of class “quantity”. A selector string for finding that element on the page can be written as: document.querySelector("div.quantity input[name='quantity']");

The SKU is present and visible on the webpage wrapped by tag of class “sku”. Use the document.querySelector() function to create a reference to that element of the page.

Step 3 - Insert code in file functions.php
Using the information from previous steps, create a custom JS function that references the two elements on the page for SKU and quantity.

Once the references are created, the script does the following:
• addEventListener on the Quantity input for “change” events.
• Create a MutationObserver object and set it to observe for when the SKU is updated on the page.

Sample code:

/_ Inline script printed out in the footer _/  
add_action('wp_footer', 'add_script_wp_footer');  
function add_script_wp_footer() {  
    ?>  
        <script id="custom_js_solution">  
            const getQuantity = () => {  
                return document.querySelector("div.quantity input[name='quantity']");  
            };  
            const getQuantityValue = () => {  
                return Number(getQuantity().value);  
            }  
            const getSku = () => {  
                return document.querySelector('span.sku');  
            }  
            const fireUpdate = () => {  
                let quantity = getQuantityValue();  
                let curSku = getSku().textContent;  
                let variantSkus = [];  
                window.bwp.updateWidget(curSku, quantity, variantSkus);  
            }

        let inputQuantity = getQuantity();
        if (inputQuantity) {
            inputQuantity.addEventListener('change', (e) => {  
                fireUpdate();  
            });
        }
        
        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>
<?php

}

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

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, 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:

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