How To Customize Product Listing Templates In VPCart 9

How To Customize Product Listing Templates In VPCart 9

The display of products on listing page “shopdisplayproducts.asp” is controlled by the “tmp_productformat.htm” file (listing view) and tmp_productformat_grid file (grid view).
These template files are located in “templates/default”.

In VPCart 9, there are some changes with the formatting code and if you want to use your own HTML formatting, please make sure you have the following important code to be included in your listing templates:

1) Any Products fields that you want to display them into the listing page, you MUST insert the class "jsproductdisplay" into the HTML code.
This is needed if your V9 site has one of the following configs enabled:
a) xproductfiltering_mode: both. If your V9 site has listing page set to show both, means to have the button List and Grid view, then you need to put class "jsproductdisplay" into the HTML code.
b) xproductloadmore: Yes. If your V9 site has set to have load more products automatically when scrolling down the page, then you need to put class "jsproductdisplay" into the HTML code.

You also need to insert data-type and data-field on the same line of the class "jsproductdisplay".

Example, you want to show additional Product field "pother1" from Products table, in product listing page. The following is the HTML code you should insert into the template:

<span class="jsproductdisplay" data-type="div" data-field="pother1"></span>
<h4 class="jsproductdisplay" data-type="div" data-field="pother1"></h4>

- data-type value has the following rules:
a. field : If the element is input field eg checkbox, radio, hidden, text

b. href : If you need to target the href attribute of the element like anchor tag
Format: <a href="[link routine in asp]" class="jsproductdisplay" data-type="href" data-field="link">MY LINK</a>

<a href="[FORMATSHOPEXDLINK]" class="jsproductdisplay" data-type="href" data-field="link">
[translate cname]

c. div : If the element have the content of the product info (div, span etc).

- data-field value will depend on what product field you want to show. eg: cname, ccode, cprice, pother1, pother2, etc..

2) If you need to modify tmp_productformat_grid file (used for grid view), please make sure the below code must exist:

This code must be stayed at very top of the file.

This code must be stayed at very bottom of the file.

Note: For 2a) and 2b) will only valid for VPCart version and above.
If your version is below it, then do not need to put code mentioned in 2a) and 2b).

If you have any questions with this you can submit to us at:

Times Viewed:
Added By:
Wilson Keneshiro
Date Created:
Last Updated: