Shopping Cart

Clerk uses Shopping Cart tracking for two purposes:

Adding products to the cart through Clerk elements.
Tracking the content of the cart for use in Abandon Cart emails.

Tracking cart changes

Clerk.js enables you to easily track shopping cart changes through a JavaScript interface.

Method	Action
`Clerk('cart', 'add', 1234);`	Tells Clerk.io that product with id `1234` has been added to the shopping cart.
`Clerk('cart', 'remove', 1234);`	Tells Clerk.io that product with id `1234` has been removed to the shopping cart.
`Clerk('cart', 'set', [1234, 5678, 42]);`	Tells Clerk.io that the shopping cart now contains 3 products with the ids `1234`, `5678` and `42`.

Customising Add-To-Cart functionality

If your Clerk elements should allow adding products directly to the cart, the above functionality can be extended in the initial Clerk.js configuration. Any platform-specific Javascript can be added as callbacks to each of these functions, which can then be triggered in a Clerk design:

Clerk("config", {
  key: 'your-public-api-key',
  cart:{
    add: function(product_id, args){
      console.log('adding to cart!', product_id, args);
      // Your add-to-cart code here
    },
    remove: function(product_id, args){
      console.log('removing from cart!', product_id, args);
			// Your code for removing products here
    },
    set: function(list_of_product_ids, args){
      console.log('setting cart to:', list_of_product_ids);
      // Your code for setting the cart content here
    }
  }
})

The functions can also be defined in separate calls after initialising Clerk, if needed:

Clerk('config', 'cart.add', function(product_id, args) { 
  console.log('adding to cart!', product_id, args);
  // Your add-to-cart code here
})

Clerk('config', 'cart.remove', function(product_id, args) { 
  console.log('removing from cart!', product_id, args);
  // Your code for removing products here
})

Clerk('config', 'cart.set', function(list_of_product_ids, args) { 
  console.log('setting cart to:', list_of_product_ids);
  // Your code for setting the cart content here
})

Using in Designs

When you have defined functions for the methods you need, they can be invoked using the cartmethod:

Clerk('cart', action, product_id, {args}*)

{args}is an optional dictionary, that can contain any number of additional arguments you require for your add-to-cart function like quantity, variant IDs, SKUs etc.

In the below example, the product ID and a quantity of 1 is passed to the add method, using the defined function from Clerk.js:

<div class="product">
  <img class="product-image">{{ product.image }} />
  <div class="product-name">{{ product.name }}</div>
  <div class="product-price">{{ product.price }}</div>
  <button classs="product-atc" onclick="Clerk('cart', 'add', {{ product.id }}, {quantity: 1})">Add to cart</button>
</div>