Shoppable Products

This functionality allows you to add one or more items to a shopping list or basket. Unlike shoppable recipes, where the content is taken from the recipe page automatically by our scrapers, shoppable products allow you to specify the content manually.

image alt text

Note: Shoppable products can only be created using your own buttons (there are no pre-built widgets to use).

Add products to the shopping list

• Firstly, we need to create an HTML button on your page. You can set up any type of HTML element to be a button, the most important thing is to give the element a unique ID. This ID is used in step 3. This should be added to your page exactly where you want the button to appear. You can contact us to discuss full-service creation of buttons.

  Add products to shopping list

• Add the SDK script to your page ideally in the . This script contains the core functionality of the SDK. Note: this should only be added to your page once.

var whisk = whisk || {};
whisk.queue = whisk.queue || [];

• Lastly, we will make the button perform an action on click. Using the same ID as in step 1, we create a clickListener so Whisk knows what action to perform when the button is clicked. To add products straight to a shopping list, we use the method addProductsToList. You can pass one or more products.

whisk.queue.push(function() {
    whisk.listeners.addClickListener(
        'whisk-add-products',
        'shoppingList.addProductsToList', {
            products: ['Coffee', 'Ice Cream', 'Lemon']
        }
    );
});

This code should be added after the button code from step 1.

Add products to the basket

It’s possible to bypass the shopping list and allow users to add products straight to the basket.

Important: When you add items to baskets, Whisk’s matching algorithm considers various factors (including available store items, quantity, brand, attributes, and price) to find appropriate products at all retailers. In some cases, matching to very specific store items (brands) will not happen out of the box. Please contact us to discuss your specific needs.

• Firstly, we need to create an HTML button on your page. You can set up any type of HTML element to be a button, the most important thing is to give the element a unique ID. This ID is used in step 3. This should be added to your page exactly where you want the button to appear.

  Add products to basket

• Add the SDK script to your page, ideally in the . This script contains the core functionality of the SDK. Note: this should only be added to your page once.

var whisk = whisk || {};
whisk.queue = whisk.queue || [];

• Lastly, we will make the button perform an action on click. Using the same ID as in step 1, we create a click eventListener so Whisk knows what action to perform when the button is clicked. This time we’re using another method – addProductsToBasket.

This code should be added after the button code from step 1.

whisk.queue.push(function() {
    whisk.listeners.addClickListener(
        'whisk-shop-products',
        'shoppingList.addProductsToBasket', {
            products: ['Coffee', 'Ice Cream', 'Lemon']
        }
    );
});

Multiple product buttons on one page

You can have multiple product buttons on one page. First, you’ll need to add the Whisk SDK script to the of your page (as above when adding one button). Next, create the HTML buttons and add click listeners, it’s important that each button has a unique ID like this:

whisk.queue.push(function() {
    whisk.listeners.addClickListener(
        "whisk-buy-product-A",
        "shoppingList.addProductsToBasket", {
            products: ["Chocolate"]
        });
    whisk.listeners.addClickListener(
        "whisk-buy-product-B",
        "shoppingList.addProductsToBasket", {
            products: ["Banana"]
        });
    whisk.listeners.addClickListener(
        "whisk-buy-product-C",
        "shoppingList.addProductsToBasket", {
            products: ["Tea"]
        });
});

Buy Product A Buy Product B Buy Product C

Note: If you're planning to use our analytics on a page with multiple click listeners, please refer to the option trackView on the click listeners page.

Analytics and event tracking

The Whisk shopping list SDK tracks many events and data points. These analytics can help you measure performance, analyze traffic and learn more about how your customers are interacting with the shopping tools.

Most of the analytics are only available to paid customers, although the SDK does have a Subscription service that allows you to tie in your own analytics for some basic events.

In all cases for analytics, you’ll need a trackingID so we can link all data to your account. Please contact us for more information.

Full dashboard

Whisk offers a full, interactive analytics dashboard showing site-wide performance of Whisk on your website. This contains all information about how users are interacting with the shopping tools, you can sort by date range or devices and even export data.

image alt text

Subscriptions

Subscriptions allow you to call any function you want in response to an SDK event. This will allow you to send events to your own analytics package.

For example, you can send an event to Google Analytics every time the Whisk button was viewed:

whisk.events.subscribe('whisk-shop-products', 'view', function() {
    // your custom code, for example:
    ga('send', {
        hitType: 'event',
        eventCategory: 'Whisk widget',
        eventAction: 'view',
        eventLabel: 'Fall Campaign'
    });
});

The exact list of events is defined by integration type. See events available for click listeners and widgets.

Read the Subscriptions API for more information.

More configuration options

There are many available parameters of the click handler functionality that let you customize various parts of the experience, from the default language to which retailers a user sees.

View the SDK Reference to see all parameters, their definitions, and possible values.