E-store DIY – How to Make an AJAX 1-Click Shopping Cart using Shopify E-Commerce!

Okay, today I will show you how to make an AJAX a-Click shopping cart using Shopify.com, an e-commerce hosting company I have used over and over for last couple years.

First, let me tell you I have done my research on various different shopping carts as I have made shopping carts for different companies.

So far, the best and simplest shopping cart/hosting is Shopify.  I’ve tried X-cart and OScommerce but they need WAY too much customization.

Shopify has a default theme called, “Showroom”, which already has the capabilities of Lightbox (Lightbox is in-screen view of your product or image using AJAX) and 1-click checkout system.

Now the greatest part about this default theme Shopify provides is that users can head directly to checkout without leaving the homepage.  This results in allowing visitors to browse the e-store 5-10 times faster while minimizing clicks, which is what you want when building a successful e-store.

Without delay, let me show you what I mean.

I have made a demo site on Shopify over here, try clicking on the T-shirt and you will see the Lightbox in-screen feature like this:

Now, try clicking on “Add to cart” and you will see that your shopping cart will “magically” appear at the bottom of the e-store like this:

Of course, this isn’t really magic but smart application of AJAX.

The most important thing to note here is that this isn’t just for looks, it allows your visitors to browse your entire e-store faster, without leaving your homepage.

I’ve also looked into SEO factors/usability regarding this AJAX method, and it’s fine as there’s also optional product page links for those of people with older browsers (IE5 and less) or javascripts disabled.

The first time I saw this type of shopping cart was here.

Of course, Shopify theme doesn’t get “drag and drop” but still, it’s Web 2.0 at it’s best.

Now, let me show you how to make an AJAX 1-click shopping cart on any custom theme you make:

1) First, you will need to design your own custom theme using Liquid, which is basically Ruby-on-Rails.  (Or best way is to modify the default Shopify theme to your custom theme.)

2) After you are finished making your own custom theme, you simply need to port over some code from Shopify’s Showroom theme.

Here’s how to port over that code:

1) First, you need to copy over all the scripts, lightbox code, and shopping cart code from the file theme.liquid of Showroom theme to your showroom theme.

The script code is necessary for all the AJAX to work.

The lightbox code is necessary for in-screen product views.

The shopping cart code is necessary for in-screen shopping-cart at the bottom of your e-store.

(All this code is in theme.liquid file of Shopify’s Showroom theme.)

Here’s the code you will need to copy over:

Script code: (Place this within your <head> HTML tags)

{{ ‘textile.css’  | global_asset_url | stylesheet_tag }}
{{ ‘prototype.js’ | global_asset_url | script_tag }}
{{ ‘effects.js’   | global_asset_url | script_tag }}
{{ ‘api.js’       | shopify_asset_url | script_tag }}
{{ ‘shop.js’      | asset_url | script_tag }}

Lightbox code: (Place this right after your <body> HTML tags)

<!– begin LIGHTBOX
The lightbox is for the product details. It is shown for all browsers except for IE6 (due to the select z-index bug) and those who
have javascript disabled. –>
<div id=”product-lightbox” style=”display:none”>

<div id=”product-lightbox-close”>
<a href=”#” onclick=”Showroom.closeLightbox(); return false;”><img src=”{{ ‘close.gif’ | asset_url }}” alt=”close this!” /></a>
</div>

<div id=”product-lightbox-images”>
<div id=”product-lightbox-image”></div>
<div id=”product-lightbox-image-previews”></div>
</div>

<div id=”product-lightbox-desc”>
<h2 id=”product-lightbox-title”></h2>

<div id=”product-lightbox-body” class=”textile”></div>
</div>

<div id=”product-lightbox-form-area”>
<form id=”product-lightbox-form” action=”/cart/add” method=”post”>

<select name=”quantity”>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>

<select id=”variant-id” name=”id” onchange=”Showroom.onVariantChange(this);”>
<option></option>
</select>

<input id=”lightbox-submit” type=”submit” name=”add” value=”Add to cart” onclick=”Shopify.addItemFromForm(‘product-lightbox-form’); return false”/>
<p id=”product-lightbox-price”></p>

</form>
</div>

</div>
<div id=”lightbox-overlay” style=”display:none” onclick=”Showroom.closeLightbox()”></div>
<!– end LIGHTBOX –>

Shopping cart code: (Place this right before </body> HTML tag)

<!– Don’t show the bottom cart on the actual cart.liquid page… –>
{% if template != ‘cart’ %}

<!– begin div.in-cart
The cart is positioned fixed (absolute for IE6) to the bottom and shows the live content of the customer’s cart –>
<div id=”cart”{% if cart.item_count == 0 %} style=”display:none”{% endif %}>

<script type=”text/javascript” charset=”utf-8″>
// add cart class for IE for giving enough margin to show the cart
if($(‘cart’).style.display != ‘none’) { $(‘page’).addClassName(‘show-cart’); }
</script>

<table width=”100%” cellspacing=”0″ cellpadding=”0″ border=”0″>
<tr>
<td id=”cart-shade”>
</td>
</tr>
<tr>
<td>
<div id=”cart-content”>

<div id=”cart-checkout”>
<form action=”/checkout” method=”post”>
<input type=”submit” name=”” value=”Checkout” />
</form>

or <a href=”/cart”>edit cart</a>
</div>

<div id=”cart-count”>
<h3>shopping cart</h3>
<a href=”#” onclick=”Showroom.hideCart();return false”>hide cart</a><br />
<a href=”/cart”><span id=”cart-quantity”>{{ cart.item_count }}</span> {{cart.item_count | pluralize: ‘item’, ‘items’}}</a><br />
<span id=”cart-total”>{{ cart.total_price | money }}</span>
</div>

<div id=”cart-items”>
{% for item in cart.items %}

<div class=”cart-item” id=”item-{{ item.variant_id }}”>
<div class=”cart-item-image”><a href=”{{ item.product.url }}” onclick=”return Showroom.showProduct(‘{{ item.product.handle }}’);”><img src=”{{ item.product.featured_image | product_img_url: ‘thumb’ }}” alt=”{{ item.title | escape }}” /></a></div>
{{ item.quantity }}x<br /><small><a href=”{{ item.product.url }}” onclick=”return Showroom.showProduct(‘{{ item.product.handle }}’);”>{{ item.title | truncate: 18 }}</a><br />
<span class=”dark-link”><a href=”/cart/change/{{ item.variant.id}}?quantity=0&amp;return_to=back” onclick=”Shopify.removeItem(‘{{ item.variant_id }}’);return false”>remove</a></span></small>
</div>
{% endfor %}
</div>

</div>
</td>
</tr>
</table>
</div>
<!– /end div.in-cart –>
{% endif %}

Now, once you have the code in place, you will also have to make one more change in your theme.liquid file:

IMPORTANT: Make sure your <body> tag has an id called “page, like this:

<body id=”page”>

Well, we are not done yet, we also need to copy over some CSS from the Shopify Showroom theme.

Go to your shop.css (or whatever CSS file you are using) and copy over the following css for lightbox and shopping cart:  (Note, you can also see this code at the middle to bottom of shop.css of Shopify’s Showroom theme)
/* BOTTOM CART */

#cart {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 4000;
color: #fff;
margin-bottom: -2px;
}

body.loading #cart-count {
height: 100px;
background: url(‘updating.gif’) bottom left no-repeat;
}

#cart-hide {
font-size: 8pt;
color: #fff;
margin-bottom: 8px;
}

#cart-total {
color: #fff;
}

#cart-shade {
background: transparent url(‘cart-shade.png’) top left repeat-x;
height: 15px;
}

#cart h3 {
margin: 3px 0 5px 0;
color: #000;
font-size: 14pt;
}

#cart a {
color: #ebffb4;
}

#cart-content {
background: #99aec2 url(‘cart-bg.gif’) top left repeat-x;
height: 124px;
border-top: 1px solid #788898;
padding: 10px 20px 0px 20px;
}

#cart-count {
float: left;
margin-right: 30px;
font-size: 10pt;
}

#cart-items {
margin-right: 5px;
height: 120px;
overflow: auto;
}

.cart-item {
float: left;
text-align: center;
margin: 0 8px 25px 8px;
height: 90px;
width: 115px;
font-size: 10pt;
color: #fff;
}

.cart-item-image {
width: 50px;
height: 50px;
padding: 5px;
background: #fff;
border: 1px solid #788898;
text-align: center;
margin: 0 auto;
}

#cart-checkout {
float: right;
background: url(‘checkout.gif’) center right no-repeat;
width: 120px;
height: 36px;
font-size: 12px;
color: #fff;
}

#cart-checkout input {
margin-top: 8px;
padding-bottom: 0px;
font-size: 12px;
}

/* LIGHTBOX OVERLAY */

#lightbox-overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:5000;
background: #000;
-moz-opacity: 0.75;
opacity:.75;
filter: alpha(opacity=75);
}

body.loading #lightbox-overlay {
background: #000 url(‘loading.gif’) center center no-repeat;
}

#lightbox-overlay[id] {
position: fixed;
}

#product-lightbox {
position: fixed;
text-align: left;
background: #fff;
border: 1px solid #d9d9cf;
top: 50%;
left: 50%;
z-index:6000;
padding: 15px 10px;
width: 800px;
height: 580px;
margin: -305px -410px;
}

#product-lightbox-close {
position: relative;
height: 28px;
width: 30px;
left: 781px;
bottom: 15px;
margin-bottom: -10px;
}

#product-lightbox-desc {
width: 300px;
z-index: 9999;
height: 440px;
overflow: auto;
}

#product-lightbox h2 {
margin: 0 0 20px 0;
font-weight: normal;
font-size: 150%;
color: #111;
clear: right;
}

#product-lightbox-images {
float: left;
}

#product-lightbox-image-previews {
width: 500px;
height: 60px;
overflow: hidden;
}

#product-lightbox-image {
text-align: center;
width: 480px;
height: 480px;
border-bottom: 1px solid #d9d9cf;
margin: 0 10px 10px 0;
}

#product-lightbox-image-previews div {
text-align: center;
width: 50px;
height: 50px;
float: left;
border: 1px solid #ccc;
padding: 3px;
margin: 0 7px 5px 0;
z-index: 9999;
}

#product-lightbox-form-area {
position: relative;
top: 40px;
float: right;
width: 285px;
z-index: 9999;
border: 1px solid #dcebf6;
background: #eff6fb;
padding: 5px;
}

#lightbox-submit {
display: block;
float: right;
margin-top: 10px;
}

Last but not least, you will need to add the following code for any “Add to Cart” buttons you might use in index.liquid or product.liquid:

<input type=”submit” name=”add” value=”Add to cart” class=”fr” onclick=”Shopify.addItemFromForm(‘product-{{product.id}}’);return false”/>

You can also specify th product-{{product.id}} by exact product name like this:

<input type=”submit” name=”add” value=”Add to cart” class=”fr” onclick=”Shopify.addItemFromForm(‘my-product’);return false”/>

This will enable the in-screen product preview when people click on your Add to Cart button or you can also use it for <a href> tags like this:

<a href=”http://example.com/myproduct” onclick=”Shopify.addItemFromForm(‘product-{{product.id}}’);return false”/>
Now, that’s about it.  Sometimes you might have some crash with the shopping cart on IE6 if you have dropdown javascript menus.

For that occasion, you can disable the AJAX feature by adding before any code you added:

<![if !IE 6]>

and

<![endif]>

at the end of any code you added.

I’ve just implemented this over at my client’s Keetsa E-store over here in just 2.5 hours yesterday and wanted to share it with anyone who’s using Shopify.

Plus, there was no how-to guide on how to port Shopify’s Showroom theme but here it is. 🙂

This is simply the greatest way to implement a new e-store that will allow your visitors to shop in real “Web 2.0” method while increasing your sales conversion rates.

You can sign up for shopify here if you are interested in making your e-store more Web 2.0 and moving at the speed of technology.

Leave a Reply

Your email address will not be published.




Related News and Resources