.amp ヘルプセンター

    (c) and.d k.k.

    🗒️

    2021.08.16 Dawn へ導入できるようになりました。

    .amp ヘルプセンター
    .amp ヘルプセンター
    /配送日時指定.amp
    配送日時指定.amp
    /
    🗒️
    2021.08.16 Dawn へ導入できるようになりました。
    • 通常カートページへの設置手順
    • ポップアップの「購入手続きへ」ボタンを削除する方法
    • ドロワーカートへの設置手順

    ※基本のテーマの編集手順はこちら

    通常カートページへの設置手順

    1. 導入手順を進め、Dawnを選択し、アプリでテーマを拡張するをクリックします。

    image
    image

    2. ストアのカスタマイズ画面 > カートマークをクリックして、カート画面のカスタマイズ画面を開きます。

    image

    3. 左側メニューのブロックを追加 > アプリより、本アプリを選択してください。

    image

    4. プレビューを見ながら、モジュールの位置を調整します。

    image

    5. 保存するをクリックして完了です。

    ポップアップの「購入手続きへ」ボタンを削除する方法

    カートに商品を入れた際に出てくるポップアップ内、「購入手続きへ」のボタンから進むと、「今すぐ購入ボタン」と同じ原理で、配送日時を指定することができません。そのため、こちらの方法で「購入手続きへ」ボタンを削除することをお勧めいたします。

    1. Shopify管理画面の左側メニュー、オンラインストア>テーマをクリックします。「現在のテーマ」内のアクション>コードを編集するを選択するとコード編集画面が表示されます。

    2. 画面左側のディレクトリの中から、以下のテンプレートを探して開いてください。

    cart-notification.liquid

    3. 上記テンプレート内から、以下のコードを削除して保存してください。

    ※Dawnに今後、仕様の変更があった場合はコードが変わる可能性もございます。

    <form action="{{ routes.cart_url }}" method="post" id="cart-notification-form">
    <button class="button button--primary button--full-width" name="checkout">{{ 'sections.cart.checkout' | t }}</button>
    </form>

    このようになります。

    image

    ドロワーカートへの設置手順

    ドロワーカートはテーマのカスタマイズで編集することができないため、Liquidコードを編集していただく必要がございます。

    1. アプリ管理画面のテーマスニペットの再設置をクリック>ポップアップのOKをクリック

    ※「上書き更新…」というのは、Dawnの場合は基本的に考慮不要ですのでご安心ください。

    image
    image

    2. Dawnのコード編集画面にて、snippets/cart-drawer.liquidを開く。

    image

    3. 373行目周辺、{%- endif -%}と<!-- Start blocks -→の間に、以下のコードを設置して保存する。

    <div id="cart-delivery-datetime_section" data-os="1.0" data-timezones="{% for  delivery_timezone in shop.metafields.cart_delivery_app['delivery_timezones_key'] %}'{{delivery_timezone}}',{%endfor%}"></div>
    image

    上記の配置にすると、このように↓小計の上にモジュールが設置されます。

    image
    💡
    配置は自由なので、コードの挿入位置は上記の通りでなくても構いません。もしこれよりも上に設置したい、下に設置しないなどのご希望がある場合は、コードの挿入位置をご自由に調整してください。(カート内の他の要素との兼ね合いにより、綺麗に配置されない位置もありますので、実際に反映された画面を確認しながら調整してください。)