【shopify】商品ページにパスコード認証を実装する方法(購入制限機能)

{
  "type": "header",
  "content": "パスコード"
},
{
  "type": "text",
  "id": "passcode_title",
  "default": "パスコード",
  "label": "パスコードタイトル"
},
{
  "type": "textarea",
  "id": "passcode_text",
  "default": "お伝えしたパスコードを入力して、購入にお進みください。",
  "label": "パスコード案内文"
},
{
  "type": "text",
  "id": "passcode_placeholder",
  "default": "パスコード",
  "label": "パスコード入力欄の文字"
},
{
  "type": "text",
  "id": "passcode_submit_text",
  "default": "送信",
  "label": "送信ボタンテキスト"
},
{
  "type": "text",
  "id": "passcode_error_text",
  "default": "パスコードが違います。もう一度入力してください",
  "label": "エラーテキスト"
}

{%- liquid
  assign gate_passcode = product.metafields.custom.passcode.value | strip
-%}
{%- if gate_passcode != blank -%}
  <passcode-gate class="passcode-gate" data-passcode="{{ gate_passcode | escape }}">
    <div class="passcode-gate__title">{{ block.settings.counseling_title }}</div>
    <p class="passcode-gate__text">{{ block.settings.counseling_text | newline_to_br }}</p>
    <a class="passcode-gate__reservation-btn" href="{{ block.settings.reservation_link | default: '#' }}">
      {{ block.settings.reservation_button_text }}
    </a>
    <div class="passcode-gate__title passcode-gate__title--passcode">{{ block.settings.passcode_title }}</div>
    <p class="passcode-gate__text">{{ block.settings.passcode_text | newline_to_br }}</p>
    <p class="passcode-gate__error" hidden>{{ block.settings.passcode_error_text }}</p>
    <form class="passcode-gate__form">
      <input
        type="text"
        class="passcode-gate__input"
        placeholder="{{ block.settings.passcode_placeholder }}"
        autocomplete="off"
        autocapitalize="characters"
        autocorrect="off"
        spellcheck="false"
      >
      <button type="submit" class="passcode-gate__submit">{{ block.settings.passcode_submit_text }}</button>
    </form>
  </passcode-gate>
{%- endif -%}

<div
  class="product-form{% if gate_passcode != blank %} passcode-hidden{% endif %}"
>

<script>
  if (!customElements.get('passcode-gate')) {
    customElements.define(
      'passcode-gate',
      class PasscodeGate extends HTMLElement {
        normalizeInput() {
          const normalized = this.input.value
            .replace(/[！-～]/g, (ch) => String.fromCharCode(ch.charCodeAt(0) - 0xFEE0))
            .replace(/[^\x21-\x7E]/g, '')
            .toUpperCase();
          if (this.input.value !== normalized) {
            this.input.value = normalized;
          }
        }

        connectedCallback() {
          this.form = this.querySelector('.passcode-gate__form');
          this.input = this.querySelector('.passcode-gate__input');
          this.error = this.querySelector('.passcode-gate__error');

          this.composing = false;
          this.input.addEventListener('compositionstart', () => {
            this.composing = true;
          });
          this.input.addEventListener('compositionend', () => {
            this.composing = false;
            this.normalizeInput();
          });
          this.input.addEventListener('input', () => {
            if (this.composing) return;
            this.normalizeInput();
          });

          this.form.addEventListener('submit', (event) => {
            event.preventDefault();
            const entered = this.input.value.trim().toUpperCase();
            const passcode = (this.dataset.passcode || '').trim().toUpperCase();

            if (entered !== '' && entered === passcode) {
              this.error.hidden = true;
              this.hidden = true;
              const productForm = this.parentElement.querySelector('.product-form.passcode-hidden');
              if (productForm) productForm.classList.remove('passcode-hidden');
            } else {
              this.error.hidden = false;
            }
          });
        }
      }
    );
  }
</script>

/* パスコード認証 */
.passcode-hidden {
  display: none !important;
}

.passcode-gate {
  display: block;
  background-color: #f3f3ee;
  border-radius: 5px;
  padding: 24px 40px 49px;
}

.passcode-gate[hidden] {
  display: none !important;
}

.passcode-gate__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 55px;
  letter-spacing: 0.05em;
  color: #596783;
}

.passcode-gate__title--passcode {
  margin-top: 16px;
}

.passcode-gate__text {
  font-size: 13px;
  line-height: 22px;
  color: #495775;
  margin: 0;
}


.passcode-gate__error {
  margin: 12px 0 0;
  font-weight: 700;
  font-size: 13px;
  color: #ff0000;
  text-align: center;
}

.passcode-gate__form {
  display: flex;
  width: 100%;
  margin-top: 12px;
}

.passcode-gate__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  padding: 0 16px;
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  border-right: none;
  border-radius: 5px 0 0 5px;
  font-size: 16px;
}

.passcode-gate__submit {
  flex: 0 0 auto;
  height: 50px;
  padding: 0 24px;
  background-color: #596783;
  border: none;
  border-radius: 0 5px 5px 0;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
}