Howto: Shopify – Zeitabhängige Header-Slideshow

Stell dir vor du kannst deinen Onlineshop je nach Tageszeit komplett anders aussehen lassen, dass würde dir eine Menge interessanter Möglichkeiten bieten - oder? Ganz so weit will ich es in diesem Artikel allerdings nicht treiben, aber vielleicht dient dies ja dem einen oder anderen auch als Anregung für weitere zeitbasierte Ideen, falls dem so ist würde ich mich freuen von dir und deiner Idee zu hören.

Erstellt in E-Commerce, Shopify, Webentwicklung am

Stell dir vor du kannst deinen Onlineshop je nach Tageszeit komplett anders aussehen lassen, dass würde dir eine Menge interessanter Möglichkeiten bieten - oder? Ganz so weit will ich es in diesem Artikel allerdings nicht treiben, aber vielleicht dient dies ja dem einen oder anderen auch als Anregung für weitere zeitbasierte Ideen, falls dem so ist würde ich mich freuen von dir und deiner Idee zu hören.

Shopify Theme Brooklyn

Als Basis wird das Shopify (Affiliate Link) Theme Brooklyn dienen. Brooklyn bietet von Haus eine Header-Slideshow auf der Startseite an. Wir werden diese so umbauen, dass der Header unterschiedliche Hintergrundbilder je nach Tageszeit anzeigt. So lässt sich z.B. ein Header einblenden welcher nur nachts zu sehen ist, ein anderer nur früh am morgen, zur Mittagszeit oder eben abends.

Das ist ein nettes Gimmick und lässt sich auch für besondere Aktionen einsetzen. Denkbar wäre z.B. eine Slide die auf eine versteckte Seite im Shop verlinkt und nur zu einer bestimmten Zeit zu sehen ist. So könnte man das Ganze auch so weit treiben, dass der Shopbesucher nachts einen ganz anderen Shop vorfindet als tagsüber.

Fangen wir mit dem Coden an, du darfst die Codeschnipsel dazu gerne in deinem Theme verwenden.

Zeitberechnung

Für die Zeitberechnung verwenden wir die Library Moment.js. Diese erleichtert uns die Handhabung mit Zeiten erheblich, lade dir die moment-with-locales.js herunter und speichere sie unter theme/assets/moment-with-locales.js ab. Anschließend bindest du diese Datei in deiner layout/theme.liquid ein:

{{ 'theme.js' | asset_url | script_tag }}
{{ 'moment-with-locales.js' | asset_url | script_tag }}

Anpassung der Slideshow

Die Header Slideshow vom Theme basiert auf slick.js und kann mit etwas Erfahrung relativ gut angepasst werden. Füge folgenden Quellcode in die theme/assets/theme.js.liquid ein:


 /**
  * Get current slide object of now
  *
  * @author jumplink.eu
  * @date 24.02.17
  */
var getSlideIndexOfNow = function (now, slides) {
    for (var i = 0; i < slides.length; i++) {
        if(slides[i].enabled) {
            var momentStart = slides[i].momentStart;
            var momentEnd = slides[i].momentEnd;
            if(now.isBetween(momentStart, momentEnd)) {
                return i;
            }
        }
    }
    return -1;
}

  init = function (options) {
    cacheObjects();

  /**
    * Set slides times
    *
    * @author jumplink.eu
    * @date 24.02.17
    */
    var heroHomeTime = {{ settings.hero_home_time }};
    if(heroHomeTime) {
      var simulateHour = {{ settings.hero_home_simulate_hour }};
      if(simulateHour < 0) {
        var now = moment(new Date()); // todays date
      } else {
        var now = moment().startOf('day').hour(simulateHour);
      }

      var debugFormat = 'D.M.Y k:mm'; // pritty date print for debuging
      var slides = [];
      var debugSlides = {{ settings.hero_home_debug }};
      if(debugSlides) console.log('now: ', now.format(debugFormat));

      var slickIndex = 0;

      {% for i in (1..6) %}
        {% capture slide %}hero_slide_{{ i }}_enable{% endcapture %}
        {% capture start %}hero_slide_{{ i }}_start_hour{% endcapture %}
        {% capture end %}hero_slide_{{ i }}_end_hour{% endcapture %}

        {% if settings[slide] %}
          var start = {{ settings[start] }};
          var end = {{ settings[end] }};

          if(start > end) {
            var momentStart = moment().startOf('day').hour(start); // slide starts today
            var momentEnd = moment().startOf('day').add(1, 'day').hour(end); // slide ends next day
          } else {
            var momentStart = moment().startOf('day').hour(start); // slide starts today 
            var momentEnd = moment().startOf('day').hour(end); // slide ends today
          }

          slides.push({
            start: start,
            end: end,
            momentStart: momentStart,
            momentEnd: momentEnd,
            liquidIndex: {{ i }},
            slickIndex: slickIndex++,
            enabled: true
          });

          if(debugSlides) console.log('slide {{ i }} starts from '+ momentStart.format(debugFormat) + ' to ' + momentEnd.format(debugFormat));
        {% else %}
          slides.push({
            liquidIndex: {{ i }},
            enabled: false
          });
        {% endif %}

      {% endfor %}

      if(debugSlides) console.log('slide times', slides);

      var currentSlideIndex = getSlideIndexOfNow(now, slides);
      var currentSlide = slides[currentSlideIndex];
      if(debugSlides) console.log('current slide of now is', currentSlide);

      // check each minute if current slide of now
      var timerID = setInterval(function() {
          currentSlideIndex = getSlideIndexOfNow(now, slides);
          currentSlide = slides[currentSlideIndex];
          settings.$element.slick('slickGoTo', currentSlide.slickIndex)
          if(debugSlides) console.log('current slide of now is', currentSlide);
      }, 60 * 1000);
    }

    if(currentSlide) {
      var initialSlide = currentSlide.slickIndex;
    }

    // Default settings
    settings = {
      // User options
      $element       : null,
      fullscreen     : false,
      parallax       : false,

      // Private settings
      isTouch        : Modernizr.touch ? true : false,

      /**
       * Slick options
       *
       * @changes Added option to disable dots in theme settings and initialSlide
       * @author jumplink.eu
       * @date 24.02.17
       */
      initialSlide   : initialSlide,
      arrows         : false,
      dots           : {{ settings.hero_home_dots }},
      adaptiveHeight : true
    };

    // Override defaults with arguments
    $.extend(settings, options);

    // Check if this hero is the first one on the home page
    settings.isFirstOnIndex = checkFirstOnIndex();

    // Absolutely position header over hero as soon as possible
    if (settings.isFirstOnIndex) {
      slickTheme.cache.$headerWrapper.addClass(slickTheme.vars.heroHeaderClass);
    }

    /*
     * Init slick slider
     *   - Add any additional option changes here
     *   - https://github.com/kenwheeler/slick/#options
     */
    settings.$element.slick({
      arrows         : settings.arrows,
      dots           : settings.dots,
      adaptiveHeight : settings.fullscreen ? false : settings.adaptiveHeight,
      initialSlide   : settings.initialSlide,
      draggable      : false,
      fade           : true,
      autoplay       : {{ settings.hero_home_auto }},
      autoplaySpeed  : {{ settings.home_hero_auto_speed }},
      onInit         : this.onInit,
      onBeforeChange : this.beforeChange,
      onAfterChange  : this.afterChange
    });
  };

Um dir das Einfügen zu erleichtern hier ein Screenshot mit Zeilenangaben:

Was macht der Code?

var simulateHour = {{ settings.hero_home_simulate_hour }};
if(simulateHour < 0) {
    var now = moment(new Date()); // todays date
} else {
    var now = moment().startOf('day').hour(simulateHour);
}

Ist die Zeitsimulation inaktiv wird die aktuelle Uhrzeit für den Vergleich herangezogen, andernfalls wird der aktuelle Tag mit der selbst-definierten Stunde verwendet.


var start = {{ settings[start] }};
var end = {{ settings[end] }};

if(start > end) {
    var momentStart = moment().startOf('day').hour(start); // slide starts today
    var momentEnd = moment().startOf('day').add(1, 'day').hour(end); // slide ends next day
} else {
    var momentStart = moment().startOf('day').hour(start); // slide starts today 
    var momentEnd = moment().startOf('day').hour(end); // slide ends today
}

Ist die Startzeit größer als die Endzeit endet die Anzeige der Slideshow am nächsten Tag (.add(1, 'day')), anderfalls noch am selben.


slides.push({
    start: start,
    end: end,
    momentStart: momentStart,
    momentEnd: momentEnd,
    liquidIndex: {{ i }},
    slickIndex: slickIndex++,
    enabled: true
});

Hier wird die Slide einem Array hinzugefügt, dieses benötigen wir später für die Auswertung.


var getSlideIndexOfNow = function (now, slides) {
    for (var i = 0; i < slides.length; i++) {
        if(slides[i].enabled) {
            var momentStart = slides[i].momentStart;
            var momentEnd = slides[i].momentEnd;
            if(now.isBetween(momentStart, momentEnd)) {
                return i;
            }
        }
    }
return -1;
}

Mit dieser Funktion wird die Auswertung vorgenommen. Wird eine Slide gefunden, deren Zeitraum zwischen der aktuellen oder simulierten Zeit liegt, dann wird der Index dieser Slide zurückgegeben.


var currentSlideIndex = getSlideIndexOfNow(now, slides);
var currentSlide = slides[currentSlideIndex];
if(debugSlides) console.log('current slide of now is', currentSlide);

// check each minute if current slide of now
var timerID = setInterval(function() {
    currentSlideIndex = getSlideIndexOfNow(now, slides);
    currentSlide = slides[currentSlideIndex];
    settings.$element.slick('slickGoTo', currentSlide.slickIndex)
    if(debugSlides) console.log('current slide of now is', currentSlide);
}, 60 * 1000);

if(currentSlide) {
    var initialSlide = currentSlide.slickIndex;
}

Hier wird die Slide mit dem ermittelten Index verwendet, um durch slickIndex bei der initialisierung von slick.js die anzuzeigende Slide festzulegen, also unsere vorher für aktuellen Zeitraum ermittelte Slideshow. Durch setInterval wird im Minutentakt überprüft, ob die Slide gewechselt werden muss, was dann durch settings.$element.slick('slickGoTo', currentSlide.slickIndex) auch ggf. gemacht wird.

Theme Settings

Damit die Zeiten direkt in den Theme Settings eingestellt werden können muss die theme/config/settings_schema.json angepasst werden. Ersetze den Bereich "Home page - hero slideshow" mit folgender Version:

  {
    "name": "Home page - hero slideshow",
    "settings": [
      {
        "type": "paragraph",
        "content": "Turn the hero slideshow on and off from the home page section."
      },
      {
        "type": "checkbox",
        "id": "hero_home_debug",
        "label": "Debugmode"
      },
      {
        "type": "select",
        "id": "hero_home_simulate_hour",
        "label": "Simulate current hour for tests",
        "options": [
         {
            "value": "-1",
            "label": "Off"
          },
          {
            "value": "0",
            "label": "0:00"
          },
          {
            "value": "1",
            "label": "1:00"
          },
          {
            "value": "2",
            "label": "2:00"
          },
          {
            "value": "3",
            "label": "3:00"
          },
          {
            "value": "4",
            "label": "4:00"
          },
          {
            "value": "5",
            "label": "5:00"
          },
          {
            "value": "6",
            "label": "6:00"
          },
          {
            "value": "7",
            "label": "7:00"
          },
          {
            "value": "8",
            "label": "8:00"
          },
          {
            "value": "9",
            "label": "9:00"
          },
          {
            "value": "10",
            "label": "10:00"
          },
          {
            "value": "11",
            "label": "11:00"
          },
          {
            "value": "12",
            "label": "12:00"
          },
          {
            "value": "13",
            "label": "13:00"
          },
          {
            "value": "14",
            "label": "14:00"
          },
          {
            "value": "15",
            "label": "15:00"
          },
          {
            "value": "16",
            "label": "16:00"
          },
          {
            "value": "17",
            "label": "17:00"
          },
          {
            "value": "18",
            "label": "18:00"
          },
          {
            "value": "19",
            "label": "19:00"
          },
          {
            "value": "20",
            "label": "20:00"
          },
          {
            "value": "21",
            "label": "21:00"
          },
          {
            "value": "22",
            "label": "22:00"
          },
          {
            "value": "23",
            "label": "23:00"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "hero_home_auto",
        "label": "Auto rotate between slides"
      },
      {
        "type": "checkbox",
        "id": "hero_home_time",
        "label": "Auto rotate on time range"
      },
      {
        "type": "checkbox",
        "id": "hero_home_dots",
        "label": "Show slide dots",
        "default": false
      },
      {
        "type": "select",
        "id": "home_hero_auto_speed",
        "label": "Rotation interval",
        "options": [
          {
            "value": "5000",
            "label": "5 seconds"
          },
          {
            "value": "7000",
            "label": "7 seconds"
          },
          {
            "value": "10000",
            "label": "10 seconds"
          }
        ]
      },
      {
        "type": "header",
        "content": "Slide 1"
      },
      {
        "type": "select",
        "id": "hero_slide_1_start_hour",
        "label": "Slide starts in hours",
        "options": [
          {
            "value": "0",
            "label": "0:00"
          },
          {
            "value": "1",
            "label": "1:00"
          },
          {
            "value": "2",
            "label": "2:00"
          },
          {
            "value": "3",
            "label": "3:00"
          },
          {
            "value": "4",
            "label": "4:00"
          },
          {
            "value": "5",
            "label": "5:00"
          },
          {
            "value": "6",
            "label": "6:00"
          },
          {
            "value": "7",
            "label": "7:00"
          },
          {
            "value": "8",
            "label": "8:00"
          },
          {
            "value": "9",
            "label": "9:00"
          },
          {
            "value": "10",
            "label": "10:00"
          },
          {
            "value": "11",
            "label": "11:00"
          },
          {
            "value": "12",
            "label": "12:00"
          },
          {
            "value": "13",
            "label": "13:00"
          },
          {
            "value": "14",
            "label": "14:00"
          },
          {
            "value": "15",
            "label": "15:00"
          },
          {
            "value": "16",
            "label": "16:00"
          },
          {
            "value": "17",
            "label": "17:00"
          },
          {
            "value": "18",
            "label": "18:00"
          },
          {
            "value": "19",
            "label": "19:00"
          },
          {
            "value": "20",
            "label": "20:00"
          },
          {
            "value": "21",
            "label": "21:00"
          },
          {
            "value": "22",
            "label": "22:00"
          },
          {
            "value": "23",
            "label": "23:00"
          }
        ]
      },
       {
        "type": "select",
        "id": "hero_slide_1_end_hour",
        "label": "Slide ends in hours",
        "options": [
          {
            "value": "0",
            "label": "0:00"
          },
          {
            "value": "1",
            "label": "1:00"
          },
          {
            "value": "2",
            "label": "2:00"
          },
          {
            "value": "3",
            "label": "3:00"
          },
          {
            "value": "4",
            "label": "4:00"
          },
          {
            "value": "5",
            "label": "5:00"
          },
          {
            "value": "6",
            "label": "6:00"
          },
          {
            "value": "7",
            "label": "7:00"
          },
          {
            "value": "8",
            "label": "8:00"
          },
          {
            "value": "9",
            "label": "9:00"
          },
          {
            "value": "10",
            "label": "10:00"
          },
          {
            "value": "11",
            "label": "11:00"
          },
          {
            "value": "12",
            "label": "12:00"
          },
          {
            "value": "13",
            "label": "13:00"
          },
          {
            "value": "14",
            "label": "14:00"
          },
          {
            "value": "15",
            "label": "15:00"
          },
          {
            "value": "16",
            "label": "16:00"
          },
          {
            "value": "17",
            "label": "17:00"
          },
          {
            "value": "18",
            "label": "18:00"
          },
          {
            "value": "19",
            "label": "19:00"
          },
          {
            "value": "20",
            "label": "20:00"
          },
          {
            "value": "21",
            "label": "21:00"
          },
          {
            "value": "22",
            "label": "22:00"
          },
          {
            "value": "23",
            "label": "23:00"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "hero_slide_1_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_1.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "select",
        "id": "hero_slide_1_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_1_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_1_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_1_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_1_link",
        "label": "Link URL"
      },
      {
        "type": "header",
        "content": "Slide 2"
      },
      {
        "type": "select",
        "id": "hero_slide_2_start_hour",
        "label": "Slide starts in hours",
        "options": [
          {
            "value": "0",
            "label": "0:00"
          },
          {
            "value": "1",
            "label": "1:00"
          },
          {
            "value": "2",
            "label": "2:00"
          },
          {
            "value": "3",
            "label": "3:00"
          },
          {
            "value": "4",
            "label": "4:00"
          },
          {
            "value": "5",
            "label": "5:00"
          },
          {
            "value": "6",
            "label": "6:00"
          },
          {
            "value": "7",
            "label": "7:00"
          },
          {
            "value": "8",
            "label": "8:00"
          },
          {
            "value": "9",
            "label": "9:00"
          },
          {
            "value": "10",
            "label": "10:00"
          },
          {
            "value": "11",
            "label": "11:00"
          },
          {
            "value": "12",
            "label": "12:00"
          },
          {
            "value": "13",
            "label": "13:00"
          },
          {
            "value": "14",
            "label": "14:00"
          },
          {
            "value": "15",
            "label": "15:00"
          },
          {
            "value": "16",
            "label": "16:00"
          },
          {
            "value": "17",
            "label": "17:00"
          },
          {
            "value": "18",
            "label": "18:00"
          },
          {
            "value": "19",
            "label": "19:00"
          },
          {
            "value": "20",
            "label": "20:00"
          },
          {
            "value": "21",
            "label": "21:00"
          },
          {
            "value": "22",
            "label": "22:00"
          },
          {
            "value": "23",
            "label": "23:00"
          }
        ]
      },
       {
        "type": "select",
        "id": "hero_slide_2_end_hour",
        "label": "Slide ends in hours",
        "options": [
          {
            "value": "0",
            "label": "0:00"
          },
          {
            "value": "1",
            "label": "1:00"
          },
          {
            "value": "2",
            "label": "2:00"
          },
          {
            "value": "3",
            "label": "3:00"
          },
          {
            "value": "4",
            "label": "4:00"
          },
          {
            "value": "5",
            "label": "5:00"
          },
          {
            "value": "6",
            "label": "6:00"
          },
          {
            "value": "7",
            "label": "7:00"
          },
          {
            "value": "8",
            "label": "8:00"
          },
          {
            "value": "9",
            "label": "9:00"
          },
          {
            "value": "10",
            "label": "10:00"
          },
          {
            "value": "11",
            "label": "11:00"
          },
          {
            "value": "12",
            "label": "12:00"
          },
          {
            "value": "13",
            "label": "13:00"
          },
          {
            "value": "14",
            "label": "14:00"
          },
          {
            "value": "15",
            "label": "15:00"
          },
          {
            "value": "16",
            "label": "16:00"
          },
          {
            "value": "17",
            "label": "17:00"
          },
          {
            "value": "18",
            "label": "18:00"
          },
          {
            "value": "19",
            "label": "19:00"
          },
          {
            "value": "20",
            "label": "20:00"
          },
          {
            "value": "21",
            "label": "21:00"
          },
          {
            "value": "22",
            "label": "22:00"
          },
          {
            "value": "23",
            "label": "23:00"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "hero_slide_2_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_2.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "select",
        "id": "hero_slide_2_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_2_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_2_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_2_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_2_link",
        "label": "Link URL"
      },
      {
        "type": "header",
        "content": "Slide 3"
      },
      {
        "type": "select",
        "id": "hero_slide_3_start_hour",
        "label": "Slide starts in hours",
        "options": [
          {
            "value": "0",
            "label": "0:00"
          },
          {
            "value": "1",
            "label": "1:00"
          },
          {
            "value": "2",
            "label": "2:00"
          },
          {
            "value": "3",
            "label": "3:00"
          },
          {
            "value": "4",
            "label": "4:00"
          },
          {
            "value": "5",
            "label": "5:00"
          },
          {
            "value": "6",
            "label": "6:00"
          },
          {
            "value": "7",
            "label": "7:00"
          },
          {
            "value": "8",
            "label": "8:00"
          },
          {
            "value": "9",
            "label": "9:00"
          },
          {
            "value": "10",
            "label": "10:00"
          },
          {
            "value": "11",
            "label": "11:00"
          },
          {
            "value": "12",
            "label": "12:00"
          },
          {
            "value": "13",
            "label": "13:00"
          },
          {
            "value": "14",
            "label": "14:00"
          },
          {
            "value": "15",
            "label": "15:00"
          },
          {
            "value": "16",
            "label": "16:00"
          },
          {
            "value": "17",
            "label": "17:00"
          },
          {
            "value": "18",
            "label": "18:00"
          },
          {
            "value": "19",
            "label": "19:00"
          },
          {
            "value": "20",
            "label": "20:00"
          },
          {
            "value": "21",
            "label": "21:00"
          },
          {
            "value": "22",
            "label": "22:00"
          },
          {
            "value": "23",
            "label": "23:00"
          }
        ]
      },
       {
        "type": "select",
        "id": "hero_slide_3_end_hour",
        "label": "Slide ends in hours",
        "options": [
          {
            "value": "0",
            "label": "0:00"
          },
          {
            "value": "1",
            "label": "1:00"
          },
          {
            "value": "2",
            "label": "2:00"
          },
          {
            "value": "3",
            "label": "3:00"
          },
          {
            "value": "4",
            "label": "4:00"
          },
          {
            "value": "5",
            "label": "5:00"
          },
          {
            "value": "6",
            "label": "6:00"
          },
          {
            "value": "7",
            "label": "7:00"
          },
          {
            "value": "8",
            "label": "8:00"
          },
          {
            "value": "9",
            "label": "9:00"
          },
          {
            "value": "10",
            "label": "10:00"
          },
          {
            "value": "11",
            "label": "11:00"
          },
          {
            "value": "12",
            "label": "12:00"
          },
          {
            "value": "13",
            "label": "13:00"
          },
          {
            "value": "14",
            "label": "14:00"
          },
          {
            "value": "15",
            "label": "15:00"
          },
          {
            "value": "16",
            "label": "16:00"
          },
          {
            "value": "17",
            "label": "17:00"
          },
          {
            "value": "18",
            "label": "18:00"
          },
          {
            "value": "19",
            "label": "19:00"
          },
          {
            "value": "20",
            "label": "20:00"
          },
          {
            "value": "21",
            "label": "21:00"
          },
          {
            "value": "22",
            "label": "22:00"
          },
          {
            "value": "23",
            "label": "23:00"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "hero_slide_3_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_3.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "select",
        "id": "hero_slide_3_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_3_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_3_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_3_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_3_link",
        "label": "Link URL"
      },
      {
        "type": "header",
        "content": "Slide 4"
      },
      {
        "type": "select",
        "id": "hero_slide_4_start_hour",
        "label": "Slide starts in hours",
        "options": [
          {
            "value": "0",
            "label": "0:00"
          },
          {
            "value": "1",
            "label": "1:00"
          },
          {
            "value": "2",
            "label": "2:00"
          },
          {
            "value": "3",
            "label": "3:00"
          },
          {
            "value": "4",
            "label": "4:00"
          },
          {
            "value": "5",
            "label": "5:00"
          },
          {
            "value": "6",
            "label": "6:00"
          },
          {
            "value": "7",
            "label": "7:00"
          },
          {
            "value": "8",
            "label": "8:00"
          },
          {
            "value": "9",
            "label": "9:00"
          },
          {
            "value": "10",
            "label": "10:00"
          },
          {
            "value": "11",
            "label": "11:00"
          },
          {
            "value": "12",
            "label": "12:00"
          },
          {
            "value": "13",
            "label": "13:00"
          },
          {
            "value": "14",
            "label": "14:00"
          },
          {
            "value": "15",
            "label": "15:00"
          },
          {
            "value": "16",
            "label": "16:00"
          },
          {
            "value": "17",
            "label": "17:00"
          },
          {
            "value": "18",
            "label": "18:00"
          },
          {
            "value": "19",
            "label": "19:00"
          },
          {
            "value": "20",
            "label": "20:00"
          },
          {
            "value": "21",
            "label": "21:00"
          },
          {
            "value": "22",
            "label": "22:00"
          },
          {
            "value": "23",
            "label": "23:00"
          }
        ]
      },
       {
        "type": "select",
        "id": "hero_slide_4_end_hour",
        "label": "Slide ends in hours",
        "options": [
          {
            "value": "0",
            "label": "0:00"
          },
          {
            "value": "1",
            "label": "1:00"
          },
          {
            "value": "2",
            "label": "2:00"
          },
          {
            "value": "3",
            "label": "3:00"
          },
          {
            "value": "4",
            "label": "4:00"
          },
          {
            "value": "5",
            "label": "5:00"
          },
          {
            "value": "6",
            "label": "6:00"
          },
          {
            "value": "7",
            "label": "7:00"
          },
          {
            "value": "8",
            "label": "8:00"
          },
          {
            "value": "9",
            "label": "9:00"
          },
          {
            "value": "10",
            "label": "10:00"
          },
          {
            "value": "11",
            "label": "11:00"
          },
          {
            "value": "12",
            "label": "12:00"
          },
          {
            "value": "13",
            "label": "13:00"
          },
          {
            "value": "14",
            "label": "14:00"
          },
          {
            "value": "15",
            "label": "15:00"
          },
          {
            "value": "16",
            "label": "16:00"
          },
          {
            "value": "17",
            "label": "17:00"
          },
          {
            "value": "18",
            "label": "18:00"
          },
          {
            "value": "19",
            "label": "19:00"
          },
          {
            "value": "20",
            "label": "20:00"
          },
          {
            "value": "21",
            "label": "21:00"
          },
          {
            "value": "22",
            "label": "22:00"
          },
          {
            "value": "23",
            "label": "23:00"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "hero_slide_4_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_4.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "select",
        "id": "hero_slide_4_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_4_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_4_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_4_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_4_link",
        "label": "Link URL"
      },
      {
        "type": "header",
        "content": "Slide 5"
      },
      {
        "type": "select",
        "id": "hero_slide_5_start_hour",
        "label": "Slide starts in hours",
        "options": [
          {
            "value": "0",
            "label": "0:00"
          },
          {
            "value": "1",
            "label": "1:00"
          },
          {
            "value": "2",
            "label": "2:00"
          },
          {
            "value": "3",
            "label": "3:00"
          },
          {
            "value": "4",
            "label": "4:00"
          },
          {
            "value": "5",
            "label": "5:00"
          },
          {
            "value": "6",
            "label": "6:00"
          },
          {
            "value": "7",
            "label": "7:00"
          },
          {
            "value": "8",
            "label": "8:00"
          },
          {
            "value": "9",
            "label": "9:00"
          },
          {
            "value": "10",
            "label": "10:00"
          },
          {
            "value": "11",
            "label": "11:00"
          },
          {
            "value": "12",
            "label": "12:00"
          },
          {
            "value": "13",
            "label": "13:00"
          },
          {
            "value": "14",
            "label": "14:00"
          },
          {
            "value": "15",
            "label": "15:00"
          },
          {
            "value": "16",
            "label": "16:00"
          },
          {
            "value": "17",
            "label": "17:00"
          },
          {
            "value": "18",
            "label": "18:00"
          },
          {
            "value": "19",
            "label": "19:00"
          },
          {
            "value": "20",
            "label": "20:00"
          },
          {
            "value": "21",
            "label": "21:00"
          },
          {
            "value": "22",
            "label": "22:00"
          },
          {
            "value": "23",
            "label": "23:00"
          }
        ]
      },
       {
        "type": "select",
        "id": "hero_slide_5_end_hour",
        "label": "Slide ends in hours",
        "options": [
          {
            "value": "0",
            "label": "0:00"
          },
          {
            "value": "1",
            "label": "1:00"
          },
          {
            "value": "2",
            "label": "2:00"
          },
          {
            "value": "3",
            "label": "3:00"
          },
          {
            "value": "4",
            "label": "4:00"
          },
          {
            "value": "5",
            "label": "5:00"
          },
          {
            "value": "6",
            "label": "6:00"
          },
          {
            "value": "7",
            "label": "7:00"
          },
          {
            "value": "8",
            "label": "8:00"
          },
          {
            "value": "9",
            "label": "9:00"
          },
          {
            "value": "10",
            "label": "10:00"
          },
          {
            "value": "11",
            "label": "11:00"
          },
          {
            "value": "12",
            "label": "12:00"
          },
          {
            "value": "13",
            "label": "13:00"
          },
          {
            "value": "14",
            "label": "14:00"
          },
          {
            "value": "15",
            "label": "15:00"
          },
          {
            "value": "16",
            "label": "16:00"
          },
          {
            "value": "17",
            "label": "17:00"
          },
          {
            "value": "18",
            "label": "18:00"
          },
          {
            "value": "19",
            "label": "19:00"
          },
          {
            "value": "20",
            "label": "20:00"
          },
          {
            "value": "21",
            "label": "21:00"
          },
          {
            "value": "22",
            "label": "22:00"
          },
          {
            "value": "23",
            "label": "23:00"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "hero_slide_5_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_5.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "select",
        "id": "hero_slide_5_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_5_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_5_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_5_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_5_link",
        "label": "Link URL"
      }
    ]
  },

Dadurch hast du nun folgende Einstellungsmöglichkeiten:

Hier kannst du nun eine aktuelle Uhrzeit simulieren, um die Slideshow zu testen, die Zeitbasierte Slideshow aktivieren und einen Debugmodus aktivieren, um in der Browser-Konsole die korrekte Funktionsweise zu überprüfen, die Debug-Ausgabe sieht z.B. wie folgt aus:

Durch diese Ausgabe bist du in der Lage zu überprüfen von wann bis wann die Zeiten der Slideshow erkannt wurden, welche aktuelle Zeit zum Vergleich herangezogen wird und welche Slide als aktiv erkannt wurde.

Die Slides von 1 bis 5 bieten nun die Möglichkeiten eine Startzeit und Endzeit einzutragen:

Auf The Internet Shop kannst du dir diesen Code in freier Wildbahn anschauen, das sieht dann so aus:

Morgens und abends

Tagsüber

Nachts

Newsletter

Melde dich für unseren Newsletter an

Impressum

JumpLink network logo

Angaben gem. § 5 TMG

Betreiber und Kontakt
Pascal Garber
Kasernenstraße 8
27472 Cuxhaven DE

Telefon
+49 152 54 09 01 89
Fax
+49 4721­ 664319
E-Mail
info@jumplink.eu
USt-IdNr.
DE277453808

Verantwortliche/r i.S.d. § 55 Abs. 2 RStV
Pascal Garber, Bei der Kirche 12, 27476 Cuxhaven
JumpLink

JumpLink ist ein Netzwerk aus selbstständigen Designern und Programmierern.

Datenschutz
Die Datenschutzerklärung findest Du unter https://jumplink.eu/privacy

Online-Streitbeilegung gemäß Art. 14 Abs. 1 ODR-VO
Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: https://ec.europa.eu/consumers/odr/.
Wir sind zur Teilnahme an einem Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle weder verpflichtet noch bereit.

Mitglied der Initiative "Fairness im Handel".
Informationen zur Initiative: fairness-im-handel.de