Javascript SimpleCartJS：将CSS类添加到生成的购物车表-显示自定义购物车

我试图找出如何将css类添加到生成css的cart表中。（我使用的购物车布局如下：但这并不重要）

============

输入 这是我的js配置：

simpleCart({
    checkout: {
      type: "PayPal",
      email: "you@yours.com"
    },
    cartStyle: "table", 
    cartColumns: [
    /* Picture (same for every product right now) */
        { view: function( item, column) {
            return "<a class=\"thumbnail pull-left\" href=\"#\"> "
            +"<img class=\"media-object\" src=\"http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png\" "
            +"style=\"width: 72px; height: 72px;\"> </a>";
            }, label: false },
    /* Name */
        { attr: "name", label: "Product" },
    /* Quantity */
        { attr: "quantity" , label: "Qty" } ,
    /* Price */
        { attr: "price" , label: "Price", view: 'currency' } ,
    /* Remove */
        { view: "remove" , text: "Remove" , label: false }
        ]
  });

simpleCart({
结帐：{
键入：“贝宝”，
电子邮件：“you@yours.com"
},
cartStyle:“表”，
cartColumns：[
/*图片（目前每种产品相同）*/
{视图：函数（项，列）{
返回“”；
}，标签：false}，
/*名字*/
{attr:“名称”，标签：“产品”}，
/*数量*/
{attr:“数量”，标签：“数量”}，
/*价格*/
{attr:“价格”，标签：“价格”，视图：'货币'}，
/*除去*/
{视图：“删除”，文本：“删除”，标签：false}
]
});

和我的HTML：

<div class="simpleCart_items"></div>

============

输出

基本上，输出是一个通用表

============

我如何：

将

转换为

是否在simpleCart\u项下添加这些行

我希望这些是所有项目下的行：

<tr>
    <td>   </td>
    <td>   </td>
    <td>   </td>
    <td><h5>Subtotal</h5></td>
    <td><div class="simpleCart_total"></div></td>
</tr>
<tr>
    <td>   </td>
    <td>   </td>
    <td>   </td>
    <td><h5>Estimated shipping</h5></td>
    <td><div class="simpleCart_shipping"></div></td>
</tr>
<tr>
    <td>   </td>
    <td>   </td>
    <td>   </td>
    <td><h3>Total</h3></td>
    <td><div class="simpleCart_grandTotal"></div></td>
</tr>
<tr>
    <td>   </td>
    <td>   </td>
    <td>   </td>
    <td>   </td>
    <td><a href="javascript:;" class="simpleCart_checkout">Checkout</a></td>
</tr>

小计
估计运费
全部的

所以它最终看起来像：

有什么帮助吗？

有用的链接：

TL；DR

转到simplecart.js

搜索

项：功能（选择器）

在

simpleCart.writeCart（选择器）之后添加新行
simpleCart.trigger（“afterCreate”）

添加新绑定：

simpleCart.bind("afterCreate", function(){
   $cart_table = $(".simpleCart_items table")
   $cart_table.addClass("table").addClass("table-hover")
});

你可以像往常一样在这里添加你想要的一切>：3

在你的css中添加

.simpleCart\u项目表{
宽度：100%；
}

---

这应该扩展整个桌子

我根据前面的评论解决了这个问题，没有编辑实际的simpcart.js文件：

首先通过添加afterCartCreate事件来破解simpleCart：

    var originalMethod = simpleCart.writeCart;
    simpleCart.extend({
      // write out cart
      writeCart: function (selector) {
        originalMethod(selector);
        simpleCart.trigger('afterCartCreate');
      }
  });

而不仅仅是绑定到事件：

simpleCart.on('afterCartCreate',function (){
    console.log("After create");
    $('.simpleCart_items table').addClass('table');
    $('.item-decrement a').addClass('btn').addClass('btn-default');
    $('.item-increment a').addClass('btn').addClass('btn-default');
  });

---

瞧

看看simplecartjs.org购物车。配置在页脚中。您可以使用函数创建自定义购物车视图。您可以将其添加到购物车列数组中

simpleCart({
    currency: "RUB",
    cartColumns: [
    { view: "image" , attr: "thumb", label: false },        
    { attr: "name" , label: "Name" },

    { view: function(item, column){
        return   "<img src='"+ item.get('thumb')+"' alt='product' />" +"<span class='item-format'>"+item.get('total')+"</span>";
    }, attr: 'custom' }

    ],
    cartStyle: "div"
});

simpleCart({
货币：“卢布”，
cartColumns：[
{视图：“图像”，属性：“拇指”，标签：false}，
{attr:“name”，label:“name”}，
{视图：函数（项，列）{
返回“+”项。获取（'total'）+”；
}，attr:'自定义'}
],
cartStyle：“div”
});

这一点也在本文中进行了讨论