LiteCommerce:LayoutOrganizer

This article refers to LiteCommerce 2.x only. For user manual to LiteCommerce 3.x, please visit this website.

LC version2.xonly

LiteCommerce Layout Organizer add-on module introduces advanced customization to the look and feel of LiteCommerce-based online stores. With this module installed and activated your online store catalog presentation becomes fully customizable. It helps you improve your store presentation; make it truly unique and more appealing to customers.

This manual will guide you through the process of Layout Organizer add-on module installation and use.

Configuring the module

After you have successfully installed the Layout Organizer module, you can configure its settings to change the look of your online catalog according to your preferences. Basic module settings can be modified from the 'Modules' section. Click on the Layout Organizer module link to enter the module's settings page.

These settings are similar to the settings of the Showcase Organizer module. If you previously had the Showcase Organizer module installed, its settings will retain when you switch to the Layout Organizer module. First you need to choose whether you want product lists to be displayed in the form of a 'List', 'Table' or a set of 'Icons'. Once you choose the desired look and feel for product lists, corresponding additional parameters are displayed. These will be the default settings for all product lists in the catalog. When you finish making changes to the settings, click on the 'Update' button to save the changes.

Note: To change the default 'Look&Feel' of the store categories, find and modify the 'Subcategories look&feel' option in the 'General settings' section of the 'Settings' menu.

Managing Template Schemes

You can manage your template schemes from the Administrator Zone. Choose the 'Scheme Manager' link from the 'Look&Feel' menu to open the Scheme Manager. Scheme Manager allows you to review the list of available schemes and make modifications to them.

You can disable the schemes that you do not want to be listed as available scheme options for category and/or product presentation. To disable a scheme, uncheck the 'Enabled' box field next to the scheme name and click on the 'Update list' button.

Note: The Layout Organizer module comes bundled with several predefined schemes, namely the '[DEFAULT]' scheme and three thematic schemes: 'Forest Green', 'Soap Bubbles' and 'Film Tape'. These schemes cannot be edited or deleted. Additionally the '[DEFAULT]' scheme cannot be disabled.

Creating a scheme

You can create additional schemes by cloning one of the existing schemes. Click on the 'Clone' button next to the scheme name to create a copy of that scheme.

To change the name of a newly created scheme, type the desired name in the 'Name' field and click on the 'Update list' button.

When you create a new scheme, LiteCommerce generates a separate folder to store its templates. The folder is located at:

<re>'skins/default/<lang>/modules/Layout Organizer/schemes/schemeN_<scheme_name>/'

within LiteCommerce installation, where:

• '<lang>' is the language version of LiteCommerce that you are running,
• 'N' is the number assigned to the scheme at the time of its creation (the same number is visible in the '#' field in the list of available schemes) and
• '<scheme_name>' is its name.

The scheme contains several template files. Clicking the 'View' button located next to the scheme name reveals the templates pertinent to the scheme:

• 'scat_template.tpl' for subcategories template,
• 'cat_template.tpl' for product list template, and
• 'prod_template.tpl' for product page template.

Editing a scheme

Scheme templates can be modified using Template Editor. To modify a scheme follow the instructions below:

• Click on the 'Edit' button next to the scheme name to see a list of templates pertinent to this scheme (Figure 7).
• Choose the template you want to modify and click on the 'Edit' button next to its filename. This will open the Template Editor with the template in it.
• Modify the template.
• Click on the 'Save' button to save changes. You will be redirected back to the Scheme Editor.

Note: If you export your store design to HTML using the 'Prepare set of HTML pages for editing' link in the 'Import HTML design' section, the schemes are exported along with other design elements and their templates can be edited in the HTML editor of your preference.

You can also change the scheme by assigning a different file to a relevant template (subcategories, product list or product page):

• Click on the 'Browse' button next to the template type that you want to modify.
• File browser will open in a new web-browser window allowing you to choose one of the template files located on the server. Choose a file by clicking on the radio button next to the filename, and then click on the 'Select' button.
• The browsed window will close and the new filename will appear in the Scheme Manager next to the corresponding template type. Click on the 'Update' button to save the changes.

Note: If you specify a template file which is different from the original one and is located in some other folder, the file is not being copied to the scheme directory. It remains at its regular location. If you export your store design to HTML, note the location of the file so that you can find it later.

Sorting the scheme list

The list of schemes can be sorted for ease of use. To sort the schemes, assign 'Pos.' values to the schemes that would differ from one another. Schemes with lower 'Pos.' numbers will appear at the top of the list. Schemes with equal 'Pos.' values are sorted alphabetically (Figure 8).

Note: The '[DEFAULT]' scheme is always listed first followed by the three predefined schemes; these schemes cannot be sorted.

Deleting a scheme

To delete a scheme, click on the 'Delete' button next to the scheme's name. Confirm the deletion by clicking on the 'OK' button in the confirmation pop-up window.

Note: If you delete a scheme that is being in use, the categories and components that were using the scheme would use the '[DEFAULT]' scheme instead. No warning message is produced because generally this is not an error, so be wary when you delete schemes.

Changing the appearance of your store

Layout Organizer add-on module enables you to customize appearance of individual categories, subcategories and individual products in your store catalog.

Changing the category look and feel

Follow the instructions below to modify the style of a category:

1. In the 'Catalog' menu choose the 'Categories' section to open the 'Manage categories' page.

2. Choose the category you want to customize and click on the 'Modify' link next to it, then in the category details page click on the 'Templates' tab (Figure 9).

3. In this page you can specify a template scheme (subcategory list template, product list template and product page template) to be used for the corresponding category. To specify a scheme, choose one of the following drop-down list options:

[DEFAULT] – use this option if you want the category to be presented using default design templates.

Inherit – use this option if you want the category to inherit the appearance of its parent category. This option is not available for top-level categories.

Scheme name(s) – all the schemes listed in the Scheme Manager as 'Enabled' are listed in the drop-down box; you can choose any of them to customize the appearance of the category.

4. If you need a more flexible design, you can assign individual design templates to category components. Click on the 'advanced' link to switch to the advanced mode. In the advanced mode, each component can be assigned its own template available from a drop-down list of the following options:

[DEFAULT] – use this option if you want the corresponding component to be presented using the template which is default for this component type.

Inherit – use this option if you want the component to inherit the appearance of the same component of its parent category. This option is not available for top-level categories.

Scheme name(s) – all the schemes listed in the Scheme Manager as 'Enabled' are listed in the drop-down box; you can choose any of them to customize the appearance of the corresponding category component.

Clicking on the 'simple' link switches you back to the simple mode.

5. Click on the 'Update templates' button to save the changes.

Changing the look and feel of a category automatically applies the new style to those of its subcategories which are set to inherit the style from their parent.

If you disable a scheme that has been assigned to some category, the category and its subcategories configured to inherit their look and feel from their parent category will be displayed using the '[DEFAULT]' scheme until you enable the scheme.

Changing the product look and feel

While the look and feel of a product details page is defined by its category's 'Product page template', it can also be changed for each product. Follow the instructions below to modify the style of an individual product:

1. In the 'Catalog' menu choose the 'Products' section. This will open the 'Search product' page.

2. Find the product you want to customize and click on its title to enter the 'Product info' page, then click on the 'Templates' tab.

Customizing product appearance

3. In this page you can specify the product page template to be used for displaying your product details page. Choose one of the following drop-down list options:

• Inherit – use this option if you want the product to retain the appearance defined by the 'Product page template' setting of its parent category.
• [DEFAULT] – use this option if you want the product details to be presented using the default product details template.
• Scheme name(s) – all the schemes listed in the Scheme Manager as 'Enabled' are listed in the drop-down box, you can choose any of them to customize the appearance of the product.

4. Click on the 'Update' button to save the changes.

Note: If you have the free MultiCategories add-on module installed and configure the product belonging to multiple categories to inherit the product page template from its category, the product will inherit the style from the category, which comes first in the list of categories.

Customer zone

This section demonstrates how Layout Organizer add-on module can improve the look of your online store.

Customized category appearance

In the above example we have specified set the 'Games and toys' category of our sample store to use the 'Soap Bubbles' template.

Customized look of 'Games and Toys' category

Subcategories inherit the custom style of a product list from the 'Games and toys' category.

Customized product appearance

Product pages can be set to inherit page templates from the parent category. However, you can assign an individual template to a single product page if you want to make it more product-specific. This makes the product page look different and truly unique.