Javascript Disabled?

One thing that’s always kinda bugged me about the standard Shopify themes is the fact that they rely on a user having Javascript turned on. Well, at least the cart does.

While it’s true that the majority of users have Javascript enabled, I believe it’s designers/developers duty to make sure websites function properly if a user chooses to disable it. There are exceptions, but I strive to make the page work for everybody, then add the dynamic and interactive Javascript features later.

All that said, all the standard Shopify themes (including Vogue) use Javascript to remove a product from the cart. It’s bothered me, but I’ve never spent the time to figure out how to remove an item without it. Fortunately, Daniel of Shopify did!

While perusing through Daniel’s Showroom theme, I stumbled across his solution to remove a product from the cart with Javascript if it’s enabled and a standard XHTML LINK tag if it’s not. This is fantastic because we can easily apply this method to the Vogue theme and make it 100% accessible! Let’s do it…

First, login to your admin, click “Look & Feel”, then click cart.liquid. Once you’ve opened the cart template, locate the following block of code towards the bottom…

<a href="#" onclick="remove_item({{ item.variant.id }}); return false;">Remove</a>

And replace it with…

<a href="/cart/change/{{ item.variant.id }}?quantity=0" 
onclick="remove_item({{item.variant.id}}); return false;">Remove</a>

This little piece of code was the only thing holding Vogue back from accessibility to everybody. There is now NO dependence on Javascript, but still takes advantage of it if enabled!