Displaying subproducts: dropdown versus tabular/table

[extragear]

Greetings:

We are working on the mock up of a site redesign and now are looking at how we handle items we have setup as subproducts.

For example motorcycle saddlebag guards. See the following:

http://www.cycleluggage.com/cobra_99290.html

They all look the same and have the same features but might be shaped slightly different for each motorcycle.

Currently we have these setup in a dropdown. (See above link) Simple enough.

But we thought displaying the subproducts in a tabular form might make some sense.

For example a table with each row containing,

SKU, Product Name, Link To Mounting Instructions, MSRP, Sale Price, Add To Cart
SKU, Product Name, Link To Mounting Instructions, MSRP, Sale Price, Add To Cart

In addition, by listing the subproducts in this manner we might avoid the following:

1. Customers not using the dropdown and simply picking the first item in the drop down and adding that item to the cart.

2. A variant of this, customers calling and saying I don't see my bike listed. Then when quized about whether they used the dropdown, they state they didn't understand how it worked.

3. Customer being able to view the associated mounting instructions easily. One of the most common question we have is how does this mount to my bike. Most of these items have mounting instructions in PDF form.

So, I am curious if anyone else uses the tabular form of displaying subproducts rather than using the drop down. (Examples would be great) I found a few Shopsite sites using this method.

For example,

http://cableorganizer.com/conduit/flexible-conduit.htm

Another question I have are, what are the pitfalls of displaying products in this manner?

Thanks

Tim

Belden Motosport
607-693-1031

[extragear]

So as to list subproducts in tabular/table form, I created a new product page template and product more information template. This was done by copying one of our preexisting templates for each. So far the more information page is displaying the products in the approximate format that we were thinking of. (This is really just a mock up for a redesign.)

See the following:

http://cycdemo.cycleluggage.com/mcenter ... 99257.html

One thing that I havent figure out is how to get the add to cart button to work. When its clicked, a error message is received. This being,

"Error in Form!
We're sorry, but there was an error in your form data!

Please specify a valid value for the itemnum .

Please press the Back button on your browser to correct the error."

Looks pretty straight forward. Its showing that a value for the itemnum must be specified. At this point I am somewhat lost as to the exact fix. I am guess that either on the product template or on the more information template I need to specify the itemnum.

Then again, both of these templates were cannibalized from templates that showed the subproducts in a nice dropdown. So perhaps something else is needed.


I've listed part of each template below. If anyone would suggest a fix, it would be appreciated.

Thanks

Tim

Belden Motosport





Here is the subproduct section of the product template.




[-- DEFINE SUBPRODUCT --]
<tr>
<td>Product Name <br> [-- Product.Name --]</td>
<td>Sku <br> [-- Product.SKU --]</td>
<td>Mounting Instructions <br> [-- PRODUCT.Field6 --]</td>
<td>MSRP <br> [-- Product.Price --]</td>
<td>Your Price <br> [-- Product.SaleAmount --]</td>
<td><input type="image" src="[-- VAR.MyImages --]/[-- STORE.AddToCart --]" name="Submit"
value="Add to Cart"></td>
</tr>
[-- END_DEFINE SUBPRODUCT --]






Here is the snippet from the product more information page.




<table border="0" cellpadding="0" cellspacing="0" class="mainTable">
[-- INCLUDE sd360_inc_headerTEST.html PROCESS --]
[-- INCLUDE sd360_inc_topNavTEST.html PROCESS --]
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
[-- INCLUDE sd360_inc_leftNavtest.html PROCESS --]
<td class="cont"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border: 1px
solid #0086B9">
<tr>
<td>
<!-- OrderInfo BEGIN -->
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post">
<input type="hidden" name="storeid" value="[-- STORE_ID --]">
<input type="hidden" name="dbname" value="products">
<input type="hidden" name="function" value="add">
[-- IF Product.NumSubproducts 0 --]
<input name="itemnum" value="[-- PRODUCT.RecordNumber --]" type="hidden">
[-- ELSE --]
<input name="super" value="[-- PRODUCT.RecordNumber --]" type="hidden">
[-- END_IF --]

<table width="100%" border="0" cellspacing="0" cellpadding="10">


<tr>
<td>
<h2>[-- Product.Name --]</h2><br><br>[-- Product.MoreInformationText --]</td>
<td>
<?PHP
$last = strrpos("[-- IMAGE Product.MoreInformationGraphic --]","/");
echo "
<img src='[-- VAR.MyImages --]/" . substr_replace("[-- IMAGE Product.MoreInformationGraphic

--]","/ss_size1",$last,0) . "' alt='[-- Product.Name REMOVE_HTML --]' style='cursor: pointer;'

onClick='javascript: popImage(\"[-- VAR.MyImages --]/[-- IMAGE Product.MoreInformationGraphic --]\",

\"".addslashes('[-- Product.Name REMOVE_HTML --]')."\")'>
";
?>
<div align="center"><strong>Click the image above for a larger view.</strong></div>
</td>
</tr>





<tr>
<td colspan="2">
[-- IF Product.NumSubProducts 0 --]
[-- IF Product.SaleAmount --]
<span class="salePriceMi">Your Price: [-- Product.SaleAmount --]</span><br>
<span class="sku">Product SKU: [-- IF Product.SKU --][-- Product.SKU --][-- END_IF --]</span>
<br>
[-- PRODUCT.Field8 --]<br>
[-- IF PRODUCT.QuantityOnHand "0" --]<span class="sku">Availability:</span> <span class="outofstockstatus">
Out Of Stock</span>
[-- ELSE --]
<span class="sku">Availability:</span>
<span class="instockstatus">In Stock</span>
<br>
[-- END_IF --]
[-- ELSE --]
<span class="regPriceMi">Price: [-- Product.Price --]</span>
[-- END_IF --]
[-- ELSE --]
<br>
</td></tr>


<tr><td colspan="2">


<table width="100%">
[-- LOOP SUBPRODUCTS 6 --]
[-- SUBPRODUCT --]
[-- END_LOOP SUBPRODUCTS --]
</table>
[-- END_IF --]
##[-- IF Product.DisplayOrderingOptions --]
##[-- IF Product.OptionText --]<br>[-- Product.OptionText --][-- END_IF --]
##<div id="miSelect">[-- Order_Option_Menu Line --]</div>
##[-- END_IF --]
</td>
</tr>



</table>


</form>
<!-- OrderInfo END -->
</td>
</tr>
<tr>
<td><hr noshade></td>
</tr>

</table></td>
</tr>
</table></td>
</tr>
[-- INCLUDE sd360_inc_footerNEW.html PROCESS --]
</table>
[-- INCLUDE google_analytics.html PROCESS --]

[Jim]

You get that information because it assumes that the data is coming from a form and you haven't provided all the required info.

Instead of using

Code: Select all

<input type="image" src="[-- VAR.MyImages --]/[-- STORE.AddToCart --]" name="Submit"

make it an href.

Code: Select all

<a href="[-- PRODUCT.AddToCartURL --]"><img src="[-- VAR.MyImages --]/[-- STORE.AddToCart --]"></a>

Or:

Code: Select all

<a href="[--PRODUCT.AddToCartURL--]">[-- PRODUCT.AddToCartButton --]</a>

As long as you aren't passing order options or quantity to the cart you can use the a href format. If you have quantity or order options you must use a form and provide all the fields needed.

[extragear]

Jim

Thanks for the examples. That fixed it.

Tim