Creating a Threadless-like Add-to-Cart button using jQuery and AJAX

posted July 12, 2010 under Shopify

In this tutorial we will be modifying the product page of the Ripen theme to work more like the product page on Threadless. We’re going to be modifying the Ripen theme, but this tutorial is applicable to any Shopify theme. I would like to thank John Tajima again for teaching me how AJAX and JSON objects work with Shopify. We will also make it so that the number of products in the cart displayed automatically updates after you add an item to the cart.

A quick demo of the completed theme in action

1. Install jQuery

If you are unsure of how to do this, please see Steps 1 to 3 from this tutorial.

2. Install Colorbox

Grab the jQuery plugin Colorbox here, and upload it to your theme assets. We’re going to be using Colorbox to get the lightbox popup when a product is added to the cart. I usually use Fancybox for lightboxes, but I decided to go with Colorbox for this tutorial because it “can be called directly, without assignment to an element”. This means that I can call a Colorbox method, and create a lightbox on-the-fly when the “Add to Cart” button is clicked, but with Fancybox this would be impossible.

thread1

In your theme assets, you should have “jquery.colorbox-min.js” and “colorbox.css”.

Be sure to add these two files in the <head> section to your theme.liquid as well.

<head>
     ...other assets
     {{ 'colorbox.css' | asset_url  | stylesheet_tag }}
     {{ 'jquery.colorbox-min.js' | asset_url | script_tag }}
</head>

3. Modify the “Add to Cart” button

Open your product.liquid file, and locate the input button for adding to the cart. The input button looks like this:

 <input type="submit" name="add" value="Add to Cart" id="add" />

We want to do two things to this button: first, we want to make it so that even if the user clicks on it, the user is not taken to the cart page. Second, we want to call a custom function (that we’re going to be writing shortly) that makes an AJAX call to add the product to the cart. 

 <input type="submit" name="add" value="Add to Cart" id="add" onclick="return false; addItem('add-to-cart');"/>

The addItem function takes the form’s id as a parameter. This is so that when we use jQuery later, we know which form to select. The opening tag for your form should look like this:

<form action="/cart/add" method="post" id="add-to-cart">

4. Preparing product.liquid

Add the following line at the top of product.liquid. 

<div id="added-box-wrapper" style="display:none;">
    <div id="added-box"></div>
</div>

The added-box is where the content of the lightbox will be inserted. We need to wrap it in another div with a “display:none;” so that the content of the lightbox are not displayed on the actual page.

5. Preparing theme.liquid

Next, we have to modify theme.liquid a little so that the number displayed for the number of items in the cart updates automagically. In theme.liquid, find a place where you want to show a link to the cart. In this tutorial, I’m going to put it in the right column, under where it says “Shopping Cart”. 

<a href="/cart" id="cart-number">
    {% if cart.item_count == 0 %}
       Your cart is empty.
    {% endif %}
</a>

What’s important here is that the <a> tag has the id “cart-number”, so that we can select it with jQuery later to modify its contents.

Pages: 1 2

Leave a Reply:




Comment