This is a feature where your customer could add a delivery date while they’re buying something from your Shopify store. Without any delay, let’s get rolling
Editing your theme code to add this feature
Required files: section [cart-template.liquid]; assets[datepicker-jquery.js]
- In the Assets directory, Create a new file and add the following code:
$(document).ready( function() { $(function() { var noweekends = datepicker_noweekends, noweekends_val; var maxdate = "+"+datepicker_maxdate+"W"; var mindate = datepicker_mindate; if (noweekends==true){ noweekends_val = jQuery.datepicker.noWeekends; } else { noweekends_val = false; } $("#date").datepicker( { minDate: mindate, maxDate: maxdate, beforeShowDay: noweekends_val } ); }); });
- In the Section directory, find
cart-template.liquid
and locate the closing form tag</form>
. Add the following code right above the</form>
tag:
{% if section.settings.datepicker_enabled %} <div style="width:300px; clear:both;"> <p> <label for="date">Pick a delivery date:</label> <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" /> <span style="display:block" class="instructions"> {{section.settings.datepicker_note}}</span> </p> </div> {% endif %}
- In the same file add the following code right before the
{% schema %}
:
{% if section.settings.datepicker_enabled %} <script> window.datepicker_noweekends = {{section.settings.datepicker_noweekend}}; window.datepicker_maxdate = {{section.settings.datepicker_maxdate}}; window.datepicker_mindate = {{section.settings.datepicker_mindate}}; </script> {{ '//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" defer="defer"></script> <script src="{{ 'datepicker-jquery.js' | asset_url }}" defer="defer"></script> {% endif %}
- In the same file locate the settings inside
{% schema %}
, locate the closing square brackets]
in the settings. Add the following code right before the closing square bracket]
:
, { "type": "header", "content": "Date Picker" }, { "type": "checkbox", "id": "datepicker_enabled", "label": "Enabled Delivery Date Picker?", "default": true }, { "type": "checkbox", "id": "datepicker_noweekend", "label": "No weekend?", "default": true }, { "type": "number", "id": "datepicker_mindate", "label": "Min Date (Days)", "default": 4 }, { "type": "number", "id": "datepicker_maxdate", "label": "Max Date (Weeks)", "default": 8 }, { "type": "text", "id": "datepicker_note", "label": "Additional Text", "default": "We do not deliver during the weekend." }
- Congrats, You’ve completed the coding parts.
- Now it’s available on the cart page. You can modify through
Themes>customization>cart
page section settings.