src/js/sections/product.js
/**
   * ProductForm callbacks
   *
   * onOptionChange - Callback for whenever an option input changes
   * onQuantityChange - Callback for whenever an quantity input changes
   * onPropertyChange - Callback for whenever a property input changes
   * onFormSubmit - Callback for whenever the product form is submitted
   */
ProductForm callbacks
onOptionChange - Callback for whenever an option input changes
onQuantityChange - Callback for whenever an quantity input changes
onPropertyChange - Callback for whenever a property input changes
onFormSubmit - Callback for whenever the product form is submitted
ProductForm callbacks onOptionChange - Callback for whenever an option input changes onQuantityChange - Callback for whenever an quantity input changes onPropertyChange - Callback for whenever a property input changes onFormSubmit - Callback for whenever the product form is submitted
handleOptionChange(event) {
    const { variant } = event.dataset;
    stockMessages.forEach((stockMessage) => {
      stockMessage.classList.add('hidden');
      stockMessage.setAttribute('aria-hidden', true);
    });
    if (!variant) {
      addToCartBtn.disabled = true;
      addToCartBtn.innerHTML = unavailable;
      return;
    }
    let stockMessage = document.getElementById(`stock-message-${variant.id}`);
    if (stockMessage) {
      stockMessage.classList.remove('hidden');
      stockMessage.removeAttribute('aria-hidden');
    }
    if (variant.featured_image) {
      this.handleFeaturedImage(variant.featured_image.src, variant.featured_image.alt);
    }
    if (variant === null) {
      addToCartBtn.disabled = true;
      addToCartBtn.innerHTML = unavailable;
    } else if (variant && !variant.available) {
       has
      addToCartBtn.disabled = true;
      addToCartBtn.innerHTML = sold_out;
    } else if (variant && variant.available) {
       has
      addToCartBtn.disabled = false;
      addToCartBtn.innerHTML = `${add_to_cart} &middot; ${formatMoney(variant.price, money_format)}`;
    }
  }
handleOptionChange ( event ) { const { variant } = event . dataset ; stockMessages . forEach ( ( stockMessage ) => { stockMessage . classList . add ( 'hidden' ) ; stockMessage . setAttribute ( 'aria-hidden' , true ) ; } ) ; if ( ! variant ) { addToCartBtn . disabled = true ; addToCartBtn . innerHTML = unavailable ; return ; } let stockMessage = document . getElementById ( ` ${ variant . id } ` ) ; if ( stockMessage ) { stockMessage . classList . remove ( 'hidden' ) ; stockMessage . removeAttribute ( 'aria-hidden' ) ; } if ( variant . featured_image ) { this . handleFeaturedImage ( variant . featured_image . src , variant . featured_image . alt ) ; } if ( variant === null ) { addToCartBtn . disabled = true ; addToCartBtn . innerHTML = unavailable ; } else if ( variant && ! variant . available ) { addToCartBtn . disabled = true ; addToCartBtn . innerHTML = sold_out ; } else if ( variant && variant . available ) { addToCartBtn . disabled = false ; addToCartBtn . innerHTML = ` ${ add_to_cart } ${ formatMoney ( variant . price , money_format ) } ` ; } }
ProductForm callbacks
 onOptionChange - Callback for whenever an option input changes
 onQuantityChange - Callback for whenever an quantity input changes
 onPropertyChange - Callback for whenever a property input changes
 onFormSubmit - Callback for whenever the product form is submitted
ProductForm callbacks onOptionChange - Callback for whenever an option input changes onQuantityChange - Callback for whenever an quantity input changes onPropertyChange - Callback for whenever a property input changes onFormSubmit - Callback for whenever the product form is submitted
// Hide all stock message. // Return and reset if we don't have a variant, // Show stock message for this variant. // Update feature image // The combination of selected options // does not have a matching variant // The combination of selected options has // a matching variant but it is currently unavailable // The combination of selected options has // a matching variant and it is available