eCommerce construction > Templates

Illustrated guide for custom AbanteCart template development

(1/13) > >>

ravindre:
In this post we will give a detailed step by step manual for template creation using the extension dev tool.

More to come soon.

abantecart:
This is illustrated guide for custom AbanteCart template development 

Before you begin template development we suggest to review basic architecture of AbanteCart. If you developed templates for other web applications before, you might find some similarity as well as new concepts.

http://www.abantecart.com/document_wiki/index.php/AbanteCart_Architecture_Overview

As noted in many places AbanteCart provides sophisticated engine for extension development. It is suggested to develop template as extensions.
Although, you can edit core template to get desired result, keep in mind that some files might be replaces with future upgrades.  If you create template as extension all your changes are safe.

More about template extension construct is in this document:
http://www.abantecart.com/document_wiki/index.php/Developing_Templates_as_Extensions

Eventhough‎ , it might look like template development is complex, it is actually very easy after you set first exertion up.

Enough with the theory, Lets begin!

1. First what you need is to install extension development tool from the link below:
https://github.com/abantecart/developer_tools_extension/tree/master/v1.0/code/extensions

NOTE: This extension is constantly in development and improvements. There will be more features and manuals coming for developer_tools.

Upload developer_tools directory to your AbanteCart extensions directory.

After unload of directory and files go to admin -> extensions section and install /enable developer_tools extension.

Now you will see new tab "Extension Developer Tools" in the system section

2. Build (clone) template extension from default_html5 template

Open Developer Tools and click create new tab (illustration1)

Select template as extension type and copy default content

Give template extension and title and some unique ID.
You do not need to worry about other parameters for now.
Click generate button.

3. Generate Layout from default_html5 template
Now you need to generate layout.xml file base of default_html5 template and add it to extension before you can install it.

IMPORTANT. DO NOT install template extension you generated before you generate layout. This will cause error if you enable the template for storefront.

In Developer Tools select All projects tab and click on Open Project for extension created above. (Illustration2)
Click Other tab on the left.
Now, select default_html5  and click "Save layout XML" button (Illustration3)

Go to your abantecart extensions/[new_extenion_id]/ directory and confirm that layout.xml is created (Illustration4)

4. Install new extension and enable
Go to extensions -> templates and click to install extension that you created above.
Enable it. (Illustration5) 

5. Set storefront to use new extension
Go to system -> settings -> appearance and select new template from the list and save.

Go to the storefront and see new template. (Illustration6)

6. Edit template files

Now you can access template (.tpl) files in extensions/[new_extenion_id]/storefront/view/....

abantecart:
2 more illustrations

abantecart:
Last illustration

ravindre:
All steps verified and work like a charm,

for some who dont get the dev tool part, just drag and drop the root file called developer_tools into the extension folder of abantecart.

Then go to the back-end Extension Tab and press Install Extension.

Search for developer_tool press the button that looks like a play button.

Now its installed and we can use it!

Follow the rest of the steps as described above and you should be good to go!

Make sure to check out the images provided aswell, you cant go wrong!

Best of templating :D

Navigation

[0] Message Index

[#] Next page