| NepBay Store Templates Modification
1. Front site template description
2. Products middle and final result templates
3. Cart template
4. Category browse and product search templates
1.Front site template description
A template for the front site represents a standard html code mixed with some
special WSA (Web Site Administration ) tags.
When the page is rendered, these tags are
replaced by the corresponding content.
Let's consider the following example:
<html>
<head>
<meta>
<title><wsa title/></title>
<meta name=description content="<wsa description/>">
<meta name=keywords content="<wsa keywords/>">
...
When the page is rendered, for example the tag
<wsa title/> will be replaced with the page title, so <title><wsa
title/></title> will become: <title>Page title goes here</title>
Please note that presence of none of these tags
is obligatory, so you could combine them as you wish in order to create the
website and layout suiting the best your specific needs. Be aware also that WSA
allows you to create your own tags (from the Custom tags in the back office)
and set php files created by you to be executed and the generated content to be
used in real time to replace the tag with it.
You may find below the list with the tags
coming standard with the setup and default template:
<wsa title/> - Title of the web page
<wsa description/> - Meta description of the web page
<wsa keywords/> - Meta keywords of the web page
<wsa menu/>- Main navigation menu of the website
<wsa languages_menu/> - The languages menu of the
website
<wsa content/> - The main content of a page
<wsa form/> - The custom server side forms for this
page if there are any
<wsa logins/> - The main login form
<wsa product_categories/> - The product categories
<wsa internal_menu/> - The menu on the internal pages
when an user has logged in
<wsa product_search/> - The product search form
You can do changes in the template currently in
use, or add another ones from the Templates category in the back office. In
the NepBay back office you may find the following pages related to the front
site templates management:
Templates -> Select a Template
The page offers the possibility to the administrator to select a template which
will be used for the front site between the currently available templates.
Please note that in order to be able to select a template for a given website,
you need to add first the template (if it doesn't still exist).
Templates -> Add a New Template
This page can be used to add new templates to the website. The administrator
have a choice to choose between the option to add the template using the WYSIWYG
templates editor (which produces simple template) or to directly paste the
template html code.
Templates -> Modify
On this page the administrator can see the available templates and modify a
selected template. In order to select a template for modification, the
administrator should click on the Modify icon and then a new text area having
the full template code will appear.
2.Products middle and final result
template
These templates can be modified from the Templates->Products page
in the back office. By modifying these templates you are able to fully customize
the products middle and final results layout.
A sample products middle result template is
given below:
<!--PRODUCTS_LINE-->
table summary="" border="0">
<tr>
<!--PRODUCT_ITEM-->
<td>
<table width="140" height="142" border="0" cellpadding="0" cellspacing="0"
cols="1" rows="3" class="fpItem">
<tr><td height="27" class="title">
<a href="[PRODUCT_LINK]">
[PRODUCT_NAME]
</a>
</td></tr>
<tr><td align="center"> <a href="[PRODUCT_LINK]"><img src="[PRODUCT_IMAGE]"
border="0" width="70" height="50" class=br></a></td></tr>
<tr><td height="50" align="center">
<span class="price">[PRODUCT_PRICE]</span><BR>
<a href="[ADD_CART_LINK]">Order now</a></td></tr>
</table>
</td>
<!--PRODUCT_ITEM-->
</tr>
</table>
<!--PRODUCTS_LINE-->
The list of the special elements is shown below:
<!--PRODUCTS_LINE--> - it should be used to limit a line in the products
middle result table
<!--PRODUCT_ITEM--> - it should be used to limit a row in a line in the
products middle result table
Let's consider the following example you
would like to make your middle result to be a table having 6 products per page
(2 lines X 3 columns)
| product |
product |
product |
| ... |
... |
... |
In html the first line from this table in it
will look like:
<table>
<tr>
<td> product </td>
<td> product </td>
<td> product </td>
</tr>
.....
</table>
this should be coded in the following way:
<table>
<!--PRODUCTS_LINE-->
<tr>
<!--PRODUCT_ITEM-->
<td> product </td>
<!--PRODUCT_ITEM-->
</tr>
<!--PRODUCTS_LINE-->
.....
</table>
Important! Please note that the number of
columns per row as well as total number of products shown per page should be set
on the Products->Settings page
The other special elements in the products
template are:
[PRODUCT_LINK] link to the product final result page
[PRODUCT_NAME] name of the product
[PRODUCT_PRICE] price of the product
[ADD_CART_LINK] link for adding the product to the
cart
[PRODUCT_IMAGE] the image of the product
Products Final Result Template
A sample products final result is shown below:
<br>
<span class="price_style">[PRODUCT_NAME]</span>
<br><br>
<table summary="" border="0">
<tr>
<td valign=top>
<img src="[PRODUCT_IMAGE]">
<br><br>
</td>
<td valign=top>
[PRODUCT_LONG_DESCRIPTION]
</td>
</tr>
</table>
<br><br>
<span class="price_style">Price:
[PRODUCT_PRICE]</span>
<img src="images/spacer.gif" height="1" width="20">
<a href="[ADD_CART_LINK]"><img src="images/product_cart.gif" width="56"
height="19" border="0"></a>
<br><br><br>
Compared to the template given as example for
the middle result, one can find in it the additional element:
[PRODUCT_LONG_DESCRIPTION] the long description of
the product Keep in mind that on both middle and final results one could also
use:
[PRODUCT_SHORT_DESCRIPTION] the short description of
the product
3.Cart Template
The cart template is used when rendering the content of the cart page. It can be
modified from the back office, the Templates->Cart page.
Sample cart template:
<br><br>
<center>
<table width=95% cellpadding=4
cellspacing=1>
<tr height=28
bgcolor=#efefef>
<td><font color=#313031>Remove</font></td>
<td><font color=#313031>Product</font></td>
<td><font color=#313031>Price</font></td>
<td><font color=#313031>Quantity</font></td>
<td><font color=#313031>Total</font></td>
</tr>
<!--CART_LINE-->
<tr bgcolor=#e7eff7
height=28>
<td>[CART_PRODUCT_REMOVE]</td>
<td>[CART_PRODUCT]</td>
<td>[CART_PRODUCT_PRICE]</td>
<td>[CART_PRODUCT_QUANTITY]</td>
<td>[CART_PRODUCT_TOTAL]</td>
</tr>
<!--CART_LINE-->
</table>
<br>
<table border=0 width=95%>
<tr>
<td align=left>
<span class=price_style>[SUB_TOTAL]</span>
</td>
</tr>
</table>
<br><br>
<table border=0 width=95%>
<tr>
<td width=120 >[CONTINUE_SHOPPING_BUTTON]</td>
<td>[CHECKOUT_BUTTON]</td>
</tr>
</table>
</center>
Where
<!--CART_LINE--> is used to limit a line
in the cart's table showing the added products.
[CART_PRODUCT_REMOVE] checkbox which can used to remove the product
from the cart.
[CART_PRODUCT] the name of the product
[CART_PRODUCT_PRICE] the price of the product
[CART_PRODUCT_QUANTITY] the quantity of the product
[CART_PRODUCT_TOTAL] the total price (product price X quantity)
[SUB_TOTAL] total amount for all the items in the cart
[CONTINUE_SHOPPING_BUTTON] a button allowing the client to continue
shopping returning him to the home page of the store
[CHECKOUT_BUTTON] button which leads to the checkout page
4.Category browse and product search
templates
The category browse template is used when the administrator has selected that
for the product categories a template based menu should be used. It can be
modified from the Templates->Categories Menu page.
The structure of this template is simple, an
example is given below:
<!--ITEM-->
<DIV class="pGroup">
<a href="[CATEGORY_LINK]">[CATEGORY_NAME]</a>
</DIV>
<!--ITEM-->
Where CATEGORY_LINK is the link leading
to the middle result showing the products in this category and CATEGORY_NAME
is the name of the category.
The product search form template can be
modified from the same page and in general could be used to customize the look
and feel of the products search
form.
<table cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td >
[SEARCH_FORM]
</td>
</tr>
</tbody>
</table>
|
