8

I looked everywhere and i cant seem to find anyone talking about how they have done it... im sure i could write something custom to do it but wanted to see if anyone else out there had already solved the problem?

9

It's fairly easy to create an AJAX add to cart button using Store. It's no different from any other AJAX form submission. This used to be in our user guide, but SE is a much better place for "how to" questions so I'll summarize here:

The general process is:

  1. Create your sidebar cart as a separate template
  2. Embed your sidebar cart inside a known div element in your main template
  3. Add an id to your add to cart button
  4. When the add to cart button is clicked, use javascript to post the form data via AJAX instead
  5. When the AJAX request finishes, reload your sidebar cart div

The javascript is fairly simple (assuming you have jQuery installed):

<script type="text/javascript">
$(document).ready(function() {
    $('#add_to_cart_button').click(function() {
        var url = $(this.form).attr('action');
        var data = $(this.form).serialize();
        $.post(url, data, function() {
            $('#sidebar_cart').load('/store/cart');
        });
        return false;
    });
});
</script>

Let’s step through this one line at a time.

$(document).ready(function() {

This line should be fairly familiar if you have used jQuery before. It ensures the contained code won’t run until your page has finished loading.

$('#add_to_cart_button').click(function() {

Add a click handler to your add to cart button. Make sure your add to cart button has a matching id="" parameter.

var url = $(this.form).attr('action');
var data = $(this.form).serialize();

Get the url the form should be submitted to, and all the form data which would usually be submitted.

$.post(url, data, function() {
    $('#sidebar_cart').load('/store/cart');

Submit the form AJAX-style (in the background). When it’s finished, request “/store/cart”, and replace the contents of our with it.

return false;

This is important, to prevent the browser from doing whatever it would usually do next (which in this case is submit the form itself, and redirect to the checkout, which we no longer need).

You may also wish to add some javascript effects such as jQuery UI Transfer and a scroll-to-top.

  • I used this and it worked, but how you would use this to empty all items of a shopping card? I don't know also how the post know that you add an item? You could also delete this item? – Peter Mar 14 '13 at 16:58
  • To remove items from the cart you would actually need to be using the {exp:store:checkout} tag pair and something along the line of {items}<input type="checkbox" name="remove_items[{key}]" value="1" />{/items} the main thing is that you have a name of "remove_items[{key}]" on the form element in question. The example above would create a checkbox that when checked and the user updates the cart it would remove any items that are checked. Alternatively you could use a text input or submit button – Justin Long Mar 15 '13 at 2:51
  • 1
    Or just post empty_cart=1 to the Store checkout URL if you want to remove all items at once. – Adrian Macneil Mar 17 '13 at 15:06
  • Works great! Thanks for the thorough explanation. Only thing missing is when using {if_no_items} and cart qty is 0, when item is added still need a refresh. – 88mpg Feb 17 '14 at 16:21
3

In order to make this work with Store 2.0 / EE 2.7 you need to make an extra template with a form so a new XID is generated.
After the ajax request to the cart, make a new ajax request to the template with the form.
Get the xid from that template and update the xid on your orignal template

jquery / ajax:

url = 'ajaxform'
$.get(url, function(returnData) {
    var newXID = $(returnData).find('input[name="XID"]').val();
    $('input[name="XID"]').val(newXID);
});
  • This should be fixed in Store 2.2+. We don't automatically expire the XID, so you can reuse it for multiple ajax cart submissions. – Adrian Macneil Feb 20 '14 at 4:43
0

As there is no action element on the add to cart form I need to get the URL using the following js

var url = $(this.form).find('input[name="return_url"]').val();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.