ShopSite Form Script

[inhouse]

Hi, I am writing hoping someone can help me with my ShopSite form. I am pretty new to forms and very new to ShopSite. I created a product and shopping cart with ShopSite, but I wanted to incorporate the cart into my existing self hosted WordPress site. I pasted the HTML code into a page template and added a bunch of options to the form. as I said, I don't know a lot about making the form work and of course, the add to cart/submit button doesn't go anywhere now. I probably have 1,000 errors, I don't know. I even tried using Dreamweaver to assist me in creating options in the form. The site isn't live yet, but you can see it below. I would love any help anyone can give me. I am subscribed to this post and will reply very quick 8-5 EST. Thanks so much

http://useinhouse.com/ProTech/order-heating-oil-test2/

[ShopSite Lauren]

Adding to a form is more difficult than simply adding additional fields. You need to setup your ShopSite product so that ShopSite knows those fields will be being added, and you will need to name those fields so that they go into one of the fields provided in ShopSite. The best option would be to have ShopSite setup the majority of the code for you. Here's what I would suggest:

1- go back to your product in ShopSite. Click on "Edit Product Info" and in the "Order Options Description Field" remove "How many gallons would you like to order?" then in the "Order Options Pull Down Menu Field" add the following:
Gallons;n
Fill My Tank;x150
150 Gallons;x150
175 Gallons;x175
200 Gallons;x200
225 Gallons;x225
250 Gallons;x250
275 Gallons;x275
300 Gallons;x300
325 Gallons;x325
350 Gallons;x350
375 Gallons;x375
400 Gallons;x400
425 Gallons;x425
450 Gallons;x450
475 Gallons;x475
500 Gallons;x500
525 Gallons;x525
550 Gallons;x550
575 Gallons;x575
600 Gallons;x600
625 Gallons;x625
650 Gallons;x650
675 Gallons;x675
700 Gallons;x700
725 Gallons;x725
750 Gallons;x750
775 Gallons;x775
800 Gallons;x800
825 Gallons;x825
850 Gallons;x850
875 Gallons;x875
900 Gallons;x900
925 Gallons;x925
950 Gallons;x950"
975 Gallons;x975
1000 Gallons;x1000

Choose A Product;n
Regular
Winter Mix

Zip Code;n
14456
14424
14527
11111
22222
33333

Tank Size;n
138 Tank
225 Tank
240 Tank
2-275 Tanks
2-330 Tanks
330 Tank
550 Tank
1000 Tank
1500 Tank
2000 Tank

Current Level;n
Empty (Add $35);+35
1/8 Full
1/4 Full
1/2 Full

Tank Location;n
Tank Location - Back Left
Tank Location - Back Center
Tank Location - Back Right
Tank Location - Left Rear
Tank Location - Right Rear
Tank Location - Left
Tank Location - Right
Tank Location - Front Side Left
Tank Location - Front Side Right
Tank Location - Front Left
Tank Location - Front Center
Tank Location - Front Right

No, I don't need it primed
Yes, I do need it primed and started (Add $35);+35


2 - also check the checkbox to create a customer text entry field.
3 - After saving changes you can go to Merchandising > OrderAnywhere > highlight your products > Show HTML.
4 - Copy the code provided on that screen and paste it onto your website. Test the add to cart button before you do anything and make sure that it works. The current add to cart button is not working because on your page you have multiple forms. Since there are multiple forms within forms they are conflicting and not doing anything.
5 - Finally, you can modify the code on the page (the ONLY thing that you should add to the form is the text entry field, <textarea name="1:freeopt"></textarea>).
6 - if you copied the information above exactly as I laid it out, then you should be able to simply copy and paste the following into your page to have a working form.



<table class="Products" align="center" border="0" cellpadding="0" cellspacing="0" width="625">
<tr>
<td align="left">

<form action="http://shopsite.accountsupport.com/ss10.0/sc/order.cgi" method="post">
<span id="gallons"><span class="product_price"><strong>How many gallons would you like to order?</strong><br></span>
<select name="1:finopt:0" size="1" id="1:finopt:0">
<option value="Gallons;n">Gallons</option>
<option value="Fill My Tank;x150" selected="selected">Fill My Tank</option>
<option value="150 Gallons;x150">150 Gallons</option>
<option value="175 Gallons;x175">175 Gallons</option>
<option value="200 Gallons;x200">200 Gallons</option>
<option value="225 Gallons;x225">225 Gallons</option>
<option value="250 Gallons;x250">250 Gallons</option>
<option value="275 Gallons;x275">275 Gallons</option>
<option value="300 Gallons;x300">300 Gallons</option>
<option value="325 Gallons;x325">325 Gallons</option>
<option value="350 Gallons;x350">350 Gallons</option>
<option value="375 Gallons;x375">375 Gallons</option>
<option value="400 Gallons;x400">400 Gallons</option>
<option value="425 Gallons;x425">425 Gallons</option>
<option value="450 Gallons;x450">450 Gallons</option>
<option value="475 Gallons;x475">475 Gallons</option>
<option value="500 Gallons;x500">500 Gallons</option>
<option value="525 Gallons;x525">525 Gallons</option>
<option value="550 Gallons;x550">550 Gallons</option>
<option value="575 Gallons;x575">575 Gallons</option>
<option value="600 Gallons;x600">600 Gallons</option>
<option value="625 Gallons;x625">625 Gallons</option>
<option value="650 Gallons;x650">650 Gallons</option>
<option value="675 Gallons;x675">675 Gallons</option>
<option value="700 Gallons;x700">700 Gallons</option>
<option value="725 Gallons;x725">725 Gallons</option>
<option value="750 Gallons;x750">750 Gallons</option>
<option value="775 Gallons;x775">775 Gallons</option>
<option value="800 Gallons;x800">800 Gallons</option>
<option value="825 Gallons;x825">825 Gallons</option>
<option value="850 Gallons;x850">850 Gallons</option>
<option value="875 Gallons;x875">875 Gallons</option>
<option value="900 Gallons;x900">900 Gallons</option>
<option value="925 Gallons;x925">925 Gallons</option>
<option value="950 Gallons;x950">950 Gallons</option>
<option value="975 Gallons;x975">975 Gallons</option>
<option value="1000 Gallons;x1000">1000 Gallons</option>
</select>
<br /><br />
<strong>Regular or Winter Mix</strong><br>
<select name="1:finopt:1" id="1:finopt:1">
<option value="Choose A Product;n">Choose A Product</option>
<option value="Regular">Regular</option>
<option value="Winter Mix">Winter Mix</option>
</select><span class="selectRequiredMsg">Please select an item.</span></span>

<br /><br /><strong>What zip code are we delivering to?</strong><br>
<select name="1:finopt:2" size="1" id="1:finopt:2">
<option value="Zip Code;n" selected="selected">Zip Code</option>
<option value="14456">14456</option>
<option value="14424">14424</option>
<option value="14527">14527</option>
<option value="11111">11111</option>
<option value="22222">22222</option>
<option value="33333">33333</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></span>

<br /><br /><strong>Do you know the approximate size of your tank?</strong><br>
<select name="1:finopt:3" size="1" id="1:finopt:3">
<option selected="selected" value="Tank Size;n">Tank Size</option>
<option value="138 Tank">138</option>
<option value="225 Tank">225</option>
<option value="240 Tank">240</option>
<option value="2-275 Tanks">2-275</option>
<option value="2-330 Tanks">2-330</option>
<option value="330 Tank">330</option>
<option value="550 Tank">550</option>
<option value="1000 Tank">1000</option>
<option value="1500 Tank">1500</option>
<option value="2000 Tank">2000</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></span>

<br /><br /><strong>What is the approximate level of the heating oil currently in your tank?</strong><br>
<select name="1:finopt:4" size="1" id="1:finopt:4">
<option value="Current Level;n" selected="selected">Current Level</option>
<option value="Empty (Add $35);+35">Empty (Add $35)</option>
<option value="1/8 Full">1/8</option>
<option value="1/4 Full">1/4</option>
<option value="1/2 Full">1/2</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span>

<br /><br /><strong>Select the approximate location of fill pipe relative to the front of your home.</strong><br />

<table align="left" border="0" cellpadding="0" cellspacing="0" width="200">
<tbody><tr valign="middle">
<td height="30" width="40"><div align="center"> </div></td>
<td width="40"><div align="center">
<input name="1:finopt:5" value="Tank Location - Back Left" type="radio">
</div></td>
<td width="40"><div align="center">
<input name="1:finopt:5" value="Tank Location - Back Center" type="radio">
</div></td>
<td width="40"><div align="center">
<input name="1:finopt:5" value="Tank Location - Back Right" type="radio">
</div></td>
<td height="30" width="40"><div align="center"> </div></td>
</tr>
<tr valign="middle">
<td height="30" width="40"><div align="center">
<input name="1:finopt:5" value="Tank Location - Left Rear" type="radio">
</div></td>
<td colspan="3" rowspan="3"><div align="center"><img src="http://useinhouse.com/ProTech/images/tank-location.gif" alt="Tank Location" height="85" width="120"></div></td>
<td height="30" width="40"><div align="center">
<input name="1:finopt:5" value="Tank Location - Right Rear" type="radio">
</div></td>
</tr>
<tr valign="middle">
<td height="30" width="40"><div align="center">
<input name="1:finopt:5" value="Tank Location - Left" type="radio">
</div></td>
<td height="30" width="40"><div align="center">
<input name="1:finopt:5" value="Tank Location - Right" type="radio">
</div></td>
</tr>
<tr valign="middle">
<td height="30" width="40"><div align="center">
<input name="1:finopt:5" value="Tank Location - Front Side Left" type="radio">
</div></td>
<td height="30" width="40"><div align="center">
<input name="1:finopt:5" value="Tank Location - Front Side Right" type="radio">
</div></td>
</tr>
<tr valign="middle">
<td height="30" width="40"><div align="center"></div></td>
<td><div align="center">
<input name="1:finopt:5" value="Tank Location - Front Left" type="radio">
</div></td>
<td><div align="center">
<input name="1:finopt:5" value="Tank Location - Front Center" type="radio">
</div></td>
<td><div align="center">
<input name="1:finopt:5" value="Tank Location - Front Right" type="radio">
</div></td>
<td height="30" width="40"><div align="center"></div></td>
</tr>
</tbody></table></span>
<span><br>
<span class="radioRequiredMsg">Please make a selection.</span></span>

<div style="clear: both;"></div>
<br />
<input name="1:finopt:6" id="1:finopt:56" value="Yes, I do need it primed and started (Add $35);+35" type="checkbox">
<div class="prime-started"><strong>Yes, my heating system needs to be primed and started.</strong><br>
<em>*There is an additional charge for this service of $35.00.<br>
This is required if your heating system has run out of oil.</em></div>

<br /><br />
<strong>Do you have any advice for locating your home or fill pipe?</strong><br>
Be sure to include directions from nearest street intersection.<br>
<textarea name="1:freeopt" id="1:freeopt" cols="45" rows="5"></textarea>
<br /><br />
<input name="1:finoptnum" value="7" type="hidden">
<br><input name="storeid" value="*161057b9d7b661b606aca15ff1" type="hidden">
<input name="dbname" value="products" type="hidden">
<input name="function" value="add" type="hidden">
<input name="itemnum" value="1" type="hidden">
<input class="add" alt="Add to Cart" name="Add to Cart" value="Add to Cart" align="bottom" border="0" type="submit">
<div class="submit"><input name="Add to Cart" value="Submit" type="submit"></div>

<script type="text/javascript">
<!--
var spryselect1 = new Spry.Widget.ValidationSelect("1:finopt:1");
var spryselect2 = new Spry.Widget.ValidationSelect("1:finopt:2");
var spryselect3 = new Spry.Widget.ValidationSelect("1:finopt:3");
var spryselect4 = new Spry.Widget.ValidationSelect("1:finopt:4");
var spryradio1 = new Spry.Widget.ValidationRadio("1:finopt:5");
var spryradio1 = new Spry.Widget.ValidationRadio("1:finopt:0");
//-->
</script></form>
</td></tr></table>

[inhouse]

Lauren, thanks so much for your help. I have been playing around with the product in ShopSite while waiting for a response and I feel better about editing there instead of trying to build the form myself. My main question now is whether or not I can have "Choose A Product" be essentially 2 different values. Regular should be worth "x" and Winter Mix should be worth "y". I am trying to avoid having two different product add to cart buttons. Thanks again.

[ShopSite Lauren]

You can add ;+x to add a dollar amount. So for example, you may have regular 1 gal for $2. So your product price should be $2. Then you have your number of gallons multiply the product price. I believe that by multiplying the product price it will multiply all the product options as well. If your Winter Mix is $2.5, then you would add ;0.5 to the end of the Winter Mix line to have 5 cents added for every gallon. Note, be careful if this is the case when you are added the $35 charge for an empty tank.

[inhouse]

The main thing not working is that all these options need to be mandatory, not optional. The only thing optional is the text field and "primed" $35 charge. If i click add to cart, it fills the cart with the quantity of 1 ($3.37). I need the form to ask for input until all required fields are filled.

[ShopSite Lauren]

If the pull down menus have ;n at the beginning, then the customer won't be able to continue to checkout without selecting their amount.

If you want to have script on the product page before they add to the cart, that is something you would need to add separate. I believe that the code I gave in my first response had that script (it was from your page I just changed the names).

[inhouse]

Lauren, where would I add script to display before they can add to cart? I am now using the native shopping cart here: http://protech.accountsupport.com/store/index.html

I've changed gears and am thinking of embedding the cart in an iframe on my website. I tried it and need the add to cart to open a new window. Can I code that somewhere or this not an advisable option? I can't ask someone else to edit HTML when they need to change the price of fuel (which you know changes at least weekly). I tested the iframe here: http://useinhouse.com/ProTech/order-heating-oil-test3/