[ic] Choose color/size before order

Ron Phipps interchange-users@lists.akopia.com
Sun Jul 15 19:38:01 2001


> Is it possible to choose color or size before you order a product? I seems
a little odd to go all the way to the checkout page and then make the
choice. I am talking about 4.6.5 or 4.7.75
>

Hey Mike,

We had the same idea when we built www.mygamewear.com and www.caseetc.com .
I posted the answer last month and I have copied it into this message.  It
took a bit of tweaking, but this has been active for at least 6 months.
Post to the list if you need help.

Thanks!
-Ron

Here is the code that I thought would help you out in this situation.  This
will atleast give you an idea and you can change it for your different
options.  The code covers the results page (product list) and flypage
(detail item).  The flypage is straight forward.  However the results page
uses hidden form variables that are then set on the click of the buy button
using javascript (thanks for the idea in the construct demo).  You'll notice
that as the search loops [item-increment] is used to change the name of the
quantity box, color option and size option for each item listed.  The buy
button for that item then uses the [item-increment] to deteremine the
selected index of the drop downs and stuffs those into the hidden
mv_order_color and mv_order_size variables. Mv_order_quantity and
mv_order_item are also set in a similiar way.  Then when the form is
submitted IC knows to check those variables for which item to purchase.

If you would like to see what the resulting html looks like and the source
code after IC interprets the tags then go to www.caseetc.com and click on a
category.  I've stripped most of the html code from the examples but you
should get the idea.

Flypage:

<FORM ACTION="[process-target]" METHOD=POST NAME="flypage">
<INPUT TYPE=hidden  NAME="mv_todo"        VALUE="refresh">
<INPUT TYPE=hidden  NAME="mv_order_item"  VALUE="[item-code]">

Item: [item-description]
Price: [item-price]
Quantity: <input type="text" name="mv_order_quantity" size="3" value="1">
Size: [item_accessories size]
Color: [item_accessories color]

        [button
          text="Buy Now"
               src="other/buynow.gif"
          hidetext=1
          form=flypage
         ]
               [bounce page=ord/basket]
               mv_nextpage=nothing
        [/button]

</FORM>

Results:

[on-match]
<FORM ACTION="[process-target]" METHOD=POST NAME="results">
<INPUT TYPE=hidden  NAME="mv_todo"        VALUE="refresh">
<INPUT TYPE=hidden  NAME="mv_nextpage"        VALUE="ord/basket">
<INPUT TYPE=hidden  NAME="mv_order_item"  VALUE="">
<INPUT TYPE=hidden  NAME="mv_order_quantity"  VALUE="">
<INPUT TYPE=hidden  NAME="mv_order_color"  VALUE="">
<INPUT TYPE=hidden  NAME="mv_order_size"  VALUE="">
[/on-match]

[search-list]
Item: [item-description]
Price: [item-price]
Quantity: <input type=text name="qty_[item-increment]" size=3 value="1">
Size: [item-accessories size, select, size, products, size_[item-increment]]
Color: [item-accessories color, select, color, products,
color_[item-increment]]

[if session browser =~ /MSIE/]
         <input type="image" border="0" name="Buy Now"
src="other/buynow.gif" onClick="results.mv_order_item.value='[item-code]';
results.mv_order_quantity.value=results.qty_[item-increment].value;
results.mv_order_size.value=results.size_[item-increment][results.size_[item
-increment].selectedIndex].value;
results.mv_order_color.value=results.color_[item-increment][results.color_[i
tem-increment].selectedIndex].value;">
        [else]
         <a href="#" border="0"
onClick="results.mv_order_item.value='[item-code]';
results.mv_order_quantity.value=results.qty_[item-increment].value;
results.mv_order_size.value=results.size_[item-increment][results.size_[item
-increment].selectedIndex].value;
results.mv_order_color.value=results.color_[item-increment][results.color_[i
tem-increment].selectedIndex].value; results.submit(); "><img
src="other/buynow.gif" ></a>
        [/else]
[/if]
[/search-list]

[on-match]
</FORM>
[/on-match]

[/search-region]