.amp ヘルプセンター
    💻

    2023/12/6 モジュール表示制御設定について

    いつも「配送日時指定.amp」をご利用いただきありがとうございます。

    この度、下記アップデートを行いますので、内容のご確認をよろしくお願いいたします。

    • ■リリース内容
    • ■設定方法
    • ■コードが機能しない場合

    ■リリース内容

    カートページの「購入」ボタンを表示するliquidに指定のコードを手動で追加することで、配送日時指定モジュールがカートページに表示されるまでの数秒、「購入」ボタンをクリックを不可にします。

    image
    💡
    ・ご利用のテーマによっては正しく動作しない可能性がありますので、必ずテストをお願いいたします。 ・クリック不可となるのは、デフォルトの購入ボタンのみです。AmazonPayやGooglePayなど、外部決済の購入ボタンは制御されません。 ・本機能を設定しても、購入ボタンの有効化からモジュールの表示まで1、2秒程度のタイムラグは発生いたします。

    ■設定方法

    1. 配送日時指定.amp管理画面の、配送日時指定に関する設定>モジュール表示制御設定>現在利用中のテーマのコードを編集する をクリックします。

    image

    ※「現在のテーマ」以外のテーマを編集する場合は、Shopify管理画面の左側メニュー、オンラインストア>テーマから、該当のテーマを選択して「・・・」メニューからコードを編集を選択してください。

    2. 画面左側のディレクトリの中から、cart画面を編集するliquidを開いてください。Craft、Dawnなど無料のテーマでは「main-cart-footer.liquid」が対象です。

    💡
    こちらのliquid名は一例です。 ご利用のテーマにより実際のliquidはこの通りの名前ではない場合もありますが、cart画面を編集するliquidは必ずどのテーマにも存在します。多くの場合「cart.liquid」や「cart-template.liquid」など、「cart」というワードが含まれています。 この点は、ご利用のテーマによって異なりますので、弊社でも個別にご案内することはできかねることご了承願います。「cart画面を編集するliquidはどれか」については、ご利用のテーマの開発元にご確認いただきますようお願い申し上げます。 ※テーマの開発元に相談する際、「配送日時指定.amp」の名前や、アプリの設定をしようとしているという旨が出ると、アプリの仕様なので分かりませんと断られてしまうことがありますので、あくまでもニュートラルにテーマの構成について知りたいという旨、「cart画面を編集するliquidを知りたい」という旨でご相談いただくとよろしいかと思います。

    3. 配送日時指定.amp管理画面の、配送日時指定に関する設定>モジュール表示制御設定に表示される「指定のスクリプト」をコピーして、モジュールを配置しているカートページのliquidの一番下の部分に貼り付けて保存してください。

    💡
    本機能は「カート画面を開いてから配送日時指定のモジュールが表示されるまでの間(数秒間)」、購入手続きに進めないようにするものであり、モジュールが正常に表示された以降の配送日時指定の有無は購入者様の任意に変わりございません。 配送希望日時指定の必須化機能も併せて語設定いただくことをご検討いただけますと幸いです。 🗒️2023.3.28 配送希望日時の指定必須化を任意に設定できるようになりました。

    ■コードが機能しない場合

    管理画面でコピーしたコードが機能しない場合、以下のコードに置き換えてうまくいくかお試しください。

    もし上記のコードでもうまくいかない場合は、大変恐縮ながらご利用のテーマの仕様や、カスタマイズ内容などの要因により、本機能の適用が難しいと思われます。弊社の方でもアプリのパフォーマンス改善を目指しておりますので、恐れ入りますが何卒ご理解いただけますと幸いです。

    (c) and.d k.k.

    <script>
      function observeElementAndEnableButton(targetId, buttonId, observerSelector) {
        const targetNode = document.getElementById(targetId.trim()); 
        if (!targetNode) {
          console.error(`Element with ID ${targetId} not found.`);
          return;
        }
    
        const button = document.getElementById(buttonId);
        if (!button) {
          console.error(`Element with ID ${buttonId} not found.`);
          return;
        }
    
        button.disabled = true;
        console.log("--------checkoutを非活性化--------");
    
        if (document.querySelector(observerSelector)) {
          button.disabled = false;
          console.log("--------checkoutを活性化(初期チェック)--------");
          return; 
        }
    
        const config = {
          attributes: true,
          childList: true,
          subtree: true, 
        };
    
        function callback(mutationsList, observer) {
          for (const mutation of mutationsList) {
            if (document.querySelector(observerSelector)) {
              button.disabled = false;
              console.log("--------checkoutを活性化--------");
              observer.disconnect(); 
              return;
            }
          }
        }
    
        const observer = new MutationObserver(callback);
        observer.observe(targetNode, config);
      }
    
      document.addEventListener("DOMContentLoaded", function() {
        observeElementAndEnableButton(
          "cart-delivery-datetime_section_os2",
          "checkout",
          ".delivery-select-container__select"
        );
      });
    </script>