LoginLogin  Blog About
Search:

Support » Knowledge Base » Shop-Script » Design & templates setup »

Custom design setup for different storefront pages

The built-in design editor allow use of Smarty conditions for individual design setup on different storefront pages. For example, you may need to display an advertising banner only on product details pages or useful tips for customers anywhere except for the home page. To use Smarty conditions, click the "Advanced mode (HTML)" link in the design editor window.

Online storefront in Shop-Script consists of the following types of pages (address parameters of each page are specified in the parentheses):

  • product details page (productID=...);
  • products category page (categoryID=...);
  • home page (ukey=home or missing ukey value);
  • customer registration page (ukey=register);
  • customer login page (ukey=auth);
  • price list (ukey=pricelist);
  • feedback page (ukey=feedback);
  • link exchange page (ukey=linkexchange);
  • news list (ukey=news);
  • order status verification page (ukey=order_status);
  • shopping cart (ukey=cart);
  • info pages (ukey=auxpage_...).

To determine the current page type, your condition must check the value of its address parameter in the $smarty.get array as shown below:

{if $smarty.get.ukey eq 'pricelist'}
text or HTML code
{else}
alternative text or HTML code — the optional
part is colored gray
{/if}

This code must be added to the desired part of the advanced design editor window.

How does this example work?

  1. The text or HTML code specified in the 2nd line will be displayed on the page where ukey is equal to pricelist (i.e. on the price list page).
  2. To display alternative text or HTML code in the same place on all other pages, leave the 3rd and 4th lines (colored gray) in the condition. Otherwise remove those lines.

To create an opposite condition, i.e. "if the current page is NOT the price list page", use the ne operator instead of eq; e.g.:

{if $smarty.get.ukey ne 'pricelist'}
text or HTML code
{else}
alternative text or HTML code — the optional part is colored gray
{/if}

How does this example work?

  1. The text or HTML code specified in the 2nd line will be displayed on all pages where ukey is NOT equal to pricelist (i.e. all pages except for the price list page).
  2. To display alternative text or HTML code in the same place on all other pages (i.e. on the price list page!), leave the 3rd and 4th lines (colored gray) in the condition. Otherwise remove those lines.

Tip: In the 2nd line of the condition you can add either your custom text or HTML code or a part of the original code already contained in the editor window. This may be useful to set up different appearance for standard page blocks such as main menu, news titles list, language selection block, etc.

Tip: Adding custom text to the storefront with translation into other languages is described in this article.

Below are provided several examples which will help you to write your own Smarty conditions.

Displaying HTML code or text on all product details pages

{if $smarty.get.productID ne ''}

Note: This condition is understood as "if the productID value is not empty, i.e. the current page is some product details page with an arbitrary productID value".

Displaying HTML code or text on the product details page where the productID value is equal to "123"

{if $smarty.get.productID eq 123}

Displaying HTML code or text on product category pages

{if $smarty.get.categoryID ne ''}

Displaying HTML code or text on the customer registration or login page

{if $smarty.get.ukey eq 'register' or $smarty.get.ukey eq 'auth'}

Note: Several conditions can be combined using the or operator, which means that either one or both of the specified conditions must be satisfied.

Displaying HTML code or text on an info page where the Page ID value is equal to "auxpage_about"

{if $smarty.get.ukey eq 'auxpage_about'}

Tip: More details about the use of Smarty syntax are available in the online reference at http://www.smarty.net/manual/en/.