CODEWITHSUNDEEP
simplecart
craigb
craigb

Reputation: 1

simplecart js setting column widths

I've used this site for assistance many times but never had to ask a question so finally joined...anyway, trying to set up simplecart checkout and having some trouble formatting cart output. I have my cart set to table and by default the simpleCart_items class displays the table and it's cells only as wide as they need be to fit the data. I can change this by specifying all cells(columns) as a percentage of the whole table. Unfortunately with 7 columns each only gets about 14% and this is way to much for a 1 or 2 digit quantity and not near big enough for all the characters in the item name without wrapping. What I want is a way to define a different width for each column. I have not found a way to do this even with colgroup but maybe just not doing it right. Any and all help would be appreciated!

Upvotes: 0

Views: 343

Answers (1)

RandomDude
RandomDude

Reputation: 21

Okay, so this may or may not help. This line is located in the simpleCart.js file. I changed it to something simple.

cartColumns         : [
{ view: function(item, column){
return"<img src='"+item.get('image')+"' width='250px' height='250px'><br /><center><h3 ><span>"+item.get('name')+"</span></h3><p><a href='javascript:;' class='simpleCart_decrement'><button>-</button></a> "+item.get('quantity')+" <a href='javascript:;' class='simpleCart_increment'><button>+</button></a></p><p>$"+item.get('price')+"</p><p><a href='javascript:;' class='simpleCart_remove remove_icon'><img src='images/icon_x.png' /></a></p></center>";
},
}
],

You can change it to your own html

cartColumns         : [
{ view: function(item, column){
return" YOUR HTML HERE ";
},
}
],

It MUST all be in ONE (1) LINE or else it may not work.

here are some values that are used

image = item.get('image') 
name = item.get('name')
quantity = item.get('quantity')
price = item.get('price')

you can look at all the values here http://simplecartjs.org/documentation/displaying_cart_data

but the point is that you can make a cart and display it how you want; with you own html and css. I hope this helped.

Upvotes: 0

Related Questions