help? need to pass dynamic select button choices to cart…

@taylor1May 21.2009

i am setting up our web site and really hope someone here can help this seems like a great place to look for the help i need.

im doing great i think so far since i have very little javascript experience. but im so stuck on this last thing to get my site up and running.

okay this is the situation: i have my product pages up and i need to be able to have select buttons on those pages for size and color for each different item.

i am able to add those buttons a few ways i know that and i can very easy get the buttons to show up on my product pages. the problem is i need the customer to be able to choose those options and then add the item to the cart and show me and them which options were chosen so i know what to send them

this is my last stumbling block. so can someone please help me figure out how to (i was told this is what its called but they may have been wrong) pass the selected values to the cart page.

i can provide any of my pages if needed im hoping someone can maybe explain the how and why of this because i really want to learn here how to do this. i am really trying to teach myself javascript as well as jquery. thank you in advance for any help you can be!!

to post a comment

JavaScript

9 Comments(s) _↴

@taylor1authorMay 21.2009 — #this right now is my cart page btw (minus html tags):

[code=html]<h2>Your Shopping Cart</h2>
 {% if cart.item_count == 0 %}
 <h3>Your cart is empty</h3>
 <p><a href="/"><img src="{{ 'continueshopping.gif' | asset_url }}" alt="continue shopping" /></a></p>
 {% else %}
 <form action="/cart" method="post" id="cartform" name="cartform">
 {% for item in cart.items %}
 <div id="shoppingcart">
 <div class="shoppingcart-image"> <img src="{{ item.product.images.first | product_img_url: 'medium' }}" alt="{{ item.title | escape }}" /> </div>
 <div>
 <h3><a href="{{ item.product.url }}">{{ item.title }}</a><br />
 SKU: {{ item.sku }}<br />
 {{ item.price | money }}</h3>
 <div class="updater">
 <input type="text" name="updates[]" value="{{ item.quantity }}" onfocus="this.select();" class="cart-update" />
 <input type="submit" name="update" value="Update" id="update-cart">
 <br />
 <br />
 <a href="/cart/change/{{ item.variant.id }}?quantity=0">Remove from cart</a> </div>
 </div>
 </div>
 {% endfor %}
 <div class="total">SUBTOTAL: {{ cart.total_price | money }} {{ shop.currency }}</div>
 <div class="checkout">
 <a href="/"><img src="{{ 'continueshopping.gif' | asset_url }}" alt="continue shopping" /></a>
 <input type="image" value="Proceed to Checkout" name="checkout" src="{{ 'checkout.gif' | asset_url }}"/>
 </div>
 </form>
 {% endif %}
 [/code]

and this is right now currently how the buttons show up on the product pages (again minus the html tags that was the only way i could get it to show up right):

[code=html]<form action="/cart/add" method="post"> 
 <div id="product-variants">
 <select id="color" name="color" value="0"> 
 <option value="select">Select Color</option> 
 <option value="white">White</option>
 <option value="black">Black</option>
 <option value="brown">Brown</option>
 </select> 
 <select id="size" name="size" value="0"> 
 <option class="select" value="select">Select Size</option> 
 <option class="white" value="32a">32A</option> 
 <option class="white" value="32b">32B</option> 
 <option class="white" value="32c">32C</option> 
 <option class="black" value="34a">34A</option> 
 <option class="black" value="34b">34B</option> 
 <option class="black" value="34c">34C</option> 
 <option class="brown" value="36a">36A</option> 
 <option class="brown" value="36b">36B</option> 
 </select> 
 <br>
 <input type="image" src="http://i45.photobucket.com/albums/f65/emmi1116/website/add1.gif" name="add" value="Purchase" id="purchase" />
 </div>
 
 </form>
 [/code]

how can i set this up to use select buttons like these but get the customers options they choose to show up in the cart. i can get the description of each item by itself to show up but not the results from the buttons.. im sure im doing something wrong but im learning as i said and started from nowhere.. ?

im so new at this please help me out what am i doing wrong?? do i need to change the way they are added to the product pages? or ??? im stuck right here and this will complete things for me (for a while at least ? ) thanks so very much for any help you can be in advance..

@taylor1authorMay 21.2009 — #sorry to add more but this is one of her product pages showing the buttons. what we need is those buttons to send that info to the cart page.

http://www.magnifiquelingerie.com/products/affinitas-balconet-bra

please anyone help me out.. thank you

@Y_LessMay 21.2009 — #That information is sent to the server when you click on the submit button as it's part of the form, you need to parse it there ($_POST in php, don't know it in other languages unfortunately).

As an aside, I had a quick look over your code, you're using both mootools and jQuery, it's not generally a good idea to mix frameworks like that, use one or the other. Partially because of size and partially because of compatibility. And you have two divs with the id "product-variants", there may be other instances of multiple divs with the same id but I've not looked. IDs should be unique, or they're not a very good identifier.

@taylor1authorMay 21.2009 — #okay thanks for the start.. ill remove some stuff as i said im new to this. is there any way to possibly find a tutorial or something to aid me in parsing the info i need to im not sure yet fully how to do that very well. i can try but im not sure ill do it right. i would love some more help and be very greatful. thank you for responding to me though it means a lot to someone learning when all the other forums simply ignore newbies..

EDIT: okay i believe i removed all mootools if you would be willing to check for me i would so appreciate it. also i do see what you mean with the div's im working on that now. any other advice would be very much welcome

and THANK YOU!!

@Y_LessMay 21.2009 — #Well that depends on what language you're using server side (PHP, ASP, Java etc). The best tutorial I could find on php was here:

http://www.tizag.com/phpT/postget.php

And that's very vauge and missing a lot of important information. You may be able to find a better one but you should be warned that some look good but are very bad. In general I'd refer you to the relevant language subforum here.

@taylor1authorMay 21.2009 — #i was told this would work ?? but i have been unsuccesful with it? any thoughts?

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

Define your options in your product description (at the bottom), using JavaScript

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.

@Y_LessMay 22.2009 — #All that does is define them, and badly, just stick to setting them statically as you're doing now. You seem to be missing a huge chunk of understanding in what you're doing here. Everything you've done and explained so far simply lists things on the page, you can list things till you're blue in the face in hundreds of different ways, but that won't do anything with those lists. Forms submit data to servers, what happens on the server is nothing to do with Javascript or anything else you've said, but that's how you pass these things about.

@taylor1authorMay 23.2009 — #hmm okay guess i have more reading to do. do you do this for a living? i may have to have someone do this last part for me. thank you for your help. if not do you know where i could find someone to help with this specific part? i am seriously trying to learn but what im doing is more of a crash course to get it up and running and then i can take more time later and learn a lot more and tweak it from there. could you tell me what exactly i need to search for to try to learn this part? what should it be in a google search to find this info? id love to learn what im missing. thank you again

edit is this what i need to learn? http://www.w3.org/TR/html401/interact/forms.html#submit-format

and the problem may be due to using shopify? im not sure they dont let me modify a lot of things that seem to be normal for most pages..

@Y_LessMay 23.2009 — #You never mentioned that you were using an existing system before, I'm not familiar with that system, sorry. You're best off asking on their site as they'll know their own system.

Also in #JavaScript _↴

delayed mouse-over effect Help with simple math script Zooming a Image With a Function?

Success!

Help @taylor1 spread the word by sharing this article on Twitter...

Tweet This

help? need to pass dynamic select button choices to cart…

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

help? need to pass dynamic select button choices to cart…

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴