PrestaShop 1.7 取消购物车自动跳转到结算页的方法

核心思路 #

拦截购物车区域的点击事件，通过事件委托判断点击目标：如果是移除商品的按钮，就阻止默认跳转行为，优先执行移除操作；如果是购物车其他区域，再决定是否允许跳转到结算页（或改为展开购物车列表）。

原生JavaScript实现方案 #

适用于纯前端项目，支持处理动态生成的移除按钮：

// 获取购物车容器（假设ID为cart-container）
const cartContainer = document.getElementById('cart-container');

cartContainer.addEventListener('click', function(e) {
  // 匹配移除按钮（假设按钮类名为remove-item-btn）
  const removeBtn = e.target.closest('.remove-item-btn');
  
  if (removeBtn) {
    // 阻止默认跳转行为
    e.preventDefault();
    // 阻止事件冒泡，避免触发父容器的跳转逻辑
    e.stopPropagation();
    
    // 执行商品移除逻辑，示例：
    const itemId = removeBtn.dataset.itemId;
    fetch(`/api/cart/remove/${itemId}`, { method: 'POST' })
      .then(res => res.json())
      .then(() => {
        // 更新购物车UI
        removeBtn.closest('.cart-item').remove();
      });
  }
  
  // 若点击的不是移除按钮，可保留原跳转逻辑，或改为展开购物车列表
  // 示例：展开购物车
  // const cartList = document.getElementById('cart-item-list');
  // cartList.classList.toggle('expanded');
});

jQuery实现方案 #

如果项目依赖jQuery，代码更简洁：

// 给购物车容器绑定事件，委托处理移除按钮点击
$('#cart-container').on('click', '.remove-item-btn', function(e) {
  e.preventDefault();
  e.stopPropagation();
  
  const itemId = $(this).data('item-id');
  // 执行移除逻辑
  $.post(`/api/cart/remove/${itemId}`, function() {
    $(this).closest('.cart-item').remove();
  }.bind(this));
});

修改购物车入口跳转逻辑 #

如果购物车是通过<a>标签直接跳转结算页，可修改为点击先展开购物车列表：

<!-- 原购物车链接 -->
<a href="/checkout" id="cart-link">购物车 (3)</a>

<!-- 新增购物车列表容器 -->
<div id="cart-item-list" class="hidden">
  <!-- 商品列表及移除按钮 -->
</div>

<script>
const cartLink = document.getElementById('cart-link');
const cartList = document.getElementById('cart-item-list');

cartLink.addEventListener('click', function(e) {
  // 如果购物车列表未展开，阻止跳转并显示列表
  if (cartList.classList.contains('hidden')) {
    e.preventDefault();
    cartList.classList.remove('hidden');
  }
  // 若已展开，则允许跳转到结算页
});
</script>

框架项目（React/Vue）示例 #

以React为例，在组件中处理点击事件：

function Cart() {
  const [cartItems, setCartItems] = useState([]);
  const [isCartExpanded, setIsCartExpanded] = useState(false);

  const handleRemoveItem = (itemId) => {
    // 调用接口移除商品，更新状态
    fetch(`/api/cart/remove/${itemId}`, { method: 'POST' })
      .then(res => res.json())
      .then(updatedItems => setCartItems(updatedItems));
  };

  const handleCartClick = (e) => {
    // 判断点击目标是否为移除按钮
    if (e.target.closest('.remove-btn')) {
      e.preventDefault();
      return;
    }
    // 切换购物车展开状态
    setIsCartExpanded(!isCartExpanded);
    // 若已展开且点击的是结算按钮，允许跳转
    if (isCartExpanded && e.target.id === 'checkout-btn') {
      window.location.href = '/checkout';
    }
  };

  return (
    <div className="cart-wrapper" onClick={handleCartClick}>
      <span>购物车 ({cartItems.length})</span>
      {isCartExpanded && (
        <div className="cart-items">
          {cartItems.map(item => (
            <div key={item.id} className="cart-item">
              {item.name}
              <button 
                className="remove-btn" 
                onClick={() => handleRemoveItem(item.id)}
              >
                移除
              </button>
            </div>
          ))}
          <button id="checkout-btn">去结算</button>
        </div>
      )}
    </div>
  );
}

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