skip to Main Content

I want to inject date into html in shopify description product

That it would say

We will ship the product from today + 11 days…..

And if it falls to saturday or sunday, it will be moved to monday cause we are closed on saturday or sunday

code is this for now, but dunno how to move it to first monday if necessary

// get the destination within the DOM
var wrapper = document.getElementById('productEta'),

  // get today as a js Date object
  today = new Date(),

  // get the Unix of today (miliseconds) and add desired time (3 weeks)
  etaUnix = today.getTime() + (60 * 60 * 24 * 11 * 1000),

  // convert the new time to date object and then to a human readable string
  etaForHumans = new Date(etaUnix).toDateString();

// set the destination inner html to be what it already is
// plus a space and the human readable string.
wrapper.innerHTML += ' ' + etaForHumans;
<div id="productEta">Product will arrive by: </div>

But something is wrong with the script also

4

Answers


  1. This actually ain’t too hard.
    The Date object provides a function getDay() which returns the day of the week.
    It’s an integer between 0 and 6.

    You can do it like this:

    var days = 4;
    etaUnix = new Date(today.getTime() + (60 * 60 * 24 * days * 1000));
    console.log(etaUnix.getDay())
    switch (etaUnix.getDay()) {
      case 0:
        //sunday
        days++;
        break;
      case 6:
        //saturday
        days += 2;
        break;
    }
    etaUnix = new Date(today.getTime() + (60 * 60 * 24 * days * 1000));
    // convert the new time to date object and then to a human readable string
    etaForHumans = new Date(etaUnix).toDateString();
    

    In the switch block where handling saturdays and sundays and simply adding one or two days to the date.

    By the way – there are some typos in your code. There needs to be a ; at the end of a statement not a ,

    Login or Signup to reply.
  2. // get the destination within the DOM
    var wrapper = document.getElementById('productEta'),
    
      // get today as a js Date object
      today = new Date(),
    
      // get the Unix of today (miliseconds) and add desired time (3 weeks)
      etaUnix = today.getTime() + (60 * 60 * 24 * 11 * 1000),
    
      // convert the new time to date object and then to a human readable string
      etaForHumans = new Date(etaUnix);
      var day = etaForHumans.getDay()
      if(day==0)
          etaForHumans.setDate(etaForHumans.getDate() + 1);
      if(day==6)
          etaForHumans.setDate(etaForHumans.getDate() + 2);
    
    // set the destination inner html to be what it already is
    // plus a space and the human readable string.
    wrapper.innerHTML += ' ' + etaForHumans+ ' ' + day;
    <div id="productEta">Product will arrive by: </div>
    Login or Signup to reply.
  3. var wrapper = document.getElementById('productEta');
    var today = new Date(Date.parse('2019-03-05'));
    var etaDate = new Date(today.getTime() + (60 * 60 * 24 * 11 * 1000))
    while(etaDate.getDay() == 0 || etaDate.getDay() == 6){
    	//Add one day until it is not saturday or sunday
    	etaDate.setTime(etaDate.getTime() + (60 * 60 * 24 * 1000));
    }
    
    var etaForHumans = etaDate.toDateString();
    // set the destination inner html to be what it already is
    // plus a space and the human readable string.
    wrapper.innerHTML += ' ' + etaForHumans;
    <div id="productEta">Product will arrive by: </div>
    Login or Signup to reply.
  4. momentJS. Check it out. Allows you play with dates in a sane way. Has plugins for things like asking for the nextBusinessDay() and much more.

    Don’t fiddle with dates and vanilla Javascript unless you are an ace Javascript coder. It sucks and momentJS exists for good reason. Less suckage.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search