Adding a thumb to simplecart js image source undefined

Question

I'm using the simplecart js. I'm having trouble getting a image source of the product image to appear with the product info in the cart.

the image source is undefined, see demo http://jsfiddle.net/z7xW4/15/

I use the following code to create columns

<div class="simpleCart_shelfItem">

<img alt="image" src="http://placehold.it/100x100" class="item-image"/>
<a href="javascript:;" class="item_add">Add to Cart</a>

Cart

  simpleCart({
checkout: {
  type: "PayPal",
  email: "you@yours.com"
},
cartColumns: [
    
    {view:'image' , attr:'thumb', label: false},
    { attr: "price" , label: "Price", view: 'currency' } ,
    
    { attr: "quantity" , label: "Qty" } ,
    
    { attr: "total" , label: "SubTotal", view: 'currency' } ,
    { view: "remove" , text: "Remove" , label: false }
],
cartStyle: "table"
});

score 3 · Accepted Answer · answered Apr 07 '14 at 19:58

3

Solved by using this code

{ view: function(item, column){
      return"<img src='"+item.get('image')+"'>";
   },
  attr: 'image' },

see demo http://jsfiddle.net/z7xW4/23/

answered Apr 07 '14 at 19:58

user2847739

115
1
10

score 2 · Answer 2 · answered May 07 '14 at 12:59

Building on your answer and digging around I figured out this solution that uses the javascript simpleCart.add() function instead of the html configuration for defining items. This is for simpleCart v3 (tested with v3.0.5).

The simpleCart config is the same (I used thumb for my image field):

simpleCart({
    checkout: {
        type: "PayPal",
        email: "you@yours.com" },
    cartColumns: [
        {view : function(item, column){
            return "<img src='" + item.get('thumb') + "'>";},
            attr : 'thumb'},
        { attr: "price" , label: "Price", view: 'currency' } ,
        { attr: "quantity" , label: "Qty" } ,
        { attr: "total" , label: "SubTotal", view: 'currency' } ,
        { view: "remove" , text: "Remove" , label: false }   ],
    cartStyle: "table"
 });

And this is the different part since it uses the simpleCart add function which I liked better and could not find an example of anywhere else:

 <li><img class="productimage" src="myproductimage.png" alt"myproductname" />
 <span class="price">$10</span><b>MyProductName<br />
 <a href="#" onclick="simpleCart.add({quantity:1,name:'myproductname',price:'10.00',thumb:'myproductimage.png'});return false;">add to cart</a></b></li>

Adding a thumb to simplecart js image source undefined

Cart

2 Answers2