[ic] How to use BUY ME image buttons in a form on a results page?
Ron Phipps
interchange-users@interchange.redhat.com
Mon Aug 20 03:19:01 2001
This is a multi-part message in MIME format.
------=_NextPart_000_0040_01C1290D.5B422620
Content-Type: text/plain;
charset="us-ascii"
Content-Transfer-Encoding: quoted-printable
> The setup:
> -----------
> Red Hat 6.2
>=20
> Interchange 4.6.5
>=20
> People are at a results page looking at a form that lists T-shirts.
> There is a different T-shirt on each row, listed along with its price
> and description. There are <SELECT> widgets on the each row, letting
the
> user pick size and color.=1A
This seems like an easy issue, but it took me quite some time to get it
to work. However after the time invested it's now up and running on 2
sites successfully. The reason it does not work in the construct demo
is because construct used a perl routine for adding items to the cart
which did not take into account options for the item.
> The problem:
> -----------
> The web designer wants an <input type=3D"image"> button on each row of
the
> form. The image shows a "BUY ME!" graphic. It's the same image on each
> row of the table. It has to be in a form because of the size and color
> drop down widgets.
>=20
> On another page, I just use something like this:
> [loop search=3D...]
> <tr><td>
> [order [loop_code]]<img src=3D"buyme.gif">[/order]
> </td></tr>
> [/loop]
> But that results in <a href> tags and not <input type=3D"image">
buttons.
Yes, href tags will not work. And <input type=3D"image"> will not work
either because the type=3D"image" is not a valid type in the HTML spec.
Netscape adheres to this guideline which invalidates the onClick or any
other javascript event. An <input type=3D"image"> will work in netscape
if there is no javascript on the input, but you need the javascript for
this problem.
> This approach doesn't seem to work for page in question either:
>=20
> <form name=3D"results" action=3D"[process-order]" method=3D"POST">
> <input type=3D"hidden" name=3D"mv_todo" value=3D"refresh">
> <input type=3D"hidden" name=3D"mv_nextpage" value=3D"ord/basket">
> [loop search=3D"ra=3Dyes/fi=3Dtshirts/tf=3Ddescription"]
> <tr><td>
> <input type=3D"image" name=3D"mv_junk" src=3D"buybtn.gif" =
onClick=3D"
> results.mv_order_item.value=3D'[loop-code]';
> results.mv_order_size.value=3Dresults.size_[loop-
> increment][results.size_[loop-increment].selectedIndex].value;
> results.mv_order_color.value=3Dresults.color_[loop-
> increment][results.color_[loop-increment].selectedIndex].value;
> results.submit();">
> </td>
>=20
> MORE STUFF (like the code for [loop-accessories] tags for color and
size
>=20
> </tr>
> [/loop]
>=20
> I've been scouring the docs and the archives all day, and can't seem
to
> get my head around how to do this?
>=20
> Anybody?
Please take a look at the page I have attached to this message. This
was used as 'results.html' on http://www.mygamewear.com before we
switched to a results page which does not have buy buttons. Similar
code is also being used currently at http://www.caseetc.com . Pay
particular attention to the form, hidden inputs and the check for which
browser is being used to determine how to display the buy button.
Good luck!
-Ron
------=_NextPart_000_0040_01C1290D.5B422620
Content-Type: text/html;
name="results.html"
Content-Transfer-Encoding: quoted-printable
Content-Disposition: attachment;
filename="results.html"
[comment]
ui_template: Yes
ui_template_name: top_left_bottom
[/comment]
[comment]
Author: Ron Phipps
Date: Jan-22-2001
Company: MyGamewear.com
[/comment]
[set bgcolor]#FFFFFF[/set]
[set component_right][/set]
[set component_after][/set]
[set component_before][/set]
[set members_only]0[/set]
[set page_banner][/set]
[set component_vsize][/set]
[set vbanner][/set]
[set vpromo_type][/set]
[set component_hsize][/set]
[set hbanner][/set]
[set hpromo_type][/set]
[set header_saying]Search Results[/set]
[set page_title]__COMPANY__ | Search Results[/set]
@_TLB_TOP_@
[include templates/regions/HEADER_W_RESULTS.TXT]
@_TLB_LEFT_@
<!-- BEGIN CONTENT -->
[set did_order][/set]
[search-region]
[tmp cross_sale][value-extended name=3Dmv_searchspec index=3D0][/tmp]
[on-match]
<FORM ACTION=3D"[process-target]" METHOD=3DPOST NAME=3D"results">
<INPUT TYPE=3Dhidden NAME=3D"mv_todo" VALUE=3D"refresh">
<INPUT TYPE=3Dhidden NAME=3D"mv_nextpage" VALUE=3D"ord/basket">
<INPUT TYPE=3Dhidden NAME=3D"mv_order_item" VALUE=3D"">
<INPUT TYPE=3Dhidden NAME=3D"mv_order_quantity" VALUE=3D"">
<INPUT TYPE=3Dhidden NAME=3D"mv_order_color" VALUE=3D"">
<INPUT TYPE=3Dhidden NAME=3D"mv_order_size" VALUE=3D"">
[/on-match]
[search-list]
<table width=3D"98%" border=3D"0" cellspacing=3D"0" cellpadding=3D"2">
<tr>
<td colspan=3D"2"><font size=3D"1"> </font></td>
</tr>
<tr>
<td width=3D"90"><a href=3D"[area [item-code]]"><img =
src=3D"products/list_graphic/[item-field image]" width=3D"82" =
height=3D"89" border=3D"0"></a></td> =09
<td valign=3D"top" width=3D"100%"> =09
<table width=3D"100%" border=3D"0" cellspacing=3D"0" =
cellpadding=3D"3"> =09
<tr> =09
<td width=3D"30%"> =09
<table width=3D"100%" border=3D"0" cellspacing=3D"0" =
cellpadding=3D"0"> =09
<tr> =09
<td nowrap><font class=3D"ptitle4">[item-field =
category]</font></td>
</tr> =09
<tr> =09
<td background=3D"/images/other/h_spacer1.gif" height=3D"1"><img =
src=3D"other/h_spacer1.gif" width=3D"1" height=3D"1"></td>
</tr> =09
<tr> =09
<td nowrap><a href=3D"[area [item-code]]" =
class=3D"ptitle3">[item-field description]</a></td>
</tr> =09
</table>
</td>
<td align=3D"right"> =09
<table border=3D"0" cellspacing=3D"0" cellpadding=3D"3" =
width=3D"285"> =09
<tr>
<td align=3D"right" width=3D"30"><font =
class=3D"form">Qty:</font></td>
<td width=3D"40"><font class=3D"form2"><input type=3Dtext =
name=3D"qty_[item-increment]" size=3D3 value=3D"1"></font></td>
<td align=3D"right" width=3D"40"><font =
class=3D"form">Size:</font></td>
<td width=3D"70"><font class=3D"form2">
[item-accessories size, select, size, products, =
size_[item-increment]]
</td>
<td align=3D"right" width=3D"35"><font =
class=3D"form">Color:</font></td>
<td width=3D"70"><font class=3D"form2">
[item-accessories color, select, color, products, =
color_[item-increment]]
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan=3D"2"><font class=3D"main">[item-field =
short_comment]</font></td>
</tr>
</table>
</td>
<td valign=3D"top">
<table width=3D"100%" border=3D"0" cellspacing=3D"0" =
cellpadding=3D"3">
<tr>
<td align=3D"right"><font class=3D"form">Price:</font> <font =
class=3D"price">[item-price] </font> </td>
</tr>
<tr>
<td align=3D"right"><a href=3D"[area [item-code]]"><img =
src=3D"other/view_details.gif" width=3D"82" height=3D"12" =
border=3D"0"></a> </td>
</tr>
<tr>
<td align=3D"right">
[if-item-data inventory quantity < 1]
<img src=3D"other/outofstock.gif">
[else] =09
[if session browser =3D~ /MSIE/]
<input type=3D"image" border=3D"0" name=3D"Buy Now" =
src=3D"other/buynow.gif" width=3D"84" height=3D"23" =
bordercolor=3D"white" style=3D"border-width:0px:" =
onClick=3D"results.mv_order_item.value=3D'[item-code]'; =
results.mv_order_quantity.value=3Dresults.qty_[item-increment].value; =
results.mv_order_size.value=3Dresults.size_[item-increment][results.size_=
[item-increment].selectedIndex].value; =
results.mv_order_color.value=3Dresults.color_[item-increment][results.col=
or_[item-increment].selectedIndex].value;">=09
[else]
<a href=3D"#" border=3D"0" =
onClick=3D"results.mv_order_item.value=3D'[item-code]'; =
results.mv_order_quantity.value=3Dresults.qty_[item-increment].value; =
results.mv_order_size.value=3Dresults.size_[item-increment][results.size_=
[item-increment].selectedIndex].value; =
results.mv_order_color.value=3Dresults.color_[item-increment][results.col=
or_[item-increment].selectedIndex].value; results.submit(); "><img =
src=3D"other/buynow.gif" width=3D"84" height=3D"23" =
bordercolor=3D"white" style=3D"border-width:0px:" border=3D"0"></a>
[/else]
[/if]
[/else]
[/if-item-data]
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width=3D"90" height=3D"10"><font =
style=3D"font-size:6pt;"> </font></td>
<td valign=3D"top" height=3D"10"><font =
style=3D"font-size:6pt;"> </font></td>
<td valign=3D"top" height=3D"10"><font =
style=3D"font-size:6pt;"> </font></td>
</tr>
<tr>
<td colspan=3D"3"><hr width=3D"100%" noshade height=3D"1"></td>
</tr>=09
</table>
[/search-list]
[on-match]
</FORM> =20
[/on-match]
[no-match]
<BR><BR><center>
<font class=3D"ptitle1">
Sorry, your search for <B>[calc]
my $joiner =3D ' AND ';
$joiner =3D ' OR ' if
defined $Search->{''}->{mv_orsearch}[0]
and $Search->{''}->{mv_orsearch}[0];
my @str =3D grep /\D/, @{$Values->{mv_searchspec}};
return join $joiner, @str;
[/calc]
</B>did not return any matches.
<br><br>Please search again or return to our <a href=3D"[area =
index]">front page.</a>
[if value mv_search_error]
<BR><B>Errors:
<BR> [value-extended name=3Dmv_search_error joiner=3D"<BR>"]
</B>
[/if]
</font>
<BR><BR></center>
[/no-match]
[comment]
<font __FFACE__ size=3D"2">
<BR CLEAR=3DLEFT>
</font>
[/comment]
[more-list]
<center>
<font face=3D"Tahoma" size=3D"2">
Matches <b>[matches]</b> of <b>[match-count]</b> returned.</font>
<font face=3D"Verdana, Arial" size=3D"2" =
color=3D"333333"><b><BR>[more]<BR></b></font>
</center>
[/more-list]
[/search-region]
<!-- END CONTENT -->
@_TLB_BOTTOM_@
------=_NextPart_000_0040_01C1290D.5B422620--