Adding a delivery date selector to the shopping cart page

You can include a calendar on the cart page that enables customers to specify the delivery date for their order.

Include jQuery in theme.liquid

For this customization to work properly, some templates need to add jQuery's script tags to the theme.liquid layout file. If you are using the free Shopify Online Store 2.0 template, you may need to follow the steps below:

1. exist Layout directory, click theme.liquidThe
2. Find the end of the code </head> Marker. At the end of the </head> In the new line above the marker, paste the following code:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}

3. Clicksave (a file etc) (computing)The

Create Delivery Date Code Snippet

To create a code snippet for the distribution date picker, do the following:

1. In the Shopify backend, go toonline store > templatesThe
2. Find the template you want to edit and click … button to open the action menu, and then click theEdit CodeThe
3. exist Snippets directory, clickAdd new code snippetThe
4. Create code snippets:
   1. Name the code snippet delivery-dateThe
   2. strike (on the keyboard)Creating Code Snippets. The new code snippet file will open in the code editor.
5. new delivery-date.liquid In the code snippet, paste the following code:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}



  

    Pick a delivery date:
    
     We do not deliver during the weekend.
  


<script
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate. +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }

6. Clicksave (a file etc) (computing)The

Include the code snippet in the shopping cart page

To include the delivery date code snippet on the shopping cart page, do the following:

1. exist Sections directory, click main-cart-items.liquidThe
2. Find the end of the code </form> Marker. At the end of the </form> In the new line above the marker, paste the following code:

{% render 'delivery-date' %}

3. Clicksave (a file etc) (computing)The

Your shopping cart page will now have a delivery date entry field. When you click on the text field, a calendar will appear:

original link https://help.shopify.com/zh-CN/manual/online-store/themes/customizing-themes/add-date-picker