カートページ統合

<script>
    //DOMContentLoadedでスクリプトを実行し、サイトのロード時間に影響を与えないようにする
    window.addEventListener('DOMContentLoaded', function(){
   
     //protegerのプランを表示する前に、protegerがウィンドウ内に存在し、アクティブな通貨がJPYであるかどうかをチェックします。
     if (window.Proteger && window.ProtegerShopify && window.ProtegerCart && window.Shopify.currency.active === 'JPY') {
   
      /*****************************************/
      /* Global Variables - THEME SPECIFIC */
      /*****************************************/
   
      let cartRowItem = 'ADD SELECTOR HERE'; // cartのitem列のセレクタに変更
      let cartRowItemTitle = 'ADD SELECTOR HERE'; // cartのitemタイトルのセレクタに変更
      let cartRowItemQuantity = 'ADD SELECTOR HERE'; // cartのitem数量のセレクタに変更
      
      /***************************************/
      /* Global Variables - No Change Needed */
      /***************************************/
      let planClass = 'proteger-cart-plan'; // 各 proteger プランに割り当てられるクラス
      let localCart = {{ cart | json }}; // 初期ロード時のShopify Cart Object
   
      // safe機能
      if(!localCart) return;
   
      /***********************/
      /* util functions */
      /***********************/
      // findAll(element) -ドキュメント内の子要素または親要素を検索するためのquerySelectorAll
      function findAll(elementToFind, parentElement) {
       const items = parentElement ? parentElement.querySelectorAll(elementToFind) : document.querySelectorAll(elementToFind);
       return items;
      }
   
      /***********************/
      /* createElement */
      /***********************/
      // createElement(product) - product 要素を取り込み、proteger プラン 要素を作成 + プランを追加する
      function createElement(product, index){
   
       // 新しいプランを作成する前に、既存のプランを削除
       let protegerPlan = product.querySelector('.' + planClass);
       if (protegerPlan) protegerPlan.remove();
   
       // variantIdを取得
       let variantId = localCart.items[index].id;
   
       // 数量を取得
       let quantity = product.querySelector(cartRowItemQuantity).value;
   
       //プランを追加する親コンテナ
       let container = product.querySelector(cartRowItemTitle);
   
       // safe機能
       if(!variantId || !quantity || !container) return;
   
       // 新規に要素を作成し、class、data-proteger-variant、data-proteger-quantity属性を設定する。
       let newProtegerPlan = document.createElement('div');
       newProtegerPlan.className = planClass;
       newProtegerPlan.setAttribute('data-proteger-variant', variantId);
       newProtegerPlan.setAttribute('data-proteger-quantity', quantity);
   
       // コンテナ要素にオファーを追加する (THEME SPECIFIC)
       container.append(newProtegerPlan);
   
      }
   
      /************************/
      /* Handle Styling */
      /************************/
      // すべての cartRowItemsを検索し、プランにスタイルを適用
      function handleStyling() {
   
       findAll(cartRowItem).forEach(function(el, index) {
   
        // itemのタイトルを取得
        let title = el.querySelector(cartRowItemTitle);
   
        // safe機能
        if(!title) return;
   
        // protegerプランであればリンクを削除
        if (title.innerText.toLowerCase().indexOf('proteger') > -1) {
   
         // pointerEventを無効化
         title.style.pointerEvents = 'none';
         const image = el.querySelector('.cart-item__media');
         if (image) image.style.pointerEvents = 'none';
   
        } else {
         // 各itemにプラン要素を作成
         createElement(el, index);
        }
   
       });
   
      }
   
      /************************/
      /* initializeCartPlan */
      /************************/
      // handleStylingを実行し、カートにある全てのプランを見つけ、正規化とバランス調整
      function initializeCartPlan() {
   
       // スタイリング、プラン要素作成
       handleStyling();
   
       // 全てのプラン要素を検索
       findAll('.' + planClass).forEach(function(el){
   
        // atrributeを取得
        let variantId = el.getAttribute('data-proteger-variant');
        let quantity = el.getAttribute('data-proteger-quantity');
   
        // もしプランがカートにある場合return
         if (ProtegerCart.warrantyAlreadyInCart(variantId, localCart.items)) {
          return;
        }
   
        // ボタンをレンダリング
        ProtegerCart.renderSimplePlan(el, {
          referenceId: variantId,
          quantity: quantity,
        });
       })
   
        // 正規化により、商品とプランを1:1にする
        ProtegerCart.normalizeCart({cart: localCart, balance: true}, function() {
          ProtegerCart.hardRefresh();
        });
      }

      // カートの内容が変わった場合のイベントをlisten
      window.addEventListener("normalizeCart", function () {
        ProtegerCart.getShopifyCart(function(newCart) {
          localCart = newCart;
          initializeCartPlan();
        });
      });
   
      // 初回レンダリング時
      initializeCartPlan();
   
     }
    });
   
   </script>

let cartRowItem = 'ADD SELECTOR HERE'; // cartのitem列のセレクタに変更
let cartRowItemTitle = 'ADD SELECTOR HERE'; // cartのitemタイトルのセレクタに変更
let cartRowItemQuantity = 'ADD SELECTOR HERE'; // cartのitem数量のセレクタに変更

window.dispatchEvent(new CustomEvent('normalizeCart'));