Solved
Landing page HTML that shows content based on date using tokens
Hi everyone,
I created some HTML for a landing page that shows different content (in tokens) based on the date. However, I am unsure if the date will be the Marketo date or the viewer's date. Does anyone have reccomendations on how to test this or edit it so that the content will show based on the viewer's date?
<div><br /></div>
<div>
<div hidden="" data-datesensitive-show-after="2023-11-10" data-datesensitive-show-until="2023-11-11">{{my.Day1t}}</div>
</div>
<div>
<div hidden="" data-datesensitive-show-after="2023-11-11" data-datesensitive-show-until="2023-11-12">{{my.Day2t}}</div>
</div>
<div>
<div hidden="" data-datesensitive-show-after="2023-11-12" data-datesensitive-show-until="2023-11-13">{{my.Day3t}}</div>
</div>
<div>
<script>// <![CDATA[
(function(){
const arrayify = getSelection.call.bind([].slice);
const now = new Date();
let axes = ["after","until"];
let stor = axes.map(function(axis){
return "[hidden][data-datesensitive-show-" + axis + "]";
}).join(",");
function makeEpochDate(dateLikeString,fallback){
dateLikeString && dateLikeString.replace(" ", "T"); // IE requires 'T' as in ISO 8601:2019
return Date.parse(dateLikeString) || Date.parse(fallback) || Number(fallback);
};
arrayify(document.querySelectorAll(stor))
.map(function(el){
let conditions = axes.reduce(function(acc,nextAxis){
acc[nextAxis] = el.getAttribute("data-datesensitive-show-" + nextAxis);
return acc;
},{});
return {
el : el,
after : makeEpochDate(conditions.after,-Infinity),
until : makeEpochDate(conditions.until,Infinity)
};
})
.filter(function(desc){
return (desc.after <= now) && (now < desc.until);
})
.forEach(function(desc){
desc.el.hidden = false;
});
})();
// ]]></script>
</div>