Search code examples
javascriptjqueryhtmlsimplecart

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

I'm trying to figure out how to add css classes to the cart table that SimpleCartJS generates. (The cart layout I'm using is this: http://bootsnipp.com/snippets/featured/shopping-cart-bs-3 but it doesn't really matter)

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

input

This is my js configuration:

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 }
        ]
  });

and my HTML:

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

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

output

enter image description here

Basically the output is a generic table.

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

How do I:

  1. Turn <table> into <table class="table table-hover"> ?

  2. Add these rows under the simpleCart_items?

I'd like these to be rows under all the 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>

so it'd end up looking something like:

enter image description here

Any help?

Solution

  • useful link: https://github.com/wojodesign/simplecart-js/issues/362

    TL;DR

    1. Go to your simplecart.js

    2. Search for items: function (selector)

    3. after simpleCart.writeCart(selector); add in a new line simpleCart.trigger("afterCreate");

    4. add a new bind:

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

      you can add here all you want as always >:3!