在BigCommerce商品列表页获取商品选项/属性问题求助

I’ve run into this exact issue before—BigCommerce intentionally returns a trimmed-down product summary object on category/search/list pages to keep load times fast, which excludes the Options property by default. Here’s how to get those options showing up in your templates/components/products/card.html without relying on quick view:

Why You Can’t See Options Right Now #

By design, product list endpoints (like category pages) don’t return full product details. The id, name, and sku fields are included in the summary, but Options is only part of the full product detail object you’d get on a product’s individual page.

Solution 1: Async Fetch with getJSON (Quickest Implementation) #

Use Stencil’s built-in {{getJSON}} tag to pull the full product data for each card, then render the options. This avoids modifying core API requests and works with most themes:

1. First, remove the quick view component from your card.html:

   {{!-- Delete or comment out this line --}}
   {{> components/products/quick-view}}
   

2. Add this code block below your product title to fetch and display options:

   <h3 class="product-name">{{name}}</h3>
   {{!-- New: Product Options Section --}}
   <div class="product-options" data-product-id="{{id}}">
     <span class="loading-options">Loading options...</span>
   </div>
   
   <script>
     {{getJSON (append '/api/products/' id)}}
       .then(fullProduct => {
         const optionContainer = document.querySelector(`.product-options[data-product-id="${fullProduct.id}"]`);
         if (!fullProduct.options || fullProduct.options.length === 0) {
           optionContainer.innerHTML = '<p>No options available</p>';
           return;
         }
   
         // Build options HTML
         let optionsHtml = '<ul class="product-options-list">';
         fullProduct.options.forEach(option => {
           const valueLabels = option.values.map(val => val.label).join(', ');
           optionsHtml += `<li><strong>${option.display_name}:</strong> ${valueLabels}</li>`;
         });
         optionsHtml += '</ul>';
   
         optionContainer.innerHTML = optionsHtml;
       })
       .catch(err => {
         console.error('Failed to load product options:', err);
         document.querySelector(`.product-options[data-product-id="{{id}}"]`).innerHTML = '<p>Error loading options</p>';
       });
   </script>
   

3. Add some basic CSS to style the options (optional but recommended):

   .product-options-list {
     margin: 0.5rem 0;
     padding-left: 1.2rem;
     font-size: 0.9rem;
   }
   .loading-options {
     color: #666;
     font-style: italic;
   }
   

Solution 2: Modify List API Request (Better Performance for Large Catalogs) #

If you have a lot of products, async fetching each one individually can slow down the page. Instead, modify your theme’s product list API call to include the Options field upfront:

1. Open your theme’s assets/js/theme/product-list.js file (the exact filename may vary by theme).
2. Find the API request that fetches products for the list page. Look for a URL like /api/products?category_id={{category.id}}.
3. Add the include=options query parameter to the URL:

   // Example modified API URL
   const apiUrl = `/api/products?category_id=${categoryId}&include=options`;
   

4. Now you can directly render options in card.html without async code:

   <h3 class="product-name">{{name}}</h3>
   {{#if options.length}}
     <div class="product-options">
       <ul>
         {{#each options}}
           <li><strong>{{display_name}}:</strong> {{#each values}}{{label}}{{#unless @last}}, {{/unless}}{{/each}}</li>
         {{/each}}
       </ul>
     </div>
   {{else}}
     <p>No options available</p>
   {{/if}}
   

   Note: This increases the payload size of your list page—test performance if you have hundreds of products.

Key Notes to Avoid Headaches #

• Clear Theme Cache: After making changes, go to your BigCommerce Theme Editor and click "Clear Cache" to ensure updates take effect.
• Handle Edge Cases: Some products won’t have options, so always add {{#if options.length}} checks to avoid empty elements or errors.
• CSP Restrictions: If the getJSON method throws errors, check your theme’s Content Security Policy settings to ensure API requests are allowed.

内容的提问来源于stack exchange，提问作者WebPlanex Infotech