Cscart Design Integration

Shopping cart software
v. 1.3.5
Design integration guide
Copyright 2004-2008 CS-Cart.com
1. Customization
CS-Cart shopping cart software, having an open source code, provides great opportunity to change functionality and look-and-feel to meet your specific business needs. The guide describes only one aspect - changing design. It is aimed to give you basic knowledge about the CS-Cart design system. Also you can find HTML, CSS and Smarty basics there.
1.1 Changing store outlook 1.1.1 Storefront design template scheme 1.1.2 Smarty debug console 1.1.3 Examples of design changes 1.2 HTML basics 1.3 CSS basics 1.4 Smarty basics
1.1 Changing store outlook

CS-Cart uses Smarty template engine (http://smarty.php.net) to separate the application code from presentation. All operational CS-Cart Smarty templates are located in the 'skins' directory (NOT in the 'var/skins_repository' directory, where backup copies of templates are stored) of your CS-Cart installation. There are subdirectories with installed color schemes, i.e. "basic", "default_blue", "aquarelle_red", etc. There are 3 subdirectories for each type of users (customer, administrator and affiliate) and a directory with e-mail templates in it. So templates related to the storefront are located in the 'skins/CUSTOMER_SKIN_NAME/ customer' directory, where CUSTOMER_SKIN_NAME is the name of the skin that is active in the front-end at this moment (this information is available on the Skin selector page in the CS-Cart admin panel). The full version of CS-Cart comes with several skins in 20+ color schemes (you can switch between them on the Skin selector page) and a separate directory is created under 'skins' one for each installed skin, so design changes in a skin do not affect the look and feel of other installed skins. In order to change the store outlook, it is required to edit *.tpl and *.css files. You can use a text editor (Notepad for Windows, EditPlus, etc) or the CS-Cart Template Editor that is included into the software (please refer to the CS-Cart User Manual for more information about this feature) for that. Dreamweaver also can be used as an editor, but it cannot visualize Smarty tags by default (the following Dreamweaver plugin may be helpful - dreamweaver_smartytags.zip). We do not recommend using complex word processors like MS Word for editing templates as they may make some changes automatically.
Last Revised: Jan 3.08
Page
1 of 31
Storefront skin directory: your_shop_directory/skins/CUSTOMER_SKIN_NAME/customer/ Storefront CSS file: your_shop_directory/skins/CUSTOMER_SKIN_NAME/customer/styles.css Storefront basic template file: your_shop_directory/skins/CUSTOMER_SKIN_NAME/customer/index.tpl For more information about customer interface template files see chapter 1.1.1 Storefront design template scheme. E-mail template directory: your_shop_directory/skins/CUSTOMER_SKIN_NAME/mail/ E-mail invoice template: your_shop_directory/skins/CUSTOMER_SKIN_NAME/mail/orders/ invoice.tpl
1.1.1 Storefront design template scheme

For better understanding of the template scheme you should know that every structural element of the graphical interface is defined by its own template file. Different elements of the interface can consist of the other elements, thus the total template scheme becomes tree-like. The basic template file in this structure is index.tpl (this file is the first in the bifurcation), which includes three other main template files: top.tpl header template file, main.tpl template file of the central part of the site, bottom.tpl bottom template file. Here is the index.tpl piece of the code that includes these templates: ... <div class="header">{include file="top.tpl"}</div> {include file="main.tpl"} <div class="footer">{include file="bottom.tpl"}</div> ...
Template files top.tpl, main.tpl and bottom.tpl also include other templates, as it is schematically shown below.
Page
2 of 31
Top.tpl elements
Main.tpl elements
Page
3 of 31
Bottom.tpl elements As it was mentioned before, the specified tempate files are located in the skins/ CUSTOMER_SKIN_NAME/customer/ directory of your CS-Cart installation.
1.1.2 Smarty debug console

You can use the Smarty template debug console while editing the template files. It clearly demonstrates the tree of the processed template files. You can enable the template debug console by selecting the Template debugging console check box (on the "Settings" page in the CS-Cart admin panel). The Smarty template debug console includes the following parameters: - included template and config files (load time in seconds); This section includes the information about the processed template files. Using this section you can better orient yourself in the template structure. Also you see the load time which can be of use for optimization. - assigned template variables; This section displays the Smarty variables assigned by user. - assigned config file variables (outer template scope). This section displays predefined Smarty variables. For more information about Smarty template engine see chapter 1.4 Smarty basics.
Page
4 of 31
1.1.3 Examples of design changes

Lets take a look at some simple examples of changing template files. These tips will help you to change some elements of the storefront. You may need to read the Smarty basics chapter before this one for better understanding of the example changes and for more detailed information about the Smarty template engine.
Example 1.
You need to modify the "Powered by CS-Cart - Shopping Cart Software" text at the bottom of your site pages: 1. Open the bottom.tpl file located in the your_shop_directory/skins/ CUSTOMER_SKIN_NAME/customer directory, where CUSTOMER_SKIN_NAME is an active skin of the customer storefront. 2. Find the following part of the code:
<p align="center" class="bottom-copyright">{$lang.copyright} © {if $smarty.const.TIME|date_format:"%Y"!=$settings.Company.company_start_year}{ $settings.Company.company_start_year}-{/if} {$smarty.const.TIME|date_format:"%Y"} {$settings.Company.company_name}. {$lang.powered_by} <a href="http://www.cs-cart.com" target="_blank" class="underlined"> {$lang.cscart_shopping_cart} </a> </p>
and replace "http://www.cs-cart.com" with your link there. 3. Save the file. 4. Then it is required to change the "cscart_shopping_cart" language variable. You are able to edit the variables under the "Language variables" section on the "Languages" page in your CS-Cart admin panel. Enter "cscart_shopping_cart" (without quotes) into the "Search for pattern" input field and click on the "Search" button next to it. The necessary variable will be displayed and you will be able to edit its value. Then click on the "Update" button at the bottom to save the changes.
Page
5 of 31
Example 2.
You need to change the order of the "Manufacturers" and "Categories" side boxes.
1. Open the main.tpl file located in the your_shop_directory/skins/ CUSTOMER_SKIN_NAME/customer directory, where CUSTOMER_SKIN_NAME is an active skin of your customer storefront. 2. Change the order of the code lines as shown below: before: {include file="side_boxes/categories.tpl"} {include file="addons/manufacturers/sidebox_manufacturers.tpl"} after: {include file="addons/manufacturers/sidebox_manufacturers.tpl"} {include file="side_boxes/categories.tpl"}
3. Save the file.
Page
6 of 31
Example 3.
You need to add a new tab (for example, the "Site map" tab) to the top menu. 1. Open the top_menu.tpl file located in the your_shop_directory/skins/ CUSTOMER_SKIN_NAME/customer directory of your CS-Cart installation, where CUSTOMER_SKIN_NAME is an active skin of your customer storefront. 2. Add the following part of the code there: {if $target == 'sitemap'} {assign var='but_active' value='-active'} {else} {assign var='but_active' value=''} {/if} <div class="top-menu{$but_active}-left-bg"> <div class="top-menu{$but_active}-right-bg"> <div class="top-menu{$but_active}-bg" onclick="fn_redirect('{$index_script}?{$target_name}=sitemap');"> <a href="{$index_script}?{$target_name}=sitemap" class="top-menu-title">TAB_NAME</a> </div> </div> </div>
ABOVE for example this line of the code:
{if $target == 'profiles' || $target == 'auth'} 3. Replace in the inserted code: - {$index_script}?{$target_name}=sitemap with your link (twice in the code); - TAB_NAME with your tab name. 4. Save the file. NOTE: This example is for the basic skin. The code for the other skins is different.
Page
7 of 31
Example 4.
You need to change the default style of links on the site (links must have the orange color (#f27a00) instead of blue (#014ead)). 1. Open the following file in the template editor: your_shop_directory/skins/CUSTOMER_SKIN_NAME/customer/style.css 2. Change the value of the color parameter by changing the following part of the code: styles.css before: a:link, a:visited, a:active { color: #014ead; text-decoration: underline; } a:hover { color: #014ead; text-decoration: none; }
styles.css after: a:link, a:visited, a:active { color: #f27a00; text-decoration: underline; } a:hover { color: #f27a00; text-decoration: none; } Please note that the change will affect the outlook of that links that have no own style specified.
Page
8 of 31
Example 5.
You need to change the icon in the Categories box header as its shown in the picture below (in case of using the CS-Cart default skin (blue scheme)).
1. Copy the your_icon.gif file to the following directory: your_shop_directory/skins/default_blue/customer/images 2. Open the following file in the template editor: your_shop_directory/skins/default_blue/customer/side_boxes/ categories.tpl 3. Change the icon name in the following part of the code: categories.tpl before:
..... {include file="common_templates/sidebox.tpl" title=$lang.categories content= $smarty.capture.sidebox icon="sidebox_icon_catalog.gif" sidebox_body_class="sidebox-body-white"}
categories.tpl after:
{include file="common_templates/sidebox.tpl" title=$lang.categories content= $smarty.capture.sidebox icon="your_icon.gif" sidebox_body_class="sideboxbody-white"}
Page
9 of 31
Example 6.
You need to hide breadcrumbs in the customer storefront.
1. Open the following file in the template editor: your_shop_directory/skins/CUSTOMER_SKIN_NAME/customer/top.tpl 2. Comment out the following part of the code: before: {include file="common_templates/breadcrumbs.tpl" hide_home="Y" text="Y" bc_class="breadcrumbs" arrow_class="breadcrumbs-arrow" bc_link="breadcrumbslink" bc_image="breadcrumbs_arrow.gif"}
after: {* include file="common_templates/breadcrumbs.tpl" hide_home="Y" text="Y" bc_class="breadcrumbs" arrow_class="breadcrumbs-arrow" bc_link="breadcrumbslink" bc_image="breadcrumbs_arrow.gif" *}
Page
10 of 31
1.2 HTML basics

HTML (Hypertext Markup Language) is a markup language for web pages. In general HTML is a set of instructions for a browser on how to display a document. A single instruction is called tag. HTML tag consists of the name and attributes. Each tag is enclosed in angle brackets (< and >). For example, <head> or <title>. Tag attributes define various properties for the tag. For example, the <img> tag takes a src attribute to provide the location of the image and an alt attribute to give the alternate text for those not loading images: <img src="cscart_logo.gif" alt="Copyright 2004-2008 CS-Cart. com">
An element has three parts: a start tag, content, and an end tag. All end tags are preceded with a forward slash (/). For example, the title element has a start tag, <title>, and an end tag, </title>. The start and end tags surround the content of the title element: <title>CS-Cart Shopping Cart Software</title>
Any HTML document starts with <html> and ends with </html>. Lets consider the structure of an HTML document:
<html> <head> <title> CS-Cart Shopping Cart Software</title> <meta>Efficient solution for your e-business</meta> </head> <body> </body> </html>
The html element contains two parts: head and body. The head contains information about the HTML document and it is not displayed in a browser. It can contain the following elements: <title></title> - element gives the document title (displaying as a browser window title);
Page
11 of 31
<meta></meta> - element provides metadata such as a document's keywords, description, and author. This information is used by search engines. <link> - element defines document relationships. Any number of <link> elements may be contained in the head of a document. For example, <link rel=stylesheet type=text/css> href=/skins/CUSTOMER_SKIN_NAME/customer/styles.css
In this case document styles will be loaded from the external style sheet file styles.css. <style> - the style element embeds a style sheet in the document. Any number of <style> elements may be contained in the head of a document. The body contains the document content, which will be displayed in browser. It can contain the following elements: <h1></h1> - heading of the document (you can change heading font size from h1 (the biggest) to h6 (the smallest)). <em></em> - tag emphasizes one or more words. <i></i> - tag suggests that text be rendered as italic text. <b></b> - tag suggests that text be rendered as bold text. <u></u> - tag suggests that text be rendered as underlined text. <p> - element defines a paragraph. The closing tag for p is optional. <br> - element forces a break in the current line of a text. The br element never needs an end tag. In general, elements that don't take end tags are known as empty elements. <table></table> - this element defines a table for multi-dimensional data arranged in rows and columns. For example, <table border=1> <tr> <td>Header 1</td> <td>Header 2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> </table>
Page
12 of 31
The table will be displayed in browser in the following way:
Header 1 1
<tr></tr> - the tr element defines a table row.
Header 2 2
<td></td> - the td element defines a data cell in a table. The border attribute specifies the border width. Among other attributes of the table element are cellpadding and cellspacing. The cellpadding attribute increases the amount of padding for all cells. And the cellspacing attribute sets the space between the cells. For instance: <table border="1" cellpadding="10" cellspacing="10"> Using the width attribute you can set the width of the table. The value is either the width in pixels or a percentage value representing the percentage of the space available between the left and right margins. For instance: <table border="1" cellpadding="10" width="80%"> You can change alignment using the align attribute, which can be added to each cell or to the row (tr element). It is used with the values "left", "center" or "right". See the example below. The valign attribute plays a similar role for the vertical alignment of cell content. It is used with the values "top", "middle" or "bottom", and can be added to each cell or row.
<table border=1> <tr align=center> <td>Header 1</td> <td>Header 2</td> </tr> <tr align=center> <td>1</td> <td>2</td> </tr> </table>
Page
13 of 31
<ul></ul> - tag defines an unordered list. For example, <ul> <li>First list item <li>Second list item <li>Third list item </ul> As a result, the browser will display the following list: First list item Second list item Third list item <li> - the element defines the actual items of the list. <ol></ol> - tag defines an ordered list. For example, <ol> <li>First list item <li>Second list item <li>Third list item </ol> As a result, the browser will display the following list: 1. First list item 2. Second list item 3. Third list item <a></a> - tag denotes an anchor - a hypertext link or the destination of a link. The href attribute specifies a hypertext link to another resource, such as an HTML document or a file. For example, <a href=http:/www.cs-cart.com>Click here to contact us</a> <a href=http://cs-cart.com/trial.html?mode=get&version=4&format=zip>Click here to download file</a>
Page
14 of 31
Comments in HTML have a complicated syntax that can be simplified by following this rule: Begin a comment with "", and do not use "--" within the comment. For example, 
For more information on HTML you can use the following references: http://www.w3c.org W3C HTML website. http://www.w3.org/TR/html4/html40.zip - HTML 4.0 Reference. http://validator.w3.org - HTML Validation Service.
Page
15 of 31
1.3 CSS basics

The most important term in CSS (Cascading Style Sheets) is a style. A style is a set of formatting and design rules that tell a browser how to present elements of the HTML document. If you create document using simple HTML language you should type the same attributes (font, color, size, etc) for the large amount of the same tags. So if you decide to change the font size of a text you have to retype the same attributes many times. Using of CSS allows you to resolve this problem more efficiently. You will need to define a set of attributes as a style one time only. Afterwards just specify this style for the appropriate elements. Furthermore, you can define styles for your HTML document in external file, so styles could be applied for another HTML documents. Thus if you need to change font size in several HTML documents, you will have to change this attribute in one place only. In general the CSS basic syntax is looking in the following way:
selector {attribute: value; attribute: value; attribute: value; attribute: value; }
The selector is simply the element that is linked to a particular style. For example, the selector in
p {background: blue; margin-top: 6px; margin-bottom: 6px;}
is p (paragraph element). A selector could have different classes, allowing the same element to have different styles. For example,
p.note {background: blue;} p.warning {background: red;} Classes may also be declared without an associated element:
Page
16 of 31
.note
{background: blue;}
In this case, the note class may be used with any element. For example, <a href="http:/cs-cart.com" class="note">Click here to contact us</a> There are various ways of linking style rules to HTML documents: Inlining style; Linking to an external style sheet; Embedding a style sheet; Importing a style sheet. CS-Cart Shopping Cart software uses the way of linking to an external style sheet. An external style sheet is linked to an HTML document through HTML link element. External style sheet is a *.css file which contains style definitions. For example, in this case styles will be loaded from styles.css file:
<link rel=stylesheet type=text/css>
href=/skins/CUSTOMER_SKIN_NAME/customer/styles.css
If you decide to change styles in CS-Cart Shopping Cart software by yourself, you should edit the following CSS files: - administrator area styles: your_shop_directory/skins/ADMIN_SKIN_NAME/admin/styles.css - customer front-end styles: your_shop_directory/skins/CUSTOMER_SKIN_NAME/customer/styles.css For more information and extending your knowledge about CSS you can use the following references: http://www.w3.org/Style/css - The W3C's CSS home page http://www.w3.org/TR/CSS21/css2.zip - CSS 2.1 Specification http://style.webreview.com Web Review Style Sheets Reference Guide
Page
17 of 31
1.4 Smarty basics

Smarty is a template engine for PHP. It allows to separate application logic from its presentation. It is right for the situation when the programmer and the template designer of the project are not the same person. Smarty has many key features; one of them is fast templates compiling. Smarty compiles *.tpl template files and then substitute variables and functions for specific values into the HTML document. So it provides more functionality to standard HTML. For example: before compiling <html> <head> <title>{$title_variable}</title> </head> <body> <h1>{$welcome_variable}<h1> </body> </html>
after compiling <html> <head> <title>This is the example page</title> </head> <body> <h1>Welcome<h1> </body> </html>
Lets take a look at Smarty basic syntax. Tags All Smarty template tags are enclosed in delimiters. By default, these delimiters are braces { and }.
Comments
Page
18 of 31
Template comments are surrounded by asterisks and enclosed in braces as shown in the example below: {* An example comment *}
Comments are used for making internal notes in the templates. Smarty does not support nested comments. Functions Each Smarty tag either prints a variable or invokes some sort of function. Functions are processed and displayed by enclosing the function and its attributes in the delimiters:
{funcname attribute1="value1" attribute2="value2"}.
For example:
{include file="top.tpl"}
Both built-in functions and custom functions have the same syntax in the templates. Built-in functions are the inner workings of Smarty, such as section and strip. They cannot be modified. Custom functions are additional functions implemented via plug-ins. They can be modified to your liking, or you can add new ones. Variables Smarty has several different types of variables. The type of the variable depends on what symbol it is prefixed (or enclosed in). Variables in Smarty can be either displayed directly or used as arguments for function attributes and modifiers, inside conditional expressions, etc. Variables that are assigned from PHP are referenced by preceding them with a dollar sign $. Variables assigned from within the template with the assign function are also displayed this way. For example, {$Name}
Page
19 of 31
You can also specify the associative array that was assigned from PHP:
{$Contacts[row].Phone}
The reserved {$smarty} variable can be used to access several special template variables. For example {$smarty.config}, {$smarty.section}, {$smarty.template} etc.
Associative arrays You can also reference associative array variables that are assigned from PHP by specifying the key after the . (period) symbol. For example: index.php: $smarty = new Smarty; $smarty->assign(Contacts, array(fax => 555-222-9876, email => zaphod@slartibartfast.com, phone => array(home => 555-444-3333, cell => 555-111-1234))); $smarty->display(index.tpl);
index.tpl:
{$Contacts.fax}<br> {$Contacts.email}<br> {* you can print arrays of arrays as well *} {$Contacts.phone.home}<br> {$Contacts.phone.cell}<br>
Page
20 of 31
OUTPUT: 555-222-9876<br> zaphod@slartibartfast.com<br> 555-444-3333<br> 555-111-1234<br>
Variable Modifiers Variable modifiers can be applied to variables, custom functions or strings. To apply a modifier, specify the value followed by | (pipe) and the modifier name. A modifier may accept additional parameters that affect its behavior. These parameters follow the modifier name and are separated by : (colon). For example, {* Uppercase the title *} <h2> {$title|upper} </h2> {* Truncate the topic to 40 characters use ... at the end *} Topic: {$topic|truncate:40:"..."} {* format a literal string *} {"now"|date_format:"%Y/%m/%d"} {* apply modifier to a custom function *} {mailto|upper address="me@domain.dom"}
Built-in functions
Capture Capture is used to collect the output of the template into a variable instead of displaying it. Any content between {capture name="foo"} and {/capture} is collected into the variable specified by the name attribute. The captured content can be used in the template from the special variable $smarty.capture.foo where foo is the value passed in the name attribute. If you do not supply a name attribute, then
Page
21 of 31
"default" will be used. All {capture} commands must be paired with {/capture}. You can nest capture commands.
{* we dont want to print a table row unless content is displayed *} {capture name=banner} {include file="get_banner.tpl"} {/capture} {if $smarty.capture.banner ne ""} <tr> <td> {$smarty.capture.banner} </td> </tr> {/if}
Foreach Foreach is used to loop over a single associative array. Foreach tags must be paired with /foreach tags. Required parameters are from and item. The name of the foreach loop can be anything you like, made up of letters, numbers and underscores. Foreach loops can be nested, and the nested foreach names must be unique from each other. The from variable (usually an array of values) determines the number of times foreach will loop.
{* this example will print out all the values of the $custid array *} {foreach from=$custid item=curr_id} id: {$curr_id}<br> {/foreach}
OUTPUT id: 1000<br> id: 1001<br> id: 1002<br>
Include
Page
22 of 31
Include tags are used for including other templates in the current template. Any variables available in the current template are also available within the included template. The include tag must have the attribute "file", which contains the template resource path.
{include file="side_boxes/categories.tpl"} {include file="addons/manufacturers/sidebox_manufacturers.tpl"} {include file="side_boxes/site_info.tpl"}
If, elseif, else Every if must be paired with an /if. Else and elseif are also permitted. "eq", "ne","neq", "gt", "lt", "lte", "le", "gte" "ge","is even","is odd", "is not even","is not odd","not","mod","div by","even by","odd by","==","!=",">", "<","<=",">=" are all valid conditional qualifiers, and must be separated from surrounding elements by spaces. {if $content == "news"} {include file="addons/news_and_emails/news.tpl"} {/if}
For more information and extending your knowledge about Smarty you can use the following references: http://smarty.php.net http://smarty.php.net/download-docs.php - Smarty manuals.
Page
23 of 31
FAQ Store design FAQ
Id like to make some design changes in the customer storefront. What templates do I need to edit? The storefront templates are located in the skins/CUSTOMER_SKIN_NAME/ customer directory, where CUSTOMER_SKIN_NAME is the name of the skin that is active in the front-end at this moment. Starting with the index.tpl template you can easily look through the whole template structure. You are able to modify the color scheme by editing the styles.css file. To change the top of the pages edit the top.tpl template. Edit the top_menu.tpl template to modify top menu. The look and feel of side boxes is stored in the common_templates/sidebox.tpl template. The common_templates/mainbox.tpl template stores the look and feel of main content boxes (displayed in the center), etc. If you want to replace the CS-Cart logo with your own, change the welcome text on the home page and add Featured products, this can be done in the CS-Cart admin panel.
How to change the logo in a gift certificate? In order to change the look and feel of the gift certificate you should edit the "default.tpl" file located in the skins/CUSTOMER_SKIN_NAME/mail/addons/ gift_certificates/templates directory. In order to replace CS-Cart logo with your own one, you should put your logo with the "your_logo.gif" name to the skins/CUSTOMER_SKIN_NAME/mail/images directory and replace the following part of the code in the "default.tpl" file located in the skins/CUSTOMER_SKIN_NAME/mail/addons/gift_certificates/templates directory:
<td width="370"><img src="{$images_dir}/gift_cert_logo.gif" border="0" width="174" height="53" alt="{$settings.Company.company_name}" style="margin: 12px 0px 8px 13px;" /></td> with this one: <td width="370"><img src="{$images_dir}/your_logo.gif" border="0" width="174" height="53" alt="{$settings.Company.company_name}" style="margin: 12px 0px 8px 13px;" /></td>
Page
25 of 31
In the code above you should edit the values of the "width" and "height" parameters according to your logo sizes. Save the file.
How do I change the font color & size of the manufacturer names in the "Manufacturers" select box? In order to do it you should replace the following part of the code in the "sidebox_manufacturers.tpl" file located in the skins/CUSTOMER_SKIN_NAME/ customer/addons/manufacturers directory: <select name="manufacturer_id" style="width:140px; margin: 0px; padding: 1px;" onchange="if (this.value) fn_redirect(this.value);"> <option value="">- {$lang.select_manufacturer} -</option> {foreach from=$manufacturers item=manufacturer} <option value="{$index_script}?{$target_name}=manufacturers&manufacturer_id={ $manufacturer.manufacturer_id}" {if $smarty.get.manufacturer_id == $manufacturer.manufacturer_id}selected="selected"{/ if}>{$manufacturer.manufacturer}</option> {/foreach} </select>
with this one:
Page
26 of 31
<select name="manufacturer_id" style="width:140px; font-size: 15px; color: #6e9db7; margin: 0px; padding: 1px;" onchange="if (this.value) fn_redirect(this.value);"> <option value="">- {$lang.select_manufacturer} -</option> {foreach from=$manufacturers item=manufacturer} <option value="{$index_script}?{$target_name}=manufacturers&manufacturer_id={ $manufacturer.manufacturer_id}" {if $smarty.get.manufacturer_id == $manufacturer.manufacturer_id}selected="selected"{/ if}>{$manufacturer.manufacturer}</option> {/foreach} </select>
then replace "15" and "#6e9db7" with the desired values. Save the file.
I do not want left and right side boxes to be displayed on the login and profile pages. How can I do this? In order to make this modification you should edit the "main.tpl" file located in the skins/CUSTOMER_SKIN_NAME/customer directory of your CS-Cart installation and replace there the following line of the code:
{if !$hide_sideboxes}
with this one:
{if !$hide_sideboxes && $content !="login_form" && $content !="profiles"}
Save the file.
Page
27 of 31
How can I remove the 'Submit email address to receive free updates and promotions' option in the 'SITE NEWS' side box? In order to remove the 'Submit email address to receive free updates and promotions' option in the 'SITE NEWS' side box you should comment out the following part of the code in the "news.tpl" file located in the skins/ CUSTOMER_SKIN_NAME/customer/addons/news_and_emails/side_boxes directory:
<div class="updates-wrapper"> <form action="{$index_script}" method="get" name="subscribe_form"> <input type="hidden" name="{$target_name}" value="news" /> <input type="hidden" name="{$mode_name}" value="add_subscriber" /> <input type="hidden" name="redirect_url" value="{$redirect_url|default:$current_url|escape:html}" /> <p>{$lang.text_signup_for_updates}:</p> <input type="text" name="subscribe_email" id="subscr_email" size="10" value="{$lang.enter_email}" class="sidebox-input-text valign" onfocus="this.value='';" /> <img class="valign hand" src="{$images_dir}/ search_go.gif" width="17" height="17" border="0" alt="{$lang.go}" title="{$lang.go}" onclick="subscr_form.submit();" /> </form> <script type="text/javascript" language="javascript 1.2"> //<![CDATA[ var subscr_form = new cscart_form('subscribe_form', null, null, null, true); subscr_form.set_required_fields('subscr_email'); subscr_form.set_extra('subscr_email', 'E'); //]]> </script> </div> In order to comment out the code surround it by asterisks and enclose in braces as shown in the example below: {* A comment *} Save the file.
Page
28 of 31
How do I change the color of the top menu? In order to do it it is required to edit the following part of the code in the skins/ CUSTOMER_SKIN_NAME/customer/styles.css file:
.top-menu-tabs { clear: both; height: 27px; padding-top: 31px; } .top-menu-title:link, .top-menu-title:visited, .top-menu-title:active { color: #0e0e0e; font: bold 12px tahoma, verdana, arial, sans-serif; display: block; white-space: nowrap; } .top-menu-left-bg, .top-menu-active-left-bg { background: #def3ff url(images/top_menu_left_bg.gif) no-repeat left; height: 27px; float: right; margin-left: 1px; cursor: pointer; } .top-menu-active-left-bg { left; } .top-menu-right-bg, .top-menu-active-right-bg { background: #def3ff url(images/top_menu_right_bg.gif) no-repeat right; height: 27px; float: left; margin-left: 1px; cursor: pointer; } ... background: #bbe6fe url(images/top_menu_active_left_bg.gif) no-repeat
Page
29 of 31
... .top-menu-active-right-bg { background: #bbe6fe url(images/top_menu_active_right_bg.gif) no-repeat right; } .top-menu-bg, .top-menu-active-bg { background: #def3ff url(images/top_menu_bg.gif) repeat-x; margin-right: 1px; height: 22px; padding: 5px 20px 0px 20px; cursor: pointer; float: left; } .top-menu-active-bg { background: #bbe6fe url(images/top_menu_active_bg.gif) repeat-x; } Change the color codes to the desired ones and edit the image files (highlighted in bold) in a graphics editor. The specified images are in the skins/ CUSTOMER_SKIN_NAME/customer/images directory of the CS-Cart installation.
I want to change the breadcrumb "Home" link to go to a different homepage. In order to change the "Home" link please modify the "index.php" file located in the root CS-Cart directory and replace there the following line of the code:
fn_add_breadcrumb(fn_get_lang_var('home'), $index_script); with this one: fn_add_breadcrumb(fn_get_lang_var('home'),"http://www.domain.com"); where replace "http://www.domain.com" with your link. Save the file and check the result.
Page
30 of 31
How to add flash banner to the home page? You can enter your banner code on the "Site layout" page in your administrator area. The code will look like this:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http:/ /download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=7,0,0,0" width="FLASH_WIDTH" height="FLASH_HEIGHT"> <param name="movie" value="FLASH_PATH" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowScriptAccess" value="sameDomain" /> <embed src="FLASH_PATH" quality="high" wmode="transparent" width="FLASH_WIDTH" height="FLASH_HEIGHT" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>
where FLASH_PATH is the URL of the flash animation file, FLASH_WIDTH and FLASH_HEIGHT are the flash sizes in pixels (each parameter is defined twice in the code).
We offer a full array of web design services that include Custom Interface and Logo Design, Banner Creation and Design Integration. The existing CS-Cart license owners can get quote for our design services by sending us a request for quote via Customer Help Desk. Potential customers please submit your request on this page.
Page
31 of 31

Cscart Design Integration

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Cscart Design Integration

Загружено:

Авторское право:

Доступные форматы

Shopping cart software

Design integration guide

Copyright 2004-2008 CS-Cart.com

Copyright 2004-2008 CS-Cart.com

1.1 Changing store outlook

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

1.1.1 Storefront design template scheme

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

1.1.2 Smarty debug console

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

1.1.3 Examples of design changes

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

3. Save the file.

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

ABOVE for example this line of the code:

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

..... {include file="common_templates/sidebox.tpl" title=$lang.categories content= $smarty.capture.sidebox icon="sidebox_icon_catalog.gif" sidebox_body_class="sidebox-body-white"}

{include file="common_templates/sidebox.tpl" title=$lang.categories content= $smarty.capture.sidebox icon="your_icon.gif" sidebox_body_class="sideboxbody-white"}

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

after: {* include file="common_templates/breadcrumbs.tpl" hide_home="Y" text="Y" bc_class="breadcrumbs" arrow_class="breadcrumbs-arrow" bc_link="breadcrumbslink" bc_image="breadcrumbs_arrow.gif" *}

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

1.2 HTML basics

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

The table will be displayed in browser in the following way:

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

1.3 CSS basics

selector {attribute: value; attribute: value; attribute: value; attribute: value; }

p {background: blue; margin-top: 6px; margin-bottom: 6px;}

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

<link rel=stylesheet type=text/css>

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

1.4 Smarty basics

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

{funcname attribute1="value1" attribute2="value2"}.

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

Last Revised: Jan 3.08

Copyright 2004-2008 CS-Cart.com

OUTPUT: 555-222-9876<br> zaphod@slartibartfast.com<br> 555-444-3333<br> 555-111-1234<br>

Last Revised: Jan 3.08