基于Shopify Ajax API与Alpine JS的自定义选品加购问题求助

当前进度 #

已通过硬编码主产品ID到formData实现addToCart功能，商品可成功加入购物车，但点击按钮后不会自动跳转购物车页面，手动访问/cart路径能看到已添加的商品。此外已为Alpine的addToCart()调用添加preventDefault，现在点击按钮不会触发默认跳转，但硬编码商品仍能正常加入购物车。

待解决核心问题 #

1. 触发addToCart()后如何自动跳转到购物车页面；
2. 如何将用户选择的多件商品作为一个组合产品而非单独变体加入购物车。

已实现功能 #

已在Alpine.js的x-data组件中完成商品选择逻辑，选中的商品会存入数组，数据格式如下：

[
  {img_string: 'https://cdn.shopify.com/s/files/1/0695/7495/1222/files/Barky.webp?v=1672528086&width=150', title: 'Barky', id: 'selected_item-1'},
  {img_string: 'https://cdn.shopify.com/s/files/1/0695/7495/1222/files/Barky.webp?v=1672528086&width=150', title: 'Barky', id: 'selected_item-1'}
]

当前代码（Alpine.js + Shopify Liquid） #

<div x-data="items: []"> 
  <div
        x-data="
          {
            qty: 1,
            addToCart(){
              let formData = {
              'items': [{
                'id': 44202123100470,
                'quantity': 1
                }]
              };
              fetch(window.Shopify.routes.root + 'cart/add.js', {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
              })
              .then(response => {
                console.log(response)
                return response.json();
              })
              .catch((error) => {
                console.error('Error:', error);
              });
            }
          }
        "
        class="tw-mt-12 tw-flex tw-flex-col tw-p-auto tw-bg-brandText tw-opacity-80"
      >
        <div class="tw-p-8">
          <h2 class="tw-mb-4 tw-text-white">Your Selections</h2>
          {% assign product_form_id = 'product-form-' | append: section.id %}
          {%- form 'product',
            product,
            id: product_form_id,
            class: 'form',
            novalidate: 'novalidate',
            data-type: 'add-to-cart-form'
          -%}
            <input
              type="hidden"
              name="id"
              value="{{ product.selected_or_first_available_variant.id }}"
              disabled
            >
            <input type="hidden" name="quantity" x-model="qty" value="1">
            <div class="product-form__buttons">
              <button
                type="add"
                @click="addToCart()"
                :class="full_box ? 'tw-bg-ctaColor' : ''"
                class="tw-bg-white tw-text-brandText tw-flex tw-justify-center tw-py-4 tw-px-6 tw-rounded-full tw-font-bold"
              >
                <p class="" x-show="!full_box">
                  <span x-text="items_selected" class="tw-mr-2"></span><span class="tw-mr-2">of</span
                  ><span class="tw-font-bold" x-text="box_size"></span><span class="tw-ml-2">Selected</span>
                </p>
                <p x-show="full_box" class="">Add to cart</p>
              </button>
            </div>
          {%- endform -%}
        </div>
</div>

问题1：触发addToCart后自动跳转购物车页面 #

在fetch请求的成功回调中添加页面跳转逻辑，修改addToCart方法的then部分：

.then(response => {
  console.log(response)
  return response.json();
})
.then(data => {
  // 跳转至购物车页面
  window.location.href = window.Shopify.routes.root + 'cart';
})
.catch((error) => {
  console.error('Error:', error);
});

商品成功加入购物车后，页面会自动跳转到购物车页面。

问题2：将选中商品作为一个组合产品加入购物车 #

Shopify默认仅支持添加单个变体到购物车，实现组合产品作为整体加入有3种常用方案：

方案1：使用Shopify捆绑产品（推荐） #

提前在Shopify后台创建捆绑产品，将可选商品设置为该产品的选项或变体。用户选择完成后，匹配对应的捆绑变体ID，将其传入formData即可。这种方式能正常管理库存，且购物车中显示为单个产品。

方案2：通过购物车属性传递组合信息（适合无库存管理需求场景） #

将选中的商品信息作为主产品的附加属性传入，购物车中显示主产品，同时附带组合明细：

// 获取父组件中选中的商品数组
let selectedItems = this.$root.items;
let formData = {
  'items': [{
    'id': 44202123100470, // 主产品变体ID
    'quantity': 1,
    'properties': {
      '已选商品': selectedItems.map(item => item.title).join('、'),
      // 可添加更多属性，如商品ID、图片链接等
    }
  }]
};

购物车页面中，主产品下方会显示已选商品属性，展示用户的选择明细。

方案3：为单个商品添加组合标记（显示为多行但归属同一组合） #

如果需要每个选中商品单独显示，但标记为同一组合的一部分，可给每个商品添加相同属性：

let selectedItems = this.$root.items;
// 提前映射选中项ID到Shopify变体ID
let itemVariantMap = {
  'selected_item-1': '44202123100470',
  // 其他选中项的映射关系
};

let formData = {
  'items': selectedItems.map(item => ({
    'id': itemVariantMap[item.id],
    'quantity': 1,
    'properties': {
      '自定义礼盒': '是' // 标记属于同一组合
    }
  }))
};

这种方式会在购物车中显示多个行项目，但都带有相同的组合标记，方便后续订单处理。

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