Shop Ignition Documentation
Getting Started
Please ensure that you read the getting started articles in preparation for working with this template.
This template also uses the Zen Grid Framework which makes controlling widths, colours and sub themes for the Joomla template a breeze. Please make sure that you familiarise yourself with the documentation for working with the Zen Grid Framework before you get started.
Module Positions
The screenshot below highlights the module positions available in this joomla template.
More settings
The Zen Grid Framework allows for flexibiility within individual templates while maintaining the same core codebase. The following are the specific variations to the Shopignition template.
Layout Overrides: Shopignition uses the Zen Grid framework layout overrides to help create the unique layout that you see on the Shopignition demo site. You can find these files in the templates/Shopignition/layout folder. In general you do not need to touch these files but if you need to make some changes to any of the following areas, then this is where you need to make them:
- bottom
- grid1
- grid2
- grid3
- grid4
- grid5
- grid6
- jbtabs - The markup for the tabs has been moved into the grid3.php file
- main
- nav
- top
If you need to edit or change the layout across any of these areas of the template then you will need to edit the files in the layout/ folder.
Rebranding
Please note that v1.1 of the framework provides the ability to easily replace the Joomlabamboo copyright in the admin of your template. In order to do this you still need to have either a developer membership or have purchased rebranding. Please ensure that you look at the documentation for the framework for how to use this new feature. You can read more regarding this in the Zen Grid Framework knowledgebase.
Extensions featured on the demo
All of the extensions available from Joomlabamboo are compatible with this template. Not all are required for the running of the template and only some are featured as a part of the demo site.
The modules used on the demo site include:
Please see below in the frontpage setup for screenshots of the modules as they are setup on the demo site of this template.
Shopignition front page setup
The screenshot below shows you the modules we have published on the front page of the demo site. Please see the descriptions below regarding the usage and any other relevant information of the modules.
Description
- Top1 - Main menu published with the -superfish module class to generate the dropdown menu.
- Top4 - Tienda Shopping cart module
- Panel1 - The JB Login module is published to panel1. Once any module is published to panel1 to panel4 the Customer Login Text (configured via the template) is displayed.
- Logo / Tagline - This is configured via the template admin as described in the Zen Grid Framework knowledgebase.
- Search - the Tienda search module is published to the header4 position.
- Grid1 - The JB Slideshow3 module is published to the grid1 position. You can see the specific configuration below.
- Grid4 - This position holds a microblog module (hoodies image) and a custom html modules with images and links assigned to a content page. The bottom module is using the module class -blue to generate the blue background. For more information on module classes available in this template please view the section 6 below.
- Tab1 to Tab4 - The positioning of the tab modules differs slightly from other templates modules and the markup for the tabs can be found in the layout/grid3.php file. The tab1 module uses a Tienda products module and the other tabs have custom html modules assigned to them.
- Main Content Area - The main content is hidden on the front page of the demo site. To display content in this area please ensure that the hide front page content is disabled in the template's layout settings.
- Grid17 - A microblog module displayign Joomla content is published to this position..
- Grid21 to grid24 - These positions contain various custom html modules. Grid22, grid23 and grid24 each have two module published to them which stack vertically on top of each other.
- Bottom1 to Bottom5 - These modules are using latest news and most read modules.
- Bottom6 - This position has a custom html module with the module class -dark assigned to it.
- Footer - the footer position has two custom html modules assigned to it. The modules here are designed to sit horizontally next to each other.
Slideshow settings
The screenshots below highlights the settings of the various modules included on the front page.
No Margin in the grid1 to grid4 positions.
The layout overrides for the grid1 row of modules eg grid1 to grid4 have the margin removed that is normally used in the grid rows between module positions. This small tweak has allowed us to create the grid effect that locks the slideshow in grid1 and the modules positioned in grid4 so nicely.
Assigning a width and a height to the grid4 position.
Since its not always possible to lock widths to the pixel across all browsers we have opted for the ability to set an explicit height and width for the modules assigned to the grid4 position.
There are two basic settings for controlling the layout of this module position. If the width for the grid4 position is not set explicitly then the width is set as per the usual column method with an adjustment of an extra 1.3 gutter value width to compensate for the lack of margins in this row.
Or alternatively you can set the exact pixel width of the grid4 position in the case of needing to vary the width assigned to the module. This width can be set via the template parameters underneath the grid1 row layout settings as per the screenshot below.
Module Classes
This Joomla template comes with a selection of module classes that are available to be used to personalise the look of your site.
The syntax used to trigger the following module classes includes the name of the class you are invoking plus a '-' before it. eg -blue, -arrival etc
Module class colour examples.
dark
darkblue
darkgreen
lightblue
lightgreen
midgreen
orange
pink
purple
red
Module class icon examples.
In addition to the colour module classes shown above Shop Ignition comes with 27 icon based module classes that are ideal for adding to the titles of your modules. You can see the icons below. The JB Type plugin has been updated to also include these icons so please make sure you catch the new classes available for this template on the JB Type page. The icons featured come form the Iconic icon collection.
arrival
arrow
article
beaker
bolt
book
box
calendar
cloud
comment
dash
default
document
download
heart
image
info
lightbulb
movie
quote
search
star
tag
tick
truck
Microblog module class for frontpage items
The appearance of the microblog items on the front page of the Shop Ignition demo is achieved by using the -microblog module class for each instance of the microblog modules. This class is ideal for only displaying the image from the Joomla content item or the the K2 item as well as the title of the item.
Simplemeta page class
The Shop Ignition template uses some unique styling when it comes to the layout out of what we call the meta info on the Joomla content and K2 item pages. You can see this styling in action for the date, author name etc on the demo site. To avoid separating the details out into a second column you can apply the words "simplemeta" to the page class for the menu item that controls that page and the layout will revert to a more traditional layout with the meta infor situated directly beneath the item title.
Combining the classes with the slide effect.
The module classes displayed above can be used in conjunction with the sliding module function that comes as a core feature of the Zen Grid Framework. The screenshot below highlights the syntax required to replicate the slide with any of the above classes.
Configuring the K2 template
The Shopignition Joomla template has K2 overrides built in and are activated simply by assigning the Ignition template in the K2 category or via the K2 menu item if you are displaying multiple categories form that menu item. As you can see from the screenshot below the Shopignition K2 template takes all of the K2 meta information and outputs it into a slim right aligned column. If the meta info like date, comments, rating etc are not published then the item will just stretch to the full width of the content body.
To assign the Shopignition template to your k2 categories and items you need to edit the category and apply the Ignition K2 template as per the screenshot below:
Starting with Shopignition from a fresh installation of Joomla
Although the this Joomla template is a simple design the default Joomla sample data doesnt quite do it justice and so here are a few steps to do if you are installing this Joomla template into a default Joomla installation.
Elements to install.
Essential elements
- Install the Zen Grid Framework
- Install the template and set it to default
- Install the JB LIbrary plugin and enable it in the extensions > plugin manager
- Install JB Slideshow
- Install Microblog
- Install the JB BB Code plugin (For two line menus)
- Install K2
Elements to unpublish
- Disable the module title in the breadcrumb module.
- Disable main menu items except for home menu item.
- Disable the core banner module in the footer position.
- Disable the core footer module in the footer position.
- Unpublish modules published to the right module position.
Elements to publish
- Publish the search module to the header4 position and without enabling the search button. Also ensure the module title is unpublished.
Change the position of some elements on the page
- Move main menu to the top1 position and make sure the module title is disabled. If you wish to use the superfish menu then please also add the -superfish module class.
At this stage you should have a pretty simple and straight forward site to start creating your site from. It's important to remember that the slideshow and micro blog modules rely heavily on images in terms of the way that they present your content so it might be worth adding placeholder or stock images in your content as you go through setting up the rest of the modules.
The screenshot below shows you the default Joomla installation after following the points above.
Recreating the icon menu
There are a number of different ways to recreate the icon menu as seen in the above module position on the demo site, but for the demo site we have used our modification of the yv BB Code plugin that we have used off and on for the last few templates. The setup is very easy and can be achieved as follows:
1. Install the JB BB Code plugin
2. Ensure the plugin is published by going to the extensions > plugin manager in your site administrator.
3. Assign a core Joomla menu module to the above position and select the menu you want to use there.
4. Navigate to the menu manager and select the menu that you have just assigned to the menu module.
5. Upload the icons that you would like to use to the images/stories/icons folder on your website (This step is only necessary if you havent used the quickstart package as the icons are already in that folder in the package). The icons used in the demo are available in a separate download on the Shop Ignition download page.
6. Create a new menu item and use the following code to create the menu icon. If you like you can specify the full url or relative url to the icon image :
Please note that the above example has spaces inserted into the img tag to avoid the code from rendering here.
7. Complete the rest of the menu item setup and click save.
The new menu item with the icon should appear on your website's frontend.
Tienda and Redshop configuration
Tienda
In the past we have used specific product and category overrides for Tienda that required the user to select a specific template file for the category. Shop Ignition uses direct overrides so it is no longer necessary to specify a category or product layout for the category or the item - the Shop Ignition Tienda template is applied automatically and all that is required to use the Shop Ignition styles is top ensure that the Tienda css is enabled in the Shop Ignition template parameters:
eg appearance > set Tienda css to yes.
Tienda Modules used on the demo
The following modules were used on the Shop Ignition Demo site.
- The Tienda shopping cart is published to the top4 position. This module's output is overridden in the templates/shopignition/html/mod_tienda_cart/ folder.
- The Tienda Search module is published to the header4 position. This module's output is overridden in the templates/shopignition/html/mod_tienda_search/ folder.
- The Tienda Product module is published to the tab1 position and is also overridden by the templates/shopignition/html/mod_tienda_products/ folder.
The following is a screenshot of the settings used in the Tienda Products module used to recreate the grid layout as seen on the demo site.
The future of Tienda and where to get support.
Tienda currently comes in a Community version, but soon an Enterprise version will be available that will include many more features. If you have issues related to Tienda outside of the way that things appear in the shopfront template, you should direct those questions to Dioscouri. They provide support plans for both versions of Tienda, which would be well worth the investment to get your store up and running flawlessly.
Troubleshooting
A note about progressive enhancement
The Shopignition template takes advantage of a few different css3 selectors that will render flawlessly in all modern and intelligent browsers - namely firefox, safari, chrome and opera. However, the rounded edges and text shadow on some of the elements will not display in internet explorer 6, internet explorer 7 or internet explorer 8.
Rather than add extra javascript or convert these features to image based solutions we have chosen to allow these features to degrade gracefully. This in effect means that the shadow on the text will not display and nor will the rounded edges on the social icons and read more buttons.
For more information regarding the philosophy behind graceful degradation or progressive enhancement in web design please read this post on A list apart.
Are you using the latest version of the Zen Grid Framework?
Shopignition is only compatible with v1.1 + of the Zen Grid Framework
The super fish menu does not fade or slide it just drops down
Please make sure you have installed and published the JB library plug-in and that there is only one version of the jQuery library loading on your page.
My main content is not displaying
Version 1.05+ of the Zen Grid Framework comes with the option of hiding the main content area on the front page e.g. the default menu item of your site. We've done this in order to help trim up any spacing or padding that is generated from the main content area that is not needed if you are not displaying any content on the front page. If you would prefer to display your content on the front page of your site, then please set the option to hide the main content area in the template parameters under layout > Gen. settings to show.
I get the following error after installing the Zen Grid Framework and a Zen Grid compatible template.
Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /homepages/26/d171984212/htdocs/tradenet/templates/zengridframework/includes/yth.php on line 36
This error means that your server is using php v4 while the Zen Grid Framework needs php5 to function properly. Often changing to php5 is a matter of adding a rule to the htaccess file on your site but it's best to ask your host for help in determining the best way to use php on your server.
