Skip to main content

Example: Displaying content to visitors changing the shopping cart contents

Triggers allow you to show content based directly on a visitor's action on the page or site without creating a segment related to the action. You can use triggers to detect events immediately when they happen, whereas segmentation is only implemented at each new page load.

In this example, when a visitor changes the contents of their shopping cart (adding or removing items), a trigger is fired to change the content displayed on the page. You can use this solution to, for example, upsell products or declare that a campaign is ending soon.

To implement the example:

  1. Create a trigger for detecting when the contents of a visitor's shopping cart changes.

  2. Create a placement for the modification.

  3. Use the trigger to display the modification.

Creating the trigger​

To create the trigger:

  1. In the Frosmo Control Panel, in the sidebar, select More > Triggers.

  2. Click Create trigger.

  3. Define the following settings:

    • Name: Enter "Shopping cart content changed".

    • Evaluation point: Select Core event.

    • Event type: Select Other predefined event.

    • Event name: Enter "TRIGGER_CART_LINK_DESKTOP". This means that you can fire the trigger by making the function call frosmo.easy.events.trigger('TRIGGER_CART_LINK_DESKTOP').

    Defining the trigger settings

  4. Click Save.

Creating the placement​

To create the placement:

  1. In the Control Panel, in the sidebar, select Modifications.

  2. Select the Placements tab.

  3. Select Create placement.

  4. Define the following settings:

    • Name: Enter "Shopping cart - After product list".

    • Page type: Select Cart.

    • Target element: Select CSS selector, and enter ".site-cart-product-list" (or whatever is appropriate on your site) as the selector name.

    • Display method: Select After element. This means that the modification content is displayed below the original content of the target element.

    • Trigger: Click Select trigger, select the Shopping cart content changed trigger you created above, and click Confirm.

    Defining the placement settings

  5. Click Save.

Using the trigger in a modification​

To use the trigger in a modification:

  1. In the Control Panel, on the Modifications page, select the Overview tab.

  2. In the modifications list, find the modification to which you want to attach the trigger, and click the modification name.

  3. In the Basic settings view, click Select placement.

  4. Select the placement you created, and click Save.

The modification is now only displayed to visitors who change the contents of their shopping cart.

You're done with this example!