Remove Item from Shelf

[whisperingJack]

Is there any way to remove an item from the shelf (not the cart)? The reason I ask is that the cart is not visible until checkout on another page the way I have imlemented it and I would like my users to be able to remove an item without leaving the page if, for example, they had clicked one to many times on the add link.

[whisperingJack]

bump

[brettwejrowski]

which version are you using?

[whisperingJack]

The latest one. Thanks for replying!

Regards,

Jamie Polson-brown

---

All About Soakwells
0420 903 950
[email protected]
www.allaboutsoakwells.com

On 26/04/2012, at 12:51, brettwejrowski [email protected] wrote:

which version are you using?

---

Reply to this email directly or view it on GitHub:
#224 (comment)

[brettwejrowski]

Hmmm well currently there is no built in support for a button class in a shelfItem to remove an item from the cart, but I will consider a way to make that work.

That being said, you could do it programmatically by searching for the item with the simpleCart.find() function. So lets say you have a unique ID as an attribute for each shelfItem called "item_UID" and you have a link with a class called "removeItem". You can use some built-in binding functions that simpleCart uses internally:

simpleCart.bindInputs( [{
  selector: 'shelfItem .removeItem'  , // this is the selector for the remove item link 
  event: 'click' , // watch for click events
  callback: function(){
    // get the shelfItem this link is contained by
    var shelfItem = simpleCart.$(this).closest('.shelfItem'),
      // get the UID input in the shelfItem
      uid = shelfItem.find( ".item_UID" ).val();

    // find the item(s) in simpleCart and remove them
    // this should only return one item if the UID is unique,
    // but simpleCart.find() will always return an array if you
    // pass values to search for, so we use the .each function
    // to be safe
    simpleCart.find({ UID: uid }).each(function( item ){
      item.remove();
    });
  }
}] );

A shelfItem might look like this:

<div class="simpleCart_shelfItem">
  <h3 class="item_name">My cool Item</h3>
  <span class="item_price">$34.99</span> 
  <input type="hidden" class="item_UID" value="item999" />
  <a href="javascript:;" class="item_add">Add to Cart</a>
  <a href="javascript:;" class="removeItem">Remove from Cart</a>
</div>

Hope this helps!

[whisperingJack]

Thanks for that I'll give it a go. The reason I'm after this functionality is if the user accidentally add an item or changes their mind I want them to be able to remove it without leaving the page. Here's an example of how I implemented it if your interested. Http://www.diysoakwells.com.au/downpipe.html Simple cart is fantastic by the way.

Regards,

Jamie Polson-brown

---

All About Soakwells
0420 903 950
[email protected]
www.allaboutsoakwells.com

On 26/04/2012, at 13:21, brettwejrowski [email protected] wrote:

Hmmm well currently there is no built in support for a button class in a shelfItem to remove an item from the cart, but I will consider a way to make that work.

That being said, you could do it programmatically by searching for the item with the simpleCart.find() function. So lets say you have a unique ID as an attribute for each shelfItem called "item_UID" and you have a link with a class called "removeItem". You can use some built-in binding functions that simpleCart uses internally:

simpleCart.bindInputs( [{
 selector: 'shelfItem .removeItem'  , // this is the selector for the remove item link in the shelf item
 event: 'click' , // watch for click events
 callback: function(){
   // get the shelfItem this link is contained by
   var shelfItem = simpleCart.$(this).closest('.shelfItem'),
     uid = shelfItem.find( ".item_UID" ).val();

   // find the item(s) in simpleCart and remove them
   // this should only return one item if the UID is unique,
   // but simpleCart.find() will always return an array if you
   // pass values to search for, so we use the .each function
   // to be safe
   simpleCart.find({ UID: uid }).each(function( item ){
     item.remove();
   });
 }
}] );

A shelfItem might look like this:

<div class="simpleCart_shelfItem">
 <h3 class="item_name">My cool Item</h3>
 <span class="item_price">$34.99</span> 
 <input type="hidden" class="item_UID" value="item999" />
 <a href="javascript:;" class="item_add">Add to Cart</a>
 <a href="javascript:;" class="removeItem">Remove from Cart</a>
</div>

Hope this helps!

---

Reply to this email directly or view it on GitHub:
#224 (comment)