如何绕过Shopify产品变体订单项的字符限制？

问题背景 #

非Shopify开发者，基于无头应用为客户创建带变体的自定义单品，变体的订单项包含产品配置信息，但因内容过长（未找到官方字符限制文档）导致产品创建失败。

结账页面示意图（"Options here"为过长时引发问题的订单项选项值）：

后端创建产品代码 #

const addProduct = async (req, res) => {
  const { variants } = req.body;
  console.log("Product create");
  const query = `mutation {
    productCreate(input: {
      bodyHtml: "Just another custom product",
      handle: "custom-product",
      productType: "Custom Products",
      title: "Custom Product",
      vendor: "Client",
      variants: ${JSON.stringify(variants).replace(/"([^"]+)":/g, "$1:")}
    }){
      product{
        id
        title
        variants (first: 50) {
          edges {
            node {
              id
              title
              price
              sku
            }
          }
        }
      }
    }
  }`;

  try {
    const response = await shopify.graphql(query);
    const published = await publishProduct(response.productCreate.product.id);
    const parsedResponse = cleanGraphQLResponse(response);

    return res.status(200).send({
      message: "Product created",
      product: { ...parsedResponse.productCreate.product, published },
    });
  } catch (error) {
    console.log(error);
    return res.status(501).send({ message: "Error", error });
  }
};

前端传递订单项代码 #

const createCheckout = () => {
    const report = obtainReport();
    let totalPrice = 0;
    let lineItemsConcat = '';
    report.map((item, index) => {
      const [title, value, price] = item;
      totalPrice = totalPrice + (+price); //unary operator
      lineItemsConcat = `${title}: ${value}; ${lineItemsConcat}`;
    });

    const lineItems = {
      title: lineItemsConcat,
      options: lineItemsConcat,
      price: totalPrice,
      sku: `Item-0`,
    };

    createShopifyProduct([lineItems]);
  };

解决方案 #

方案一：传递完整订单项选项值（绕过长度限制） #

1. 将完整配置存入元字段（Metafields）

不要把所有配置信息塞进变体的title或options字段，改为将完整配置存储到产品或变体的元字段中，变体仅保留简短标识：

• 后端修改productCreate mutation，添加元字段参数：

mutation {
  productCreate(input: {
    bodyHtml: "Just another custom product",
    handle: "custom-product",
    productType: "Custom Products",
    title: "Custom Product",
    vendor: "Client",
    variants: ${JSON.stringify(variants).replace(/"([^"]+)":/g, "$1:")},
    # 添加元字段存储完整配置
    metafields: [
      {
        namespace: "custom_config",
        key: "full_options",
        value: "${lineItemsConcat}",
        type: "single_line_text_field"
      }
    ]
  }){
    product{
      id
      title
      variants (first: 50) {
        edges {
          node {
            id
            title
            price
            sku
          }
        }
      }
      metafields(first: 10) {
        edges {
          node {
            key
            value
          }
        }
      }
    }
  }
}

• 前端调整：将变体的title和options改为简短内容（如"自定义配置"），避免触发长度限制。

2. 使用订单项属性（Line Item Properties）

跳过动态创建产品的步骤，直接基于基础产品模板创建结账会话，将完整配置作为订单项属性传入：

• 前端修改createCheckout逻辑：

const createCheckout = async () => {
  const report = obtainReport();
  const totalPrice = report.reduce((sum, item) => sum + +item[2], 0);
  // 转换为订单项属性格式
  const customAttributes = report.map(item => ({
    key: item[0],
    value: `${item[1]} (¥${item[2]})`
  }));

  // 直接调用checkoutCreate创建结账会话
  const query = `mutation {
    checkoutCreate(input: {
      lineItems: [{
        variantId: "YOUR_BASE_PRODUCT_VARIANT_ID", # 替换为你的基础产品变体ID
        quantity: 1,
        customAttributes: ${JSON.stringify(customAttributes)}
      }]
    }) {
      checkout {
        id
        webUrl
      }
    }
  }`;

  try {
    const response = await shopify.graphql(query);
    // 跳转到Shopify结账页
    window.location.href = response.checkoutCreate.checkout.webUrl;
  } catch (error) {
    console.error('创建结账失败:', error);
  }
};

这种方式无需动态创建产品，自定义属性会直接显示在结账页和订单详情中，完全避开变体字段的长度限制。

方案二：在Shopify结账页显示自定义信息 #

1. 通过URL参数+自定义脚本渲染信息

• 前端创建结账时，将完整配置编码后作为URL参数传入结账链接：

// 假设已获取到checkout的webUrl
const encodedConfig = encodeURIComponent(lineItemsConcat);
const checkoutUrl = `${response.checkoutCreate.checkout.webUrl}?custom_config=${encodedConfig}`;
window.location.href = checkoutUrl;

• 在Shopify后台添加自定义脚本：进入设置→结账→附加脚本，插入以下代码，自动读取URL参数并渲染到结账页：

document.addEventListener('DOMContentLoaded', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const config = urlParams.get('custom_config');
  if (config) {
    const configElement = document.createElement('div');
    configElement.style.padding = '1rem';
    configElement.style.border = '1px solid #eee';
    configElement.innerHTML = `<strong>产品配置详情:</strong><br>${decodeURIComponent(config).replace(/;/g, '<br>')}`;
    // 插入到订单摘要区域顶部
    const summarySection = document.querySelector('.order-summary');
    if (summarySection) summarySection.prepend(configElement);
  }
});

2. 利用订单备注功能

• 先在Shopify后台启用订单备注：进入设置→结账→订单备注，勾选"允许客户添加订单备注"。
• 前端添加脚本，跳转到结账页后自动填充备注框：

// 跳转到结账页后执行此脚本
document.addEventListener('DOMContentLoaded', () => {
  const noteInput = document.querySelector('#order_note');
  if (noteInput && lineItemsConcat) {
    noteInput.value = `产品配置: ${lineItemsConcat}`;
    // 可选：设置备注框为只读，避免客户修改
    noteInput.readOnly = true;
  }
});

配置信息会出现在订单备注中，商家和客户均可查看。

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