Quiche Jackson
04-14-06, 10:40 PM
So you want to display your category pages with multiple product columns?
We are going to display products 3 columns x 4 rows
NOTE: This 'HOW TO' is for MIVA Merchant5 users.
This example assumes your using the 'Original' template version, if you are not then adjust instruction accordingly.
Login to admin.mvc
Expand Stores >> Expand Your Store Name >> Click Pages
Edit 'CTGY Category Display'
Click 'Category Product List Layout' Tab
For ease of use lets strip the page of as much as possible before we edit the template code.
Uncheck 'Product Code'
Uncheck 'Add One To Basket'
Uncheck 'Buy One Now'
Select 'Image': None
Select 'Inventory Level Message': None
Set Pagination: 12
Click Update
Click 'Advanced Mode'Before i begin let me explain what is taking place before we edit the code.
<tr> = Table Row
<td> = Table Data Cell
The mvt:foreach tag loops through the product array and prints out a new table row for each product.
We want to have it print out 3 table data cells per table row with a product in each cell.
I removed the pagination code just to save space in this how to
<!-- BEGIN 'Category Product List Layout' ORIGINAL PAGE TEMPLATE CODE -->
<table border=0 cellpadding=2 cellspacing=0>
<mvt:foreach iterator="product" array="products">
<tr>
<td align="left" valign="top">
</td>
<td align="left" valign="top" colspan=2>
<mvt:item name="fonts" param="body_font">
<a href="&mvt:global:sessionurl;Screen=PROD&Store_Code=&mvta:store:code;&Product_Code=&mvta:product:code;&Category_Code=&mvta:category:code;">&mvt:product:name;</a><br>
Price: <b>&mvt:product:formatted_price;</b><br>
Quantity in Basket:
<mvt:if expr="l.settings:product:quantity EQ 0">
<i>none</i>
<mvt:else>
<b>&mvt:product:quantity;</b>
</mvt:if>
<br>
</mvt:item>
</td>
</tr>
</mvt:foreach>
</table>
<!-- END 'Category Product List Layout' ORIGINAL PAGE TEMPLATE CODE -->
NOTE: There is a variable that exists that lets us know what position we are at in the set of product records were going to display that variable is: 'pos1'
Move the mvt:foreach tags inside the first and last table row (<tr> </tr>) tags.
If you were to stop here you would get a single horizontal row of products instead of a vertical one.
In the first table cell tag set align="center" valign="bottom" and remove colspan=2
Just before the close </mvt:foreach> tag you will notice the snippit of code that generates the columns
<!-- BEGIN 'Category Product List Layout' CUSTOM PAGE TEMPLATE CODE -->
<table border=0 cellpadding=2 cellspacing=0>
<tr>
<mvt:foreach iterator="product" array="products">
<td align="left" valign="top">
</td>
<td align="center" valign="bottom">
<mvt:item name="fonts" param="body_font">
<a href="&mvt:global:sessionurl;Screen=PROD&Store_Code=&mvta:store:code;&Product_Code=&mvta:product:code;&Category_Code=&mvta:category:code;">&mvt:product:name;</a><br>
Price: <b>&mvt:product:formatted_price;</b><br>
Quantity in Basket:
<mvt:if expr="l.settings:product:quantity EQ 0">
<i>none</i>
<mvt:else>
<b>&mvt:product:quantity;</b>
</mvt:if>
<br>
</mvt:item>
</td>
<!--
This mvt:if prints out code only when pos1 is evenly divisible by 3
ex: ( pos1 MOD x ) where x equals how many columns you want. It starts a new column
-->
<mvt:if expr = "(pos1 MOD 3 ) EQ 0">
</tr>
<tr>
<td colspan=3><HR width="100%" color=#cccccc SIZE=1></td>
</tr>
<tr>
</mvt:if>
</mvt:foreach>
</tr>
</table>
<!-- END 'Category Product List Layout' CUSTOM PAGE TEMPLATE CODE -->
We are going to display products 3 columns x 4 rows
NOTE: This 'HOW TO' is for MIVA Merchant5 users.
This example assumes your using the 'Original' template version, if you are not then adjust instruction accordingly.
Login to admin.mvc
Expand Stores >> Expand Your Store Name >> Click Pages
Edit 'CTGY Category Display'
Click 'Category Product List Layout' Tab
For ease of use lets strip the page of as much as possible before we edit the template code.
Uncheck 'Product Code'
Uncheck 'Add One To Basket'
Uncheck 'Buy One Now'
Select 'Image': None
Select 'Inventory Level Message': None
Set Pagination: 12
Click Update
Click 'Advanced Mode'Before i begin let me explain what is taking place before we edit the code.
<tr> = Table Row
<td> = Table Data Cell
The mvt:foreach tag loops through the product array and prints out a new table row for each product.
We want to have it print out 3 table data cells per table row with a product in each cell.
I removed the pagination code just to save space in this how to
<!-- BEGIN 'Category Product List Layout' ORIGINAL PAGE TEMPLATE CODE -->
<table border=0 cellpadding=2 cellspacing=0>
<mvt:foreach iterator="product" array="products">
<tr>
<td align="left" valign="top">
</td>
<td align="left" valign="top" colspan=2>
<mvt:item name="fonts" param="body_font">
<a href="&mvt:global:sessionurl;Screen=PROD&Store_Code=&mvta:store:code;&Product_Code=&mvta:product:code;&Category_Code=&mvta:category:code;">&mvt:product:name;</a><br>
Price: <b>&mvt:product:formatted_price;</b><br>
Quantity in Basket:
<mvt:if expr="l.settings:product:quantity EQ 0">
<i>none</i>
<mvt:else>
<b>&mvt:product:quantity;</b>
</mvt:if>
<br>
</mvt:item>
</td>
</tr>
</mvt:foreach>
</table>
<!-- END 'Category Product List Layout' ORIGINAL PAGE TEMPLATE CODE -->
NOTE: There is a variable that exists that lets us know what position we are at in the set of product records were going to display that variable is: 'pos1'
Move the mvt:foreach tags inside the first and last table row (<tr> </tr>) tags.
If you were to stop here you would get a single horizontal row of products instead of a vertical one.
In the first table cell tag set align="center" valign="bottom" and remove colspan=2
Just before the close </mvt:foreach> tag you will notice the snippit of code that generates the columns
<!-- BEGIN 'Category Product List Layout' CUSTOM PAGE TEMPLATE CODE -->
<table border=0 cellpadding=2 cellspacing=0>
<tr>
<mvt:foreach iterator="product" array="products">
<td align="left" valign="top">
</td>
<td align="center" valign="bottom">
<mvt:item name="fonts" param="body_font">
<a href="&mvt:global:sessionurl;Screen=PROD&Store_Code=&mvta:store:code;&Product_Code=&mvta:product:code;&Category_Code=&mvta:category:code;">&mvt:product:name;</a><br>
Price: <b>&mvt:product:formatted_price;</b><br>
Quantity in Basket:
<mvt:if expr="l.settings:product:quantity EQ 0">
<i>none</i>
<mvt:else>
<b>&mvt:product:quantity;</b>
</mvt:if>
<br>
</mvt:item>
</td>
<!--
This mvt:if prints out code only when pos1 is evenly divisible by 3
ex: ( pos1 MOD x ) where x equals how many columns you want. It starts a new column
-->
<mvt:if expr = "(pos1 MOD 3 ) EQ 0">
</tr>
<tr>
<td colspan=3><HR width="100%" color=#cccccc SIZE=1></td>
</tr>
<tr>
</mvt:if>
</mvt:foreach>
</tr>
</table>
<!-- END 'Category Product List Layout' CUSTOM PAGE TEMPLATE CODE -->