This manual it intended to help developers to create custom or brand new storefront templates for AbanteCart. We try to make development with AbanteCart easy and fun, and this guide to make this process very clear and efficient.
If something is missing or not clear, please let us know of feel free to contribute in manual improvement.
This manual assumes that you have HTML/CSS/PHP knowledge and you have reviewed AbanteCart glossary and basic architecture.
If you just start, you will be pleased to know that we have developed a special extension for developers (Developer Tools).
Developer Tools extension will save you time to clone templates and build (archive) final extension archive. Final archive is used for extension distribution and install in AbanteCart admin.
Be fair! Developer Tools extension is under constant improvement, so feel free to help and contribute.
Clone Storefront Templates
Fastest way to build new template or customize "default" template is to clone template with Developer Tools extension.
There are two template cloning options:
- full clone
- partial clone.
If you develop new template and plan to edit template ".tpl" files, you will need a full clone. It will copy all the template files.
Partial clone will copy only CSS, JavaScript and images. This is helpful if you only plane to change style for the template
note
Important to note that if new template does not have specific template/file present, "default" template file will be used. Remember to keep "default" template files intact and accessible all the time. Your clone templates will not be effected during minor updates.
When you clone, you can choose to create a core template or an extension template. We recommend to create template extensions, but if you have a specific project and do not intend to redistribute this template, you can create core clone.
It is important to make sure that directory for cloned template have complete rules to write files (777). For template extension clone, you need to set /extensions/ directory to 777 and for core template clone set /storefront/view/ directory to 777.
After clone is completed, you will see new directory created in /extensions/ or /storefront/view/
Also, you will see new template available in design/templates section. You can now enable extension template (if cloned as extension) and set new template to storefront.
Now we have a template to work with, we can start exploring and editing files
Let's note that AbanteCart storefront pages are constructed of templates and these templates are called "blocks". Each block has a corresponding entry in the database.
There is a main template file common/page.tpl that collects all the main parent blocks together organizing them into layout. This template file includes the following template files that are also blocks.
common - common folder
- head.tpl - head template file
- header.tpl - header template file
- footer.tpl - footer template file
- column_left.tpl - left column template file
- column_right.tpl -
- header_bottom.tpl -
- content_top.tpl -
- content_bottom.tpl -
- footer_top.tpl -
These template files have corresponding block names and considered to be special:
'header',
'header_bottom',
'column_left',
'content_top',
'content_bottom',
'column_right',
'footer_top',
'footer',
'content'
templates/blocks are loaded for every storefront page and put all their children blocks together to construct page layout.
To see where these templates/blocks are shown in action, enable template debug in admin and click storefront link
About Layouts:
Layouts are explained in template overview section. Layouts are loaded with layout.xml file that can be loaded in the installation script (install.php) with simple function call below.
$file = DIR_EXT . '/simply_stylish/layout.xml';
$layout = new ALayoutManager('default');
$layout->loadXml(array('file' => $file));
See an example of layout.xml