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

メモ

Shopifyの無料テーマを使用している場合は、Shopify サポートに連絡すると、このチュートリアルのサポートを受けることができます。設計には15分かかります。Shopifyデザインポリシーについて詳しくはこちらをご覧ください。

メモ

このカスタマイズは、以前のShopifyテーマには適用されません。使用しているテーマのアーキテクチャバージョンについてはこちらをご覧ください。

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

注意

このカスタマイズはドロワーやポップアップのカートスタイルでは動作せず、カートページのみで動作します (カートページのURLはyour-store.com/cart)。カートドロワーやカートのポップアップを使用する場合は、テーマエディタでカートスタイルを [ページ] に変更する必要があります。テーマのプレビューでカートに商品を追加し、テーマエディタの [カートページ] タブをクリックしてカート設定を表示します。

theme.liquidにjQueryを追加する

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

1. [レイアウト] ディレクトリーで、theme.liquidをクリックします。

2. コードで</head>終了タグを探します。</head>終了タグの上の新しい行に、次のコードを貼り付けます。

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

1. [保存] をクリックします。

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

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

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] に移動します。

2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。

3. [スニペット] ディレクトリで、[新しいスニペットを追加する] をクリックします。

4. 次の手順でスニペットを作成します。

   1. スニペットにdelivery-dateと名付けます。
   2. [スニペットを作成する] をクリックします。コードエディタで新しいスニペットファイルが開きます。

5. 新しいdelivery-date.liquidスニペットで、次のコードを貼り付けます。

1. [保存] をクリックします。

iPhone

1. Shopifyアプリで、 をタップします 。

2. 販売チャネルセクションで、[オンラインストア] をタップします。

3. [テーマを管理する] をタップします。

4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。

5. [スニペット] ディレクトリで、[新しいスニペットを追加する] をクリックします。

6. 次の手順でスニペットを作成します。

   1. スニペットにdelivery-dateと名付けます。
   2. [スニペットを作成する] をクリックします。コードエディタで新しいスニペットファイルが開きます。

7. 新しいdelivery-date.liquidスニペットで、次のコードを貼り付けます。

1. [保存] をクリックします。

Android

1. Shopifyアプリで、 をタップします 。

2. 販売チャネルセクションで、[オンラインストア] をタップします。

3. [テーマを管理する] をタップします。

4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。

5. [スニペット] ディレクトリで、[新しいスニペットを追加する] をクリックします。

6. 次の手順でスニペットを作成します。

   1. スニペットにdelivery-dateと名付けます。
   2. [スニペットを作成する] をクリックします。コードエディタで新しいスニペットファイルが開きます。

7. 新しいdelivery-date.liquidスニペットで、次のコードを貼り付けます。

1. [保存] をクリックします。

カートページにスニペットを追加する

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

1. セクションディレクトリで、[main-cart-items.liquid] をクリックします。

2. コードで</form>終了タグを探します。</form>終了タグの上の新しい行に、次のコードを貼り付けます。

{% render 'delivery-date' %}

1. [保存] をクリックします。

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

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