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

时间:2014-07-24 00:59:41

标签: javascript jquery html html5 simplecart

我试图弄清楚如何将{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>

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

输出

enter image description here

基本上输出是通用表。

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

我如何:

  1. <table>变为<table class="table table-hover">

  2. 在simpleCart_items下添加

  3. 我希望这些是所有项目下的行:

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

    所以它最终看起来像是:

    enter image description here

    任何帮助?

4 个答案:

答案 0 :(得分:3)

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

<强> TL; DR

  1. 转到simplecart.js

  2. 搜索items: function (selector)

  3. simpleCart.writeCart(selector);添加新行后{li>

    simpleCart.trigger("afterCreate");

  4. 添加新绑定:

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

    您可以像往常一样在此处添加所有内容&gt;:3!

答案 1 :(得分:2)

在你的CSS添加

.simpleCart_items table { width:100%; }

这应该扩展整个表。

答案 2 :(得分:2)

我解决了之前评论的启发问题,没有编辑实际的simplcart.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');
  });

瞧瞧;)

答案 3 :(得分:1)

看一下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"
});

此问题也在documentation here

中讨论