Pages

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Published by Scroll Versions from this space and version 13.0

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. 18:00 to midnight). This is useful when you want to target audiences that typically make their purchasing decisions after office hours.

...

  1. In the Frosmo Control Panel, select Triggers.
  2. Enter the trigger name as "Evening 6pm-Click Create trigger.
  3. Define the following settings:

    • Name: Enter "Evening 18:00 to midnight".
    In 
    • Evaluation point
    , select 
    • : Select DOM ready. This means that the trigger is evaluated once all HTML elements have been loaded on the page.
    Click 
    • Rules: Click Add new rule, select JavaScript code, and set the

    trigger
    • following rule:

      Divbox
      classfrosmo-rule-container

      The value of the

      Code Block
      languagejs
      themeRDark
      (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 the triggerImage Removed

    When you're done, click 

    Defining the trigger settingsImage Added

  4. Click Save.

Creating the placement

To create the placement:

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

    • Name: Enter a descriptive name, such as "Front "Home page - banner Banner - eveningEvening".
    • Target element: Select CSS selector, and enter the value "#banner-top" (or whatever is the selector for the target element appropriate on your site) as the selector name.
    • 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 rule as Page path is exactly /?product_cat=frosmo-pets  (or whatever page you want to display the modificationis appropriate on your site).

    Creating the placementImage Removed

    Click 
    • Trigger: Click Select trigger
    .Selecting the trigger for the placementImage RemovedIn the triggers list
    • , select the Evening 18:00 to midnight trigger you created
    earlier ("Evening 6pm-midnight")
    • above, and
    click 
    • click Select.

    Selecting the trigger for the placementImage Removed

    When you're done, click 

    Defining the placement settingsImage Added

  4. Click Save.

Using the trigger in a modification

To use the trigger in a modification:

  1. In the Frosmo Control Panel, select select Modifications > Overview.
  2. Find the modification to which you want to attach the trigger, and click its the modification 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 The modification is now only displayed to visitors during the evening hours (6 p.m. 18:00 to midnight).

You're done with this example!