0

SimpleCartJSが生成するカート テーブルに css クラスを追加する方法を理解しようとしています。(私が使用しているカートのレイアウトは次のとおりです: 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>

したがって、最終的には次のようになります。

ここに画像の説明を入力

何か助けはありますか？

4

4 に答える 4

3

便利なリンク: https://github.com/wojodesign/simplecart-js/issues/362

TL;DR

  1. simplecart.js に移動します

  2. 検索するitems: function (selector)

  3. simpleCart.writeCart(selector);新しい行を追加した後simpleCart.trigger("afterCreate");

  4. 新しいバインドを追加します。

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

    いつものようにここに好きなだけ追加できます >:3!

于 2014-08-24T03:00:37.230 に答える