How to add a delivery date picker to your Shopify cart
Include a calendar on your cart page that allows customers to easily specify a delivery date for their order. This implementation is intended to help merchants who are looking to book delivery slots. For example, a food ordering service.
Follow these steps to add a delivery date picker to your cart page.
Step 1: Include jQuery UI
- From your Shopify admin, to to Online Store > Theme.
- Find the theme you want to edit and then click Action > Edit code.
- In the Layout section, click theme.liquid to open the file in the online code editor.
- Find
<head>and paste below code just above it.12{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" defer="defer"></script> - Click Save.
Step 2: Add a delivery date picker to your cart template
- Find your cart template: In the Sections > cart-template.liquid or Templates > Cart.liquid that depend on each theme.
- Find the closing
</form>tag in the code. On a new line above the closing</form>tag, paste the following code:1234567<div style="width:300px; clear:both;"><p><label for="huratips-delivery-date">Pick a delivery date:</label><input id="huratips-delivery-date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" /><span style="display:block" class="instructions"> We do not deliver during the weekend.</span></p></div> - Click Save.
Step 3: Inserting executable Javascript code
- In the Assets directory, you must find the main js file of the them. May be it is theme.js or theme.js.liquid, that depend on each theme.
- Paste the following code at the bottom of the file:123456789$(document).ready( function() {$(function() {$("#huratips-delivery-date").datepicker( {minDate: +1,maxDate: '+2M',beforeShowDay: jQuery.datepicker.noWeekends} );});});
- Click Save.
You are done. Happy coding!
Hi,
Thank you for the post.
What if I do want it to show weekends?
Can you tell me the code to put in?
comment below code to open wekeends
// beforeShowDay: $.datepicker.noWeekends
Hi, very useful but i need to tweak this a bit further.
Can I use European time notation when selected: DD/MM/Y?
Hi Balder,
Yes, you can. Please refer the guide here: https://jqueryui.com/datepicker/#date-formats