Wir sind fusioniert
Klicke hier um unsere neue Seite zu besuchen
Klicke hier um unsere neue Seite zu besuchen
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 28 Feb 2017
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.
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.
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 }}
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:
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.
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:
Pascal Garber
Founder, Entwickler, Designer
Hi, ich bin Pascal und habe schon als Vierzehnjähriger mit dem Programmieren begonnen. Damals nur aus reiner Neugierde und aus Spaß meine Lieblings-Videospiele nachzuprogrammieren. Ich habe es geliebt Dinge zu "erschaffen" und das hat sich bis heute nicht geändert. Inzwischen stehen Qualität und Schönheit in Kombination mit feinem Design ebenfalls im Fokus der Programmierung.
Berufswunsch: Erfinder
Angaben gem. § 5 TMG
JumpLink ist ein Netzwerk aus selbstständigen Designern und Programmierern.
Mitglied der Initiative "Fairness im Handel".
Informationen zur Initiative: fairness-im-handel.de
