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 [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 %}

• 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 delivery date picker 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 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.