Syndicate

Feed

Working on the product pages

Although we will want the browser to execute our JavaScript code on product pages only, we will not add our JavaScript code to product.liquid. We could, but we prefer to add all JavaScript to the head element of the document — where we can find all code in a snap, even when tired and confused.

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

Browse this article

Last edited by Caroline Schnapp about 5 years ago.

Comments

Ran into an error.

Hi,

I tried to out your tutorial and thought I had it all figured out, except the drop downs do not show up. When I use fire bug, everything looks right, excepts my attributes are listed in red and in quotes. What step did I miss?

Thanks in advance!
.m.

Strings in Firebug

When I use fire bug, everything looks right, excepts my attributes are listed in red and in quotes. What step did I miss?

These are in red and in quotes because that's how String variables are displayed in Firebug. I have looked at the screen capture you sent me by email, and I can tell you that much: there's no problem whatsoever in how your variants are “descrambled”.

The code I provide is tailored to work for a certain theme (Vogue). If the drop-downs don't show up in your own theme, it's probably because they're not appended to the right div element in the code.

Although we will want the

Although we will want the browser to execute our JavaScript code on product pages only, we will not add our JavaScript code to product.liquid. We could, but we prefer to add all JavaScript to the head element of the document — where we can find all code in a snap, even when tired and confused.
http://e-papierossy.com.pl/en/e-papierosy/96-e-papierosy-gambit-5609.html
http://e-papierossy.com.pl/en/e-papierosy/95-e-papierosy-gambit-5412.html
http://e-papierossy.com.pl/en/e-papierosy/94-e-papierosy-gambit-9812.html

variants descrambled

hey caroline, i can see that my variants are descrambled correctly.
my shop is a custom version of glacialis and i cant see the descrambled dropdowns.

is there something i should change in the code you gave?

please help! this has been two weeks of hell for me and my client is losing business because of this...

DOM scripting

please help! this has been two weeks of hell for me and my client is losing business because of this...

The code provided involves manipulation of the Document Object Model, the algorithm is explained in details, same with the code. If you need my help with this, hire me. Implementation of the Descrambler costs $300 USD.

Alternatively, teach yourself DOM scripting with the JavaScript library of your choice. If you like jQuery, I recommend reading the book JavaScript The Missing Manual, or Learning jQuery 1.3.

uh huh

got it.
forget it.
thanks for the help.

wasn't complaining.
I only joined this site for this tutorial.
doesn't matter anywho.

take care.

and please don't think the word "client" means I make ANY money from this...
I'm just helping someone, that's why it's been 2 weeks - I'm not a programmer...
If this were a real client, I would just pay my programmer to do it.

Well then...

I hope that your friend has paid for your subscription, and that you will get lots of beer too.

Take care,

Caroline

lol

no they didn't.

no beer either...

i'd rather have a nice dark scotch...

Yes

i'd rather have a nice dark scotch...

A nice 10 to 15 year-old scotch bottle.

very new to this and so far i appreciate everything here

my question is with using this and shopify i have figured out how to use single sku's for multi items using your tutorial which was great thank you. but what i need to do now is be able to change those options per item. am i correct that this is the correct way following this tutorial or is there a easier way? as i said im very new to this and am learning as i go. this is strictly to help my wife out only. i come from a hardware backround and this is all new to me.

essentially if i have 2 items but want to offer them in different sizes and or colors what is the best way to implement that? that is my last step in getting her going. any help would be great and thank you for all the hard work in your tutorials.

By the way, you're posting

By the way, you're posting your comment under the wrong tutorial if you want to use 1 SKU per product and have options. The tutorial that shows how to use JavaScript attributes is over here.

but what i need to do now is be able to change those options per item... [...] essentially if i have 2 items but want to offer them in different sizes and or colors what is the best way to implement that

You will need to do the following if your options differ on a per-product basis:

  1. Define your options in your product description (at the bottom), using JavaScript
  2. From these options, build your drop-down boxes dynamically on the product page

For no 1, define 2 arrays in your product description and wrap your code in notextile tags, like so:

<notextile>
<script type="text/javascript">
if ((typeof Shopify) == 'undefined') {
  var Shopify = {};
}
Shopify.colors = [....];
Shopify.sizes = [....];
</script>
</notextile>

As for no 2, you can make your life easier if you use the select element manipulation plugin I recommend here.

Thanks for the positive feedback. It is very much appreciated. It made my day!

Thank you so much im trying this now....

it was driving me crazy trying to figure this out i had no idea i could edit the descriptions like that using javascript. im testing it now. ill be so happy if this works.. you are awesome ill report back as soon as i see if i can get it.. thank you again for taking the time out to help

okay now i think im

okay now i think im confused... prior to your posting i was able to get the buttons viewable and working by adding this (see below)

directly to the product description page. the buttons show up BUT... if i click add to cart it does not tell me what was chosen just that that certain product is in the cart. no size and or color.

i have uploaded the plugin you directed me to and tried removing what i had and adding your script (thank you again so very much for your help here id be lost without your site) but with that script i do not show the buttons at all.

i must be missing something and i hope maybe something stupid its been one of those days. what am i doing wrong? thank you again for everything you do for the shopfiy community

<notextile>
     <select name="Size">
     <option value="32A">32A</option>
     <option value="36C" selected="selected">36C</option>
     <option value="34D">34D</option>
   </select>
   <select name="color">
     <option value="White">White</option>
     <option value="Black" selected="selected">Black</option>
     <option value="Yellow">Yellow</option>
     <option value="brown">brown</option>
</notextile>

Plugin

but with that script i do not show the buttons at all.

Linking to the plugin is not sufficient. You still have to use the plugin.

It has its own documentation. I provide a link to the plugin's documentation page.

By the way, you don't have to use a plugin, and if you do you don't have to use that particular one.

hmm okay reading

the plugin info now. still unsure but i think (or hope) im getting this.. i come from the old days of ibm and assembly etc and a lot of this is new to me.. im just starting to learn all this new java stuff lol.. thanks again

good topic.

Actually I am write up a report on this article and it helped me with a mischievousness glance.

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.