LiteCommerce:Customizing storefront - Revision history

Dohtur at 10:30, 31 May 2012

2012-05-31T10:30:35Z

Admin: /* FAQ */

2009-12-23T12:57:23Z

‎FAQ

Admin: /* How can I have all thumbnail images in my cart display in the needed size? */

2009-12-23T10:50:44Z

‎How can I have all thumbnail images in my cart display in the needed size?

Admin: /* How can I have all thumbnail images in my cart display in the needed size? */

2009-12-23T09:34:54Z

‎How can I have all thumbnail images in my cart display in the needed size?

Admin: /* How can I have all thumbnail images in my cart display in the needed size? */

2009-12-23T09:34:41Z

‎How can I have all thumbnail images in my cart display in the needed size?

Admin: /* FAQ */

2009-12-23T09:34:32Z

‎FAQ

Admin: /* Editing skin */

2009-12-23T09:32:43Z

‎Editing skin

Admin: /* Installing new skin */

2009-12-23T09:32:18Z

‎Installing new skin

Admin: Created page with '==Installing new skin== There are two ways to change the cart skin: I. Type in your browser the following URL: http:/www.your_domain.com/litecommerce_root_folder/install.php …'

2009-12-23T09:32:01Z

Created page with '==Installing new skin== There are two ways to change the cart skin: I. Type in your browser the following URL: http:/www.your_domain.com/litecommerce_root_folder/install.php …'

New page

==Installing new skin==

There are two ways to change the cart skin:

I. Type in your browser the following URL:

http:/www.your_domain.com/litecommerce_root_folder/install.php

There you'll see the option to re-install skin files. The reinstallation procedure will ask you for an auth_code. This code can be found in your 'config.php' file (litecommerce_root_folder/etc/config.php).

II. As an alternative, you can overwrite some templates in the "skins/" folder directly via ftp, ssh or site Cpanel.

In LC versions 2.1.0 and higher there are two skins stored in the following folders:
* New "2-columns" skin:
litecommerce_root_dir/skins_original/default/en
* Classic "3-columns" skin:
litecommerce_root_dir/schemas/templates/3-columns_classic/default/en

If you'd like to change one skin to another, you should copy and overwrite files in the cart "skins/" folder with the same files from the corresponding
skin folder. In the following folder: litecommerce_root_dir/skins/default/en/ replace the following files:

<pre>
litecommerce_root_dir/skins/default/en/buy_now.tpl
litecommerce_root_dir/skins/default/en/delete_profile.tpl
litecommerce_root_dir/skins/default/en/images.ini
litecommerce_root_dir/skins/default/en/main.tpl
litecommerce_root_dir/skins/default/en/register_form.tpl
litecommerce_root_dir/skins/default/en/search_products.tpl
litecommerce_root_dir/skins/default/en/style.css
litecommerce_root_dir/skins/default/en/checkout/checkout.tpl
litecommerce_root_dir/skins/default/en/checkout/details_dialog.tpl
litecommerce_root_dir/skins/default/en/common/button.tpl
litecommerce_root_dir/skins/default/en/common/dialog.tpl
litecommerce_root_dir/skins/default/en/common/sidebar_box.tpl
litecommerce_root_dir/skins/default/en/common/submit.tpl
</pre>

with the same files from the "2-columns" or "3-columns" skin folder accordingly.

{{note|If your store is alive it's highly recommended to create a backup copy of your shop (to have the possibility to restore it) and after that replace your cart skin.}}

==Editing skin==

Litecommerce allows admin to export set of skins as a set of HTML pages and edit them in some WYSIWYG editor such as FrontPage or DreamWeaver. As soon as modification process is over you can import html pages back into the LiteCommerce. As a result your store will get a unique custom design.

To export skins, follow the below instructions:
# Enter your admin zone, go to the 'Import HTML design' section and click on the link called
'Prepare set of HTML pages for editing'.
# After you do that, you'll get all Litecommerce skin templates exported as a set of html pages
to the following folder: litecommerce root dir/var/html/
# Download the exported skins from the 'var/html/' folder to your local PC and modify it.

You can do the following modifications within your Litecommerce 'html pages':
* change any static graphic objects in the cart (for ex.: logo, sidebar icons );
* change any standard titles and notes;
* change the 'weight' and 'height' sizes;
* rename, modify and move sidebars;
Summarizing, you can modify all visual parameters of your cart. All modifications can be done
only with help of the corresponding command of the wysiwyg editor.

NB: Each page in the HTML pages' set contains the following control tags:
<pre>
Widget >-----------------
</pre>
These lines show which templates are directly bound with the current one. Under these lines there is a short template content. It serves to simplify navigation through the 'html pages'. If you decide to modify some bound template page, you can use the "Click to edit..." link.
<pre>
Edit area >-----------------
</pre>
These lines contain the corresponding template visual part and you can see where on the page this content is exactly located. During the modifications please make sure you '''leave all 'control tags' unchanged'''. Otherwise you'll be unable to import your html set back to the cart.

To import the modified 'html pages' set back to the cart, follow the below instructions:
# Upload the 'html pages' set to the 'var/html/' folder.
# Enter your admin zone, go to the 'Import HTML design' section and click on the link called
'Import HTML design'.
# After the import operation is completed we recommend you to clean up the cart cache using
the corresponding link in the admin area or by typing the following in your browser:
http://www.your site name/litecommerce root folder/cleanup.php

==FAQ==

===How to remove weight in the product options drop down list?===

You should modify the '<litecommerce_root_dir>/skins/default/en/modules/ProductOptions/product_option_modifier.tpl' template.

In this template you should find and remove the following HTML tags:

<pre>

Weight: {option.modifiedWeight(opt)} {config.General.weight_symbol}


Weight: {opt.weight_modifier_sign}{opt.weight_modifier_abs}%

Weight: {opt.weight_modifier_sign}{opt.weight_modifier_abs}
{config.General.weight_symbol}

</pre>

← Older revision		Revision as of 12:57, 23 December 2009
Line 137:		Line 137:

	4) For modifying all those templates, you may use either ftp or the 'Template Editor' feature in the admin area (admin area -> Template Editor).		4) For modifying all those templates, you may use either ftp or the 'Template Editor' feature in the admin area (admin area -> Template Editor).
		+
		+	===If I want to customise my store, how do I know which file to modify?===
		+
		+	LiteCommerce has some kind of a "debug mode" feature, it's called the 'verbose mode'. If this mode is active, during LC work you can look through the "source code" of any LC page and see which templates uses on this page. If you'd like to use this feature, you should edit string in the 'your_LC_root_folder/etc/congig.php' file:
		+
		+	<pre>
		+	verbose = On
		+	</pre>
		+
		+	To turn this mode off, you should revert that string back to:
		+
		+	<pre>
		+	verbose = Off
		+	</pre>
		+
		+	{{note\|Before modifying the 'config.php' file you should first change its access permissions via site Cpanel or using the 'chmod' command in ftp or ssh terminal. After you have completed the file modifications, make sure you change the permissions back to the original ones.}}

	[[Category:LiteCommerce user manual]]		[[Category:LiteCommerce user manual]]

@@ Line 121: / Line 121: @@
 In these templates you should find and modify the 'width' section in the following part of code:
- span IF="featuredProduct.product.hasThumbnail()">img src="{featuredProduct.product.thumbnailURL:h}" border="0" width="100">
+<pre>
 Also you can add the 'height' section to this part of code if it's necessary.
@@ Line 129: / Line 131: @@
 In this template you should find and edit the 'width' section value in the following part of code:
- a href="cart.php?target=product&product_id={product.product_id}&substring={substring:u}" IF="product.hasThumbnail()">img src="{product.thumbnailURL:h}" border=0 width=70
+<pre>
 ) For modifying all those templates, you may use either ftp or the 'Template Editor' feature in the admin area (admin area -> Template Editor).

@@ Line 103: / Line 103: @@
 In this template you should find and edit the 'width' section value in the following part of code:
- a href="cart.php?target=product&product_id={product.product_id}&category_id={category_id}" IF="product.hasThumbnail()">img src="{product.thumbnailURL:h}" border=0 width=70
+a href="cart.php?target=product&product_id={product.product_id}&category_id={category_id}" IF="product.hasThumbnail()">img src="{product.thumbnailURL:h}" border=0 width=70
 NB: If there is the 'Showcase Organizer' module enabled in the admin area, Modules' section, you should modify the same part of code in other files.
@@ Line 121: / Line 121: @@
 In these templates you should find and modify the 'width' section in the following part of code:
-span IF="featuredProduct.product.hasThumbnail()">img src="{featuredProduct.product.thumbnailURL:h}" border="0" width="100">
+ span IF="featuredProduct.product.hasThumbnail()">img src="{featuredProduct.product.thumbnailURL:h}" border="0" width="100">
 Also you can add the 'height' section to this part of code if it's necessary.
@@ Line 129: / Line 129: @@
 In this template you should find and edit the 'width' section value in the following part of code:
-a href="cart.php?target=product&product_id={product.product_id}&substring={substring:u}" IF="product.hasThumbnail()">img src="{product.thumbnailURL:h}" border=0 width=70
+ a href="cart.php?target=product&product_id={product.product_id}&substring={substring:u}" IF="product.hasThumbnail()">img src="{product.thumbnailURL:h}" border=0 width=70
 ) For modifying all those templates, you may use either ftp or the 'Template Editor' feature in the admin area (admin area -> Template Editor).

@@ Line 103: / Line 103: @@
 In this template you should find and edit the 'width' section value in the following part of code:
-a href="cart.php?target=product&product_id={product.product_id}&category_id={category_id}" IF="product.hasThumbnail()">img src="{product.thumbnailURL:h}" border=0 width=70
+ a href="cart.php?target=product&product_id={product.product_id}&category_id={category_id}" IF="product.hasThumbnail()">img src="{product.thumbnailURL:h}" border=0 width=70
 NB: If there is the 'Showcase Organizer' module enabled in the admin area, Modules' section, you should modify the same part of code in other files.

← Older revision		Revision as of 09:34, 23 December 2009
Line 96:		Line 96:
	</span>		</span>
	</pre>		</pre>
		+
		+	===How can I have all thumbnail images in my cart display in the needed size?===
		+
		+	1) To resize thumbnails images on the category page you should modify the 'litecommerce_root_dir>/skins/default/en/category_products.tpl'
		+
		+	In this template you should find and edit the 'width' section value in the following part of code:
		+
		+	a href="cart.php?target=product&product_id={product.product_id}&category_id={category_id}" IF="product.hasThumbnail()">img src="{product.thumbnailURL:h}" border=0 width=70
		+
		+	NB: If there is the 'Showcase Organizer' module enabled in the admin area, Modules' section, you should modify the same part of code in other files.
		+
		+	* for the 'List' products list look: 'litecommerce_root_folder>/skins/default/en/modules/ShowcaseOrganizer/list.tpl'.
		+
		+	* for the 'Icons' products list look: 'litecommerce_root_folder/skins/default/en/modules/ShowcaseOrganizer/icons.tpl'.
		+
		+
		+	2) To resize the thumbnail images in the 'Feature Products' section
		+	you should modify one the following templates:
		+
		+	* for the 'List' feature products look: 'litecommerce_root_folder>/skins/default/en/modules/FeaturedProducts/featuredProducts.tpl'
		+
		+	* for the 'Icons' feature products look: 'litecommerce_root_folder>/skins/default/en/modules/FeaturedProducts/featuredProducts_icons.tpl'
		+
		+	In these templates you should find and modify the 'width' section in the following part of code:
		+
		+	span IF="featuredProduct.product.hasThumbnail()">img src="{featuredProduct.product.thumbnailURL:h}" border="0" width="100">
		+
		+	Also you can add the 'height' section to this part of code if it's necessary.
		+
		+	3) To resize the thumbnail images on the 'Search result' page you should modify the: 'litecommerce_root_folder>/skins/default/en/search_result.tpl'
		+
		+	In this template you should find and edit the 'width' section value in the following part of code:
		+
		+	a href="cart.php?target=product&product_id={product.product_id}&substring={substring:u}" IF="product.hasThumbnail()">img src="{product.thumbnailURL:h}" border=0 width=70
		+
		+	4) For modifying all those templates, you may use either ftp or the 'Template Editor' feature in the admin area (admin area -> Template Editor).

@@ Line 1: / Line 1: @@
 ==Installing new skin==
@@ Line 59: / Line 60: @@
 NB: Each page in the HTML pages' set contains the following control tags:
- Widget >-----------------
+Widget >-----------------
 These lines show which templates are directly bound with the current one. Under these lines there is a short template content. It serves to simplify navigation through the 'html pages'. If you decide to modify some bound template page, you can use the "Click to edit..." link.
- Edit area >-----------------
+Edit area >-----------------
 These lines contain the corresponding template visual part and you can see where on the page this content is exactly located. During the modifications please make sure you '''leave all 'control tags' unchanged'''. Otherwise you'll be unable to import your html set back to the cart.
@@ Line 75: / Line 76: @@
 http://www.your site name/litecommerce root folder/cleanup.php
-[[Category:LiteCommerce user manual]]
 ==FAQ==
@@ Line 154: / Line 155: @@
 {{note|Before modifying the 'config.php' file you should first change its access permissions via site Cpanel or using the 'chmod' command in ftp or ssh terminal. After you have completed the file modifications, make sure you change the permissions back to the original ones.}}
 [[Category:LiteCommerce user manual]]

@@ Line 5: / Line 5: @@
 I. Type in your browser the following URL:
- http:/www.your_domain.com/litecommerce_root_folder/install.php
+http:/www.your_domain.com/litecommerce_root_folder/install.php
 There you'll see the option to re-install skin files. The reinstallation procedure will ask you for an auth_code. This code can be found in your 'config.php' file (litecommerce_root_folder/etc/config.php).
@@ Line 12: / Line 12: @@
 In LC versions 2.1.0 and higher there are two skins stored in the following folders:
-* New "2-columns" skin:
+* New "2-columns" skin: litecommerce_root_dir/skins_original/default/en
-litecommerce_root_dir/skins_original/default/en
+* Classic "3-columns" skin: litecommerce_root_dir/schemas/templates/3-columns_classic/default/en
 If you'd like to change one skin to another, you should copy and overwrite files in the cart "skins/" folder with the same files from the corresponding