カートに配達日ピッカーを追加する

カートページにカレンダーを追加して、お客様が注文の配達日を指定できるようにすることができます。

このページの内容

theme.liquid に jQuery を含める

このカスタマイズが機能するためには、一部のテーマで、jQuery のスクリプトタグを theme.liquid レイアウトファイルに追加する必要があります。Shopify の無料テーマを使用している場合は、次の手順に従う必要があります。

「Layout」ディレクトリで、theme.liquid をクリックします。
コード内で閉じ </head> タグを見つけます。閉じ </head> タグの上の新しい行に、次のコードを貼り付けます。

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

「保存」をクリックします。

配達日スニペットを作成する

配達日ピッカーのスニペットを作成するには、以下の手順を実行します。

デスクトップ

管理画面から、「オンラインストア」 > 「テーマ」に移動します。
編集するテーマを見つけ、[…] ボタンをクリックしてアクションメニューを開き、「コードを編集」をクリックします。
「Snippets」ディレクトリで、「新しいスニペットを追加する」をクリックします。
スニペットを作成します。
スニペットに delivery-date という名前を付けます。
「スニペットを作成」をクリックします。新しいスニペットファイルがコードエディタで開きます。
新しい delivery-date.liquid スニペットに、次のコードを貼り付けます。

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<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"> We do not deliver during the weekend.</span>
  </p>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>

「保存」をクリックします。

モバイル

Shopify アプリから、アイコンをタップします。
「販売チャネル」セクションで、「オンラインストア」をタップします。
「テーマを管理する」をタップします。
編集するテーマを見つけ、[…] ボタンをタップしてアクションメニューを開き、「コードを編集」をタップします。
「Snippets」ディレクトリで、「新しいスニペットを追加する」をタップします。
スニペットを作成します。
スニペットに delivery-date という名前を付けます。
「スニペットを作成」をタップします。新しいスニペットファイルがコードエディタで開きます。
新しい delivery-date.liquid スニペットに、次のコードを貼り付けます。

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<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"> We do not deliver during the weekend.</span>
  </p>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>

「保存」をタップします。

カートページにスニペットを含める

カートページに配達日スニペットを含めるには、以下の手順を実行します。

「Sections」ディレクトリで、main-cart-items.liquid をクリックします。
コード内で閉じ </form> タグを見つけます。閉じ </form> タグの上の新しい行に、次のコードを貼り付けます。

{% render 'delivery-date' %}

「保存」をクリックします。

これで、カートページに配達日の入力フィールドが表示されるようになりました。テキストフィールド内をクリックすると、カレンダーが表示されます。

このカスタマイズで使用される日付ピッカーは、jQuery UI ライブラリのウィジェットです。