Online Store 2.1 浏览器标准事件​

<variant-selects>
  <label>
    <input type="checkbox" value="blue" name="variant-input-blue" />
    blue
  </label>
  <label>
    <input type="checkbox" value="red" name="variant-input-red" />
    red
  </label>
</variant-selects>

class VariantSelects extends HTMLElement {
  constructor() {
    super();
    this.variantInputs = this.querySelectorAll('input[name^="variant-input"]');
    this.variantStore = new Set();
    this.variantInputs.forEach((variantInput) => {
      variantInput.addEventListener('change', (event) => {
        const elem = event.target;
        if (elem.checked) {
          this.variantStore.add(elem.value);
        } else {
          this.variantStore.delete(elem.value);
        }
        console.log('variant changed: ', Array.from(this.variantStore));
      });
    });
  }
}
customElements.define('variant-selects', VariantSelects);

<product-form class="product-form" data-default-error-message="{{t 'products.general.no_product_data_found'}}">
  {{#form "product" product id=product_form_id}}
    <div class="product-form__buttons">
      <button
        id="{{product_form_id}}-submit"
        type="submit"
        name="add"
        class="product-form__submit button button--full-width button--secondary"
        {{#unless product.selected_or_first_available_variant.available}}
          disabled
        {{/unless}}
      >
        <span>
          {{#if product.selected_or_first_available_variant.available}}
            {{t "products.product_list.add_to_cart"}}
          {{else}}
            {{t "products.general.sold_out"}}
          {{/if}}
        </span>
        {{snippet "loading-overlay-spinner"}}
      </button>
      {{payment_button}}
    </div>
  {{/form}}
</product-form>

class ProductForm extends HTMLElement {
  constructor() {
    super();
    this.submitButton = this.querySelector('[type="submit"]');
    this.submitButton.addEventListener('click', this.submitButtonClickHandler.bind(this));
  }
  // Because the editor hijack the a tag click event, the click event needs to be bound to prevent bubbling
  submitButtonClickHandler(e) {
    e.preventDefault();
    e.stopPropagation();
    this.onSubmitHandler();
  }
  onSubmitHandler() {
    if (this.submitButton.classList.contains('disabled') || this.submitButton.classList.contains('loading')) return;
    
    const config = {
      method: 'POST',
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        Accept: `application/json`,
      },
    };
    const formData = new FormData(this.form);
    config.body = formData;
    fetch(`${window.routes.cart_add_url}`, config)
      .then((response) => response.json())
      .then((response) => {
        // 这里处理加购后的逻辑
      })
      .finally(() => {
        this.submitButton.classList.remove('loading');
      });
  }
};
customElements.define('product-form', ProductForm);

<predictive-search class="main-search__content">
  <form action="{{ routes.search_url }}" method="get" class="main-search__form search">
    <div class="main-search__field field">
      <input
        id="main-search-input"
        class="main-search__input field__input body3"
        type="search"
        name="keyword"
        value="{{ search.terms }}"
        placeholder="{{ t 'general.search.search' }}"
        maxlength="255"
        autocorrect="off"
        autocomplete="off"
        autocapitalize="off"
        spellcheck="false"
      >
      <label class="main-search__field-label field__label body3" for="main-search-input">{{ t 'general.search.search' }}</label>
      <button class="main-search__submit-button">
        {{snippet 'icon-search'}}
      </button>
    </div>
    <div class="predictive-search global-modal-border-shadow" tabindex="-1">
      <div class="predictive-search__results" data-predictive-search></div>
      <div class="predictive-search__loading-state">
        <span class="predictive-search__spinner">
          {{ snippet 'icon-loading' }}
        </span>
      </div>
    </div>
  </form>
</predictive-search>

class PredictiveSearch extends BaseElement {
  constructor() {
    super();
    this.input = this.querySelector('input[type="search"]');
    this.setupEventListeners();
  }
  get query() {
    return this.input.value.trim();
  }
  setupEventListeners() {
    const form = this.querySelector('form.search');
    form.addEventListener('submit', this.onFormSubmit.bind(this));
    this.input.addEventListener('input', window.debounce(this.onChange.bind(this), 300));
    this.input.addEventListener('focus', this.onFocus.bind(this));
    this.addEventListener('focusout', this.onFocusOut.bind(this));
    this.addEventListener('keyup', this.onKeyup.bind(this));
    this.addEventListener('keydown', this.onKeydown.bind(this));
  }
  onFormSubmit(event) {
    if (!this.query.length || this.querySelector('[selected="true"]')) event.preventDefault();
  }
  onChange() {
    // 通过 this.query 获取查询关键字来搜索商品
  }
  onFocus() {
    // 鼠标光标进入输入框
  }
  onFocusOut() {
    // 鼠标光标离开输入框
  }
  onKeyup() {
    // 监听并处理键盘按键事件
  }
  onKeydown(event) {
    if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
      event.preventDefault();
    }
  }
}
customElements.define('predictive-search', PredictiveSearch);