Creating a Custom Product Template
A product template defines the elements and layout of a product listing that appears on store pages. The content of each element comes from the values that the merchant enters for the product in the ShopSite back office. When ShopSite is publishing a store and a page includes a product, it reads the product information from the product database and formats it according to the product template. ShopSite then creates the rest of the page, which probably includes more products, each of which is formatted according to the product template that is uses.
Typically, a template contains standard HTML tags to specify the layout, and ShopSite product template tags that tell ShopSite what information from the products database to include in a product listing. A template can include HTML table tags, frame tags, and even JavaScript and other Web enhancements.
When ShopSite publishes a store that uses custom templates, the ShopSite parser finds all the custom tags and replaces them with information from the products databases.
A merchant can use the same template for all products in a store, or choose a product template for each product in the store. If a product is assigned to more than one page, it is displayed using the same product template on each page.
To create a product template and make it available to merchants:
- If you do not have experience with ShopSite, you should spend time configuring and viewing the ShopSite demo stores, from both the merchant and customer perspectives. You need to have a fairly solid understanding of what information is stored for pages and products, and how the built-in templates present that information.
- Use the merchant interface to look at the contents and layout information for a product.
- Publish the store, then click the My Store button and go to a page containing that product to see how ShopSite used the product information to produce the product listing that customers see.
- Change some of the product contents and layout settings, then Publish the store again and look at the product listing.
- View the source of some of the pages to better understand the relationship between the product information and the HTML tags that ShopSite generates.
- Study the custom template specification, the sample product template, and the annotated screen shot of a page produced with the sample product template.
- Use an HTML authoring program or a text editor to create a product template.
- Give the template file a descriptive name, but the file name cannot start with two digits and an underscore, such as "01_xxx" - that format is reserved for the built-in ShopSite templates. The file name does not need an extension.
- If you use an HTML authoring program, enter the ShopSite custom tags as plain text.
- A product template is only used to create part of an HTML page, and so does not contain <HTML> and </HTML> tags. It should only contain the HTML tags and product template tags that you want repeated for each product listing on a page.
- If you are using ShopSite Pro, you can upload the template from the Merchandising > Custom Templates screen. Or you can FTP the template to the correct directory:
- Transfer the files using either binary or ASCII mode transfer, so that the line break characters get converted from the operating system of your computer to the operating system that ShopSite is running on. Do no just copy the files over a network or via floppy.
- To make the template available to a single store, copy it to the /templates/products directory under the store's data directory. Create the directories if they don't already exist.
- To make the template available to all stores in a mall, copy it to the /templates/products directory under the ShopSite CGI directory.
- Test your template:
- Add a product to a test store and assign the template to the product.
- Enter values for all product fields used by the template.
- Assign the product to a page in the store.
- Publish the store and review the Publish Results page for any error messages.
- Go to the store and view the page in a browser. Verify that all the product elements are there and that the layout looks the way you planned.
- View the page using other browsers that customers might use, to make sure the product listing looks okay in all browsers.
- Delete the values in some product fields, then publish the store again and view the page to make sure the product listings still look okay.
- Check the HTML of the page by running it through an HTML validator, such as http://www.htmlhelp.com/tools/validator or http://validator.w3.org.
- View the source of the page. If the ShopSite parser did not recognize a tag, or if a database field was empty, it replaced the ShopSite custom tag with an HTML comment tag containing information about the problem.
- Make any necessary changes and test the template again, then tell the merchant that it is available. The merchant should be able to select the template from the Add a Product screen (advanced editing verion) or the Edit Product Layout screen.
