# JavaScript code for Cart Rules Canonical URL: https://support.optimonk.com/en/articles/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 your campaigns once the OptiMonk code is installed. If you are using one of the above, **you do not need any additional JavaScript code** — install OptiMonk on your site and the **Cart rules** targeting rule is ready to use. Jump straight to [*Set up the campaign*](#set-up-the-campaign) below. If you run a different kind of site, add the code described in this article so OptiMonk knows what is in the cart. --- ## 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: ``` ``` **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: ``` ``` In the above example, two products added to the cart are defined, their IDs are: - `product1` and `product2` and there are 3 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: ``` ``` Or you can empty the cart with a single call: ``` ``` ## 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. --- ## Set up the campaign Once the cart data reaches OptiMonk — either automatically on a supported platform, or through the code above — you add a **Cart rules** targeting rule to the campaign. 1. Open **Campaigns** in the left menu and click the campaign you want to use cart data in. 2. Open the **Settings** tab. 3. In the **Who should see the popup** section, click **Add new rule**. 4. Pick **Cart rules** — *Cart value, item count, products (Shopify & co.)*. 5. Build your conditions. Each condition starts with what it looks at: | Condition | What it matches | Operators | | --- | --- | --- | | Cart value | The total value of the cart | equals, greater than, less than, at least, at most, between | | Number of products | How many items are in the cart | the same six | | Product in cart | A specific product — cart contains or cart does NOT contain | matched by product (picked from your catalog) or by name | 6. Click **Add condition** for a second, third… condition. They are AND-ed: *Cart conditions are AND-ed and evaluated live on the store (Shopify, ShopRenter, WooCommerce, …). On non-supported stores the rule never matches.* 7. Save the rule, then click **Save changes** at the bottom of the Settings tab. The rule card then reads, for example, *Cart rules · Cart value at least 100*, and the settings summary shows **Cart rules (1 conditions)**. ### Picking products from your catalog For **Product in cart**, OptiMonk can offer your actual product list: type into *Search products…* and pick from the results. This needs an active Shopify store connected to the account — otherwise the modal says *Product picking needs an active Shopify store — you can remove selected products, or match by name instead*, and you match **by name** (the product name as it appears in the cart) instead. ### Examples - **Abandoning a full cart: ***Cart value* — *at least* — `100`, combined with an exit-intent trigger. - **Encouraging the first item: ***Number of products* — *equals* — `0`. - **Category-specific offer: ***Product in cart* — *cart contains* — pick the products from the catalog. Tip: you can also ask the assistant on the right to set this up (for example: *"only show when the cart is over 100 euros"*). The rule cards update as it edits them.