Add A Date Picker to your ShopSite Checkout Page

You should be able to add any date picker that you want to ShopSite. Below are instructions for the general idea for a date picker, so you can select the picker you want, as well as instructions for a specific date picker. The instructions below are for a ShopSite Pro store. If you have a ShopSite Manager store, read the "Shopping Cart Screen Option" option at the bottom of the page. The JavaScript date picker example is using the JavaScript code from http://www.javascriptkit.com/script/script2/dyndateselector.shtml

Select Delivery Date:

Step 1: Add JavaScript and CSS to Checkout Screen

The first thing that you will want to do is add the necessary JavaScript and CSS to your checkout page. There are a few ways that you can do this. The first option is to put it in the "text that appears at the top of the shipping screen" field found under Commerce Setup > Order System > Checkout. If you are linking to JavaScript files, CSS files or image files, you will want to include the full, secure URL to those files. The second option would be to include the code directly in your shopping cart template within the [-- DEFINE SHIPPING --] section.

If you would like to use this basic JavaScript date picker example, place the code below in the "text at the top of the shipping screen" text field.

Step 2: Add Input Field

Go to Commerce Setup > Order System > Checkout, and scroll down to the custom checkout fields section. Enable one of the checkout fields (I will be using field01 for this example), enter a title, such as "Delivery Date", and specify that it is a text input field. You can also specify whether it is required or not, and where the information will appear.

After you have enabled the custom checkout field, you will want to add the code for your input field into one of the text fields on the Checkout screen. Replace or add the name of the input field to be the name of the extra field you enabled. For example, <input name="field01" type="text">. That should be it. Test the field to make sure it works.

If you would like to use this basic JavaScript date picker example, place the code below in the one of the text fields on the checkout screen.

Select Delivery Date: 

Shopping Cart Screen Option

If you have a ShopSite Manager store, or if you would like the date picker field to be on the shopping cart screen instead of the checkout screen, you can use the ordering instructions field as your date picker field, instead of using the custom checkout fields. In order to make this change, below are the differences when you are using the steps above.

• Make sure you have enabled the ordering instructions field under Commerce Setup > Order System > Shopping Cart.
• In Step 1, make sure you are adding the code in the "text at the top of the shopping cart screen" found under Commerce Setup > Order System > Shopping Cart.
• In Step 1, make sure that you are adding full non-secure URLs for any JavaScript, CSS or image files.
• In Step 2, instead of enabling custom checkout fields, you are going to make a copy of the shopping cart template you are using (Merchandising > Custom Templates > Shopping Cart).
• In Step 2, instead of setting up a custom checkout field and placing the necessary code in the text fields, you are going to edit your copied shopping cart template, and replace [-- SC_OrderingInstructions --] with the code in step 2, and instead of name="field01" have the name of the input field be name="orderinst".
• Last, make sure you have selected your copied/modified shopping cart template to be used under Commerce Setup > Order System > Layout Info.