CODEWITHSUNDEEP
javascriptjqueryhtmlsimplecart
Katie
Katie

Reputation: 48258

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: "[email protected]"
    },
    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?

Upvotes: 1

Views: 5315

Answers (4)

Mirage
Mirage

Reputation: 11

Take a look at the simplecartjs.org cart. The configuration is in the footer. You can use a function to create custom cart views. You can add this to the cart columns array.

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

Also this is discussed in the documentation here

Upvotes: 1

Norbert Rakosi
Norbert Rakosi

Reputation: 31

I solved the issue inspired by previous comments, without editing the actual simplcart.js file:

First hack simpleCart by adding the afterCartCreate event:

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

than just bind to the event:

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

and voila ;)

Upvotes: 3

RandomDude
RandomDude

Reputation: 21

In you css add

.simpleCart_items table { width:100%; }

This should extend the whole table.

Upvotes: 2

Gess Gallardo
Gess Gallardo

Reputation: 46

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!

Upvotes: 3

Related Questions