Adding "Get It by [Future Date]" to the page dynamically?

Technical
,
1

Since programmable does not yet work for F+ funnels, I was wondering is there a way to insert a dynamic date into my funnel?

I’m trying to do this:

“Order today and get it by (PRESENT DATE + 5 DAYS)”

Can someone advise my on how to accomplish this on F+ ?

Thanks

2 Likes
2

Hi @vegatrading,

Please follow this simple guide for that:

1. Add this Custom JS code inside Custom Code > Custom JS(Body):

<script>
const plus_days = 5;    
let event = new Date();
let plus = new Date(); 
plus.setDate(event.getDate()+plus_days);
    const options = { weekday: 'long', month: 'long', day: 'numeric' };
    let myDates = document.querySelectorAll(".today");
   myDates.forEach(e =>  {
      e.innerHTML = plus.toLocaleDateString('en-US', options) + generateTh(plus.getDate());
})
function generateTh(d){
  let ar = String(d).split(''); 
  if (ar[ar.length-1] == 1 && d != 11) return 'st';
  else if(ar[ar.length-1] == 2 && d != 12 && d != 13) return 'nd';
   else if(ar[ar.length-1] == 3) return 'rd';
  return 'th';
}
</script>

2. Add a custom HTML element to your page and paste the code below:

After adding the custom HTML element click Edit custom HTML.
image

Then paste the following code:

<div>
Order today and get it by 
<span class="today"></span>
</div>

And that’s it.

Let us know how that goes. for you,

Kind regards,
Funnelish™ Team

2 Likes
3

Thanks, this worked wonders

1 Like
4

can we get this built as a drag-and-drop feature into the page builder? Thanks

1 Like
5

Yes we are working on it for sure :wink:

6

Hello, Is there a way to use this code for more properties on the page. So more different dynamic dates, for different dates on 1 page? I am figuring this out right now, but cant seem to duplicate the code and use different classes, it just doesnt work.

7

Hi @chakir_zarioh,

pls use this custom code instead:

<script>
var d = new Date();
  var dplus = new Date();
  dplus.setDate(d.getDate()+5);

  const options = { weekday: 'short', month: 'short', day: 'numeric' };

    let ships = document.querySelectorAll(".today");
ships.forEach(d => {
  d.innerHTML = '"Order and get it By ' + dplus.toLocaleDateString('en-US', options) + generateTh(dplus.getDate()) + '"';
})
function generateTh(d){
  let ar = String(d).split(''); 
  if (ar[ar.length-1] == 1 && d != 11) return 'st';
  else if(ar[ar.length-1] == 2 && d != 12 && d != 13) return 'nd';
   else if(ar[ar.length-1] == 3) return 'rd';
  return 'th';
}
</script>

PS: Change the number 5 to the right shipping days.

8

Thanks, but I dont think you understood my question right. With the initial code it is possible to have for example “lose 20 pounds by [X dynamix date +5 days from today]” on the page. Thats what I want, but I want to add another date on my page for another section where I have a second, different dynamic date. Can I realise this with the code youve given me above?

9

Hi @chakir_zarioh,
The code above will work for the (“lose 20 pounds by [X dynamic date +5 days from today]”), but with minor modifications for the text:

<script>
var d = new Date();
  var dplus = new Date();
  dplus.setDate(d.getDate()+5);

  const options = { weekday: 'short', month: 'short', day: 'numeric' };

    let ships = document.querySelectorAll(".today");
ships.forEach(d => {
  d.innerHTML = '"Lose 20 pounds by ' + dplus.toLocaleDateString('en-US', options) + generateTh(dplus.getDate()) + '"';
})
function generateTh(d){
  let ar = String(d).split(''); 
  if (ar[ar.length-1] == 1 && d != 11) return 'st';
  else if(ar[ar.length-1] == 2 && d != 12 && d != 13) return 'nd';
   else if(ar[ar.length-1] == 3) return 'rd';
  return 'th';
}
</script>

But, you will need a different HTML and JS code for another custom date.

The following code adds two days, please add under the previous script

<script>
  var dplus2 = new Date();
  dplus.setDate(d.getDate()+2);

  const options2 = { weekday: 'short', month: 'short', day: 'numeric' };

    let ships2 = document.querySelectorAll(".today2");
ships.forEach(d => {
  d.innerHTML = '"Order and get it By ' + dplus.toLocaleDateString('en-US', options2) + generateTh(dplus2.getDate()) + '"';
})
</script>

Example