JavaScript code for Cart Rules

Please note that if you have a Shoprenter, Shopify, WordPress, WooCommerce or Magento site, OptiMonk can automatically detect the content of the visitor’s cart and use this information for the display rules of the messages once the OptiMonk application is installed. If you are using one of the above services, you do not need to use any additional JavaScript code; all you need to do is just install the OptiMonk application, and you are ready to sue our Cart rules! In this case, please check the following article on how to use the Cart Rules: Who to show - Cart rules  

If you have a different website than the above, you will need to add code that is detailed in this article below to use cart rules.

1. When should I use eCommerce cart segmentation?

When you want to display your message based on the contents of the cart. For instance, when you want to provide a special offer to visitors who have added some products to their cart and a different message to visitors who haven’t put anything into their cart yet.

2. Why should I use eCommerce cart segmentation?

Cart abandonment is one of the main challenges for eCommerce sites. Using eCommerce cart segmentation with OptiMonk helps you keep your visitors moving towards checkout and encourages visitors to add items to their cart by displaying specific messages to each group of visitors.

3. How do I set up my site for OptiMonk to retrieve the contents of a visitor’s cart?

OptiMonk retrieves information on cart contents using JavaScript code. You customize the code based on cart contents, or specific items, then place that code on your site.

4. What code do I need for OptiMonk to retrieve information on cart contents?

When someone adds a product to their cart on your site, a code such as the one below should be executed:

<script type="text/javascript">
   if (window.OptiMonk || window.OptiMonkEmbedded ) {
      var OM = window.OptiMonk || window.OptiMonkEmbedded;
      var adapter = OM.Visitor.createAdapter();
      adapter.Cart.add('{{ cartProductID }}', {quantity:{{ cartProductQty }}, price:{{ cartProductPrice }}});
   }
</script>

Important: OptiMonk.Visitor exists only if there is at least one active campaign on the domain.

In the above example, OptiMonk only retrieves some very basic data about cart contents.

OptiMonk can also retrieve more detailed information about particular products in a visitor’s cart. For more detailed information, a code such as this should be executed:

<script type="text/javascript">
   if (window.OptiMonk || window.OptiMonkEmbedded ) {
      var OM = window.OptiMonk || window.OptiMonkEmbedded;
      var adapter = OM.Visitor.createAdapter();
      adapter.Cart.add('{{ 'product1' }}', {quantity:{{ 3 }}, price:{{ 1000 }}, color:{{ red }}});
      adapter.Cart.add('{{ 'product1' }}', {quantity:{{ 3 }}, price:{{ 1000 }}, color:{{ blue }}});
   }
</script>

In the above example two products added to the cart are defined, their IDs are:

• "product1" and "product2"

and, there are 3 unique variables passed for both products

• quantity, i.e. – "3"
• price, i.e. – "1000"
• color, i.e. – "blue"

Important: The quantity and price of the product are required data, so they should always be set up.

5. What happens when a visitor removes an item from their cart?

You can also add code to your site so OptiMonk knows when a visitor removes an item from their cart. To retrieve information when someone removes an item from their cart, use code such as this:

<script type="text/javascript">
   if (window.OptiMonk || window.OptiMonkEmbedded ) {
      var OM = window.OptiMonk || window.OptiMonkEmbedded;
      var adapter = OM.Visitor.createAdapter();
      adapter.Cart.remove('{{ cartProductID }}');
   }
</script>

Or you can empty the cart with a single call:

<script type="text/javascript">
   if (window.OptiMonk || window.OptiMonkEmbedded ) {
      var OM = window.OptiMonk || window.OptiMonkEmbedded;
      var adapter = OM.Visitor.createAdapter();
      adapter.Cart.clear();
   }
</script>

6. Details to pay attention to when you insert the code

• The name of your custom attributes or products cannot include special characters
• Products and variables are case-sensitive
• The OptiMonkOnReady function should be defined only once, i.e. - only one time per page.

7. How do I set up my OptiMonk campaigns to use the cart contents?

1. Login to your Optimonk account at https://app.optimonk.com/login/en
2. Go to “Campaigns” on the left menu
3. Select the campaign you want to use your customer variables
4. On “Settings summary” click on “Edit settings” on the right
5. Go to the “Select who should see the popup” page
6. Click on “Add new condition”
7. Scroll down to “Cart rules” and click on the plus sign

For more information on how to set up and how to use the cart rules, please check our article: Who to show - Cart rules

That's it! :) If you have any further questions or need any help, please contact us at support@optimonk.com, we would be happy to assist you :)