概要

設定方法

{
  "type": "pre_purchase_checkbox",
  "name": "t:sections.main-product.blocks.pre_purchase_checkbox.name",
  "limit": 1,
  "settings": [
    {
      "type": "text",
      "id": "checkbox_target_tagname",
      "label": "t:sections.main-product.blocks.pre_purchase_checkbox.settings.checkbox_target_tagname.label",
      "info": "t:sections.main-product.blocks.pre_purchase_checkbox.settings.checkbox_target_tagname.info"
    },
    {
      "type": "text",
      "id": "checkbox_comment",
      "label": "t:sections.main-product.blocks.pre_purchase_checkbox.settings.checkbox_comment.label",
      "default": "商品をカートに追加いただく前に、下記の内容にご同意ください。"
    },
    {
      "type": "textarea",
      "id": "checkbox_label1",
      "label": "t:sections.main-product.blocks.pre_purchase_checkbox.settings.checkbox_label1.label",
      "info": "t:sections.main-product.blocks.pre_purchase_checkbox.settings.checkbox_label1.info"
    },
    {
      "type": "textarea",
      "id": "checkbox_label2",
      "label": "t:sections.main-product.blocks.pre_purchase_checkbox.settings.checkbox_label2.label",
      "info": "t:sections.main-product.blocks.pre_purchase_checkbox.settings.checkbox_label2.info"
    },
    {
      "type": "textarea",
      "id": "checkbox_label3",
      "label": "t:sections.main-product.blocks.pre_purchase_checkbox.settings.checkbox_label3.label",
      "info": "t:sections.main-product.blocks.pre_purchase_checkbox.settings.checkbox_label3.info"
    }
  ]
}

"pre_purchase_checkbox": {
  "name": "購入前チェックボックス",
  "settings": {
    "checkbox_target_tagname": {
      "label": "対象のタグ名",
      "info": "このタグが付与されている商品にチェックボックスが表示されます。"
    },
    "checkbox_comment": {
      "label": "許諾に関するコメント"
    },
    "checkbox_label1": {
      "label": "購入前許諾内容①",
      "info": "購入前に許諾を取る内容について記載してください。"
    },
    "checkbox_label2": {
      "label": "購入前許諾内容②",
      "info": "購入前に許諾を取る内容について記載してください。"
    },
    "checkbox_label3": {
      "label": "購入前許諾内容③",
      "info": "購入前に許諾を取る内容について記載してください。"
    }
  }
}

{%- when 'pre_purchase_checkbox' -%}
  {% assign show_pre_purchase_checkbox = false %}
  {% if product.tags contains block.settings.checkbox_target_tagname %}
    {% assign show_pre_purchase_checkbox = true %}
  {% elsif block.settings.checkbox_target_tagname == '' %}
    {% assign show_pre_purchase_checkbox = true %}
  {% endif %}

  {% if show_pre_purchase_checkbox %}
    <div class="pre_purchase_checkbox-wrapper">
      {%  unless block.settings.checkbox_comment == '' %}<h3>{{ block.settings.checkbox_comment }}</h3>{% endunless %}
      <ul>
      {% if block.settings.checkbox_label1 != "" %}
        <li>
          <input 
            type="checkbox" 
            value="{{- block.settings.checkbox_label1 | escape -}}" 
            id="pre_purchase_checkbox-1" 
            class="pre-purchase-checkbox"
          >
          <label for="pre_purchase_checkbox-1">{{- block.settings.checkbox_label1 -}}</label>
        </li>
      {% endif %}
      {% if block.settings.checkbox_label2 != "" %}
        <li>
          <input 
            type="checkbox" 
            value="{{- block.settings.checkbox_label2 | escape -}}" 
            id="pre_purchase_checkbox-2" 
            class="pre-purchase-checkbox"
          >
          <label for="pre_purchase_checkbox-2">{{- block.settings.checkbox_label2 -}}</label>
        </li>
      {% endif %}
      {% if block.settings.checkbox_label3 != "" %}
        <li>
          <input 
            type="checkbox" 
            value="{{- block.settings.checkbox_label3 | escape -}}" 
            id="pre_purchase_checkbox-3" 
            class="pre-purchase-checkbox"
          >
          <label for="pre_purchase_checkbox-3">{{- block.settings.checkbox_label3 -}}</label>
        </li>
      {% endif %}
      </ul>
    </div>
    <script>
    window.addEventListener('DOMContentLoaded', (event) => {
      let quitPurchase = null;
      const prePurchaseCheckboxs = document.querySelectorAll('.pre-purchase-checkbox');
      const quitPurchaseMessage = `全ての条件にご同意いただけない場合<br>ご購入頂けません`;
      const checkAvailabilityForPurchase = () => {
        let allChecked = false;
        if (prePurchaseCheckboxs.length > 0 ){
          let checkedCounter = 0;
          for (let i = 0; i < prePurchaseCheckboxs.length; i++) {
            if (prePurchaseCheckboxs[i].checked) checkedCounter += 1;
          }
          if (prePurchaseCheckboxs.length == checkedCounter) allChecked = true;
        } else {
          allChecked = true;
        }
        quitPurchase = document.querySelector('#quit-purchase')
            || document.createRange().createContextualFragment(`<div id="quit-purchase">${quitPurchaseMessage}</div>`);
        const productFormButtons = document.querySelector('.product-form__buttons');
        productFormButtons.style.position = 'relative';
        if (productFormButtons) {
          if(allChecked) {
            if (quitPurchase) productFormButtons.removeChild(quitPurchase);
          } else {
           if (quitPurchase) productFormButtons.appendChild(quitPurchase);
          }
        }
      }
      prePurchaseCheckboxs.forEach(checkbox => {
        checkbox.addEventListener('change', checkAvailabilityForPurchase);
      });
      checkAvailabilityForPurchase();
    });
  </script>
  <style>
    .pre_purchase_checkbox-wrapper {
      border: 1px solid  #000;
      background-color: #EFEFEF;
      padding: 1em;
      border-radius: 8px;
    }
    .pre_purchase_checkbox-wrapper h3 {
      margin: 1rem 0;
      font-size: 14px;
    }
    .pre_purchase_checkbox-wrapper ul {
      margin: 0;
      padding: 0;
    }
    .pre_purchase_checkbox-wrapper li {
      list-style-type: none;
      line-height: 1.4;
      margin-bottom: 0.5em;
    }
    .pre_purchase_checkbox-wrapper label {
      font-size: 14px;
    }
    #quit-purchase {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 20px; background-color: rgba(0, 0, 0, 1);
      z-index: 9999; display: flex; align-items: center; justify-content: center; text-align: center; color: #FFF;
      font-size: 14px; font-weight: bold; line-height: 1.2;
    }
  </style>
  {% endif %}