I’m designing a site for a restaurant and they have daily specials and I wondering if I can make a collection for those items and have them rotate on a daily basis.
KJ
If you wanted to publish daily you could update your filter or you could have them all on the page hidden and use custom code to display them based on day of week, etc…
I would like them to change dynamically but having trouble finding the custom code that points me in the right direction (JS is not my strong suit).
KJ
Found this on codepen that I’ll test:
I think the if/else section will be long having to do it for everyday.
$(document).ready(function() {
var rightNow = new Date();
var day = rightNow.getUTCDay();
var hour = rightNow.getHours();
// show div only on day and time, Monday to Friday; hide div on weekend
// Sunday = 0, Monday = 1, and so on …, Saturday = 6
/* if (
(day === 1 || day === 2 || day === 3 || day === 4 || day === 5) &&
hour > 9 && hour < 16
) { */
if (day >= 1 && day <= 5 && hour >= 9 && hour <= 16) {
$(“#time-based-content”).show();
} else {
$(“#time-based-content”).hide();
}
});
Does the special change every week for every day or are they constant (by day of week)?
I believe they’re constant every week. My thinking is if they decide to change the special for any day, all they would have to do is change the content in the cms which I assume won’t happen very often.
And if they want to change the day of a special, they can do so by changing a numbered sort field I’d include on each item.
I could be thinking about this the wrong way but thats my thoughts at the moment.
KJ
Here is the read-only link to the project:
Only showing two daily special items atm but eventually there’ll be 5-7.
Is possible to give each of those items a custom div name so I can target them via JS? This is the JS I’m thinking of using.
// check day of week
var dayOfWeek = new Date().toLocaleDateString(‘en-US’, { weekday: ‘long’ }).toLowerCase();
// find div that has class name of item-[current day name] and display it
document.querySelector(.item-${dayOfWeek}).style.display = “block”;