Shopify选项选择器无法更新价格问题求助

Hey there, let's walk through how to track down why your product options are displaying correctly but the price isn't updating when selections change—especially since this started after installing the Bold plugin.

First, Check for Console Errors #

Start by opening your browser's DevTools (F12) and switching to the Console tab. Refresh the product page and play around with the option selectors. Look for any JavaScript errors related to Bold (e.g., BoldProductOptions undefined) or Shopify's native product form logic. Even a small error can break the entire price update chain.

Verify Variant Data is Being Retrieved Correctly #

When an option changes, your code needs to fetch the corresponding product variant (which includes the correct price). Let's test this with a quick snippet you can run directly in the Console:

// Target your option selector (adjust the selector if your form uses different classes)
const optionSelect = document.querySelector('.product-form__input select');
optionSelect.addEventListener('change', () => {
  // Check if Shopify's native variant logic is working
  if (window.Shopify?.ProductForm) {
    const currentVariant = Shopify.ProductForm.getCurrentVariant();
    console.log('Native Shopify Variant:', currentVariant);
  }
  // Check if Bold's variant tracking is active
  if (window.BoldProductOptions) {
    console.log('Bold Selected Variant:', BoldProductOptions.selectedVariant);
  }
});

If either currentVariant or selectedVariant returns null or doesn't show the correct price, that's a clear sign your option changes aren't mapping to the right variant data.

Inspect Event Listeners on Option Selectors #

Bold often overrides native Shopify event listeners for option changes. Go to the Elements tab in DevTools, select one of your option dropdowns, then check the Event Listeners panel (under the "Listeners" tab). Look for:

• Conflicting change events (both native Shopify and Bold might be trying to handle the same event)
• Events that use stopPropagation() or preventDefault(), which could block the price update trigger from firing

Check Price Update Logic in product-form.liquid #

Open your product-form.liquid snippet and look for code that handles price updates. Common scenarios to verify:

• If you restored native Shopify logic, make sure the variant:change event is being listened to, and that it's updating the price element correctly. For example:

  document.addEventListener('variant:change', (event) => {
    const variant = event.detail.variant;
    if (variant) {
      document.querySelector('.product-price').textContent = Shopify.formatMoney(variant.price);
    }
  });
  

• If Bold's logic is still supposed to handle pricing, ensure that BoldProductOptions.init() or similar initialization code runs after your form loads, and that it targets the correct price element in your template.

Confirm Price Element Targeting in product.template #

In your product.template file, check the price display element (e.g., <span class="product-price">...</span>). Bold often requires specific class names or IDs to hook into for price updates. If you modified the element's classes when restoring the option selector, Bold's code might no longer find it to update the price. Look for comments or references to Bold in the template that indicate the expected selector.

Test Disabling Bold Temporarily (Safely) #

As a quick sanity check, you can temporarily disable the Bold plugin in your Shopify admin and see if the price updates work with your restored option selector. If it does, the issue is definitely a misalignment between your custom form logic and Bold's pricing hooks.

内容的提问来源于stack exchange，提问作者Dustin Lee