How to make pulldown menus dictate the right product?

General ShopSite user discussion

How to make pulldown menus dictate the right product?

Postby gege » Mon Sep 26, 2011 7:43 pm

I'm new at this so sorry if not posting in the right spot.

When I add 5 products to my store making sure to enable the “Display Ordering Options” in the edit product layout, and then copying the html code from the merchandising section of shopsite to my html page, because all the products are assigned a different "itemnum value", how can I make the add to cart button, add the right product to the cart?

Because of the nature of the products, the customer has to first choose a size and then a color, from two different pulldown menus before clicking the adding to cart button.
What i’m trying to understand is when my order is placed, how does shopsite know which item to display in the shopping cart? (apart from the only one copied from the code under the "merchandise section" which will only be for the one product with the one "itemnum value" pasted on my page, regardless of the choices in the pulldown menus?

How can I make my pulldown menus dictate the right product when adding to cart?

Thank you much.
gege
 
Posts: 3
Joined: Mon Mar 08, 2010 4:56 pm
Location: california

Re: How to make pulldown menus dictate the right product?

Postby JCGrafted » Tue Sep 27, 2011 7:44 am

I believe you will need multiple products or sub-products. You are trying to use one "itemnum value" to handle multiple variations.

In our store we sell longevity medallions to celebrate recovery milestone. These come in 1 month, 2 month, 3 month, 6 month, 9 month, and 18 month options and in any possible year (presently up to 35). I have 41 products in our store reflecting the option the customer may choose.

JCGrafted
JCGrafted
 
Posts: 29
Joined: Wed Sep 21, 2011 2:41 pm
Location: Houston, TX

Re: How to make pulldown menus dictate the right product?

Postby gege » Tue Sep 27, 2011 8:41 am

thanks JCGrafted,

I don't know if it is permitted on the forum but could you send me a link to your site? I'm more of the visual type and i wouldn't mind seeing what you mean?
gege
 
Posts: 3
Joined: Mon Mar 08, 2010 4:56 pm
Location: california

Re: How to make pulldown menus dictate the right product?

Postby JCGrafted » Mon Oct 03, 2011 9:35 am

Sure. A link to the page in question is:

http://saa-store.org/chip/

JCGrafted
JCGrafted
 
Posts: 29
Joined: Wed Sep 21, 2011 2:41 pm
Location: Houston, TX

Re: How to make pulldown menus dictate the right product?

Postby Jim » Mon Oct 03, 2011 10:26 am

Here is the code for a product with 2 options (color: red, blue and style: tall, skinny)
Note that the options have input of type select with the name of the select being in the format
productID:finopt:optionnumber like 6:finopt:0, 6:finopt:1
The value is of those inputs is what the shopper selects for color and style.
There is also a hidden input saying how many options there are suppose to be "6:finoptnum" value="2
and another hidden values for the itemnum "itemnum" value="6"
The quantity input for each product also has the item number as part of the name "6:qnty"
So the input values of different products are designated by the item number associated in the field name.
Code: Select all
<form action="http://blister.shopsite.com/cgi-bin/jim/11sp1/sc/order.cgi" method="post">
<select name="6:finopt:0" size="1">
<option value="red">red</option>
<option value="blue">blue</option>
</select>
<select name="6:finopt:1" size="1">
<option value="tall">tall</option>
<option value="skinny">skinny</option>
</select>
Quantity <input type=text size=2 name="6:qnty"
<input type=hidden name="6:finoptnum" value="2">
<br><input type=hidden name="storeid" value="*187310614abe4760b97bbd7b1053">
<input type=hidden name="dbname" value="products">
<input type=hidden name="function" value="add">
<input type=hidden name="itemnum" value="6">
<input type=image src="https://blister.shopsite.com/11sp1/shopsite-images/en-US/buttons/3col-muted/btn-addtocart.png" border="0" align="bottom" alt="Add to Cart" name="Add to Cart">
<input type=image src="https://blister.shopsite.com/11sp1/shopsite-images/en-US/buttons/3col-muted/btn-viewcart.png" border="0" align="bottom" alt="View Cart" name="View Cart">
</form>


If you are going to allow multiple products to be added to the cart with a single add to cart button your form must contain all of those fields for each product being submitted. Check out the sample page and product templates in the help to see an example of how to do this using ShopSite to generate the pages. http://www.shopsite.com/help/11.0/en-US/install/custom.template.multi-add.html If you are creating the pages yourself you would need to use similar code as what is generated using the sample page and product templates.

So using the above example code and adding an additional product with item number of 9 you would have something like this in the form.
Code: Select all
<form action="http://blister.shopsite.com/cgi-bin/jim/11sp1/sc/order.cgi" method="post">
<select name="6:finopt:0" size="1">
<option value="red">red</option>
<option value="blue">blue</option>
</select>
<select name="6:finopt:1" size="1">
<option value="tall">tall</option>
<option value="skinny">skinny</option>
</select>
<input type=hidden name="6:finoptnum" value="2">
<input type=hidden name="itemnum" value="6">
Quantity <input type=text size=2 name="6:qnty"
<select name="9:finopt:0" size="1">
<option value="red">red</option>
<option value="blue">blue</option>
</select>
<select name="9:finopt:1" size="1">
<option value="tall">tall</option>
<option value="skinny">skinny</option>
</select>
<input type=hidden name="9:finoptnum" value="2">
<input type=hidden name="itemnum" value="9">
Quantity <input type=text size=2 name="9:qnty"
<br><input type=hidden name="storeid" value="*187310614abe4760b97bbd7b1053">
<input type=hidden name="dbname" value="products">
<input type=hidden name="function" value="add">

<input type=image src="https://blister.shopsite.com/11sp1/shopsite-images/en-US/buttons/3col-muted/btn-addtocart.png" border="0" align="bottom" alt="Add to Cart" name="Add to Cart">
<input type=image src="https://blister.shopsite.com/11sp1/shopsite-images/en-US/buttons/3col-muted/btn-viewcart.png" border="0" align="bottom" alt="View Cart" name="View Cart">
</form>


Note that that would always add both products to the cart so you would need to have some mechanism for determining if the shopper want a particular product added to the cart. In the sample template a checkbox is used and if the checkbox isn't checked the product is not submitted. This could also be done in javascript by checking the quantity field to see if it is zero and not sending products to the cart if the quantity is zero.
Jim
Site Admin
 
Posts: 4953
Joined: Fri Aug 04, 2006 1:42 pm
Location: Utah


Return to User Forum

Who is online

Users browsing this forum: No registered users and 69 guests