HTML coding

[lucia]

Would anyone know how to code so a specific style option picked by a customer show the corresponding picture?

For example: We are going to be selling several different styles of banners. I would like the customer to pick a style from a drop down menu and the corresponding picture to that style would appear on that same page next to the style box.

Does anybody know how to do that?

Thanks

[Connie]

I think that would depend on your shopping cart software.

[lucia]

I use Yahoo Shopping Cart.

I have called them about that, but they can't help since they don't support advanced programming... great help! The guy just kept repeating that I need to play with the coding.

If someone could just give me an idea I might be able to figure out how to include it with my cart. I'm not a good programmer, but I have some basic HTML knowledge.

I'd really appreciate it.

[Connie]

I'm not familiar with the Yahoo Shopping cart. However, I think this is wrong. I have called them about that, but they can't help since they don't support advanced programming
Setting up options for a product should not be advanced programming. That is basic to every cart I have ever looked at.

Every shopping cart I have ever looked at has a CP where you set this kind of thing up.

Maybe I did not understand your original question.

[Connie]

Reread your original post. Are you wanting to display a graphic on the order page after the option is selected? If that is what you want to do that might involve advanced programming.

[Blue]

http://www.irt.org/script/668.htm

:D

[ArmenT]

Originally posted by lucia
I use Yahoo Shopping Cart.

I have called them about that, but they can't help since they don't support advanced programming... great help! The guy just kept repeating that I need to play with the coding.
Advanced programming?? You've gotta be kidding me. You can do this real easy with javascript.


<SCRIPT language="JavaScript">
<!--
function changeImg(me) {
var imgname = me.options[me.selectedIndex].value;
document.myImg.src = imgname;
}
//-->
</SCRIPT>

<IMG src="/path/to/image1.gif" name="myImg" />
<FORM>
<SELECT onChange="changeImg(this)">
<OPTION value="/path/to/foo.gif">Image 1</OPTION>
<OPTION value="/path/to/bar.gif">Image 2</OPTION>
<OPTION value="/path/to/baz.gif">Image 3</OPTION>
</SELECT>
</FORM>

The key here is to name your <IMG tag as myImg. You can place the <IMG tag where ever you want in the document, as long as you keep the name="myImg" bit in. The code within the Javascript function (changeImg) is looking for the myImg tag, to change it to a new picture. If you change the name="myImg" part to a new name, you must change all references to myImg to the new name.

Hope this helps. Warning: UNTESTED CODE. I banged it off the top of my head.

Cheers:cheers:

[Dan0]

Originally posted by lucia
I use Yahoo Shopping Cart.
If you mean Yahoo! Stores, you will probably regret that decision sooner or later. I don't know anyone with a Y! store who is happy with the hosting they provide, and I've heard plenty of stories of lost sales from the cart simply not working.

[lucia]

Blue and ArmenT: Thank you guys so much. That's exactly what I wanted to do. I'll go ahead and try to implement it on my site and shoppping cart.

Connie: I needed the coding those guys above gave me. Now I just need to tweak it some.
---------------------------------------------------------------------
"Reread your original post. Are you wanting to display a graphic on the order page after the option is selected? If that is what you want to do that might involve advanced programming"
-------------------------------------------------------------------

Well, I have been having problems with the Yahoo Store. First our site would not, no matter what I tried, get listed on the Search Engines. I kept having to rewrite meta tags and fix some of my pages several times, among other problems. So I decided to redo the WHOLE entire site in Dreamweaver (since I was using their Yahoo Site Builder). I'm still working on it, with only a few pages to go.

But... when it comes to including some options for a particular product my customer need to select, their choice wasn't being displayed on the final order page (so we had no idea what color, size or message our customer needed). It was a hassle to get that working and Yahoo wasn't really able to help either. I had to figure out how to make it work myself, which took me hours...

Even though it works now, I'm not sure if the search engines are going to like it. There's a LOT of coding for just one product option. If anyone would be so kind as to take a look at one of my pages, and tell me if it's OK, I'd appreciated. You could try this one that is full of options for customers to select:
http://www.promoteyourdealership.com/dealerdrapeflags.html

Anyway, DanO: Can you or anyone else recommend any other shopping cart I could use? Something that is reasonable and that works well with Dreamweaver? We don't have a merchant account because my boss has a credit card machine here at the office. We only need the shopping cart to accept the order through a secure site so we can pick it up on our end and manually process it here.

I would appreciate any recommendations.

[lucia]

I need some help from you programmers... My coding is not displaying the pictures :(

I've been working on this since this morning, found some more coding and examples online, but I still can't get it to work.

Could somebody go over this code and tell me what I'm missing or doing wrong?

The "live" page is www.promoteyourdealership.com/test.html

---------------------------------------------------------------------------
If you notice on product "Anniversary banner test 1", I tried to include the javascript there. The picture is still not being displayed and now the style option is not getting displayed on the "shopping cart". Here's what I have:

<script language="javacript"><!--
function change (what) {
value = what.options[what.selectedIndex}.value;
if (value !='')
if (document.images)
document.images['myImage'].src = value; }
//--></script>
<IMG src="th-banner-A601.gif" name="myImage"></p>

<form method="post" action="http://order.store.yahoo.com/cgi-bin/wg-order?yhst-81691122084052+banniversary6">
<p><font size="2">Happy Anniversary (name)<br>
<font face="courier">
<input name="vw-inscription-486170707920416E6E697665727361727920286E616D65292" maxlength="30" size="30" /></font><br>
<font size="1">Or enter any additional information<br>
needed in the box above</font></font>
<br>
<br>

<select onChange="change(this)">
<option>Select Style
<option value="th-banner-A601.gif">A601
<option value="banner-A602.gif">A602
</select>
<br><br>
<input type="submit" value="Add to Cart">
</p></p>
</form>
---------------------------------------------------------

On Anniversary banner test 2, the coding is how I had it before I included the javascript (the Style selection show up on the cart):

<form method="post" action="http://order.store.yahoo.com/cgi-bin/wg-order?yhst-81691122084052+banniversary18">
<div align="center"><font size="2">
Happy Anniversary (name): <font face="courier"><input name="vw-inscription-486170707920416E6E697665727361727920286E616D6529" maxlength="30" size="30" /></font><br>
<font size="1">Or enter any additional information<br>
needed in the box above</font><br>
<br>

Select Style <select name="Select Style"> <option value="A1801">A1801</option> <option value="A1802">A1802</option> </select>
<br><br>
<a href="banniver18styles.html" target="_blank">Click
here to view all <br>
available styles</a></font> <br>
<font size="2"><br>
<input type="submit" value="Add to Cart">
</font>
</div>
</form>
----------------------------------------------

Please HELP! :(

[ArmenT]

There's a bug here (see the bold text part):

function change (what) {
value = what.options[what.selectedIndex}.value;

That closing curly brace } should really be a closing square brace ].

function change (what) {
value = what.options[what.selectedIndex].value;

[lucia]

Thanks ArmenT,

I caught that bracket error yesterday and thanks to your help with the coding, I have it working now.

What I'm having problems with is the style number the customer selects from the select box not showing up in my shopping cart. So when I receive their order, I have no ideia what color or style they want.

I have tried EVERYTHING with the coding. It just won't show. I emailed Yahoo to see if they can help me with it but I'm not counting on it. I'm about to go out tonight to get a javascript book. Any recommendations?

If you could spare some time, would you be able to look at the following piece of code and let me know if you see anything wrong with it?

I would really appreciate it.

--------------------------------------------------------

<script language="javascript"><!--
function changeImg(me){
var imgname=me.options[me.selectedIndex].value;
document.myImg.src=imgname;
}
//--></script>

<img src="/images/banner-B601.gif" name="myImage">
<form method="post" action="<!--#ystore_order id="bbirthday18" -->">
<font size="2">Happy Birthday (name)<font face="courier">
<input name="vw-inscription-486170707920426972746864617920286E616D65293" maxlength="30" size="30" />

<br>
</font><font size="2"><font size="1">Or enter any additional information<br>
needed in the box above</font></font><font face="courier"> </font></font><br>
<br>

<select onChange="change(this)">

<option value="/images/banner-B601.gif">B601</OPTION>
<option value="/images/banner-B602.gif">B602</OPTION>
<option value="/images/banner-B605.gif">B605</OPTION>

</select>
<br><br>

<input type="submit" value="Order"></form>
----------------------------------------------------------------

The interesting part is that if I change what I have in the "select" tag above with the following below, it works and the styles show up in the shopping cart. But it defeats my purpose since I still need the images being swapped.

Select Style <select name="Select Style">

<option value="/images/banner-B601.gif">B601</OPTION>
<option value="/images/banner-B602.gif">B602</OPTION>
<option value="/images/banner-B605.gif">B605</OPTION>

</select>

[g1smd]

I don't know about errors in the code, but I do see that you could chop out all the <font> tags and have 5 or 6 lines of CSS in an external file to style the page (maybe even the whole site) instead.