Announcement

Collapse
No announcement yet.

How To: Add a better date (and days remaining) for estimated delivery.

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How To: Add a better date (and days remaining) for estimated delivery.

    If you ship with fedex, or UPS, 3dcart will put the estimated delivery date on the page. However I find that its almost useless in its current form.

    It puts the estimated delivery as "yyyy-mm-dd" which is contrary to the other dates on the page. So I wrote (and copied) some javascript together and came up with something better.

    Code:
    <!--START: EstimatedDeliveryDate-->
    <script>
    $(window).bind("load", function() {
       stringToDate('[EstimatedDeliveryDate]','yyyy-mm-dd','-');
    });
    </script>
        
        <script>
        function stringToDate(_date,_format,_delimiter)
    {
        
           var formatLowerCase=_format.toLowerCase();
                var formatItems=formatLowerCase.split(_delimiter);
                var dateItems=_date.split(_delimiter);
                var yearIndex=formatItems.indexOf("yyyy");
                var dayIndex=formatItems.indexOf("dd");
                var monthIndex=formatItems.indexOf("mm");
                var month=parseInt(dateItems[monthIndex]);
                month-=1;
                var formatedDate = new Date(dateItems[yearIndex],month,dateItems[dayIndex]);
        
        var d_names = new Array("Sunday", "Monday", "Tuesday",
    "Wednesday", "Thursday", "Friday", "Saturday");
    
    var m_names = new Array("January", "February", "March", 
    "April", "May", "June", "July", "August", "September", 
    "October", "November", "December");
    
    
    var curr_day = formatedDate.getDay();
    var curr_date = dateItems[dayIndex];
    var sup = "";
    if (curr_date == 1 || curr_date == 21 || curr_date ==31)
       {
       sup = "st";
       }
    else if (curr_date == 2 || curr_date == 22)
       {
       sup = "nd";
       }
    else if (curr_date == 3 || curr_date == 23)
       {
       sup = "rd";
       }
    else
       {
       sup = "th";
       }
    
    
     document.getElementById("formateddate").innerHTML=d_names[curr_day] + " " + curr_date + '<SUP>'
    + sup + '</SUP>' + " " + m_names[month] + " " + dateItems[yearIndex];
    
    
     var currentDate = new Date();
     currentDate.setHours(0,0,0,0)
     
        
    var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
    var firstDate = currentDate;
    var secondDate = formatedDate;
    
    var d1 = firstDate; // postdate = 2014/02/01 ie: 1 Feb 2014
    //----------
    var d2 = secondDate; // todays date
    //----------
    
    if(d1<=d2){
        
        var diffDays = Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay));
                
    if (diffDays=='0') {
        document.getElementById("daysremaining").innerHTML="Delivery is scheduled for today!";
    } else { 
        document.getElementById("daysremaining").innerHTML=diffDays + " Days Left";
    }
        }
    
    }
    </script>
        <div style="text-align:center; margin-top:1em;">
        <b>Estimated Delivery:</b><br>
        <span id="formateddate"></span><br>
        <span id="daysremaining"></span>
        </div>
    
    <!--END: EstimatedDeliveryDate-->
    This code will parse the date from "yyyy-mm-dd" and put it in this format:
    Estimated Delivery:
    Thursday 21st January 2016
    2 Days Left

    It will also calculate the days remaining. On the day of delivery it will say "Delivery is scheduled for today!", and after the date of delivery it will hide that line of text.

    Let me know if you have any issues implementing it!

    -David

  • #2
    That is an excellent improvement. Thanks so much for sharing it. I do not have any suggestions for improving it.

    Comment

    Working...
    X