动态创建的Shopify商品变体购物车价格显示为0的问题

问题概述 #

为何新创建的商品变体可加入购物车，但购物车中显示错误价格（0.00），仅在数秒后刷新页面才会更新为正确价格？

详细信息 #

添加含动态创建变体的商品后，购物车立即显示错误价格（0元），但多次刷新购物车后，正确价格会显示出来。

复现步骤 #

• 加载商品页面
• 执行以下操作：
  • 创建带自定义价格的新变体
  • 验证可通过Admin和Storefront GraphQL API获取正确价格
  • 使用新变体将商品加入购物车
  • 在新标签页打开购物车检查

预期行为

添加商品后，购物车应立即显示正确价格。

实际行为

购物车初始显示价格为0，但刷新后会显示正确价格。

额外信息 #

• 主题：Dawn Theme
• 自定义修改：未对主题进行特定修改
• 变体创建：因店铺价格基于复杂的商品配置和定价规则，需动态创建变体，使用的脚本如下：

动态创建变体的JavaScript代码 #

// Constants for improved security and maintainability
const SHOPIFY_DOMAIN = 'https://xxxxxxxxx.myshopify.com';  // Replace with your actual domain
const SHOPIFY_API_VERSION = '2024-07';
const SHOPIFY_ACCESS_TOKEN = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; // Replace with your actual access token (store securely)
const SHOPIFY_STOREFRONT_ACCESS_TOKEN = 'xxxxxxxxxxxxxxxxxxxxxx' // Replace with your actual access token (store securely)

// Function to execute the GraphQL mutation and update the DOM
async function createProductVariant() {

  // Define the fixed product ID and price
  const productId = "1234756483"; 
  const price = "10.00";
  const compareAtPrice = "18.00";

  // Generate a random name
  const randomName = 'Variant_' + Math.random().toString(36).substring(2, 15);

  // Prepare the GraphQL mutation with the fixed product ID and price
  const graphql = JSON.stringify({
    query: `
      mutation productVariantsBulkCreate(
        $productId: ID!,
        $variants: [ProductVariantsBulkInput!]!
      ) {
        productVariantsBulkCreate(productId: $productId, variants: $variants) {
          product { id }
          productVariants {
            id
            title
            price
            compareAtPrice
          }
          userErrors {
            field
            message
          }
        }
      }
    `,
    variables: {
      productId: `gid://shopify/Product/${productId}`,
      variants: [
        {
          optionValues: {
            optionName: "Title",
            name: randomName,
          },
          price: price,
          compareAtPrice: compareAtPrice,
          inventoryItem: {
            tracked: false,
          },
        },
      ],
    },
  });

  try {
    console.log("graphql: ", graphql);
    const response = await fetch(`${SHOPIFY_DOMAIN}/admin/api/${SHOPIFY_API_VERSION}/graphql.json`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Access-Token': SHOPIFY_ACCESS_TOKEN, // Consider using environment variables
      },
      body: graphql
    });
    const result = await response.json();

    // Check for errors
    if (result.errors || result.data.productVariantsBulkCreate.userErrors.length > 0) {
      console.error('GraphQL errors:');
      // Print all user errors
      if (result.errors) {
        result.errors.forEach(error => console.error(` - ${error.message}`));
      }
      if (result.data.productVariantsBulkCreate.userErrors) {
        result.data.productVariantsBulkCreate.userErrors.forEach(error => console.error(` - Field: ${error.field}, Message: ${error.message}`));
      }
      return;
    }

    // Extract the productVariant ID (Global ID format)
    const productVariantGlobalId = result.data.productVariantsBulkCreate.productVariants[0].id;

    // Convert the Global ID to a numeric ID
    const productVariantId = extractNumericId(productVariantGlobalId);


    return productVariantId;
  } catch (error) {
    console.error('Error creating product variant:', error);
  }
}

// Function to extract the numeric ID from the Global ID
function extractNumericId(globalId) {
  // The globalId is in the format "gid://shopify/ProductVariant/1234567890"
  const parts = globalId.split('/');
  return parts[parts.length - 1];
}

// Function to trigger the button click
function triggerAddToCartButton() {
  const addToCartButton = document.querySelector('.product-form__submit');
  if (addToCartButton) {
    addToCartButton.click();
  } else {
    console.error('Add to Cart button not found.');
  }
}



async function getProductVariantPrice(productVariantId) {
  const graphql = JSON.stringify({
    query: `
      query productVariant($id: ID!) {
        productVariant(id: $id) {
          price
        }
      }
    `,
    variables: {
      id: productVariantId
    }
  });

  try {
    const response = await fetch(`${SHOPIFY_DOMAIN}/admin/api/${SHOPIFY_API_VERSION}/graphql.json`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Access-Token': SHOPIFY_ACCESS_TOKEN
      },
      body: graphql
    });
    const result = await response.json();

    if (result.errors) {
      console.error('GraphQL errors:', result.errors);
      return null;
    }

    const price = result.data.productVariant.price;
    return price;
  } catch (error) {
    console.error('Error fetching product variant price:', error);
    return null;
  }
}

async function getProductVariantPriceStorefront(productVariantId) {
    const myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("X-Shopify-Storefront-Access-Token", SHOPIFY_STOREFRONT_ACCESS_TOKEN);
    myHeaders.append("Cookie", "request_method=POST");
    
    const graphql = JSON.stringify({
        query: `
          {
            node(id: "gid://shopify/ProductVariant/${productVariantId}") {
              ... on ProductVariant {
                id
                price {
                  amount
                  currencyCode
                }
              }
            }
          }
        `,
        variables: {}
      });
    const requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: graphql,
      redirect: "follow"
    };
    
    let response =  await fetch(SHOPIFY_DOMAIN + "/api/2024-07/graphql.json", requestOptions)

    const result = await response.json();

    if (result.errors) {
      console.error('GraphQL errors:', result.errors);
      return null;
    }

    const price = result.data.node.price.amount;
    console.log("price: ", price);
    return price;
}

// Execute the function to create the product variant
const productVariantId = await createProductVariant();
console.log("1. Product Variant created with GraphQL - productVariantId: ", productVariantId);


const price = await getProductVariantPrice("gid://shopify/ProductVariant/" + productVariantId);
console.log('2. The price of the newly created Variant can be retrieved via Admin GraphQL API - price:', price);

const priceFromStorefront = await getProductVariantPriceStorefront(productVariantId);
console.log('3. The price of the newly created Variant can be retrieved via Storefront GraphQL API - price:', priceFromStorefront);


// Update the input element in the DOM with the numeric ID
document.querySelector('input.product-variant-id').value = productVariantId;
// Trigger the "Add to Cart" button
triggerAddToCartButton();
console.log("4. Newly created product variant added to cart ");

console.log("5. open a new tab with the cart in order to check if the price is shown there");
setTimeout(function() {
    window.open(SHOPIFY_DOMAIN+"/cart", '_blank');
  }, 300);

问题截图 #

解决方案 #

核心原因 #

动态创建的变体虽能通过API立即查询到，但Shopify的前端缓存与产品索引同步存在短暂延迟。主题购物车逻辑添加商品时，可能直接从未同步的缓存/索引中拉取价格，导致显示0元。

具体修复方法 #

方法一：使用Storefront API的cartAdd mutation添加商品

放弃触发原生添加按钮，改用Storefront API直接添加商品并明确传入价格，绕过前端缓存限制：

async function addVariantToCart(variantId, price) {
  const graphql = JSON.stringify({
    query: `
      mutation cartAdd($cartId: ID!, $lines: [CartLineInput!]!) {
        cartAdd(cartId: $cartId, lines: $lines) {
          cart {
            id
            lines {
              nodes {
                id
                quantity
                merchandise {
                  ... on ProductVariant {
                    id
                    price {
                      amount
                      currencyCode
                    }
                  }
                }
              }
            }
          }
          userErrors {
            field
            message
          }
        }
      }
    `,
    variables: {
      cartId: await getOrCreateCartId(),
      lines: [
        {
          merchandiseId: `gid://shopify/ProductVariant/${variantId}`,
          quantity: 1,
          price: {
            amount: price,
            currencyCode: "USD" // 替换为店铺实际货币
          }
        }
      ]
    }
  });

  const response = await fetch(`${SHOPIFY_DOMAIN}/api/${SHOPIFY_API_VERSION}/graphql.json`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Shopify-Storefront-Access-Token': SHOPIFY_STOREFRONT_ACCESS_TOKEN
    },
    body: graphql
  });

  const result = await response.json();
  if (result.errors) {
    console.error('添加购物车失败:', result.errors);
    return null;
  }
  return result.data.cartAdd.cart;
}

// 获取或创建购物车ID的辅助函数
async function getOrCreateCartId() {
  let cartId = localStorage.getItem('shopify_cart_id');
  if (!cartId) {
    const response = await fetch(`${SHOPIFY_DOMAIN}/api/${SHOPIFY_API_VERSION}/graphql.json`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Storefront-Access-Token': SHOPIFY_STOREFRONT_ACCESS_TOKEN
      },
      body: JSON.stringify({
        query: `mutation cartCreate { cartCreate { cart { id } } }`
      })
    });
    const result = await response.json();
    cartId = result.data.cartCreate.cart.id;
    localStorage.setItem('shopify_cart_id', cartId);
  }
  return cartId;
}

替换原脚本中triggerAddToCartButton()的调用：

await addVariantToCart(productVariantId, priceFromStorefront);

方法二：延长购物车打开延迟

若坚持使用原生添加按钮，可延长打开购物车的延迟时间，等待Shopify完成索引同步：

setTimeout(function() {
    window.open(SHOPIFY_DOMAIN+"/cart", '_blank');
  }, 2000); // 延迟2秒，可根据实际情况调整

方法三：强制刷新购物车数据

在Dawn主题的cart.js中添加逻辑，检测0价格商品并重新拉取购物车数据：

document.addEventListener('DOMContentLoaded', () => {
  const zeroPriceItems = document.querySelectorAll('.cart-item__price:contains("$0.00")');
  if (zeroPriceItems.length > 0) {
    fetch(window.location.href, { headers: { 'Cache-Control': 'no-cache' } })
      .then(response => response.text())
      .then(html => {
        document.querySelector('.cart').innerHTML = new DOMParser().parseFromString(html, 'text/html').querySelector('.cart').innerHTML;
      });
  }
});

注意事项 #

• 禁止在客户端暴露Admin API Token，存在安全风险，建议将变体创建逻辑迁移至后端服务。
• 动态创建变体可能导致商品变体数量过多，影响店铺性能，需做好变体生命周期管理。

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