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 allows you to specify the content manually.

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

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

<button id="whisk-add-products">Add products to shopping list</button>

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

<script async="true" src="https://cdn.whisk.com/sdk/shopping-list.js" type="text/javascript" > </script> <script> var whisk = whisk || {}; whisk.queue = whisk.queue || []; </script>

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

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

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

Here is what the code above produces:

Add products to 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.

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

<button id="whisk-shop-products">Add products to basket</button>

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

<script async="true" src="https://cdn.whisk.com/sdk/shopping-list.js" type="text/javascript" > </script> <script> var whisk = whisk || {}; whisk.queue = whisk.queue || []; </script>

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

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

Here is what the code above produces:

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

<button id="whisk-buy-product-A"> Buy Product A </button> <button id="whisk-buy-product-B"> Buy Product B </button> <button id="whisk-buy-product-C"> Buy Product C </button> <script> 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"] }); }); </script>
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, analyse 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 an 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.

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:

<script> 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' }); }); </script>

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

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