SOLVED

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

Go to solution
JD_Nelson
Level 10 - Community Advisor

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

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?

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

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

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");

View solution in original post

11 REPLIES 11
Grégoire_Miche2
Level 10

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

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
Level 10 - Community Advisor

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

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

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

Grégoire_Miche2
Level 10

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

The JS is the solution I would look into.

-Greg

SanfordWhiteman
Level 10 - Community Moderator

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

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
Level 10 - Community Advisor

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

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

SanfordWhiteman
Level 10 - Community Moderator

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

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
Level 10 - Community Advisor

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

sorry - where does the second bit go?

SanfordWhiteman
Level 10 - Community Moderator

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

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

JD_Nelson
Level 10 - Community Advisor

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

you're the man!! thanks so much!