How to create responsive Prestashop theme with Twitter Bootstrap from scratch

How to create responsive Prestashop theme with Twitter Bootstrap from scratch

How to create responsive Prestashop theme with Twitter Bootstrap from scratch

What is PrestaShop?

PrestaShop is a free, open source e-commerce solution. It supports payment gateways such as Google Checkout, Authorize.net, Skrill, PayPal and Payments Pro via API. Further payment modules are offered commercially.

PrestaShop is available under the Open Software License and officially launched in August 2007. The software, which is based on the Smarty template engine, is currently used by 125,000+ shops worldwide. PrestaShop is the winner of the 2010 and 2011 Best Open-source Business Application awards. The software makes extensive use of AJAX in the admin panel, while module blocks can be easily added to the store to provide extra functionality; these are normally provided free of charge by independent developers.


The PrestaShop group was founded in Paris, with a second office opened in Miami in 2011. PrestaShop is translated into 53 languages, with only English and French having full support in all release versions. Technical support is provided on the official forum from PrestaShop growing Community consisting of more than 350,000 active members.

The makers of PrestaShop have an official marketplace for priced modules and themes entitled PrestaShop Addons. There are a number of volunteers who support and contribute their own Addons to PrestaShop. Contributors often program additional features for the software, on top of the 275 features available by default.

PrestaShop operates an associated website called PrestaBox, which integrates the software into a simple one-stop hosting operation.

Download and Installation

PrestaShop: Always Free and easy Installation,please download: http://www.prestashop.com/en/download

How a theme works

A PrestaShop theme is a set of files which you can edit in order to change the look of your online shop.

Here are a few important tidbits:

• All themes have their files located in the /themes root folder.

• Each theme has its own sub-folder, in the main themes folder.

• Each theme is made of template files (.tpl), image files (.gif, .jpg, .png), one or more CSS files (.css), and sometimes even JavaScript files (.js).

• Each theme has a preview.jpg image file in its folder, enabling the shop-owner to see what the theme looks like directly from the back-office, and select the theme appropriately.

• The /css folder contains all CSS files.

• The /img folder contains all images.

• The /js folder contains all the JavaScript files.

• The /lang folder contains the theme's translations. Its access rights should be set at CHMOD 666 (for instance), so that the back-office translation tool can read and write into it.

• The root of the folder contains TPL files only (Smarty files), as well as the preview.jpg file.

File structure for a theme


File or folder

Description

preview.jpg
This image is used as a preview in the "Theme" selector in the "Preferences" > "Appearance" sub-tab. This image is mandatory, as without it the theme cannot be selected. It should obviously reflect the theme's design, and not its logo or designer's name...
404.tpl
Used when the requested page is not found (HTTP error 404).
address.tpl
Used when adding or editing a client street address.
addresses.tpl
Used when listing a client's street addresses.
authentication.tpl
Used when identifying a user, or creating a new user account.
best-sales.tpl
Used to list all best sale.
breadcrumb.tpl
Used to find the navigation path, or breadcrumb trail.
category.tpl
Used to list all products in a given category.
category-tree-branch.tpl
Used only by the Category block.
category-cms-tree-branch.tpl
...
cms.tpl
Used for informational pages ("Tools" > "CMS" sub-tab).
contact-form.tpl
Used by the contact form.
discount.tpl
Used when listing all discount tickets for a single client.
errors.tpl
Used when displaying errors. Potentially called by all of the pages.
footer.tpl
Page footer.
guest-tracking.tpl
Used when a visitor has no know account on the site, but wants his order to be tracked – and therefore needs to create an account or log in.
header.tpl
Page header
history.tpl
Used when lsiting the order history of a client.
identity.tpl
Used when a client edits his/her personal information.
index.php
Blank file, prevents visitors to view the content of the folder.
index.tpl
Welcome page.
maintenance.tpl
Used when the site is in maintenance mode.
manufacturer.tpl
Used when listing all products from a single manufacturer.
manufacturer-list.tpl
Used when listing all manufacturers.
my-account.tpl
Welcome page for a client's account.
new-products.tpl
Used when listing the products that were last added to the cart.
order-address.tpl
Used during the order process: Step 1, choosing the addresses (delivery, billing).
order-carrier.tpl
Used during the order process: Step 2, choosing the carrier mode.
order-confirmation.tpl
Used during the order process: Last step, confirming the order (after payment).
order-detail.tpl
Used to display the content of a client's order.
order-follow.tpl
Used when a client needs to ask for a product return.
order-opc.tpl
...
order-opc-new-account.tpl
...
order-payment.tpl
Used during the order process: Step 3, choosing the payment mode.
order-return.tpl
Used to display a client product return details.
order-slip.tpl
Used to display a client's credit slips.
order-steps.tpl
Order process progress bar.
pagination.tpl
Used by all pages that list products. Displays the pagination button, enable to skip to the next/previous page of products.
password.tpl
Used when a client needs to change his password.
prices-drop.tpl
Used to list all current promotions.
product.tpl
Used to display details for a single product.
product-list.tpl
Used by all pages that list products. Displays the actual products list.
product-sort.tpl
Used by all pages that list products. Displays a menu enabling to sort and filter products.
products-comparison.tpl
...
scenes.tpl
Used to display a scene's details within a product category.
search.tpl
Used to list results from a search query.
shopping-cart.tpl
Used to list products in a client's cart.
shopping-cart-product-line.tpl
Used to display from a single cart row.
sitemap.tpl
Used to display the site map.
store_infos.tpl
...
stores.tpl
...
supplier.tpl
Used to list all the products from a single supplier.
supplier-list.tpl
Used to list all suppliers.
thickbox.tpl
Used to zoom a product's picture.
/cache
...
/css
Contains all style sheet files for the theme. The global.css file deals with the layout for most of the site. Unless you know exactly what you are doing, you should leave these files alone.
/img
Contains all of the theme's images. You should replace these images with your own adequate creations. If you do not know what to make of it, you should leave the original files.
/js
Contains all of the theme's JavaScript files. Unless you know exactly what you are doing, you should leave these files alone.
/lang
Contains all translation files. These are generated by the back-office translation tool, and should not be edit directly. If a translation needs editing, go to the back-office, "Tools" tab, "Translation" sub-tab, "Modify translation" section, and choose "Front office translations".

Creat New Theme

After downloaded and installed Prestashop please find folder called 'themes' and innside the 'themes' folder, create a new directory with the name of your theme. Example: vinaora
If you have PSD or any image for your theme please creat for Home page theme preview image called preview.jpg and upload to 'vinaora' folder. Prestashop should automatically find and add your template to the back-end. Then go to the Themes option under the Preferences menu, and click Add New at the top. Once completed, you will see your theme in the center of the page. Enable it by simply clicking on it and pressing the Save button.

Your theme’s functionality determines which pages you should implement. These page are based on the files in the controllers folder, and you can override the default controllers or add your own custom controllers to fit your theme.


Work with Index.php

Use your editor to creat new php file called index.php with code bellow

<?php /* * 2007-2013 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@prestashop.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to http://www.prestashop.com for more information. * * @author PrestaShop SA <contact@prestashop.com> * @copyright 2007-2013 PrestaShop SA * @version Release: $Revision: 14008 $ * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) * International Registered Trademark & Property of PrestaShop SA */ header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); header("Location: ../"); exit; ?>

Work with Index.tpl

Code
{* * 2007-2013 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@prestashop.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to http://www.prestashop.com for more information. * * @author PrestaShop SA <contact@prestashop.com> * @copyright 2007-2013 PrestaShop SA * @version Release: $Revision: 14008 $ * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) * International Registered Trademark & Property of PrestaShop SA *} {$HOOK_HOME}

Work with header.tpl


<!DOCTYPE html> <html lang="en"> <head> <title>{$meta_title|escape:'htmlall':'UTF-8'}</title> {if isset($meta_description) AND $meta_description} <meta name="description" content="{$meta_description|escape:html:'UTF-8'}" /> {/if} {if isset($meta_keywords) AND $meta_keywords} <meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" /> {/if} <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta name="generator" content="PrestaShop" /> <meta name="robots" content="{if isset($nobots)}no{/if}index,follow" /> <link rel="icon" type="image/vnd.microsoft.icon" href="/{$img_ps_dir}favicon.ico?{$img_update_time}" /> <link rel="shortcut icon" type="image/x-icon" href="/{$img_ps_dir}favicon.ico?{$img_update_time}" /> <script type="text/javascript"> var baseDir = '{$content_dir}'; var static_token = '{$static_token}'; var token = '{$token}'; var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals}; var priceDisplayMethod = {$priceDisplay}; var roundMode = {$roundMode}; </script> <link rel="stylesheet/less" type="text/css" href="/themes/bootstrap/css/bootstrap.less" /> <script src="/themes/bootstrap/js/less-1.3.0.min.js"></script> {if isset($css_files)} {foreach from=$css_files key=css_uri item=media} <link href="/{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" /> {/foreach} {/if} {if isset($js_files)} {foreach from=$js_files item=js_uri} <script type="text/javascript" src="/{$js_uri}"></script> {/foreach} {/if} {$HOOK_HEADER} </head> <body> {if !$content_only} {if isset($restricted_country_mode) && $restricted_country_mode} <div id="restricted-country"> <p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p> </div> {/if} <div class="navbar"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="/{$link->getPageLink('index.php')}"> <img class="logo" src="/{$img_ps_dir}logo.jpg?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} /> </a> {$HOOK_TOP} </div> </div> </div> <div class="container-fluid"> <div class="row-fluid"> <!-- Left --> <div class="span2"> {$HOOK_LEFT_COLUMN} </div> <!-- Center --> <div class="span8"> {/if} Work with Footer.tpl {if !$content_only} </div> <!-- Right --> <div class="span2"> {$HOOK_RIGHT_COLUMN} </div> </div> </div> <!-- Footer --> <footer>{$HOOK_FOOTER}</footer> {/if} </body> </html>


Can download YouriT prestashop-bootstrap as demo theme http://www.joomquery.com/upload/pres...rap-master.zip
http://www.joomquery.com/en/prestash...m-scratch.html