How to add Delivery Date as a product option

How-To: How to add Delivery Date as a product option

The Information Box option is most appropriate if you wish to capture additional information from the customer. For example, to capture the date of delivery.

You can specify the Option Name and Default Text displayed inside the information box as a hint for the information required to be provided by the Customer on the Product Details Page.

You can also force the customer to enter a value into the information box by ticking 'Online Shopper must enter Value to purchase Product'.

In the Dashboard:




Online:


In addition, you can add a pop-up calendar to the input field by using specific Javascript code.




To achieve this, please do the following:

1. In the Swifty platform go to Website > Edit Webmaster Verification and add the code snippet:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/i18n/jquery.ui.datepicker-en-GB.js"></script>

2. Go to Website > Edit Website
3. Select the Product Details page, switch to the Edit Page tab and add a new HTML page section after the Product Details section
4. Open the section in edit mode and enter the code:

<script type="text/javascript">
if($(".productOptionsBlock label:contains('Delivery Date')")){
   $(".productOptionsBlock label:contains('Delivery Date')").next().attr("id", "datepicker");
   $(function(){
       $("#datepicker").datepicker();
   });
}
</script>

Please replace Delivery Date with the option name specified by you, so the calendar is activated for this Information Box option only.

5. Save the changes and publish the site
 

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.