Shopify Slate技术求助：点击加入购物车后禁止跳转至购物车页面

Hey there, let’s work through these two issues you’re facing— I’ve run into similar hurdles with Slate themes before, so I’ve got some concrete fixes for you.

1. Stop Redirect to Cart Page After "Add to Cart" #

The default redirect happens because the product form submits directly to /cart/add, which triggers a full page reload. We need to intercept this submission and use Shopify’s AJAX API instead to handle the action in the background. Here’s how:

Step 1: Locate Your Add-to-Cart Form #

First, find your product form in files like sections/product-template.liquid or templates/product.liquid. Note its ID (common ones are AddToCartForm or product-form— check the id attribute on the <form> tag).

Step 2: Add a Submission Interceptor Script #

Add this JavaScript to a product-specific JS file (like src/js/product.js) or your theme’s main JS file (like src/js/theme.js):

document.addEventListener('DOMContentLoaded', () => {
  const addToCartForm = document.querySelector('#AddToCartForm'); // Replace with your form's actual ID
  if (!addToCartForm) return;

  addToCartForm.addEventListener('submit', (e) => {
    e.preventDefault(); // Block the default page redirect
    const formData = new FormData(addToCartForm);

    // Use Shopify's AJAX API to add items to cart without reloading
    fetch('/cart/add.js', {
      method: 'POST',
      body: formData
    })
    .then(res => res.json())
    .then(cartItem => {
      // Success actions: update mini-cart, show a notification, etc.
      console.log('Item added successfully:', cartItem);
      // Example: If your theme has a mini-cart update function, call it here
      // updateMiniCart();
    })
    .catch(err => {
      // Handle errors (e.g., out of stock, invalid variant selection)
      console.error('Add to cart failed:', err);
      alert('Sorry, we couldn’t add this item to your cart. Please check your selection.');
    });
  });
});

Replace #AddToCartForm with your form’s actual ID, then test adding an item— it should now update the cart without redirecting to the cart page.

2. Fix Cart.js Initialization with Liquid Code #

The problem here is that Slate doesn’t parse Liquid inside .js files, so any Liquid in your Cart.js init script gets treated as plain text instead of dynamic values. The fix is to pass Liquid variables to your JS via global window variables first:

Step 1: Inject Liquid Variables into Global Scope #

In your layout/theme.liquid, add this inside the <head> tag (before loading your Cart.js script):

<script>
  window.ShopifyCartConfig = {
    cartUrl: '{{ routes.cart_url }}',
    cartAddUrl: '{{ routes.cart_add_url }}',
    shopCurrency: '{{ shop.currency }}'
    // Add any other Liquid variables you need for Cart.js
  };
</script>

This parses the Liquid on page load and stores the dynamic values in a global JS object that your scripts can access.

Step 2: Initialize Cart.js Using Global Variables #

Now, in your Cart.js initialization script (e.g., src/js/cart.js), use the global object instead of direct Liquid code:

// Initialize Cart.js with the pre-parsed global config
const cart = new CartJS({
  cartUrl: window.ShopifyCartConfig.cartUrl,
  cartAddUrl: window.ShopifyCartConfig.cartAddUrl,
  // Add other Cart.js options here
  data: {
    currency: window.ShopifyCartConfig.shopCurrency
  }
});

This way, Cart.js gets the dynamic values it needs without conflicting with Slate’s compilation process.

Quick Tips to Avoid Headaches #

• Clear Cache: Slate’s hot-reload can sometimes cache old code— clear your browser cache or restart the Slate server if changes don’t show up immediately.
• Keep Form Validation: Make sure your existing variant validation (size, color, quantity limits) still runs before the AJAX submission— don’t strip out any necessary validation logic.
• Test Edge Cases: Verify out-of-stock items, limited-quantity products, and variant selections still work as expected after implementing the changes.

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