Plank

Contact Us
Tech

Everything Add To Cart

Everything Add To Cart

The purpose of this mod is to make adding Ajax 'Add To Cart' buttons super easy.

Features:

  • Turn any form with action=/cart/add into an Ajax action
  • Multiple 'Add To Cart' buttons on one page

The base theme I am modifying for this is the free Solo theme. The walk-through should be enough to help you apply to any theme with little changes.

We will start by 'Ajaxifying' the default 'Buy This' form that is on the product.liquid template. The second part will deal with adding an 'Add To Cart' wherever you have a product.

Begin

(The contents of those files will be the subject of a later post, but you can read the source, it’s commented.)

Edit layout/theme.liquid

At the bottom of your layout/theme.liquid add the two scripts you just uploaded to your assets folder:

</body>
{{ 'api.jquery.js' | asset_url | script_tag }}
{{ 'ajaxify-shop.js' | asset_url | script_tag }}
</html>

Next, we prepare the template so we can update the number of items in the cart after an item has been added.

Wrap this:

    {{ cart.item_count }} {{ cart.item_count | pluralize: "Item", "Items" }}

like so:

<span class="cart-total-items"><span class="count">{{ cart.item_count }}</span> {{ cart.item_count | pluralize: "Item", "Items" }}</span>

You can surround the above fragment with any markup you want. The important part being class="cart-total-items". Any element with this class will have its HTML updated when something is added to the cart. This will update the span with the number of items in the cart, as well as word Item/Items. The HTML that will be dropped into this element will be like:

<span class="count">5</span> Items
<span class="count">1</span> Item
<span class="count">0</span> Items

You can see the end result of these modifications in my theme.liquid

Edit assets/theme.css.liquid

When the 'Add To Cart' button is clicked, we disable the button, and add the class of 'disabled', so you can style the button when it’s inactive.

So, open assets/theme.css.liquid and add this:

/* Disabled input */
input.disabled {
    opacity: .5;
}

This will make the button get lighter. You can, of course, style however you like. You can view my theme.css.liquid.

At this point, if you visit a product page and click on 'Buy This', you should have it all be goodness.

But wait! there’s more…

Adding an 'Add To Cart' everywhere

Now, we make it easy to place an 'Add To Cart' button for a bunch of items on a page. For this example, we will place an 'Add To Cart' button on every item on our collections page. You can see it in action on my collection page.

Only one 'Add To Cart' form to use everywhere. So a simple form is created as a snippet.

  • upload snippets/add-to-cart.liquid to your snippets.
    It includes a variants drop-down which will show up if you have more than 1 variant. You can easily comment that out (it’s clearly marked) and it will default to the first variant.
    You can style the form however you like. The submit button can be type=image if desired, and everything should keep working fine.
  • edit templates/collection.liquid. Right before the closing <li> on line 19add 
    {% include "add-to-cart" %}

I should point out that add-to-cart.liquid is just a regular add product form. Any valid change you could make to an add product form, you can just drop in here. If you look at the history of add-to-cart.liquid, you’ll see this is exactly what I did with the variants drop-down. It’s pretty much a copy-paste of the code from the default product page.

And you’re done.

As you may have guessed by now, you can view this theme in its entirety on github.

Feedback always welcome,

m

Updated to reflect addition of variants drop down.

Comments

  1. Mitchell you say this only accounts for the first variant? Do you mean just on the collection.liquid scenario? It’s working fine across all options and variants for me in product.liquid. Just wanted to post a follow up to the guy on the forum.

  2. Hey Jamie.
    Yes, it was just for the ‘add to cart’ everywhere, which was added to the collection.liquid. in my example, i left the variants drop down.
    I’ve now added it, and made it a bit more clear (i hope) that add-to-cart.liquid is just a regular form, like on the product page.

    thanks
    m

  3. just wondering if there is a quickie way to show text “item added” when you click “add to cart” button instead of just changing css?

  6. I’m a bit stuck with ‘multiple ajax add to cart buttons’ as described in ‘http://www.plankdesign.com/blog/2010/09/everything-add-to-cart/‘ – I’m not sure if this is a theme conflict or something else, but it seems like something’s going rather wonky here:

    The product page stock ‘add to cart’ button gives me an alert and ajax-es the request, but the cart doesn’t update, despite the required tags being placed around it.

    The add-to-cart snippet has good functionality here as well – but again, the cart doesn’t update.

    The ‘add to cart’ buttons via the add-to-cart snippet on the main page don’t seem to call the ajax routine at all, despite the fact that it works on the product page.

    I’m really not sure what’s going on here. Do you happen to have any ideas?

  7. Hi Ian,
    I’m looking at your shop, http://freshbag.myshopify.com/ , but I’m not seeing the ajaxify-shop.js being included. Maybe you have removed it since you posted this. Sorry about the delay, having issues with our blog where I dont get notices that something is waiting for moderation.
    let me know if you still want help.

  8. Hi, been implementing this on my site and seem to having it working (so much better than sending customer to cart page each time!)

    I have a Cart preview box in my sidebar which also shows a list of the products currently in the cart (not editable like main cart page though). Just wondering how easy it would be to have these appear live using ajaxify cart too?

    Thanks heaps, Jon :)

  9. Hi,

    I can’t get this to work on my site for some reason:

    http://bit.ly/ugCoT7

    Nothing happens when I click on the ‘buy’ (kop) button and I get the error “Uncaught Syntax error, unrecognized expression: [action*=/cart/add]” on line 3 of jquery.min.js

    Could you take a look for me please?

    Thanks

  10. Hi, A little update. I changed the selectors in ajaxify-shop.js now and everything is working it seems other than the items being updated in the cart i.e. the add to cart button is disabled when I click on it.

    The error message I get in Firebug is this:

    “Uncaught Syntax error, unrecognized expression: #[object HTMLFormElement]”

    I’ve had to comment out ajaxify-shopify.js for the meantime so customers can still purchase items, but do you know what the problem might be?

    Thanks,

    Osu

Post a Comment

Just a moment...