Shopify中Ajax调用addToCart后无法跳转至购物车问题排查

我来帮你搞定这个问题！产品能成功加入购物车说明Ajax请求完全没问题，页面没跳转纯粹是因为你的代码里压根没加跳转到购物车页面的逻辑，再加上按钮上的@click.prevent还阻止了表单原本的提交跳转行为，所以才会出现加购成功但页面纹丝不动的情况。咱们一步步来解决：

核心解决方案 #

1. 在Ajax成功回调里添加手动跳转逻辑

既然用了自定义的Ajax完成加购，那就在请求成功后主动跳转到购物车页面，修改你的addToCart函数里的成功回调部分就行：

.then((data) => {
  console.log('Success:', data);
  // 新增：跳转到购物车页面，用Shopify官方路由更稳妥
  window.location.href = window.Shopify.routes.cart_url;
})

2. 处理@click.prevent的影响

你按钮上的@click.prevent其实是正确的选择——它阻止了表单默认的提交刷新行为，避免和咱们的自定义Ajax逻辑冲突。之前你去掉它没效果，是因为表单默认提交会直接刷新页面，可能Ajax请求还没完成页面就跳了，但你说产品已经成功加入，说明两种请求都触发了，只是表单跳转可能被其他逻辑干扰了。所以推荐保留@click.prevent，用手动跳转来控制流程更靠谱。

修改后的完整addToCart函数示例 #

<div
    x-data="
      {
        addToCart(items, size){
         const price = getBoxPrice(size)
         console.log({price})
         let itemsToAdd = items.map((item) => {
           return item['title'];
         })

         let selectedItems = itemsToAdd.toString()
         console.log({selectedItems})
         console.log({itemsToAdd})
          let formData = {
          'items': [{
            'id': 44202123100470,
            'quantity': 1,
            'properties': {
              'Box Items': selectedItems,
              }
            }]
          };
          console.log({formData})
          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();
          })
          .then((data) => {
            console.log('Success:', data);
            // 新增跳转逻辑
            window.location.href = window.Shopify.routes.cart_url;
          })
          .catch((error) => {
            console.error('Error:', error);
          });
          reset()
        }
      }
    "
    class="tw-mt-12 tw-flex tw-flex-col tw-p-auto tw-bg-brandText tw-opacity-80"
  > ....</div>

额外小提示 #

• 用window.Shopify.routes.cart_url代替硬写的/cart，能适配不同Shopify店铺的路由设置，兼容性更好；
• 如果你想做更友好的交互（比如先显示加购成功提示再跳转），可以在跳转前加个延迟或者提示弹窗，比如：

  .then((data) => {
    console.log('Success:', data);
    alert('产品已加入购物车！');
    setTimeout(() => {
      window.location.href = window.Shopify.routes.cart_url;
    }, 1500);
  })
  

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