如何为SimpleCart.js创建互不影响的独立购物车视图布局？

当然可以创建独立的购物车布局！SimpleCart.js其实提供了两种靠谱的方式来实现，既能保留你现有的布局，又能新增完全不同的展示样式，下面给你详细拆解：

方案一：创建独立的SimpleCart实例（数据完全分离） #

如果需要两个完全独立的购物车（比如不同类型商品的购物车，数据互不干扰），可以直接实例化多个SimpleCart对象，每个对象配置自己的布局和容器，彼此不会冲突。

步骤1：保留原有购物车配置并明确容器 #

先给你的原有购物车指定专属容器，避免和新实例混淆：

<script>
// 原有购物车实例（保留你的自定义布局）
simpleCart({
  cartColumns: [
    {
      view: function(item, column){
        return "<li class='header-cart-item'><div class='header-cart-item-img'><img src='"+item.get('thumb')+"' alt='IMG'></div><div class='header-cart-item-txt'><a href='#' class='header-cart-item-name'>" +item.get('name')+"</a> <span class='header-cart-item-info'>"+item.get('quantity')+" x RM"+item.get('price')+"</span></div></li>";
      },
      attr: 'custom'
    },
  ],
  // 指定原有布局的容器
  container: '.simpleCart_item'
});
</script>

步骤2：创建新的独立购物车实例 #

新建一个实例，配置全新的布局样式和容器，还可以设置独立的存储键避免数据混淆：

<script>
// 全新的独立购物车实例（自定义新布局）
var secondCart = new simpleCart({
  cartColumns: [
    {
      view: function(item, column){
        // 这里写你的新布局HTML结构
        return "<div class='new-cart-item'>"+
                  "<h3 class='new-item-name'>"+item.get('name')+"</h3>"+
                  "<p class='new-item-details'>数量: "+item.get('quantity')+" | 单价: RM"+item.get('price')+"</p>"+
                  "<p class='new-item-total'>小计: RM"+item.total()+"</p>"+
               "</div>";
      },
      attr: 'new-custom'
    },
  ],
  // 指定新布局的容器
  container: '#new-cart-container',
  // 设置独立存储键，防止和原有购物车数据混在一起
  storage: {
    name: 'simpleCart-second'
  }
});
</script>

步骤3：添加新布局的展示容器 #

在页面中添加对应新实例的容器：

<!-- 原有购物车容器 -->
<div class="simpleCart_item"></div>

<!-- 新布局购物车容器 -->
<div id="new-cart-container"></div>

方案二：复用同一购物车数据（多视图展示） #

如果不需要分离数据，只是想用不同布局展示同一个购物车内容（比如头部迷你购物车和页面底部完整购物车），可以通过监听购物车的事件，手动渲染第二个视图。

实现代码 #

<!-- 原有购物车容器 -->
<div class="simpleCart_item"></div>

<!-- 新布局购物车容器 -->
<div id="alternative-cart"></div>

<script>
// 原有购物车配置（保留你的自定义布局）
simpleCart({
  cartColumns: [
    {
      view: function(item, column){
        return "<li class='header-cart-item'><div class='header-cart-item-img'><img src='"+item.get('thumb')+"' alt='IMG'></div><div class='header-cart-item-txt'><a href='#' class='header-cart-item-name'>" +item.get('name')+"</a> <span class='header-cart-item-info'>"+item.get('quantity')+" x RM"+item.get('price')+"</span></div></li>";
      },
      attr: 'custom'
    },
  ]
});

// 定义渲染新布局的函数
function renderAlternativeCart() {
  var cartContainer = document.getElementById('alternative-cart');
  cartContainer.innerHTML = ''; // 清空原有内容

  // 遍历购物车所有商品，生成新布局HTML
  simpleCart.each(function(item){
    var itemHtml = "<div class='alt-cart-item'>"+
                      "<img src='"+item.get('thumb')+"' class='alt-item-img'>"+
                      "<div class='alt-item-details'>"+
                        "<span class='alt-item-name'>"+item.get('name')+"</span>"+
                        "<div class='alt-item-price'>RM"+item.get('price')+" × "+item.get('quantity')+" = RM"+item.total()+"</div>"+
                      "</div>"+
                    "</div>";
    cartContainer.innerHTML += itemHtml;
  });
}

// 监听购物车变化事件，自动更新新布局
simpleCart.bind('update', renderAlternativeCart);
simpleCart.bind('itemAdded', renderAlternativeCart);
simpleCart.bind('itemRemoved', renderAlternativeCart);

// 页面加载时初始化渲染一次
window.addEventListener('load', renderAlternativeCart);
</script>

注意事项 #

• 方案一适合需要完全分离的购物车场景，两个实例的数据各自独立；
• 方案二适合同一购物车的多场景展示，数据同步更新；
• 两种方案都要注意给不同布局的元素设置独立的CSS类名，避免样式互相干扰。

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