A step-by-step guide to designing, coding and implementing templates, skin and theme for Boss Cart Premium
1. Create the new template HTML version, separate the CSS file from the main HTML file and name the css file originalcss.css
2. Install boss cart premium, upload your logo, set the site slogan etc.
3. All the templates are stored on the /templates/TemplateName.css/ folder
4. To apply the new template use one of the existing templates, for example 4.css and when you are ready, rename this to YourTemplateName.css (ex: 8.css)
5. All the files that we will refer to on the section below are located inside the folder /templates/4.css
6. All the boss cart page templates are controlled by the originalcss.css file. The first section of the file controls the basic look of the template: div, id, img, p, span, ul, li, a, h1, h2, h3, h4, h5, input .. body … a, a:links etc.
7. All the page widths are controlled by the <div id=”outer”> if you want to change the middle section width or position you need to edit this on the css file:
#outer{
width:926px;
margin:auto;
}
8. The top navigation “ Home | Privacy Policy | Sitemap ” is controlled by the <div id=”topHeader”>. On the css file it is the section below:
#topHeader{
background:url(’images/divider.gif’) repeat-x bottom left;
padding:5px 0px 3px 0px;
/* font-size:10px;*/
text-align:right;
}
#topHeader a:link, #topHeader a:visited{
color:#000000;
padding:0px 5px 0px 5px;
}
9. Next is the top logo section and the right part of this is where you can add a banner. This section is controlled by the <div id=”header”> including the <div id=”logo”> and <div id=”sologon”> section:
<div id=”header”>
<div id=”logo”><a href=”/”><img src=”/images/logo/YOURLOGO.jpg” alt=” ” width=” ” height=” ” border=”0″ /></a></div>
<div id=”sologon”><p>SLOGAN TEXT</p></div>
<div class=”clear”></div>
</div>
10. Now you are ready to start to applying your first template section
11. Edit the file originalcss and set your template main font, set the basic links look for visited, hover etc.
12. Set your page width and the main section position, changing the <div id=”outer”> properties on the originalcss.css file.
13. Now edit the file frame.php and set your preferences for the top navigation “ Home | Privacy Policy | Sitemap ” which are controlled by the <div id=”topHeader”>
14. You will see that after the “topHeader” section there is a file included on the frame.php :
<?php include_once(”header.php”); ?>
15. Edit the file header.php and set your preferences for the <div id=”header”> section including the <div id=”logo”> and <div id=”sologon”> sections.
<div id=”header”>
<div id=”logo”><a href=”<?php echo $bosscartConfig_live_site ?>/”>
<img src=”<?php $_SERVER['DOCUMENT_ROOT'];
echo $folderpath; ?>/images/logo/<?php echo $header_logo; ?>” alt=”<?php echo $body_title; ?>” border=”0″ /></a></div>
<div id=”sologon”><?php echo stripslashes($header_title) ?></div>
<div class=”clear”></div>
</div>
16. Now set your page footer. Return to the file frame.php and scroll down to the end of the file. You will see another file included with the PHP include method:
<?php include_once(”footer.php”) ?>
17. Edit the file footer.php and set you preferences for the footer section. The footer section is controlled by <div id=”footer”> and the link styles. You can edit all of this on the css file originalcss.css
<div id=”footer”>
<a href=”<?php echo $bosscartConfig_live_site ?>/”><?php echo $langVarsGlobal['Home'] ?></a>|
<?php
$allcontent= $objContent->getallvalues(”static_content “,”*”,”`status`=’1′”);
while ($rscontent=mysql_fetch_array($allcontent)) {
?>
<a href=”<?php echo $bosscartConfig_live_site ?>/statcontent/<?php echo $rscontent['content_url'] ?>/” ><?php echo stripslashes($rscontent['content_name'])?></a>|
<?php } ?>
<a href=”<?php echo $bosscartConfig_live_site ?>/productsitemap/”><?php echo $langVarsGlobal['Sitemap'] ?></a>
<?php ?>
<br />
Powered by<a href=”http://www.bosscart.com/premium-shopping-cart/” target=”_blank”>Boss Cart Premium</a>Version 1.5.4 Copyright ©2006 – 2008, Velnet UK Ltd
</div>
18. At this stage you now have your new template base look including the styles for the fonts, links, forms etc, and also you have integrated your new template full header and footer section.
19. Based on the above described working method, next we will set the new look of the various pages inside sections.
I will describe on the sections below where you need to edit to control each section of the template.
20. frame.php controls the sections below:
- main top navigation links under the logo section <div id=”menu”> and <ul class=”glossymenu”>
- the top search form with form ID “search-form”
- this file also includes two other files which control the left and right sections of the template: leftbar.php and rightcontent.php
- the home page “welcome” section is also included on this file with the php include method: include_once(’firstpage.php’);
21. leftbar.php (<div id=”container-left”>) controls the sections below:
- Categories, with <div id=”masterdiv”>
- Manufacturer <div class=”quicklinks”>
- Quick Links <div class=”quicklinks”>
- Gift <div class=”quicklinks”>
PS. In some cases, to make changes on the Categories navigation menu, you will need to edit the file /includes/classes/cls_category.php
22. rightcontent.php (<div id=”container-right”>)controls the sections below:
- Advanced Search
When the customer logs in:
- Welcome Back
- Account Details
- Delivery & Billing
- Order History
- My Wishlist
- Logout
On the products in shopping cart:
- the shopping basket with this option menu (<div class=”basket-rows”>)
- the best sellers section (<div class=”best_seller_product_box”>)
- the social bookmarks (<div id=”bookmarks” >)
23. firstpage.php controls the sections below
- Featured Products
- Newly Added Products
- Discounted Products
- Intro / Welcome text and image (if added in the admin section)
24. Each section product display is controlled by <div class=”product_box_NUMBER”>, from where the NUMBER is the number of the columns displayed on the home page.
<div class=”product_box_<?php echo $noofcolumns;?>”>
25. addtowishlist.php contains one login form and one new user registration form. (id=”registerform” and id=”loginform”)
26. advancedsearch.php – contains the Advanced Search form. (form id=”advancedsearchform”)
Page: /advancedsearch/
27. basket.php – contains the section for list/edit/delete/update the shopping basket content.
Page: /index.php?page=basket
28. categorydet.php – responsible for the category display section
Page: /CATEGORYNAME … ex: golf
29. confirmation.php – contains the confirmation information about the placed order
30. contactus.php – contains the Contact Us form (<div id=”mainaccount”>)
Page: /contactus/
31. delivery_billing.php – contains the form used by the customer for first time registration, when completing the delivery and billing details (id=”register_form”)
Page: /index.php?page=delivery_billing
32. download.php – contains the form for what appears in the e-goods product download.
33. gateways.php – the page which appears on the end of the buy procedure and displays the active payment gateways.
Page: /gateways/
34. gift.php – displays the Gift Certificate order form. (id=”gccreate”)
Page: /gift/
35. login.php – contains and displays the simple login box. (id=”loginform”)
36. logincustomer.php – contains one login and one new user registration form. (id=”formlogin” and id=”registerform”)
Page: /myaccount/
37. newproducts.php – contains and displays the New Products page. The main div that contains the page base section is the <div class=”product_box_<?php echo $noofcolumns;?>”>
Page: /newproducts/
38. orderdetail.php- displays information about the customer order on the checkout/buy procedure.
(<div id=”mydesc”>)
Page: /index.php?page=review
39. proddet.php – displays the product detail page
Example Page: /golf/golf-balls/spin-control-golf-balls/second-chance-grade-a-srixon-ad333-dozen.html
40. productreview.php – displays the product review section. The review section appears on the bottom of the product detail page when users click to the “Review” button.
41. productsitemap.php – displays the product site map page where all the products are listed.
(<div class=”sitemap”>)
Page: /productsitemap/
42. specialoffers.php – displays the products added to the special offers section.
Page: /specialoffers/
44. You may also find useful the general description below about the templates and new template creation.
Different pages that needs to be designed are
i> Home page
ii> Product Detail Page
iii> My Account when not logged in
iv> My Account when logged in
v> Contact us
vi> Basket Page
vii> Advanced Search Results
viii> Product Sitemap
Home Page Contains
i> Header
Will contain a logo and a store slogan
ii> Left bar
Will contain categories and sub categories. Sub Categories will go up to 4 levels
Will contain lists of manufacturers
Will contain lists of quick links
Will contain a link to gift certificate
iii> Right Bar
Will contain links for my account, wish list, delivery billing, logout
Will contain a mini basket with item name, quantity and subtotal. A proceed to checkout button and edit basket button are also important
It will contain lists of best sellers
iv> Footer
Will contain some dynamic links. The number of links appearing there will be dynamic so the width should not be fixed. It should also be managed so that if the number of links increases the graphic does not crash
v> Main Body
There are five sections.
i> Introduction text to the shop
ii> A flash / or an image
iii> Featured Products
iv> Discounted Products
v> Newly added products.
The above sections will move up and down according to the wish of shop owner. So the graphics should be flexible.
The number of products in a row can be 2, 3 or 4. So the width of a product box should be according to the number of columns.
For each product, product name, image, promo line, price, discount price (if it exists) add to basket button, there is a text box to enter the quantity required.
If the number of products in a row is
· 2 the no of letters in promo line will be 150
· 3 the no of letters in promo line will be 70
· 4 the no of letters in promo line will be 50
Product Detail Page
It will contain
i> Product name as header
ii> Product small thumbnails (on hover will change the main image)
iii> Product larger image
iv> Manufacturer Logo (only text will appear if there is no image). It will lead to manufacturer detail page
v> Promo Line (full promo line so height should not be fixed)
vi> Product Code (please create an appropriate place)
vii> 5 to 15 attributes and their title and unit for example (weight 10 kg). Also attribute may contain choices which will appear in drop down.
viii> Price
ix> Discounted Price (if exists)
x> Save amount highlighted (if both the price and discounted Price selected)
xi> Highlight tax free (if present)
xii> Highlight vat free (if present)
xiii> Highlight Free shipping (if present)
xiv> Text box to enter number of quantity and Add to Button
xv> Add to wish list and Email a friend link or button
xvi> Product Description
xvii> Product review form (product description and review form can be on two different tabs)
xviii>
My Account when not logged in
Will contain two forms
i> A login form (fields can be taken from demo site)
ii> A register form (fields can be taken from demo site)
My Account when logged in
Will contain five tabs for
i> My account (please refer demo site for details)
ii> Delivery and Billing Details (please refer demo site for details)
iii> Order History(please refer to demo site for details)
iv> My Wish list (please refer demo site for details)
v> Logout.
Contact Us
Just a form for feedback
Basket Page
Four boxes that will show where the customer is
Like Order page = basket
Delivery and Billing = the page where the customer enters his delivery and billing address.
Review
Confirmation
They should be clickable too.
A Shopping Basket (please refer to demo site for details)
Advanced Search Result
List of products
Each product will contain
i> Serial No
ii> Product image
iii> Product name
iv> Promo Line
v> Product Price
vi> 5-10 attributes
vii> Add to basket button
viii> Text box to enter quantity
ix> Discounted price if present
x> Highlight vat free
xi> Highlight Tax Free
xii> Highlight Free Shipping
xiii> Paging links
Product Site Map
i> Will contain categories, subcategories and the products inside it in a tree structure. They should be clickable
Thats all 
Addendum
Was two problem:
You may need to also
i. Login to your phpmyadmin and run this query:
INSERT INTO `template` (`id`, `folder`, `description`, `template_pic`) VALUES (NULL, ‘yourtemplatename.css’, ‘yourtemplatename.css’, ‘yourtemplatename.jpg’);
* please replace yourtemplate name with the folder name of the new template.
2. In the open window after step one, select “Save file” and download the CSV dump to your computer.
