Whisk Docs
Whisk HomeHelp CenterDeveloper Tools
v1.0.0
v1.0.0
  • Overview
  • Guides
    • Creating An Account
    • Getting Started
    • Whisk Sandbox
  • API
    • Authentication
      • Server Token
      • Client Token
      • User Access Token
      • Anonymous Access
    • Recipes
      • Get Recipe
      • Get Recipe Categories
      • Recipe Objects
    • Recipe Discovery
      • Recipe Feed
      • Recipe Search
      • Get Similar Recipes
    • Shopping Lists
      • Get Shopping Lists
      • Create A Shopping List
      • Add Items To A Shopping List
      • List Analysis
    • Meal Plans
      • Meal Plan Management
      • Delete Meals
      • Auto-Generator
      • Error Handling
    • Retailers
      • Get Available Stores
      • Retailers Checkout Flow
      • Retailer Aliases
      • OAuth Retailer Flow
      • Retailer User Info
      • Search Store Items
    • Carts
      • Create a Cart
      • Update Cart Item
      • Splitting Combined Items
      • Add Items To Cart
      • Add Recipes To Cart
      • Get Cart Item Options
      • Swap Cart Item Product
      • Delete A Cart Or A Cart Item
      • Checkout
    • Users
      • Get A User
      • Update A User
    • User Recipes & Collections
      • Add User Recipe
      • Create A Recipe
      • Update External Recipe
      • Get All User Recipes
      • Update User Recipe
      • Remove Recipe from Favorites
      • Create Collection
      • Get All User Collections
      • Get Collection
      • Get Recipes from a Collection
      • Remove Collection
    • Tools
      • Autocomplete
  • Shopping List SDK
    • Overview
    • Examples
      • Shoppable Recipes
      • Shoppable Products
      • Shoppable Media
    • Basic Setup
      • Basic Setup
      • Methods
      • Event Listeners
      • Widget
      • Subscriptions
      • Global Configuration
      • UTM Parameters
      • Using With SPA
  • Shopping List Mobile API
    • Overview
    • Examples
    • Reference
  • Tips and Tricks
    • Object IDs
    • URL Lookup
    • Searching
    • Multiple IDs request
  • Resources
    • Nutrients
    • Recipe Labels
    • Health Score, Glycemic Index, Glycemic Load
    • Whisk User Data
    • Supported Retailers
    • Optimizing Image Load
Powered by GitBook
On this page
  • Click Listeners
  • Subscriptions
  • Page Load Listener

Was this helpful?

  1. Shopping List SDK
  2. Basic Setup

Event Listeners

PreviousMethodsNextWidget

Last updated 5 years ago

Was this helpful?

Event listeners allow you to automatically call any Whisk SDK in response to user actions.

Click Listeners

Click listeners allow you to call any Whisk SDK in response to user click on predefined DOM element. In order to create a click listener call

whisk.listeners.addClickListener(element_id, method_name, method_parameters)

function, which will add an event listener to DOM element with element_id id attribute. This listener will call the method name method with method_parameters.

method_parameters supports the same parameters as a method_name does, plus one extra non-required parameter:

ATTRIBUTE

TYPE

DESCRIPTION

trackView

boolean

If you're planning to use multiple buttons with a click listener on a single page, you might consider passing false to all buttons except one to eliminate duplicate view events (impressions) sent to Whisk analytics. Note: This field won't affect subscription events. Default value: true

Here is a simple example of usage:

whisk.queue.push(function() {
    whisk.listeners.addClickListener('button1', 'shoppingList.addRecipeToList', {
    recipeUrl: 'https://whisk.com/demo/calzone-roasted-peppers',
    });
});

Add recipe to shopping list

Note: recipeUrl is optional and can be excluded. If it is not included, the URL of your page (which this code is used on) will be taken as the recipe URL.

In order to remove click listener call

whisk.listeners.removeClickListener(element_id) with the same element_id you used in whisk.listeners.addClickListener.

If you need to update parameters for existing click listener, you can simply call whisk.listeners.addClickListener on the same element_id with new values.

Subscriptions

  • view - the element to which click listener is attached appeared in the viewport. Triggered once. No custom data for this event type.

  • click - the element to which click listener is attached has been clicked. No custom data for this event type.

Page Load Listener

whisk.listeners.addShowListener(method_name, method_parameters)

function. This listener will call method_namemethod with method_parameters. Here is simple example of usage:

whisk.queue.push(function() {
     whisk.listeners.addShowListener('shoppingList.addRecipeToList', {
     recipeUrl: 'https://whisk.com/demo/calzone-roasted-peppers',
    });
 });

Read general information about subscriptions . Click listeners support following event types:

Page load listeners allow you to call any Whisk SDK in response to page load whenwhisk-show=1 parameter is in the page URL. In order to create a page listener call

here
basic method
basic method
basic method
Click Listeners
Page Load Listener