Product List

Productlist

The productlist is one of the most important pages of the shop. This list is used to display the products for the customer. The myShop extensions for the productlist enable you to create a list of products. You can see in example below how a productlist with myShop extensions is build.

<html>
        <head>
                <title>Productlist example</title>
        </head>
        <body>
                <table style="myshop-block:productlist" border="1">
                        <thead>
                                <tr>
                                        <td style="myshop-label:1; font-weight:bold;"></td>
                                        <td style="myshop-label:2; font-weight:bold;"></td>
                                </tr>
                        </thead>
                        <tbody>
                                <tr style="myshop-block:product">
                                        <td style="myshop-value:1; color:red;"></td>
                                        <td style="myshop-value:2;"></td>
                                </tr>
                        </tbody>
                </table>
        </body>
</html>

When creating a productlist template it is important to mark the following:

Where the list starts, to do that you can use this extension: style=“myshop-block:productlist” (see line 6 of the example above)
Where a product begins, to do that you can use this extension: style=“myshop-block:product”, (see line 14 of the example above)

Defining multiple product blocks

With the myShop system, you can define multiple products within one productlist, and also display them with a columns format.Besides marking the start of the different parts of a productlist it also important to define what information should be displayed. The most relevant information is thereby the titles or labels of the different fields (the first line of your spreadsheet containing the productlist data) and the values of these fields.

The label of a field, can be displayed everywhere within the myshop-block:productlist area, using the extension myshop-label: (see line 9 and 10 of the example above). The value of a field however, can only be displayed within a myshop-block:product area, using the myShop extension: myshop-value: (see line 15 and 16 of the example above).The example code above, is the base for building a productlist. This productlist cannot be used to order products or navigate to the next/previous page when all products do not fit onto one page. The example below shows a productlist which does include these options. In this example you can see that the basics are the same as the previous example, but it includes the use of some extensions. See the Reference list for a description of the used extensions.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head> 
                <title>Productlijst voorbeeld</title>
        </head>
        <body>
                <table style="myshop-block:productlist" border="1">
                        <thead>
                                <tr>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td style="myshop-label:1;font-weight:bold"></td>
                                        <td style="myshop-label:2;font-weight:bold"></td>
                                </tr>
                        </thead>
                        <tbody>
                                <tr style="myshop-block:product;">
                                        <td><a style="myshop-action:order;">order</a></td>
                                        <td><a style="myshop-action:moreinfo;">more info</a></td>
                                        <td style="myshop-value:1;color:red;"></td>
                                        <td style="myshop-value:2;"></td>
                                </tr>
                        </tbody>
                </table>
                <span style="myshop-block:bottom-navigation-default"/>
        </body>
</html>

Displaying changeable fields for product variations

The product variations option, enables the users to select the product variations features (like it’s color or different sizes). To display these “changeable fields” with a drop down list, you only need to use the extension,myshop-value:< n >. However, there is one condition that you should consider to make this work: the myshop-block:product extension, may not be on a <TR> element as we show in the examples above. It only should be on any other element like <TABLE>, <P> or <DIV>.

Navigation

The default navigation shows a previous and next button when applicable, and a summation of the current showing products and total products in the form of (example): showing products 1-10 of 50.
For a more extended navigation using pagenumbers, see: Pagination.

Overview applicable extensions

Display Products

No Results

Feedback

Post your comment on this topic.