A Smarter Delivery Date Feature For Your Bigcommerce Store

Imagine buying some flowers to be delivered tomorrow. You select the perfect azaleas, pick out a container, a teddy bear and then you choose the delivery date. With a big smile you press the checkout button, fill out your credit card details and pay. Everything looks good, the payment went through. Now to check the confirmation email. You glance over it..and then you see the mistake. The wrong date. You selected the right day, the right year but picked the previous month! Staring at the ceiling, hands clasping the sides of your face you wonder how many calls you'll make to get it fixed. Will the flowers even get there tomorrow?

Don't let this happen to your customers. If you are in the business of delivering products then you have to smarten up the delivery date feature to prevent erroneous dates from being selected. The code below will show you how to do just that:

Instructions

1. Login to your control panel and navigate to Design -> Theme Files/Edit HTML & CSS and open the product.html file.

2. Add the following code to the bottom of the file, right before the </body> tag:

   
   <script type="text/javascript">
   function smartenDeliveryDate() {
       var d = new Date();
   
       $("#EventDateMonth").val(d.getMonth()+1);
       $("#EventDateDay").val(d.getDate());
       $("#EventDateYear").val(d.getFullYear());
   
       $("#EventDateMonth option[value='-1']").remove();
       $("#EventDateDay option[value='-1']").remove();
       $("#EventDateYear option[value='-1']").remove();
   }
   
   $("#EventDateMonth").on("change", function() {
       var d = new Date();
       var selectedMonth = $(this).val();
       var currentMonth = d.getMonth() + 1;
   
       if(selectedMonth < currentMonth) {
           alert("Please select a current or future month."); 
           $(this).val(currentMonth);
       }
   });
   
   
   $("#EventDateYear").on("change", function() {
       var d = new Date();
       var selectedYear = $(this).val();
       var currentYear = d.getFullYear();
   
       if(selectedYear < currentYear) {
           alert("Please select a current or future year."); 
       }
   });
   
   
   $(document).ready(function() {
       smartenDeliveryDate();
   });
   
   </script>
   
   

3. Save your changes.

How It Works

The code works on multiple fronts to prevent erroneous date selections. First, it sets the delivery date to the current date. It then removes the blank date options from the the drop downs. After all, why would you let a customer select a blank day or month? After that, it makes sure that you can only select current or future dates. If the current month is August, then you will not be able to select July from the drop down. Likewise, if the current is 2014 then you will not be able to select 2013 from the drop down.

Troubleshooting

If the date values are wrong... then make sure your computer's date settings are updated and correct. The script makes use of your local time for the current date, so the default values will be updated accordingly for each individual customer.

If the current date is not set... then you are probably using a product option with a date value. Remove the option from the product, and use the delivery date feature and the script will work.

If it still doesn't work or you want to do something different...then contact us. We can install the modification for you.