Dawn 11.0主题粘性加购栏点击后滑出购物车抽屉不显示求助

问题核心 #

粘性加购栏的表单提交未走Dawn主题内置的Ajax加购逻辑，触发了默认同步提交（页面刷新），导致你添加的active/animate类被刷新丢失；而原生加购按钮的表单是通过主题Ajax流程处理，成功加购后会自动调用购物车抽屉的打开方法。

解决方案 #

1. 修复表单提交逻辑（核心） #

替换现有代码，改用Ajax提交表单并调用主题内置的购物车抽屉打开方法，避免页面刷新：

document.querySelectorAll('form[action="/cart/add"]').forEach(form => {
  form.addEventListener('submit', async (e) => {
    // 阻止默认同步提交，避免页面刷新
    e.preventDefault();
    
    try {
      // 获取表单数据
      const formData = new FormData(form);
      // 调用Shopify Ajax加购API
      const response = await fetch('/cart/add.js', {
        method: 'POST',
        body: formData
      });

      if (response.ok) {
        // 优先调用主题内置的购物车抽屉打开方法（最可靠）
        if (window.Shopify?.CartDrawer) {
          Shopify.CartDrawer.open();
        } else {
          // 备选方案：手动控制抽屉类（仅当内置方法不可用时）
          const cartDrawer = document.querySelector('.cart-drawer');
          if (cartDrawer) {
            // 先移除类再添加，确保动画触发
            cartDrawer.classList.remove('animate', 'active');
            void cartDrawer.offsetWidth; // 强制重绘，解决动画不生效问题
            cartDrawer.classList.add('animate', 'active');
          }
        }
        
        // 触发购物车更新事件，同步更新购物车计数等元素
        document.dispatchEvent(new CustomEvent('cart:updated'));
      }
    } catch (error) {
      console.error('加购失败:', error);
    }
  });
});

2. 检查表单结构正确性 #

确保粘性加购栏的表单和原生加购表单结构一致，包含以下必填字段：

• 产品变体ID隐藏字段：<input type="hidden" name="id" value="你的变体ID">
• 数量输入字段：<input type="number" name="quantity" value="1" min="1">
• 可选：添加主题识别属性 <form action="/cart/add" data-add-to-cart-form>

3. 确认脚本引入顺序 #

在theme.liquid中，确保你的CartDrawerPull.js脚本在主题的cart-drawer.js之后引入，比如：

{{ 'cart-drawer.js' | asset_url | script_tag }}
{{ 'CartDrawerPull.js' | asset_url | script_tag }}

这样才能保证脚本能访问到主题内置的Shopify.CartDrawer对象。

关键提醒 #

• 必须保留e.preventDefault()：这是阻止页面刷新的核心，没有它后续操作会被页面刷新覆盖。
• 优先使用Shopify.CartDrawer.open()：Dawn主题的内置方法会自动处理抽屉动画、购物车内容更新等逻辑，比手动加类更稳定。

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