こちらのページはShopifyストアのカートページ上に表示できるお届け希望日時指定の導入手順です。
現在は弊社指定のShopifyアプリを利用することを推奨しています。
新たに設定する場合は、Shopify連携：お届け希望日時の指定について をご確認ください。

お客様ご自身でShopifyテーマ（HTML/CSS）を編集する作業があります。
※ Shopifyテーマに関するサポートは行っておりませんのでご了承ください。

本フォームはカートがページタイプの場合のみ動作します。ドロワータイプやモーダルタイプではご利用いただけません。
ドロワーやモーダルの場合でもテーマによってはテーマのカスタマイズ にてページに切り替え可能な場合があります。

手順

まずは開発用など非公開テーマで動作確認の上、本番テーマに反映いただくことをおすすめいたします。

以下はデフォルトテーマのDebutに対して導入する手順の例です。

テーマのコード編集画面を開く

• Shopify管理画面の左側のメニューより、オンラインストア＞テーマを選択します。
• 追加したいテーマにて、アクション＞コードを編集するを選択します。
• また、表示の確認用にカスタマイズも別タブで開いておきます。

スニペット作成

• 「Snippets」フォルダから「新しいsnippetを追加する」を選択し、新規Liquidファイルを作成します。（名前はopenlogi-delivery-dateなど）

コード記述

作成したファイルを開き、下記のURL内ファイルの内容を転記してください。
（うまく開けない場合は画面をリロードしてください）

https://www.openlogi.com/addons/shopify/delivery_date_liquid.txt

• 「保存する」ボタンを押します。

カート画面テンプレートを開く

• カート画面のテンプレートはcart.liquidもしくはそこから呼び出されているcart-template.liquidなどになります。検索し、選択してコードを表示させてください。

  
  • カート画面のテンプレートであることを確認する方法として、チェックアウトボタンの記述type="submit" name="checkout"の記述があることなどを確認してください。

• エディタのコードがうまく表示されない場合があるので、その際はページを更新してください。

コード編集

• カート画面のテンプレートを開き、フォームを表示したい位置に、スニペットを呼び出すコードを追記します。

{% render 'openlogi-delivery-date' %}

下記にDebutテーマに追記する例を記載します。（ブラウザはGoogle Chromeを利用）

• 「カスタマイズ」ボタンから開いたプレビュー画面にて、商品をカートに追加しカート画面を表示します。
• 図の赤い四角の位置にフォームを表示したいとします。

表示したい位置付近のコードを特定する

注意

• デベロッパツールを開きます。

  • Windows:F12, Mac:Command + Option + iまたは画面の表示＞開発/管理＞デベロッパー ツール<

  • デベロッパツール左上の矢印アイコンを押してから、挿入したい箇所の要素をクリックすると、そのDOMが表示されます。

  • 今回は「税込みで配送料は・・」の文言の下に表示したいので、そこをクリックします。
  • 右側に要素が表示され、文言のクラスが「cart__shipping rte」であることがわかります。

  • これでテンプレート内を検索します。

  • 　　　　　
  • Ctrl + FWin:Alt + Fで検索欄を表示させます。
  • 検索し、位置を特定したらその下にフォームを呼び出すコードを記述します。
  • {% render 'openlogi-delivery-date' %}

  • プレビュー画面をリロードし、表示されていることを確認します。

  • 

  • 必要に応じてopenlogi-delivery-date.liquidをてCSSなどを調整してください。

  導入後の設定

  導入後に設定可能な項目です。

  設定いただいたコードではパラメータの記述がコメントアウトされて記載されています。

  （{% comment %}{% endcomment %}で囲まれている部分は表示されません）

  必要に応じてこの記述を削除し、設定を有効にしてください。

  記載例：

  <div class="opl-delivery-date"
       data-min-date="2"
       {% comment %}data-max-date="30"{% endcomment %}
       {% comment %}data-disabled-days='[{"from": "2020-12-29", "to": "2021-01-03"},"2021-01-08","2021-01-10"]'{% endcomment %}
       {% comment %}data-theme="material_blue"{% endcomment %}>
  

  最短日指定（倉庫作業日からの日数）

  例：data-min-date="2"

  当日出庫を考慮して最短日を計算する

  data-enabled-same-day-shipping

  テーマ

  例：data-theme="material_orange"

  下記のいずれかの文字を指定してください。
  dark, material_blue, material_green, material_red, material_orange

  

  購入者への注文確認メールに記載する

  Shopifyのメールテンプレートのカスタマイズにて可能です。

  手順

  {% if shipping_address.country_code == "JP" %}
      <p>配送希望日: {{ attributes["openlogi_delivery_date"] }}</p>
      {% if attributes["openlogi_delivery_time_slot"] == "AM" %}
          <p>配送希望時間: 午前中</p>
          {% endif %}
          {% if attributes["openlogi_delivery_time_slot"] == "14" %}
          <p>配送希望時間: 14時～16時</p>
          {% endif %}
          {% if attributes["openlogi_delivery_time_slot"] == "16" %}
          <p>配送希望時間: 16時～18時中</p>
          {% endif %}
          {% if attributes["openlogi_delivery_time_slot"] == "18" %}
          <p>配送希望時間: 18時～20時</p>
          {% endif %}
          {% if attributes["openlogi_delivery_time_slot"] == "19" %}
          <p>配送希望時間: 19時～21時</p>
      {% endif %}
  {% endif %}
  

  記載される文言の例です。

  配送希望日: 2020-12-10
  配送希望時間: 14時～16時
  

  • ドロワー型のカート画面ではそれぞれのテンプレートに同様の編集が必要です。 例：cart-drawer.liquid
  • モバイルとデスクトップで表示されるコードが異なる場合があります。その場合それぞれに対応が必要です。
    • <div class="mobile">などの記述があればモバイル専用の表示、<div class="desktop">などの記述があればデスクトップ専用の表示になります。

    最長日指定

    例：data-max-date="30"

    指定不可日指定

    指定不可できない日を特定の日付や範囲で指定できます。

    下記のいずれかのように指定してください。

    • 指定可能な最長日
    • デフォルト2日。2日より短くできません。
    • 最短指定日の計算式：最短指定日 = 倉庫作業日までの日数 + data-min-date
      • 倉庫作業日とは平日・土曜（祝日除く）のうち、翌日以降の最短日となります。
      • 例：
        • 翌日が平日なら、翌日が作業日となるためこの値+1日が最短指定日となります。
        • 当日が土曜で次の月曜が平日の場合、月曜が作業日となるためこの値+2日が最短指定日となります。
      • 指定可能な最長日
      • デフォルト30日、最大364日です。

      • 日付を指定する場合

      • data-disabled-days='["2020-11-30","2020-12-03"]'

    • 範囲指定する場合

      • data-disabled-days='[{"from": "2020-12-29", "to": "2020-01-03"}]'
    • カート画面を開いたときに倉庫稼働日かつAM10時までなら、当日出庫できることとして、当日を倉庫作業日として計算します。
    • 住所不正などで取込エラーになったときに、取込可能な猶予がタイトになりますのでご注意ください。
    • 設定 > 通知 > 注文の確認というテンプレートを開き、任意の場所に以下コードを埋め込んでください。
    • アクション > テストメールを送信するをて正しく表示されているか確認してください。