Illustrated guide for custom AbanteCart template development

[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.

https://abantecart.atlassian.net/wiki/spaces/DOC/pages/655439/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:
https://abantecart.atlassian.net/wiki/spaces/DOC/pages/17957120/Templates+Overview

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.3beta/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

[calbashmc]

Doesn't work for me.  I followed the steps, put the developer directory under extensions, went to the admin panel and installed the extension.  All of that worked fine, the extension says it is installed but I don't see the interface anywhere.  I do not get another tab under System (or anywhere else)  like it says in the documentation above. I'm using v1.1.7

[abolabo]

devtools installed and enabled?

[calbashmc]

Yes I installed the devtools as per the instructions.  That is I put the developer_tools folder in the extensions folder, went to extension manager and clicked on the button to install it.  I then enabled it so the little switch shows as On. Shows as installed and activated in extension manager but no develop tab anywhere to be seen

It says in the instructions above - "Now you will see new tab "Extension Developer Tools" in the system section" - not for me.

[calbashmc]

Now working after removing and re-installing.  But functionality looks very limited.  After creating a new template all items are greyed out except for Languages and Other (under the Hooks section).

[abantecart]

What do you like "Extension Developer Tools" to do? Feel free to develop and add features to it.

[calbashmc]

I wish I was a developer but I'm not smart enough.  I just installed this extension to make a copy of the default_html5 template so I can change css.  I wanted to do this on a copy so it doesn't get over written next upgrade, and also so if I screw up I can just revert back to the default and try again.
So far the copy worked but blocks don't behave as expected.  Some alignment issues plus the blocks show titles even though they are turned off in admin.

[abantecart]

I wish I was a developer but I'm not smart enough.  I just installed this extension to make a copy of the default_html5 template so I can change css.  I wanted to do this on a copy so it doesn't get over written next upgrade, and also so if I screw up I can just revert back to the default and try again.

To help with that, we plan to add template clone and template editor in upcoming versions.

[Wolf]

Dev Tools worked partially for me. I was able to create a new custom extension and template as described above from HTML5 default template, but there appear to be 2 major bugs:
1) Slide show feature does not work in the new extension template (instead of the "slide" class it infuses the "wide_block" id into the "sep" class div). The result is that the slide functionality does not work and the slides just show all on the page aligned to the left.
2) A number of blocks (including the slide blocks) show up as duplicates in the block manager list

Any hint on how to fix this?
Thx
Wolf

[ab_user]

By following this guide I was able to clone(almost) the default htm5 template. But like what others have noticed, some functionalities are missing. Still I think this is quite promising since developers are welcome to share. I wish we can edit blocks to include the accompanying CSS and be able to see the block itself interactively.

[abantecart]

Improvements are coming.