Shopify选择产品变体时自动更新local storage（无需手动刷新）

你的问题核心是当前代码仅在页面加载时初始化LocalStorage，变体切换后没有重新获取最新数据并更新。要实现自动更新，需要监听变体切换事件，在事件触发时重新抓取当前选中变体的信息并同步到LocalStorage。

具体步骤： #

• 监听变体切换事件：Shopify产品页中，用户切换变体时会触发variantChange事件，也可直接监听变体选择器的change事件。
• 获取最新变体数据：事件触发时，获取当前选中的变体对象（包含价格、SKU、图片等实时信息）。
• 更新LocalStorage：用最新的变体数据覆盖LocalStorage中对应的字段，无需清空全部存储内容。

修改后的代码示例： #

// 统一定义存储键名
const titleStore = "productTitle";
const descStore = "productDesc";
const imgStore = "productImg";
const priceStore = "productPrice";
const skuStore = "productSku";
const variantStorePrefix = "variants";

// 页面加载时先初始化一次
updateLocalStorageWithCurrentVariant();

// 监听Shopify变体切换事件
document.addEventListener('variantChange', function(event) {
  const selectedVariant = event.detail.variant;
  updateLocalStorageWithCurrentVariant(selectedVariant);
});

// 封装LocalStorage更新逻辑
function updateLocalStorageWithCurrentVariant(variant) {
  const currentVariant = variant || window.currentVariant;
  
  const variantStore = `${variantStorePrefix}${currentVariant.id}`;
  const titlePrint = "{{ product.title }}";
  const pricePrint = Shopify.formatMoney(currentVariant.price, "{{ shop.money_format }}");
  // 处理变体图片尺寸，匹配原代码的720x720规格
  const imgPrint = currentVariant.image 
    ? currentVariant.image.src.replace(/_\d+x\d+\./, '_720x720.') 
    : "{{ product | img_url: '720x720' }}";
  const skuPrint = currentVariant.sku || "";
  const descPrint = "{{ product.description }}";
  const variantPrint = currentVariant.title;
  const detailsPrint = currentVariant.metafields?.variant?.details_specs || "";

  // 更新对应存储字段
  localStorage.setItem(variantStore, variantPrint);
  localStorage.setItem(titleStore, titlePrint);
  localStorage.setItem(descStore, descPrint);
  localStorage.setItem(imgStore, imgPrint);
  localStorage.setItem(priceStore, pricePrint);
  localStorage.setItem(skuStore, skuPrint);
  if (detailsPrint) {
    localStorage.setItem("productDetails", detailsPrint);
  }
}

关键说明： #

• 不要清空全部LocalStorage：原代码的localStorage.clear()会删除所有存储数据，仅更新产品相关字段即可，避免影响其他存储内容。
• 动态获取变体数据：页面加载时的模板标签（如{{ product.selected_variant.title }}）不会随变体切换自动更新，必须通过window.currentVariant或variantChange事件的回调参数获取实时变体对象。
• 图片URL适配：通过替换图片URL中的尺寸参数，保证变体图片和原代码的规格一致。

修改后，用户切换产品变体时LocalStorage会自动同步最新数据，打印页面打开时直接读取即可，无需手动刷新。

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