Add a delivery date picker to your cart

This is a feature where your customer could Add a delivery date picker to your cart while they’re buying something from your Shopify store. 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.

A simple app that allows merchants to enable customers to select the date for delivery during their checkout, the Shopify delivery date picker is simple, stylish, and easy to use. It can provide merchants with a view of all the orders and their delivery dates at a glance and helps customize the various features without any coding or development required.

You can include a calendar on your cart page that allows customers to specify a delivery date picker to your cart in Shopify for their order. By choosing a delivery date and enabling tracking orders, customers are kept notified of when their orders are due and when they are fulfilled. You can also go on to customize the appearance and options of the delivery date picker. Without any delay, let’s get rolling

Editing your theme code to add Shopify delivery date picker feature

Required files: section [main-cart-items.liquid] , asset [datepicker.js].

• In the Section directory, find a file named main-cart-items.liquid and add the following code at the end:

{% 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 }}
  {{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  <script src="{{ 'datepicker.js' | asset_url }}" defer="defer"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>
{% endif %}

• Add the following code in {% schema %} tag:

  {
      "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."
    },

• And search for closing form tag </form> and paste the following code below it

{% 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 asset directory, create a new file named datepicker.js 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
      } );
    });
  });

• Congrats, You’ve completed the coding parts.
• Now it’s available on the Add a delivery date picker to your cart page. You can modify through Themes>customization>cart page section settings.

Congrats, You’ve completed this feature.