[ic] Simple Options Before Checkout

Ron Phipps interchange-users@lists.akopia.com
Mon Jul 2 23:09:01 2001


> I will post my code as soon as I get home tonight so you can see how I
> completed this task.  It involved using item increment and javascript to
set
> some hidden fields to the correct values when a certain item was
purchased.
> It was used on our site for about 3 months (www.mygamewear.com) and is
still
> being used at www.caseetc.com .  The only part that is not clean is the
buy
> button which checks the browser for what type (the Javascript was not
> compatible with both IE and NS for some reason).  This code took quite
> awhile to debug and be reliable due to different implementations of Java
(IE
> is more relaxed on standards, imagine that...) as well as the HTML spec.
>

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.

Good luck!
-Ron

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]