商品ページ統合

<script>

  // DOMContentLoadedでスクリプトを実行し、サイトのロード時間に影響を与えないようにする
  window.addEventListener('DOMContentLoaded', function(){
  
   // protegerのオファーを表示する前に、protegerがウィンドウ内に存在し、アクティブな通貨がJPYであるかどうかをチェックします。
  if (window.Proteger && window.ProtegerShopify && window.Shopify.currency.active === "JPY" && meta.page.pageType === "product") {
  
    /************************/
    /* Initial Variables */
    /************************/
    const productFormSelector = 'ADD SELECTOR HERE'; // フォーム要素のセレクタに変更
    const addToCartButtonSelector = 'ADD SELECTOR HERE'; // [カートに追加する]ボタンのセレクタに変更
    const productForm = document.querySelector(productFormSelector);
    const addToCartButton = productForm.querySelector(addToCartButtonSelector);
    const protegerOffer = document.createElement('div');// プランを表示するシンボルエレメント
    protegerOffer.id = 'proteger-offer';
    addToCartButton.parentElement.insertBefore(protegerOffer, addToCartButton);
  
    /************************/
    /* initProductOffer */
    /************************/
    // プランの初期化、PDP ATCボタン機能の処理
    function initProductOffer() {
  
     // safe機能
     if(!productForm || !addToCartButton || !protegerOffer) return;

     // 商品がproteger保証かどうかを確認し、保証の場合はATCを無効化する。
     function isProteger() {
      if(meta.product && meta.product.vendor === 'proteger'){
       addToCartButton.disabled = true;
      }
     }
  
     // 商品がproteger保証かどうかを確認し、保証の場合はATCを無効化する。
     isProteger();
  
     let variantId;

     // productForm の変更をlistenし、variantID を介してactiveProduct を設定します。
     productForm.addEventListener('change', function () {
       variantId = productForm.id.value
       if (variantId) {
         // コンポーネント取得
         const component = Proteger.buttons.instance('proteger-offer');
         // 保証プランを再レンダリング
         component.setActiveProduct(variantId);
         isProteger();
       }
     });

     // productForm から variantId を取得し、初期プランをレンダリングします。
     variantId = productForm.id.value;
     Proteger.buttons.render('proteger-offer', {
       productId: variantId, 
     });

  
     //[カートに追加]ボタンのハンドラー
     function handleAddToCart(e) {
      e.preventDefault();
      e.stopImmediatePropagation();
  
      const quantityEl = document.querySelector('[name="quantity"]');
      const quantity = quantityEl && quantityEl.value;

      // 保証プランコンポーネントを取得
      const component = Proteger.buttons.instance('proteger-offer');
      
      // 選択された保証プランを取得
      const plan = component.getPlanSelection();
       
      ProtegerShopify.addPlanToCart({
        productId: variantId,
        plan: plan,
        quantity: quantity,
        productHandler: function () {
          addToCartButton.removeEventListener('click', handleAddToCart, true);
          addToCartButton.click();
          addToCartButton.addEventListener('click', handleAddToCart, true);
        },
        modal: true,
      });
     }
  
     //ATCをクリックするとhandleAddToCartが実行され、イベントをキャプチャ
     addToCartButton.addEventListener('click', handleAddToCart, true);
  
    }
  
    // 初期レンダリング
    initProductOffer();
   }
  
  })
  
 </script>
  
 <style>
  
  .proteger-offer {
   padding-bottom: 5px;
  }
  
 </style>

const productFormSelector = 'ADD SELECTOR HERE'; // フォーム要素のセレクタに変更
const addToCartButtonSelector = 'ADD SELECTOR HERE'; // [カートに追加する]ボタンのセレクタに変更