token? velocity? I don't know what I want

[JD_Nelson]

I have a marketo landing page that serves as an LMS calendar. Classes come and go, and each time we add a block of classes I add some prepared html code and drop it in the page. I would LOVE to automate a way to hide the classes that have passed, by quickly updating a token or list of past classes (potentially updating a section of html div to display:none).

I tried some js that goes off internal clocks and hides by date, but that didn't seem to work right --

I was thinking of inserting a token in the div and updating it to "display:none" as needed, but marketo seems to strip out the token when I save it.

Maybe I need a velocity script to do this in a way I haven't thought of yet (I'm not familiar with Velocity use-cases)?

Maybe someone else has done something similar? Anyone want to point me to the right rabbit hole?

[Nicholas_Manojl]

I think I remember doing something similar by using a Google Drive (Sheets) to populate all the info.

I then used Google Drive's publish and javascript API to display on the webpage.

Then it was a simple matter of keeping the Google Sheets up to date, which is easy whichever way you do it (manually or with formulas).

[JD_Nelson]

hmmm, yah, I have a basic excel sheet that I put dates in and it generates a big long html code block -- interesting about the ability to publish via js api though -- might need to look into that!

[Grégoire_Miche2]

HI JD,

Velocity tokens do not work in landing pages. Only in emails. Non script tokens normally do.

Send the LP URL, so that we can look at the JS.

-Greg

[JD_Nelson]

currently no js -- just looking to find an option to do this less manually.

http://go.spigit.com/spigit-training-home.html

[SanfordWhiteman]

You'll need to tag the elements with an explicit datetime ("20 MAR" is pretty-looking but not machine-readable).

For example, on each hideable row, add the data-event-datetime attribute and an ISO (UTC) datetime:

<div class="Row" data-event-datetime="2018-03-20T14:00:00Z">

Then I can give you the very easy JS to hide the ones that are out of date.

[JD_Nelson]

done & done... such anticipation now...

[SanfordWhiteman · Accepted solution]

Set up some CSS rules (I don't like to set .style directly if avoidable):

#BodyText2a { display: none !important; }
#BodyText2a[data-event-expiry-calculated="true"] { display: initial !important; }
#BodyText2a .Row[data-event-expired="true"] {  display: none; }

then

var arrayFrom = getSelection.call.bind([].slice),
    nowDate = new Date(),
    eventContainer = document.querySelector("#BodyText2a")
    eventRows = eventContainer.querySelectorAll(".Row");
arrayFrom(eventRows)
  .filter(function(eventRow){
    var eventDate = new Date(eventRow.getAttribute("data-event-datetime"));
    return eventDate < nowDate;
   })
   .forEach(function(expiredEventRow){
     expiredEventRow.setAttribute("data-event-expired","true");
   });
eventContainer.setAttribute("data-event-expiry-calculated","true");

[JD_Nelson]

sorry - where does the second bit go?

[SanfordWhiteman]

In a <script> tag. You can put it just inside the closing </body> in your case.

[JD_Nelson]

you're the man!! thanks so much!

[Grégoire_Miche2]

The JS is the solution I would look into.

-Greg