Pages

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

When content preloading is enabled for a modification, flickering is decreased when displaying large content items, such as banners. However, content preloading has some limitations. For example, you can't define a modification to be displayed on specific hours of the day or specific days of the week. You can work around this limitation by binding a trigger to a placement that you then associate with a modification.

This example uses simple custom JavaScript for getting the time of the day as a rule for the trigger. The trigger is defined so that the modification is only displayed to visitors during the evening hours (6 p.m. to midnight). This is useful when you want to target audiences that typically make their purchasing decisions after office hours.

You must first create a trigger to detect the time of the day, and then create a placement for using the trigger to display the modification.

Creating the trigger

To create the trigger:

  1. In the Frosmo Control Panel, select Triggers.
  2. Enter the trigger name as "Evening 6pm-midnight".
  3. In Evaluation point, select DOM ready. This means that the trigger is evaluated once all HTML elements have been loaded on the page.
  4. Click Add new rule, click JavaScript code, and set the trigger rule:

    The value of the

    (function () {
     var hour = (new Date()).getHours();
     return hour > 18 && hour < 24;
    }());

    JavaScript function is exactly true.

    This means that when all HTML elements have been loaded on the page, the JavaScript functions checks whether the current time is between 18:00 and midnight. If so, the function returns "true", and the trigger is fired.

    Creating a trigger

  5. When you're done, click Save.

Creating the placement

To create the placement:

  1. In the Control Panel, select Modifications > Placements.
  2. Select Create placement.
  3. Define the following settings:

    • Name: Enter a descriptive name, such as "Front page - banner - evening".
    • Target element: Select CSS selector, and enter the value "#banner-top" (or whatever is the selector for the target element on your site).
    • Display method: Select Replace content. This means that the modification content replaces the original content of the target element.
    • URL matcher: Click Add new rule, and define the attribute as Page path is exactly /?product_cat=frosmo-pets (or whatever page you want to display the modification).

    Creating a placement

  4. Click Select trigger.

    Selecting a trigger for a placement
  5. In the triggers list, select the trigger you created earlier ("Evening 6pm-midnight"), and click Select.

    Selecting a trigger for a placement

  6. When you're done, click Save.

Using the trigger in a modification

To use the trigger a modification:

  1. In the Control Panel, select Modifications > Overview.
  2. Find the modification to which you want to attach the trigger, and click its name.
  3. In the Basic settings view, click Select placement.
  4. Select the placement you created and click Save.

You have now completed the example. The modification is displayed to visitors during the evening hours (6 p.m. to midnight).