カートページに配送日セレクタを追加

ショッピングカートページにカレンダーを表示し、顧客が注文の配達日を指定できるようにすることができます。

theme.liquidにjQueryを含める

このカスタマイズが正しく機能するためには、テンプレートによってはjQueryのスクリプトタグをtheme.liquidレイアウトファイルに追加する必要があります。無料のShopify Online Store 2.0テンプレートを使用している場合は、以下の手順を実行する必要があります：

1. ある レイアウト ディレクトリで テーマリキッド.
2. コードの終わりを見つける </head> マーカーの端にある。 </head> マーカーの上の新しい行に、以下のコードを貼り付ける：

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

3.クリックセーブ.

配達日コードスニペットの作成

配信日ピッカーのコード・スニペットを作成するには、以下のようにします：

1. Shopifyのバックエンドでオンラインショップ > テンプレート.
2. 編集したいテンプレートを見つけて … ボタンをクリックして操作メニューを開き編集コード.
3. ある スニペット ディレクトリで新しいコード・スニペットを追加する.
4. コード・スニペットを作成する：
   1. コード・スニペットに名前を付ける 配達日.
   2. 打込むコード・スニペットの作成.新しいコード・スニペット・ファイルがコード・エディターで開きます。
5. 新しい 配達日.液体 コード・スニペットに以下のコードを貼り付ける：

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



  

    配達日を選んでください:。
    
     週末の配送は行っておりません。
   
  週末の配送は行っておりません。
</div

<script
  ウィンドウのオンロード = 機能() {
      もし (window.jQuery) {.
        レット $ = window.jQuery.JQueryを使用します；

        $(機能() {
          $(「#date」)。デートピッカー({
          minDate. +1,
          maxDate: '+2M'、
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }

6.クリックセーブ.

ショッピングカートページにコードスニペットを含める

ショッピングカートページに配送日コードスニペットを含めるには、以下のようにします：

1. ある セクション ディレクトリで メイン・カート・アイテム.リキッド.
2. コードの終わりを見つける </form> マーカーの端にある。 </form> マーカーの上の新しい行に、以下のコードを貼り付ける：

{% 配達日」のレンダリング %}

3.クリックセーブ.

ショッピングカートのページにお届け日の入力欄ができました。テキストフィールドをクリックすると、カレンダーが表示されます：

オリジナルリンク https://help.shopify.com/zh-CN/manual/online-store/themes/customizing-themes/add-date-picker