编辑 Shopify 中的“添加到购物车”按钮

Question

我想编辑 Shopify 产品页面上“添加到购物车”按钮的代码。我希望系统将产品添加到购物车，然后在单击“添加到购物车”按钮后重定向到 Shopify 的结账页面，而不是仅仅将产品添加到购物车。

我想更改代码来修复该按钮，而不是安装应用程序

Answer 1

将此添加到您的 product.liquid 或 product-template.liquid 文件中。添加到购物车后，它将立即重定向到结账。

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const addToCartForm = document.querySelector('form[action="/cart/add"]');
    
    if (addToCartForm) {
      addToCartForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        fetch('/cart/add.js', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify(FormData(addToCartForm))
        })
        .then(response => response.json())
        .then(data => {
          window.location.href = '/checkout';
        });
      });
    }
  });
</script>