购物车页面产品变体仅静态显示，需实现动态加载至指定Div

问题分析 #

当前代码存在两个核心问题：

• 全局初始化的Shopify.OptionSelectors无法对应购物车中的每个独立商品项，仅能绑定到页面中第一个匹配product-description的元素
• renderCart函数中生成的product-description容器是静态空div，未关联对应商品的变体数据

修改方案 #

1. 调整renderCart函数，为每个商品容器添加唯一标识 #

在生成商品描述容器时，添加唯一ID和商品handle属性，确保每个购物车项的容器独立可识别：

function renderCart(cart) {
  clearCartDrawer();

  cart.items.forEach(function(item, index) {
    // 生成唯一容器ID，避免重复冲突
    const uniqueContainerId = `product-description-${index}`;
    const productImage = `<img class="ajax-cart-item__image" src="${item.image}" >`;
    // 为容器添加唯一ID和商品handle属性，用于后续绑定变体选择器
    const productTitle = `<div id="${uniqueContainerId}" class="product-description" data-product-handle="${item.product_handle}"></div>`;
    const productQuantity = `<div class="ajax-cart-item__quantity"> <div class="counter"><button class="down" data-id=${item.id} onClick="decreaseCount(event, this)">-</button><input type="text" class="vln" value="${item.quantity}" min="0" /><button class="up" data-id=${item.id} onClick="increaseCount(event, this)">+</button></div></div>`;
    const productIcon = `<i data-id="${item.variant_id}" class="fa-solid fa-trash"></i>`;
    const productPrice = `<div class="ajax-cart-item__price">${item.line_price}</div>`;
    
    $('.mainpartclass').append(`<tr> <td>${productImage}</td> <td>${productTitle}</td> <td>${productQuantity}</td><td>${productIcon}</td> <td>${productPrice}</td></tr>`);

    // 为当前商品项初始化变体选择器
    initItemVariantSelector(uniqueContainerId, item.product_handle);
  });
}

2. 添加商品变体选择器初始化函数 #

通过商品handle请求完整产品数据，为每个独立容器绑定变体选择器：

function initItemVariantSelector(containerId, productHandle) {
  // 请求对应商品的完整变体数据
  $.ajax({
    type: 'GET',
    url: `/products/${productHandle}.js`,
    dataType: 'json',
    success: function(product) {
      // 为当前容器初始化Shopify变体选择器
      new Shopify.OptionSelectors(containerId, {
        product: product,
        onVariantSelected: function(variant) {
          // 变体选中后更新当前行的价格和变体ID
          const targetRow = $(`#${containerId}`).closest('tr');
          targetRow.find('.ajax-cart-item__price').text(variant.price);
          targetRow.find('.fa-trash').attr('data-id', variant.id);
          // 可选：调用Shopify.cart.updateItem实现购物车项实时更新
        },
        enableHistoryState: true
      });
    }
  });
}

3. 移除全局冲突代码 #

删除原来全局初始化的Shopify.OptionSelectors代码，避免与每个商品项的独立选择器冲突：

// 移除以下全局代码
var selectCallback = function(variant, selector) {
  console.log(selector.product.variants)
}

new Shopify.OptionSelectors('product-description', {
  product: {
    {
      product | json
    }
  },
  onVariantSelected: selectCallback,
  enableHistoryState: true
});

关键说明 #

• 每个购物车商品项对应独立的变体选择器，通过唯一ID和商品handle实现关联
• 利用Shopify官方/products/{handle}.js接口获取完整的产品变体数据
• 变体选中时可实时更新当前行的价格、变体ID，也可扩展实现购物车项的动态更新

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