Boss Cart blog

BossCart skin Tutorial v.1.05 (part 1)
The BossCart template mechanism is a standard tag-based mechanism for providing different looks for your online shop. The structure of the skin folder:

+ [.]

+ [..]

+ css [folder]

+ img [folder]

+ js [folder]

+ templates [folder]

- skin [file]

- skin.jpg [file]

skin.jpg

This is a skin preview picture, width: 200px, height: 100px;
It is used in the admin settings area, when changing skins in the skin selection dropdown.

skin

This is a standard text file with no extension, containing the name of the skin. The name of the skin must be the same with the folder in which the skin is located. This string is displayed inside the admin skin selection dropdown box. It is very important that the name of the folder is the same with the contents of this file. The application builds paths to other skin files using this.

css

This is the folder where your skin’s css files are expected to be. When the server receives a request for a css file, it looks in this folder only. Common css files for skins are “skin.css” and “layout.css”, which are included by default into any generated page. To reference a css in this folder, you will have to make something like this:

img

This folder contains all the images used by your skin. Don’t place the images in other folders. Yhey will only be available if they reside into this folder. To place an image from within a < img > tag, the src should point to something like this: xsrc=”{{PATH}}assets/theme_name/file_name.extension” . For example if we have a skin called “myskin”, and a file called “myphoto.jpg”, the way to place this picture is  {{PATH}}assets/myskin/myphoto.jpg . The {{PATH}} string is a template tage which is replaced by the app with the actual online path to your store.

You will see everywhere this {{PATH}}.

js

This folder contains all the javascript used by your skin. Don’t place the images in other folders. Yhey will only be available if they reside into this folder. To reference a javascript file which is located in this folder, you will have to do something like this:

tags are replaced with the content generated by each module in the application. Note that there are modules which can be inactive at a certain moment. For example, if the user is browsing to a view his cart’s content, the cart module will be active, other modules might be inactive. These tags are replaced with the default content of the coresponding modules. This tag is replaced with a small summary of the shopping cart. It is visible on every page. It’s content is pulled out from the module.cart.small.tpl template file.

templates

This folder is the most important in making a skin for BossCart. There are a lot of tpl files. I will explain what is inside these files and how to modify the content. The files list shoud have this structure:

+ [.]
+ [..]
- module.page.tpl
- module.pagination.tpl
- module.auth.login
- module.auth.usebox
-module.browse.brand.tpl
- module.browse.category.tpl
- module.cart.details.tpl
- module.cart.item.tpl
- module.cart.small.tpl
- module.checkout.link.tpl
- module.checkout.step.1.tpl
- module.checkout.step.2.tpl
- module.checkout.step.3.tpl
- module.checkout.step.4.tpl
- module.navigation.container.tpl
- module.navigation.item.tpl
- module.navigation.productlist.tpl
- module.password.form.tpl
-module.password.reset.tpl
- module.product.inner.tpl
- module.product.option.tpl
- module.product.single.tpl
- module.product.small.tpl
- module.register.tpl
- module.search.box.tpl
- module.user.data.tpl

Files that might be in the templates folder:

- homepage_bottom.tpl
- module.gifts.tpl
- module.newproducts.tpl
- module.specialoffer.tpl

A tepmlate file is a regular HTML file, with some extra tags in it, that are replaced by dynamic generated content. For example when you browse to a product, you will see the product’s pictures, description and other details. If you browse to another product, you will see the same structure for it’s information as the first product. That is because a template file is used. And the layout in that template file is the same for every product. Only data about that product changes. The rest is the same.
There are 2 kind of template tags:

• un-quoted format: {{SOME_TEXT}}
• quoted format:

Let’s take each template file and explain what is inside.

module.page.tpl

This is the container for the whole shop. Put in this file only HTML that shows up on every page. This is the only file where you will find the and tags.

click here to see the table
[will be completetd]