Syndicate

Feed

Working on the cart page

Now that we've covered what needed to be done on product pages, we will move our attention to the cart page.

Oupsy, the full text and download are available to premium subscribers only. You must either log in or register to access this content.

Last edited by Caroline Schnapp about 42 weeks ago.

Comments

Items do not show. Remove link does not work.

Hi,

The "Items" do not display the material and color of the bag. The column is empty.
The "Remove" link does not work. Also, only one "Remove" link displays if multiple items of the same SKU is added to the cart.

I am sorry, I cannot help you, Ann.

The example online works very well and uses the code from the tutorial. I cannot help you because I cannot look at your code.

Referring to http://11heavens.myshopify.com/cart

I was looking at the online store that you built in the tutorial. I added the same bag with different materials and color to the cart. While in the cart page, I tried removing an item by clicking on "Remove" but no item was deleted. Also, the variable in the Items column do not show up. There is only one "Remove" link for multiple quantities of the same product.

http://11heavens.myshopify.com/cart

Clear your cookies

Clear all your path cookies.

Also please uncomment the console.log that prints the content of the cookie and let me know what the cookie contains, using Firebug.

Ah I see what the problem is...

I had left a few console.log instructions in my code. That will cause problems in IE. Were you in IE...?

Let me know if it works now. Use the updated code.

Cheers,

Yay!

Hi Caroline,

It works now. Both in IE7 and Firefox.

Thanks so much!

ahah I got an e-mail from Shopify

Shipping address:
Ann ...

2x Doggy bag (sku: 6789456)

doggy-bag_Bag[Material: Plastic, Color: Yellow] [Material: Plastic, Color: Black]

Cart testing

That is me testing the cart :)

Jquery example() function breaking code

Great tutorial!

For future users attempting this tutorial, your last output of jQuery has the following line:

jQuery('#note').example('Type your special instructions here.');

A simple switch to the following made everything work perfectly for me.

jQuery('#note').val('Type your special instructions here.');

Other than that, everything went as smooth as ever. Great work.

I am using the example jquery plugin

I am using the jquery plugin that's here. Did I really copy and paste the code from the test site with that line? It should be removed. Using the example plugin is just fluff, not relevant to the task. I'm sorry.

Do not use this line:

jQuery('#note').val('Type your special instructions here.');

I got rid of the line

I fixed the tutorial. Thanks Aaron.

First off, thank you so much

First off, thank you so much for this, it has been such a huge help for me.

I had a question in regards to this method. Is there a way I can do this when there is more than one variant? I working on a wine club page in which one product has a 2 bottle and a 6 bottle variation, each one costs differently. But on the product page, I have different questions to ask the customer, that I need to appear in my order page in the admin. (example: is this a gift? (yes/no), shipping address is (residential/business), etc.) So far I can get it to work with one variation, but that {% assign variant = product.variants.first %} code of course doesn't all me to have other variations.

Any help with this would be appreciated. Thank you.

Hi Darion,

I answered your question in the Shopify forums.

Here it is:

because of this part of the code: {% assign variant = product.variants.first %}

That’s a change made to the Vogue theme. Don’t make that change if you also want Shopify Variants.

You will also need to edit that part of the JavaScript that writes to the web cookie. The variant ID must be read from the form (as opposed to picking up the first variant ID), and then stored to the cookie with the other values.

Good luck.

If you need further assistance or customization of this code, contact me.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <css> <html> <javascript> <mysql> <php> <span> <a> <b> <i> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <sup> <sub> <dd> <del> <blockquote> <img> <q> <p> <div>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <css>, <html>, <javascript>, <mysql>, <php>, <rails>, <ruby>.

More information about formatting options

CAPTCHA
I have to wonder if you're a human spammer or a machine, or less likely someone who cares to leave his or her thoughts behind.