javascript - SimpleCartJS : Add CSS classes to generated cart table - displaying a custom cart

Question

我试图弄清楚如何将 css 类添加到 SimpleCartJS 的购物车表中生成。 (我使用的购物车布局是这样的: http://bootsnipp.com/snippets/featured/shopping-cart-bs-3 但这并不重要)

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

输入

这是我的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 }
        ]
  });

和我的 HTML:

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

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

输出

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

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

我该如何:

1. 转<table>进入<table class="table table-hover"> ？

2. 将这些行添加到 simpleCart_items 下？

我希望这些成为所有项目下的行:

<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>

所以它最终看起来像这样:

有什么帮助吗？

Answer 1

有用链接: https://github.com/wojodesign/simplecart-js/issues/362

TL;DR

1. 转到您的 simplecart.js

2. 搜索项目:函数(选择器)

3. 在simpleCart.writeCart(selector);之后添加新行simpleCart.trigger("afterCreate");

4. 添加新绑定(bind):

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

   您可以像往常一样在此处添加您想要的所有内容>:3!