添加拇指到simplecart js图像源undefined

时间:2014-04-06 20:06:57

标签: javascript jquery image shopping-cart simplecart

我正在使用simplecart js。我无法将产品图片的图片来源与购物车中的产品信息一起显示。

图片来源未定义,请参阅演示http://jsfiddle.net/z7xW4/15/

我使用以下代码创建列

<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>


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

2 个答案:

答案 0 :(得分:3)

使用此代码解决

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

参见演示http://jsfiddle.net/z7xW4/23/

答案 1 :(得分:2)

在你的答案和挖掘的基础上,我发现这个解决方案使用javascript simpleCart.add()函数而不是html配置来定义项目。这适用于simpleCart v3(使用v3.0.5测试)。

simpleCart配置是相同的(我的拇指用于我的图像字段):

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

这是不同的部分,因为它使用了我更喜欢的simpleCart add功能,并且无法找到其他任何地方的示例:

 <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>