Category Page Templates - vikingcoders.com OpenUI (or MMUI) that controls the Category Display page. With that, any third-party ... the Category Page Templates link in the right-hand

Category Page Templates Documentation For Miva Merchant Versions 4.0 – 4.24

The Category Page Templates module gives you full control over the look of your store's category pages. You can format pages using HTML and tokens, and create various templates to package different product styles uniquely.

The Concept... This module provides an interface for you to enter the specific HTML and tokens, to present custom, enhanced designs for category pages. You create templates that can be assigned to categories - templates can be assigned to one or many categories, and you can create multiple templates should you need to package some categories differently than others. In your templates, you can use pre-defined tokens to represent the normal Merchant product fields. (New to tokens? Click here for a primer). The module also supports OpenTokens, which means you can call in other third-party modules and advanced users can use extensive token strings. The Category Page Templates module provides thousands of combination possibilities. Thus, it’s impossible to address every issue. And since most users want to implement unique layouts and functionality, we rely on you developing an understanding of how the module works prior to moving on to advanced token usage and coding. It’s also possible that some scenarios may be beyond the scope of your knowledge. That’s why we now offer highly sought-after customization services.

Note about compatibility with other modules: This module totally replaces the portion of the OpenUI (or MMUI) that controls the Category Display page. With that, any third-party module which controls elements on the category screen will not be compatible unless the developer has taken steps to make it work with this module. This module provides for an easy-to-use manner for developers to provide tokens that can be used to insert their module's HTML into the product pages. And these tokens can be registered in the module's admin interface (see here). All VikingCoders.com modules are compatible with this module (i.e. there are tokens that can be used to display their information on the product page) or soon will be.

Copyright 2007. All Rights Reserved.

http://www.vikingcoders.com/docs/listings.html

http://vikingcoders.com/

Installing the Module... This module is installed as a System Extension module. Click here for installation steps. Accessing the Module... After installing the module, click on the System Extension link in your Miva Merchant Admin, and click on the Category Page Templates link in the right-hand screen. This is where you will make all configurations for the module.

Copyright 2004. All Rights Reserved. Category Page Templates – Last Update 08/29/07

The Templates... The first screen (which can be accessed by clicking the Templates link) is the Template Listing. Four templates come pre-installed, and it is recommended you not modify nor delete them, so you can utilize them for troubleshooting.

Four base templates come pre-installed. We recommend copying them before making modifications.

The Standard template basically duplicates Miva Merchant's standard product page, while the Expanded with Quantity template adds a quantity input box on the category page (useful if you want shoppers to order items directly from the category page). The List with Quantity template provides a highly sought-after feature, allowing shoppers to order multiple products from one screen by simply entering quantities for each, and clicking only one add to basket button. The Three Products Across template gives a prime example on setting up your products in rows, across the screen (many users use this and modify it to adjust to the proper number of items across).

Example from a site using a List with Quantity template. The original template was copied and modified. The size information was included using the Additional Product Fields Manager module.


https://www.vikingcoders.com/go.mv?ID=DEN_PRODFIELDS

https://www.vikingcoders.com/go.mv?ID=DEN_PRODFIELDS

The Default Template… While you can create multiple templates, you may want one template to be the default for all products. The default template will be applied to any existing products in your store, as well as any new products you add, unless you override the default by manually assigning a different template to a product. To assign a default template, click the Options link. If you choose “none,” then the default display created by Miva Merchant will be used.

When the module is first installed, categories will be assigned the “default” layout, so changing the default template here will affect all products set to use the default layout.

Copying a Template This is a key feature. Copying the pre-installed templates will give you new templates to modify. It also makes it easier to switch back quickly if you make a mistake. First, take notice of the Template ID (initially, ID # 1 is the Standard Template and ID #2 is the Modified Standard Template).

1. Click on the New Template link.

2. In the Copy Template ID#

field, enter the template ID (found on the listing screen).

3. Click the Load button.

4. In the Template Name field, enter a name for the template. This can be a simple name, yet one

you will remember.

5. Click the Update button.

Modifying Templates It’s much easier to modify existing templates than it is to just create new ones from scratch. The data included in the pre-installed templates will help you learn how to use pre-defined tokens, and more. To modify any template, click its link in the Listing screen, make any changes, and click the Update button.

Always test your changes by viewing an assigned category in your store to make sure there aren’t any errors.


The Template Structure… Here’s a breakdown of the elements on the product template screen, and the changes you can make. The settings here will override Miva Merchant’s default settings. Buy One Now image: This is the “buy one now” graphical button that will be displayed on the category page (if used). Buy One Now alt: The alternate text that will appear when the mouse is held over the button. Add to Basket image: The button used with a quantity box for adding item(s) to the basket. Add to Basket alt: The alternate text that will appear when the mouse is held over the button. Add 1 to Basket image: Used for adding one of an item (no quantity box). Add 1 to Basket alt: The alternate text that will appear when the mouse is held over the button.

There are also alternate buttons and images for the above, noted with (2). These allow you to use alternative buttons for various product page elements, such as related products, etc.

Add All Image: If you using a List with Quantity type template, this is the button shoppers would click to add one or several items to the basket at once. Add All Alt: The alternate text that will appear when the mouse is held over the button. Next image: The button for moving to the Next page (if used). Previous image: The button for moving to the Previous page (if used). Background color #1 and Background color #2: You could use these background color for the background of tables, etc. The reason for including them here, however, is to allow the usage of alternating colors in listings (like in Miva Merchant’s default product listing layouts).


After adding product: You can define what happens when a shopper adds an item to the basket. You can keep the shopper on the product page (ideal if you are using the TinyCart module, which will display a real-time basket on all your Miva Merchant pages), send them to the basket screen (so they can see the add was successful), or send them directly to checkout.


Override UI settings for these options? If using the following options, you’ll want to check this box to override the store’s standard settings for these product pages.

Show category tree? Display the store’s category tree for any products using this template. Show navigation bar? Display the store’s navigation bar for any products using this template.

Category Page Templates – Last Update 08/29/07

http://www.vikingcoders.com/go.mv?ID=DEN_TINYCART

Main Template The main template is the “outline” of the category page. It controls what elements are displayed on the category’s page. In the graphic example below, the actual category page will consist of the category name, the header and footer, the listing of sub-categories, and the featured items. If you are using the Category Navigation Module, its token could be called above the %catname% token, so it will display at the very top of the page. The main template may include content that appears outside the standard category page portion, such as the category header and footer.

The category name, header and footer are all called in the Main Template. The sub-categories are called in using the %subcats% token in the Main Template. The assigned products are laid out in the Row and Product template areas, but are called to display using the %rows% token in the Main Template.


http://www.vikingcoders.com/go.mv?ID=DEN_CATMENU


Row Template The Row Template controls how the products are placed on the category page. In the previous example, we’d want the products to be displayed three across the screen. In the Expanded with Quantity template, the Row Template contains but one line:

%product|01|% This is because this template will display one product per row on the screen. The Three Products Across template uses the format:

<tr><td>%product|01|%</td> <td>%product|02|%</td>

<td>%product|03|%</td></tr>

By using table cells, the template will display the first three products on the first row, the next three products on the second row, and so on.

Note: The opening and closing <table></table> tags are in the Main Template. This is so the “overall” template will build the pages properly.

The only token that’s necessary in the Row Template is to call in the product itself, as shown above.

Product Template The Product Template handles the layout for the actual product area. You use this area to depict where the product code, price, weight and description are displayed, as well as attributes. You also can call in third-party tokens for modules that display information or functionality on the actual product screen (such as the Wish List module). The %product|xx|% token in the Row Template is what tells this entire area to display. Within the Product Template there is one token that is replaced by another template. This is the %attribute% token. Wherever you place this token, it will call the layout from the Attribute Template (not to be confused with Miva Merchant’s actual attribute template feature of creating the attributes). We’ll discuss that template in a bit.

The Product Template controls the actual product layout. In our example, the product thumbnail, name and price is displayed for each product on the screen.

When it is displayed with add buttons, the product area is surrounded by a form, to allow shoppers to successfully purchase the correct product (unless you are using the List with Quantity template). Thus, you cannot include your own HTML form here unless you use specific form tokens to display the add button(s) separately. This is discussed later.


http://www.vikingcoders.com/go.mv?ID=BROK_WISHLIST

Category Paging Category paging will place page numbers of categories on the category screen. It will only work, of course, if you are paginating the category (which is done by clicking the pagination link in your Miva Merchant admin area for each category). Most sites use category paging to give shoppers an idea of how many products are available. It’s not always feasible for customers to just click around, not knowing what they will find.

The row template here defines the layout for the paging – by default, all page numbers will appear on one row. The denotes a space, and [%number%] displays the page numbers enclosed in brackets. The template for “other pages” was added for more advanced usage, upon recommendation for using proper formatting if you are using Copernicus’ Search Friendly Links module. Additional help on this feature can be found at our support area. .


http://www.vikingcoders.com/helpdesk/faq.php?parent=30

Related Products The related products main, row, and individual templates can be used to call in related products. Most users don’t call in related products on the category screen, but if you’re using the Category Page Templates module to provide in-depth product info (normally with just a few products), you could call them in respectively by using the %relatedproducts% token in the Product template area. Related Products Main Template This handles the overall “shell” of the related products section. The examples carry the layout in a list format. By breaking up the related products into three separate template areas, you have the ability to gain concise control over the layout of related products. The Related Products Main Template contains the HTML that will be used to replace the %relatedproducts% token in the Product Template.

Example of laying out two across: <tr> <td width=”50%”>%relatedproduct|01|%</td> <td width=”50%”>%relatedproduct|02|%</td> </tr>

The only token that can be used in Related Products main template is the %rows% token. The example content shows you how to use tables to display the content in row format, with headers (like Code, Name, etc.). Related Products Row Template This area controls how the rows will be formatted. For example, if you want to use a default display of a listing format, you’d only have one related product appearing per row, and would use the default token displayed here - %relatedproduct|01|%. You could also use HTML to define table cells. For example, if you wanted to layout related products with thumbnail images and two across, you could use table cells to signify this and the placement of two tokens - %relatedproduct|01|% and %relatedproduct|02|%. To replace the %rows% token in the Related Products Main Template, the module takes a copy of the Related Products row template and populates the %relatedproduct|01|% position with the first related product, then the %relatedproduct|02|% position with the second, until there are no more positions in that row. It then displays that row and starts over with a new copy of the Row Template. Individual Related Products Template This template area is similar to the Product Template area, and controls how each individual related product is displayed on the screen. The example included shows how to layout the tokens for the line display. You could use various tokens, however, such as %prodthumb% to display the related product’s thumbnail image. You can also use OpenTokens to display alternate images (see section discussing OpenTokens).


Attributes Main Template The Attributes main template contains the HTML that will be used to replace the %attributes% token in the Product Template. To permit the display of the attributes in some other fashion than the standard vertical listing, the Attributes main template contains a token, %rows% which represents where the actual listing of the attributes will be displayed. The %rows% token will be replaced by as many instances of the Attributes row template as it takes to display all of the attributes. Individual

attributes are contained in the red box.

Attribute Row Template


Should you include attributes on the category screen? If you are allowing people to purchase items directly from the category page, it’s wise to include attributes with the product, to avoid confusion. If you’re not allowing purchases from the category screen (by removing the add buttons), then you can also leave off the attribute selections, as the shopper will be prompted with the selections right on the product page.

The Attributes Row Template, in turn, lets you arrange multiple attributes in a single row.

The Attribute Row Template controls everything inside the green box.

The Attributes Main Template controls this entire area.

For example, if you wanted to lay attributes out in rows across, you could code it like:

<tr><td valign="top"> <table>%attribute|01|%</table> </td><td valign="top"> <table>%attribute|02|%</table> </td></tr>

In this example, the row template would be run twice (to put two attributes on the first row across, and one attribute on the second). Each instance of an attribute in the row is represented by the token: %attribute|xx|% where xx represents the position of the token in that row. They should be numbered consecutively left to right.

Because of the way Merchant handles attributes and to provide for better control over how the templates are displayed, this module provides for separate template to be used for each TYPE of attribute. When the module replaces the %attribute|xx|% token it first checks the type of attribute and selects the appropriate token from the actual available attribute types.

Category Page Templates – Last Update 08/29/07

Radio Attributes… This is the attribute that is used for the "radio" type attribute. Its template is different from the other attribute types, and it contains three core template areas:

• Radio Attribute Template • Radio Option Row Template • Radio Option Template

Radio Attribute Template This area controls the attribute prompt and the available options. Thus, the only tokens used in this area are %prompt% and %options%. Radio Option Row Template You can display options in a single list (like default Miva Merchant) or use table cells to span them across the page in rows/columns. For example, if you wanted to display the options three across, you can do something like this:

<tr><td valign="top"> %option|01|% </td><td valign="top"> %option|02|% </td><td valign="top"> %option|03|% </td></tr>

Just make sure to number the options consecutively (01, 02, 03, etc.). Radio Option Template This template will use two tokens: %fields% (which is the selection button) and %prompt% (the text the shopper sees for the option).

Select Attribute Template This is a simple template, because all you need to display is %prompt% and %fields% - for the drop-down menu.

Checkbox Attribute Template Another simple template, %fields% controls the checkbox and %prompt% is the text the shopper sees.

Text Attribute Template %prompt% is the text the shopper sees, while %fields% is the input box.

Memo Attribute Template This is for the text area attribute. %prompt% is the text the shopper sees, while %fields% is the input box.


Sub-categories Navigation for your customers is key. You can display the sub-categories of a category (or even the sub-category’s sub-categories), to provide ease of navigation. The Sub-categories templates give you complete control over how sub-category listings are displayed on the parent category’s page. The content of the templates is called in by placing the %subcats% token in the category template’s Main Template. To avoid duplication, you can suppress the expansion of your store’s category tree, so that only the parent categories will be listed when shoppers navigate to a sub-category. Sub-category Row Template This template is similar to the Product Row and Related Products Row templates – it uses the token %subcat|xx|% to depict how the sub-categories will be laid out on the screen.

We used %subcat|01|% only to display the sub-cats one per line.

If you want to display one sub-category per line, you can use simply: %subcat|01|% But if you want to display them three across, you’d follow the table cell example of:

<tr> <td width=”33%”> %relatedproduct|01|%</td> <td width=”33%”> %relatedproduct|02|%</td> <td width=”33%”> %relatedproduct|03|%</td> </tr>

Note: The <table></table> tags when using this method should surround the %subcats% token in the Main Template.

Sub-category Main Template This area controls how each individual sub-category listing is displayed. For example, if you only want to display the category name with a link to the category, you could simply use %catnameL%. Sub-sub-categories Let’s say we have a main category of Country Rock, with a sub-category of ‘90s rock, and within there, a selection of additional categories (such as chart toppers, b-sides, etc.). These additional categories would be called sub-sub-categories and you can call them in as well to create a virtual category map (similar to a site map). The Sub-sub templates follow the same concept.


Sub-category trickiness Since each template area is just a component—the template module actually takes everything and builds one core section of code, where you put your <table> </table> tags when using the Sub-category templates is dependent on the layout you are using.

One Per Row If you are displaying sub-categories one per row, by putting only %subcat|01|% in the Sub-category Row Template, then your <table> </table> need only surround the %subcats% token in the Main Template. With that, you need the <tr> </tr> and <td> </td> tags in the Sub-category Main template. Many Per Row If you are enclosing the %subcat|xx|% tokens in table cells in the Sub-category Row Template, and don’t need special formatting for each individual category listing, you wouldn’t necessarily need any table tags in the Sub-category Main Template.

You will see in the example templates, however, the following code in the Sub-category Main Template:

<tr><td> %catnameL% </td></tr> %begin_hassubcats% <tr> <td> <table> %subcats% </table> </td></tr> %end_hassubcats%

And here’s why: The %subcats% token calls in the Sub-category Row and Main templates, and it is surrounded by table tags in the category’s Main Template. Thus, when the module builds the template, it will actually build it like:

<table> <tr><td> %catnameL% </td></tr> %begin_hassubcats% <tr> <td> <table> %subcats% Additional table cells are called in from the Sub-sub-category templates. </table> </td></tr> </table> %end_hassubcats%

This is why it’s important to see all the separate templates as “components” of a big picture. The %begin_hassubcats% and %begin_hassubcats% tokens set a condition – IF the category has sub-categories, display this content. This is useful if you want to put a header, such as Select a Section above the sub-categories, but don’t want it to display unless there are additional options. Copyright 2004. All Rights Reserved. Category Page Templates – Last Update 08/29/07

Category Assignments There are only two ways a category can use a template you’ve modified or created:

• The template has to be the default template and the category is set to use the default. • The category is manually assigned to use the template.

You can manually assign categories a few ways:

• In the admin for the module, click on Category Assignments. Click the All link, locate the product, and check its box. Then click Update.

NOTE: Each category can only be assigned to one template, so if it’s already assigned to one, you will not be able to change the assignment using this method. However, you can unassign categories from a template this way.

• In the category’s own edit area, click the Category Page

Templates link, and click the radio button next to the template you want the category to use.


Tokens This module uses two different types of tokens:

• Pre-defined tokens – ones created for the module • OpenTokens – tokens packaged with the OpenUI

If you are not using the OpenUI, you may not implement OpenTokens. However, even MMUI users may implement any of the pre-defined tokens that are supported by the Category Page Templates module, as well as conditionals using Miva Syntax. If you are new to tokens altogether, you will want to read the Primer on Tokens.

IMPORTANT: The most important step is to test your customizations before launching. You can build and/or customize a template that you’ve first copied, and assign it to only one particular category so you can test the solution first. Make sure the add to basket and buy one buttons work, as well as any other functionality (like that from third-party modules).

Pre-Defined Tokens for Category Page Templates Following is a list of standard pre-defined tokens used for this module.

NOTE: These are not OpenTokens. They are tokens specific to the Viking Coders template modules and do not require special settings for normal display of information.

Tokens may be added to the module as needs arise. As they are added, this documentation will be updated. Note the date on this documentation to see if updated documentation is available.


http://www.vikingcoders.com/docs/listings.html

Tokens supported in the Category Main Template

Token

What it Displays/Does

%catname%

Category name

%catnameL%

Category name linked to the initial category page

%catcode%

Category code

%catcodeL%

Category code linked to the initial category page

%cattreeimage%

Category tree image

%cattreeimageL%

Category tree image linked to the initial category page

%cattitleimage%

Category title image

%cattitleimageL%

Category title image, linked to the initial category page

%ctgy_hdr%

Category header (for the Subcategory templates, use %var|OUI_Categories.d.header|%)

%ctgy_ftr%

Category footer (for the Subcategory templates, use %var|OUI_Categories.d.footer|%)

%next%

A "next" button which will take the customer to the next page of products for the category (only used if the category is paginated).

%back%

A "previous" button which will take the customer the previous page of products for the category (only used if the category is paginated).

%productaddall%

Replaced with button that adds all products on page at once. Requires use of the %prodqtybox% token in the Product template

%bgcolor1%

Replaced with the background color #1 configured in this module's admin

%bgcolor2%


%bgcolor%

Alternately replaced with background color #1 and background color #2


%rows% Replaced with HTML and tokens used in the Row template.

%subcats%

Calls in the HTML and tokens from the Sub-category templates.

Tokens Supported in the Row Template Token


%product|xx|%

Calls in the HTML and tokens used in the Product Template. XX denotes the number of products. If displaying only one product per row, use %product|01|%, if displaying several products across, use %product|01|%, %product|02|%, and so on, only up to the number of products to display across one row.

%catname%

Category name

%catnameL%

Category name linked to the initial category page

%catcode%

Category code

%catcodeL%

Category code linked to the initial category page

%cattreeimage%

Category tree image

%cattreeimageL%

Category tree image linked to the initial category page

%cattitleimage%

Category title image

%cattitleimageL%

Category title image, linked to the initial category page

%bgcolor1%


%bgcolor2%


%bgcolor%

Alternately replaced with background color #1 and background color #2


Tokens Supported in the Product Template Token


%prodname%

Product name

%prodcode%

Product code

%prodnameL%

Product name, linked to the actual product page.

%prodcodeL%

Product code, linked to the actual product page.

%prodprice%

Product price

%prodcost%

Product cost

%prodweight%

Product weight

%proddesc%

Product description

%prodimage%

Product image

%prodthumb%

Product thumbnail

%prodimageL%

Product image, linked to the actual product page.

%prodthumbL%

Product thumbnail, linked to the actual product page.

%stocklevelcode%

product's inventory level code (using Miva Merchant’s stock Inventory feature)

%stockmessage%

product's inventory stock level message (using Miva Merchant’s stock Inventory feature)

%stocklevel%

product's inventory stock level (using Miva Merchant’s stock Inventory feature)


%prodqtybox|xxx|%

An HTML field box to collect the quantity to add to the basket. The xx is the minimum quantity to display in the field. Note however, that the customer can change this to be any quantity they want (including lower than the initial value)

%prodadd%

A button to add the quantity to the basket. Replaced with the "Add to Basket image" if configured. Otherwise replaced with Merchant's "Add to basket" image

%prodaddone%

A button to add one of the product to the basket. Replaced with the "Add 1 to Basket image" if configured. Otherwise replaced with Merchant's "Add 1 to basket" image

%prodbuyone%

A button to add one of the product to the basket and take the customer directly to checkout. Replaced with the "Buy one now image" if configured. Otherwise replaced with Merchant's "Buy one now" image

%prodadd2%

A button to add a quantity to the basket. Replaced with the "Add to Basket image (2)" if configured. Otherwise replaced with Merchant's "Add to basket" image for line item display

%prodaddone2%

A button to add one of the product to the basket. Replaced with the "Add 1 to Basket image (2)" if configured. Otherwise replaced with Merchant's "Add to basket" image for line item display

%prodbuyone2%

A button to add one of the product to the basket and take the customer directly to checkout. Replaced with the "Buy one now image (2)" if configured. Otherwise replaced with Merchant's "Buy one now" image for line item display

%prodinbasket%

Displays how many of the product are currently in the basket (i.e. Quantity in basket: 2)

%bgcolor1%

replaced with the "Background color #1”

%bgcolor2%


%bgcolor%

alternately replaced with the "Background color #1" and "Background color #2"

%attributes%

Call to display attributes on the product page (whether or not you modify the Attribute Template portion of the module).


A note about using add one & buy one buttons using attributes:

If you want to display the attributes on the category page, you’ll need to place the %attributes% token in the Product Template. However, this requires you also use the %beginform% and %endform% tokens around the %attributes% token. If you want to use the equivalent of the %prodaddone% token, you’ll also need to include the token %prodqtybox|xxx|% (where xxx equals the hidden quantity of the product to add to the basket). For example, to display product attributes and a product add one button, you’d use:

%attributes% %quantity|001|% %prodaddone% %endform%

You could do this similarly with the %prodbuyone% button, however, that would require the %attributes% token as well, which would require a duplicate of attributes on the screen. Thus, you’d only want to use the %prodaddone% functionality if displaying attributes on the category page.


Tokens Supported in the Attribute Template Token


%rows%

Used in the main template only. Signifies where the attribute rows will appear.

%attribute|xx|%

Used in the row template only. Signifies where the individual attribute layouts will appear (called from the attribute type templates).

Tokens usable in the individual Attribute type templates %prompt%

The attribute prompt (text seen by the shopper).

%options%

Used only for Radio attributes; signifies where the attribute options will display.

%fields%

Displays the attribute fields (also, options).

%attrprice%

Price.

%attrcost%

Cost.

%attrimage%

Image.


Tokens Supported in the Related Products Template Token


%prodname%

Product name

%prodcode%

Product code

%prodprice%

Product price

%prodcost%

Product cost

%prodweight%

Product weight

%proddesc%

Product description

%prodimage%

The product image

%prodthumb%

The product thumbnail image

%stocklevelcode%

product's inventory level code (using Miva Merchant’s stock Inventory feature)

%stockmessage%

product's inventory level message (using Miva Merchant’s stock Inventory feature)

%stocklevel%

product's inventory level (using Miva Merchant’s stock Inventory feature)

%prodqtybox|xxx|%

An HTML field box to collect the quantity to add to the basket. The xx is the minimum quantity to display in the field. Note however, that the customer can change this to be any quantity they want (including lower than the initial value)

%prodadd%

A button to add the quantity to the basket. Replaced with the "Add to Basket image" if configured. Otherwise replaced with Merchant's "Add to basket" image

%prodaddone%

A button to add one of the product to the basket. Replaced with the "Add 1 to Basket image" if configured. Otherwise replaced with Merchant's "Add 1 to basket" image

%prodbuyone%

A button to add one of the product to the basket and take the customer directly to checkout. Replaced with the "Buy one now image" if configured. Otherwise replaced with Merchant's "Buy one now" image


%prodadd2%

A button to add a quantity to the basket. Replaced with the "Add to Basket image (2)" if configured. Otherwise replaced with Merchant's "Add to basket" image for line item display

%prodaddone2%

A button to add one of the product to the basket. Replaced with the "Add 1 to Basket image (2)" if configured. Otherwise replaced with Merchant's "Add to basket" image for line item display

%prodbuyone2%

A button to add one of the product to the basket and take the customer directly to checkout. Replaced with the "Buy one now image (2)" if configured. Otherwise replaced with Merchant's "Buy one now" image for line item display

%bgcolor1%


%bgcolor2%


%bgcolor%

alternately replaced with the "Background color #1" and "Background color #2"

Conditional Statements Product Page Templates supports conditional statements, and some can be built using Miva Syntax. The template modules use their own conditional tokens, but you can also use conditionals with OpenTokens. The standard conditional statements for the template modules carry the format of:

%begin_if|variable|% If the above is true, display this content.

%else% If it’s not true, display this content.

%end_if% For example, if you only want to display the weight of a product if it’s more than zero, you could use:

%begin_if|Products.d.weight GT 0|% Weight: %prodweight%

%end_if%


There are also some shortcut tokens available for common conditional statements. Some of these are: %begin_hasthumbnail%...%end_ hasthumbnail %

displays contents if product thumbnail file exists

%begin_ hasnothumbnail %...%end_ hasnothumbnail % displays contents if product thumbnail file does not exist %begin_noproducts%...%end_noproducts% displays contents only if the category has no products %begin_hasproducts%...%end_hasproducts% displays contents only if the category has products %begin_nopricediscount%...%end_nopricediscount% displays contents if the list price is NOT lower than product price

%begin_nocostdiscount%...%end_nocostdiscount% displays contents if the price is NOT lower than the cost %begin_hassubcats%...%end_hassubcats% displays contents only if the category has sub-categories %begin_hasnosubcats%...%end_hasnosubcats% displays contents only if the category has no sub-categories

For example, if you are relying on attributes to set the actual cost for some of your products, you could use the following:

%begin_hasprice% Price: %prodprice% %end_hasprice%

%begin_zeroprice%

varies %end_zeroprice%

This will display the product price if it is not zero, and the word “varies” if the base product price is set at zero. As common needs are noticed, we update an online FAQ for this module online. View the latest FAQ.



Placing Tokens The placing of tokens, in most standard cases, is pretty straightforward. You simply put the token where you want the data to display (or the function to occur). However, not all tokens are supported in all areas. For example, the %attributes% token won’t work if placed in the Related Products Template. Also, tokens are not always logical. This means that you can’t just assume that something can be a token. While you can build token strings, you cannot just build your own tokens themselves. They must first be supported by the module. It’s easiest to work off a copy of the standard templates that are included with the module. They’ve been proven to work and will give you a good base for the product page, as well as a clearer understanding of how the tokens work. You can use HTML in the category page templates. Thus, you can place tokens within table cells to get professional layout results. Pay attention, however, to the logic behind the table layouts in the standard templates. We’ll use the layout of the Related Products Main and Row Templates, and the Individual Related Products Template as an example. We’ve stripped out the font tags in our example (which you can also do if you’re using CSS that controls fonts).

<TABLE BORDER="0" CELLSPACING="0"> <TR><TD ALIGN="left" VALIGN="middle" NOWRAP COLSPAN="5">

<BR><BR> <B>Related Item(s)</B> </TD></TR> <TR> <TD ALIGN="left" VALIGN="middle" BGCOLOR = "#000080">

<B>Code</B> </TD> <TD ALIGN="left" VALIGN="middle" BGCOLOR = "#000080" WIDTH="100%">

<B>Name</B> </TD> <TD ALIGN="right" VALIGN="middle" BGCOLOR = "#000080">

<B>Price</B> </TD>

<TD ALIGN="left" VALIGN="middle" BGCOLOR = "#000080">

</TD> </TR>

%rows% </TABLE>

This top table row builds the heading for the list of related items. It uses straight HTML.

The %rows% calls in the content from the Related Products Row Template. It stands outside the <TR> fields, yet within the <TABLE> because we’ll include the table rows in the template.

It is important to see the three Related Products templates as one big picture (a table, in this case).


Here, we’re telling it to display one item per row. The layout for that row is called in the next template area.

%relatedproduct|01|%

<TR> <TD ALIGN="left" VALIGN="top" NOWRAP bgcolor="%bgcolor%">

%prodcodeL% </TD> <TD ALIGN="left" VALIGN="top" bgcolor="%bgcolor%">

%prodname% </TD> <TD ALIGN="right" VALIGN="top" NOWRAP bgcolor="%bgcolor%">

%prodpriceF% </TD> <TD>

%prodaddone2% </TD></TR>

No <TABLE> tag is used because this is going to actually display within the table we developed for the Related Products Main Template. %prodpriceF% simply adds the $ to the price. This called also be entered as $%prodprice%.

If you’re familiar with extensive HTML, the possibilities for the design and layout of your product pages are virtually endless.

You may find that some scenarios will be beyond the scope of your abilities, and for that, we do offer a customization service.

Using OpenTokens You can use OpenTokens in the Category Page Templates template areas. The very first characters of the field must be %OUI%. You can also use %OUI1% if necessary – this token tells the module to parse OpenTokens first. You can then place OpenTokens, including tokens to call in third-party modules. Note that third-party modules being called in using OpenTokens must first be registered with the OpenUI. Some elements of the OpenUI can be called in without the use of actual OpenTokens. For example, the module allows you to use %var|OUI_Categories2.d.shortdesc|% to call in the content from a category’s short description. %var|OUI_Products2.d.shortdesc|% will call in the product’s short description. The Knowledge Base for Category Page Templates includes a wealth of additional information.

While we will make attempts to help with the placement of OpenTokens, please note that OpenTokens are part of the OpenUI, not this actual module. We are limited in the amount of troubleshooting we can do with OpenToken placement.



Third-Party Modules This module comes "pre-configured" for tokens to a number of different modules which display information or provide functionality to the product page. However, if these modules are not installed prior to the installation of Category Page Templates, their tokens will not be auto-installed. The Third-Party Tokens tab in the Category Page Templates module admin is used to register third-party modules that will be used on the category page. This listing shows all of the modules that have been registered and their respective tokens. The tokens themselves can be changed and this will affect the "full token to use". The xx in the full token represents the "position" of the token. It tells the module to which the token belongs which position the token belongs to. In some modules this position may be a number and in some others it may represent more descriptive text. The link in the "instructions" column will open a new window which displays any instructions provided by the module's developer to help in the placement of the tokens.

Enter the module’s code here. Enter the token here (can be the same as the code).

Information displayed when you click on the instructions button is dependent upon instructions registered by the developer. Should they be absent or incorrect, you’ll need to contact the developer of the module. Not all third-party modules support tokens, and registration of ones that do not will not make a difference.


Locating the Module Code To locate the code of a module, do the following:

1. In your Miva Merchant admin, click the arrow next to Modules. 2. Locate the module in the listing and click it’s link.

3. Note the CODE that is listed in the right-hand screen. This is what you need to put in the Module

Code box on the Third-Party Tokens tab.

Placing Third-Party Tokens The placement of third-party tokens is similar to placing any of this module’s pre-defined tokens. In many cases, it’s simply copying and pasting the proper token to the proper location in the proper template. Some tokens must be called in specific areas because of the functionality of the module. For example, the Category Navigation Menu needs to be placed in the Main Template to it will display at the top of the product page, above the actual product.

We registered the module code and token as DEN_CATMENU.

With the Wish List and Wait List modules, we placed the code within the Product Template. This is because we need these features to appear along with all the details of the product. In our example here, the Wish List button will always appear, but the Wait List link only appears if the item is out of stock.

We used a conditional to check to see if the item is in stock. If it’s not, we let the customer sign up on the wait list.



http://www.vikingcoders.com/go.mv?ID=BROK_WISHLIST

http://www.vikingcoders.com/go.mv?ID=DEN_WLST

Troubleshooting the Module Category Page Templates does require some creative thought – and a clear understanding of which template areas control which sections of the Category Page. Since there are thousands of possible combinations of layouts, it’s impossible for us to be able to address each and every issue. Often, errors that display on the screen are due to configuration issues, such as an improper use of tokens, placing tokens in the wrong template areas, the usage of a third-party module that is being called in incorrectly (or has a bug) or improper HTML formatting. Setting up your category pages takes time, and the best advice we can offer is to start with the copy of a base template and view the category page often – this will help you catch any mistakes as they are made, rather than having to go back through lines and lines of HTML code and tokens to find the culprit. With that, you’ll find some common troubleshooting issues, as well as customization tips, listed on our web site – click here for the Knowledge Base for this module. If you find that customizing your templates is too much for you, Viking Coders does offer customization services for our template modules. Click here to create a ticket.



https://www.vikingcoders.com/helpdesk/index.php

Category Page Templates – Last Update 08/29/07 Copyright 2004. All Rights Reserved.

Installing Category Page Templates

1. In the Miva Merchant Admin Menu, click the next to Modules. 2. Click Add Module.

3. Use the upload button to upload the BROK_CTGYTEMPLATES.mvc (or .mv if running MM

version 4.13 or lower) to the store.

4. Once uploaded, click the Add button.

5. Click the next to your store’s link.

6. Click the System Extension link.

7. In the right-hand screen, check off the box next to Category Page Templates and click Update.

8. At the top of the screen, click the Category Page Templates link.

9. Enter your license key and agree to the terms.

10. Click Update. UpFrom time to time updates may be made to fix issues or add more

dating/Upgrading Category Page Templates features. To see if there are updates

Obtaining Support

available for this module, you can click the upgrades link in the module’s admin at any time. If one is available, you can download the file and follow the instructions on updating the module.

Standard support for this module is offered free of charge via the Support Desk. Standard support covers

m coding or configuration.

cument, make sure you are n

initial installation issues, confliction issues and standard usage of the module.

ome issues may be considered advanced, such as requests that require custoSServices are offered for this type of support or work. Please inquire.

efore contacting support, please double-check your settings against this doBusing the most recent version of the module (by clicking on upgrades) and visit the Module’s FAQ sectio .



Documents

Category Page Templates - vikingcoders.com OpenUI (or MMUI) that controls the Category Display page. With that, any third-party ... the Category Page Templates link in the right-hand