AbanteCart Community

eCommerce construction => Templates => Topic started by: ravindre on November 14, 2013, 12:57:34 PM

Title: Illustrated guide for custom AbanteCart template development
Post by: ravindre on November 14, 2013, 12:57:34 PM
In this post we will give a detailed step by step manual for template creation using the extension dev tool.

More to come soon.
Title: Illustrated guide for custom AbanteCart template development
Post by: abantecart on November 19, 2013, 09:48:32 AM
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 AbnateCart 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/....
Title: Illustrated guide for custom AbanteCart template development
Post by: abantecart on November 19, 2013, 09:50:15 AM
2 more illustrations
Title: Illustrated guide for custom AbanteCart template development
Post by: abantecart on November 19, 2013, 09:50:45 AM
Last illustration
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: ravindre on November 23, 2013, 09:15:09 PM
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
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: calbashmc on November 24, 2013, 10:20:04 PM
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
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: abolabo on November 25, 2013, 06:47:36 AM
devtools installed and enabled?
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: calbashmc on November 25, 2013, 05:03:07 PM
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.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: calbashmc on November 28, 2013, 09:26:57 PM
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).
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: abantecart on November 30, 2013, 10:31:10 AM
What do you like "Extension Developer Tools" to do? Feel free to develop and add features to it.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: calbashmc on December 04, 2013, 07:16:29 PM
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.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: abantecart on December 05, 2013, 08:35:06 PM
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.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: Wolf on December 23, 2013, 09:35:54 AM
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
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: ab_user on January 16, 2014, 10:21:56 AM
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.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: abantecart on January 17, 2014, 02:04:39 PM
Improvements are coming. :)
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: shankar_7950 on February 03, 2014, 07:14:57 AM
Hi,


I have followed the steps and have an error while accessing my front end.

There has been an error processing your request
Please check error log for more info. You can check error log in the control panel if it is functional. Otherwise, refer to error log located in your web server


And i have found in error log file

AbanteCart core v.1.1.8 No layout found for page_id/controller 2::pages/index/home!

can you please help me to get rid out of this.

I am using the version abantecart_1.1.8

Title: Re: Illustrated guide for custom AbanteCart template development
Post by: abantecart on February 03, 2014, 11:22:10 PM
It looks like your template is missing layouts completely, including default page layout. Try to import layout from default template.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: finzero on September 17, 2014, 01:52:07 AM
Hi Admin,

I followed the Instructions, but i stuck on step 3.

1. First what you need is to install extension development tool from the link below:
work perfectly, the "Extension Developer Tools" appear in the system section

2. Build (clone) template extension from default_html5 template
work perfectly, i go to extensions folder and the new Extension is created

3. Generate Layout from default_html5 template
after i click generate button on step 2, the page redirect to "All Project" tab, but i see nothing there. according to the Illustration image, there should be the new project i've generate before. i checked on the "Extensions > All Extensions" the new template extension is there but didn't appear on All Project in the Developer Tools list.

am i missing something ? i'm using V1.1.9

thanks before :)
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: johca on January 11, 2015, 02:34:53 AM
I got it loaded a-ok, but no option to open project to select default_html5 and click "Save layout XML" button after the new template was generated.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: dorelljames on January 21, 2015, 10:05:52 AM
I'm using AbanteCart version 1.2.0 as of the moment and I've struggled finding that button/link to generate layout.xml. For those who come here seeking help and probably still using the Extension Developer Tools v.1.0 which I believe isn't optimized for the latest version then this is for you.

If you're using Google Chrome. Open DevTools using F12 keyboard. Inspect element beside the newly created project. This gets you closer to the source and see the link. Just expand until you see the link. See attachment for_version_1.2.0.png.

NOTE: Important not to install the newly created project/extension yet to properly create the layout.xml.

To generate, click on Others tab and click blank button with title "Save Layout XML". See attachment save_layout.png.

Hope that helps.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: juandesign on January 29, 2015, 01:00:14 AM
Hello,
I tried to upload it but its saying that it only requires a .tar or .gz..When I download the file it was .zip..

Can you advice on this?
Cheers
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: abolabo on January 29, 2015, 03:39:19 PM
what zip?
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: kelbel3abh on January 30, 2015, 01:00:19 AM
Hello,
I tried to upload it but its saying that it only requires a .tar or .gz..When I download the file it was .zip..

Can you advice on this?
Cheers

Hey, instead of uploading the entire zipped folder you just downloaded, I unzipped the folder contents to my computer and used an FTP client, Filezilla, to bring my files over.  You will need to go through the folders until you find the extensions folder in your download and match it with the extensions folder in your backend files.  Then, drop the developer_tools folder into there (extensions.)  Does this make sense?  Basically, don't upload the zipped folder in Extensions within your Admin.  Hope this helps! ~ Kelly
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: kelbel3abh on January 30, 2015, 01:30:07 AM
I am a little stuck.  I followed all the directions, everything went smoothly, but when I switch to the new template in Settings/ Appearance, my pages are blank.  But, if I view page source, there is code there.  I am trying to save this as a template before I upgrade to the newest version of Abantecart.  Anybody have any ideas?  I looked in the extensions folder and the template is there, along with layout.xml.  Not sure what is wrong.  ~ Kelly
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: natdroid on March 25, 2015, 03:28:51 AM
I have followed the steps and have an error while switch to the new template Design >Layouts
There has been a critical error processing your request
AbanteCart core v.1.2.1 No layout found for page_id/controller ::! Requested data: template: html5_theme, page_id: , layout_id: in <b>/abantecart/htdocs/core/lib/layout_manager.php</b> on line <b>111</b>
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: kok on April 10, 2015, 01:57:20 AM
Hi there,

I had follow the step to created, but in step 3 when I select All projects tab,

NO click button for Open Project (refer attached file), which step I wrong?

Thank you.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: abolabo on April 10, 2015, 07:48:24 AM
looks like you tried to use wrong version of devtools.
See https://github.com/abantecart/developer_tools_extension for needed.
Just take folder
your_abantecart_major_version/code/extensions/developer_tools and move into your extensions directory
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: sim on April 20, 2015, 11:20:31 PM
this custom template can support for abantecart version 1.2.1??
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: abolabo on April 21, 2015, 02:11:01 PM
this custom template ....

what that mean?
please clarify
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: sim on April 21, 2015, 09:44:12 PM
it mean in the abantecart version 1.2.1, can it support for custom template development? when me use the developer tools 1.2 to create the template, it cannot work, it say page you requested not found.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: abolabo on April 22, 2015, 08:58:33 AM
yes. You should to install it manually.
just unpack this directory (https://github.com/abantecart/developer_tools_extension/tree/master/v1.2/code/extensions) with contents into your public_html/extensions folder.
To download it click this (https://github.com/abantecart/developer_tools_extension/archive/master.zip).
Then go to menu extensions and install dev_tools.
After that you can to clone your own template via settings->appearance->clone template button
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: sim on April 23, 2015, 04:02:08 AM
thanks, i manage to clone it, but it only can use for the default store, how to use the clone template on other store?
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: abolabo on May 12, 2015, 12:19:56 PM
thanks, i manage to clone it, but it only can use for the default store, how to use the clone template on other store?
when you clone a default template it create standalone extension with given extension_txt_id (see folder "extensions").
Then you can set it on other additional store.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: alexandru87 on June 12, 2015, 06:46:20 AM
Hello , Followed the guide made extension and when i make changes to the extension nothing happens it doesn't display anything in storefront.... if i make changes in default template changes take effect pls help me out where did i go wrong with this and what should i do . THANKS
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: abolabo on June 16, 2015, 04:57:40 AM
is your clone was set as storefront-template in the settings?
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: alexandru87 on June 16, 2015, 07:31:22 AM
is your clone was set as storefront-template in the settings?
Yes it was set as storefront.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: abolabo on June 16, 2015, 08:32:55 AM
try to enable debug with logging into log-file and check errors there
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: robotprom on January 29, 2016, 09:01:47 PM
Is there an update for 1.2.5 for this guide? I followed it as best I could given the differences, but there are no files in extensions/[new_extension_id]/storefront/view/ to edit.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: kok on March 02, 2016, 02:58:37 AM
Is there an update for 1.2.5 for this guide? I followed it as best I could given the differences, but there are no files in extensions/[new_extension_id]/storefront/view/ to edit.

Yes, I m facing same problem as using 1.2.5. Please advice.

Thank you.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: daspi on May 22, 2016, 02:20:07 PM
What is the status on  "template clone and template editor" functions for customizing the default template? Or is the only way to go to purchase the FoxY Theme? 
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: digitalt on September 18, 2016, 06:34:40 PM
Little spooky, but once I got the right dev tools installed, cloning the default template was a snap.   v1.2 is great. I might even take the dive to create some extensions for myself that aren't out there.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: Basara on September 19, 2016, 01:38:38 AM
Little spooky, but once I got the right dev tools installed, cloning the default template was a snap.   v1.2 is great. I might even take the dive to create some extensions for myself that aren't out there.

Hello. Feel free to sell your extension in the AbanteCart Marketplace (https://marketplace.abantecart.com/developer-faq)
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: digitalt on September 19, 2016, 05:54:51 AM
Little spooky, but once I got the right dev tools installed, cloning the default template was a snap.   v1.2 is great. I might even take the dive to create some extensions for myself that aren't out there.

Hello. Feel free to sell your extension in the AbanteCart Marketplace (https://marketplace.abantecart.com/developer-faq)

I'm not a programmer per se but I bet I can figure out how to build my price break extension.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: llegrand on September 19, 2016, 09:41:37 AM
Have you found the pricing quantity section in the default coding?   Or are you contemplating something different than quantity pricing ?

http://docs.abantecart.com/pages/promotions/discounts.html (http://docs.abantecart.com/pages/promotions/discounts.html)
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: digitalt on September 21, 2016, 06:10:55 AM
Have you found the pricing quantity section in the default coding?   Or are you contemplating something different than quantity pricing ?

http://docs.abantecart.com/pages/promotions/discounts.html (http://docs.abantecart.com/pages/promotions/discounts.html)

I want it for this

1-10       $x.xx
11-20     $x.xx
21+        $x.xx

However with the default pricing option for quantity pricing, when set up like above, it works, but shows on the product page like this

11    $x.xx
21    $x.xx

In otherwords, a customer can order 15 and get the 11-20 price with the default setup, it just doesn't show it that way.

It's more of an aesthetic thing that is clearer for the customer.

I know it's just a slight mod, but it's better to do with an extension.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: Basara on September 21, 2016, 06:17:31 AM
Hi.

Please create separate topic for questions not related to "guide for custom AbanteCart template development "
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: rvalani on October 26, 2016, 06:28:58 PM
Hi I am working on new template but when I select the new template I get error(see error.png) I have layout.xml in my template_test folder.
Can you please help me what am I missing..
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: digitalt on October 28, 2016, 01:06:47 PM
Hi I am working on new template but when I select the new template I get error(see error.png) I have layout.xml in my template_test folder.
Can you please help me what am I missing..

Did you follow these directions? http://forum.abantecart.com/index.php/topic,1340.msg5297.html#msg5297

You should have a folder with a bunch of files, not just an .xml. 

Also make sure you are using v1.2 of dev_tools.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: rvalani on October 28, 2016, 01:14:49 PM
Thank for your reply... Fixed it..
It is actually simple..
Step one download https://github.com/abantecart/developer_tools_extension/tree/master and paste into your extension folder
Step two go to your extension and install it after installation you should see developer tool tab under your section
Step three goto Design -> Template the clone the default template(via clicking folder like icon) Also create full clone it includes CSS, Javascripts etc
Step four Extension will be created for the cloned template, edit it then select the new template(one your have cloned) and save it
Go back to Design -> Template select the new template and start editing!!
Done...
v 1.2.8 is lot easier 7 clicks and it is created...
Thanks Developers
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: morrisr on January 06, 2017, 09:40:52 PM
I did follow the steps and still only see 1 template in the template manager.
And the developer_tools_extension asks too many questions.
Is this a guide for the template extension tool?
Thanks
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: DCS on April 30, 2017, 04:28:44 PM
I am replying to this thread because there is no other discussion of how to create template clone extensions, and because this thread is BOTH outdated and wrong. 

AbanteCart is designed to be customizable.  If you want to customize the look of your AbanteCart site, the proper way to do it is to clone the Default template into a new template extension, and then customize the clone. 

In theory, template extensions are protected from future software updates.  If you just modify the Default template layouts, your customizations will be overwritten during future software updates. 

SOME PROBLEMS:
1 - The 1st page of this thread is so outdated that you cannot use it.  The admin actions described on the 1st page cannot be performed on the current admin interface. 
2 - The page 4 Oct 2016 rvalani instructions for creating a cloned template extension are more relevant for current versions of AbanteCart, but they are still not correct nor complete. 
3 - If you try to create a clone template extension, you cannot get timely or intelligent support from this forum. 
4 - There is no AbanteCart documentation in the User Manual that describes how to create a clone template extension. 

A PARTIAL SOLUTION:
I partially succeeded in creating a clone template extension.   
Here are the steps I used:
1.)   Install Extension Development Tool from github dot com/abantecart/
b.   Use the green box to download zip file.  Unzip the file into a new folder in your work area.  It will have 3 versions of the developer_tools.  Choose one.
c.   In the chosen version: Open the /code/extensions/ folder.  You will see a developer_tools folder.
d.   Copy the developer_tools folder to your AbanteCart extensions folder.
e.   Go to the site backend Extensions / All Extensions tab.  Locate developer_tools and click the button that looks like a play button to install the tools. 
f.   Then set the status of the tools extension to ON. 
g.   If successful, you will now have a new "Extension Developer Tools" tab in the System section of your backend.
 
2.)   Clone the default template (this will simultaneously create a new extension):
a.   Go to Design / Templates on your backend.  You will see all available templates.  Clone the Default template by clicking its double-square clone icon. 
b.   Select Clone to Extension.
c.   Select Full Clone type so that it will include CSS, Javascripts etc.
d.   Choose a Name (Title) and unique identifier, then click the Clone Template button.

3.)   Assign the new template clone to the new extension:
a.   Go to Extensions / All Extensions - locate the newly created extension.
b.   Click the Edit button to edit the new extension, click the Additional Settings tab.
c.   On the upper left, select the new clone from the dropdown menu (hover = "Edit Template Settings").
d.   Scroll down and click Save.

4.)   Set the storefront to use the new template:
a.   Go back to Design / Templates, click the "on / off" radio button of the new template to set it as the active storefront template.

5.)   Theoretically, step 4 will cause your storefront to use your new clone-template extension.  Theoretically, you can go to Design / Layouts, choose the new template, then click the Save icon, and your store frontend would be built from the new template.  Theoretically, you can go to Design / Layout and start making changes to any layout you see in the dropdown menu, and then click the Save icon, then reload the frontend and you would see your layout changes.  Then, theoretically you would smile and start customizing the layouts and maybe even the css file associated with the new template, and soon, your site would look like your site instead of looking like the Default AbanteCart template. 

MORE PROBLEMS:
1 - Step 5 above does not work.  When you finish Step 4, you can make changes to the new template and Save, but the changes will not show up on your frontend.  You can  navigate away from the Layout page to any other part of the admin backend, then return to Design / Layouts, and when you return, you will see that the system has reverted to the Default template.  There is no way to select your new template and then have it stay selected.  It's really weird.  If I choose a template and then Save, I expect the system to continue to use my template, not revert back to using its default template every time I leave the Layout page. 

2 - Step 3b above simply takes you to the same place as Design / Templates / Edit button.  You cannot do anything here to force the AbanteCart system to begin using your new template.  Instead, it just reverts back to the old Default template every time you visit the Design Layouts page.

MORE SOLUTIONS?:
On another thread (topic,5433.0.html); josmun had exactly the same problem.  His ultimate solution was to create 3 clones, and then voila!, he said it started working!  Okaaay. 

Basara and other AbanteCart admins said nothing else.  There was no discussion of what was wrong or how to fix it.  I think that the user is now supposed to repeat the clone process until something works, and then be happy.  I guess.   

After losing way too may hours on STEP 1 of trying to make Abantecart work, I decided to try the josmun approach.  I cloned the Default AGAIN.  This is what I discovered:   When I TURN ON clone2, the Design / Layouts page is now stuck on CLONE1.  !  :-)

Example: goto Design / Template.  Use the radio button to TURN ON Clone2.  goto  Design / Layouts, look at the dropdown box for 'Select template'.  It says Clone1. 
Click the dropdown box, change it to Clone2, or to Default, then click the Save button.  Navigate anywhere else within admin backend, then go back to Design / Layouts.  The dropdown box will say Clone1.  IT REVERTED BACK TO CLONE1!!

Here is the best part: If I make Clone2 the active template in Design / Template, my frontend now shows the changes I made to the layouts for Clone1. 

So, as near as I can tell, if you want to customize AbanteCart by cloning the Default template into a new extension, you must clone the Default once, then make all of your customizations to the layouts of Clone1, then Save, then clone the Default template AGAIN, then select the Clone2 template as the active template, and only then will the Clone1 customizations show on the frontend. 

I do not know yet whether you can make additional Clone1 layout changes after you have activated Clone2. 

I cannot think of a reason to build an AbanteCart site.  How can I know if it will work? 

I'm not stupid. 

I did all the steps. 

Is AC broken? 

Is the team burned out and losing enthusiasm? 

Is AC dead?

Maybe the developers only have time to work on AC a few hours per month? 

If that is so, then all of the documentation needs to make that very clear up front.  It should say something like this:
"AC is broken, and we can only work on it a few hours per month, so don't think that you can download it and build a site in a few days.  If you need a functional site built within a reasonable timeframe, you need to choose a different cart."

Because right now, AC is being promoted as a good cart.  I downloaded it and started working on it one week ago, and I have made zero progress.  That is not acceptable!  I didn't choose AC because i wanted to spend 2 months building a 4-day site.  Do you guys get that? 

Can anyone here explain what I am seeing, or how to fix it? 
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: abantecart on May 01, 2017, 08:12:22 AM
Thank you for taking time and posting your observation. I think you have slight misunderstanding how template system is working in AbanteCart.
We will be happy to clarify. It will take some time, so please stay tuned here.

As a concept, nothing changed in AbanteCart within v1.2. These manuals are still valid.

AbanteCart is not dead and gaining more popularity than before. 

I agree we need better manual for the template development, I hope with your help we can make it happen.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: DCS on May 01, 2017, 01:37:12 PM
Summary:

I made a clone template extension - Clone1.

Design>Templates - I chose the Clone1 as the Storefront Template.

Design>Layouts - I used the dropdown menu to select the Clone1 template.  Click Save. 

I made changes to Home and Default Page Layout, and I clicked Save. 

My changes do not show on the front end. 

When I return to Design>Layouts - the selected template has reverted to Default.  It will not stay on the Clone1 template. 

I had no other option, so I followed the josmun map:  I made another clone template extension - Clone2.

On Design>Template - I select Clone2.

I go to Design>Layouts, and when I arrive, I see that the Clone1 is the chosen template!  This is new! 

Only by cloning the Default template twice is Clone1 able to become the chosen template in Default>Layouts. 

Test Results:
I have one storefront, and 3 templates: Default, Clone1, and Clone2.  I am working on xampp on windows.  Here are my test results of this problem:

1 - In Design>Template, I select Default template.  Then I go to Design>Layout and I choose Clone1, then Save, then navigate away, then return back to Design>Layouts:  the chosen template has reverted back to Default.  Repeat test, but choose Clone2 on the Layout page; same outcome. 

Conclusion:  If you select Default template on Design>Template, you may only use Default template on Design>Layouts.  It does not matter if you make another choice from the drop-down template selector on Design>Layout, your changes will not be seen on the front end, and the Layout page will revert back to Default template every time you return to the page.

2 - In Design>Template, I select CLONE1 template.  Then I go to Design>Layout and I choose Clone1, then Save, then navigate away, then return back to Design>Layouts:  the chosen template has reverted back to Default.  Repeat test, but choose Clone2 on the Layout page; same outcome. 

Conclusion:  If you select Default template on Design>Template, you may only use Default template on Design>Layouts.  It does not matter if you make another choice from the drop-down template selector on Design>Layout, your changes will not be seen on the front end, and the Layout page will revert back to Default template every time you return to the page.

3 - In Design>Template, I select CLONE2 template.  When I go to Design>Layout, the template selector says Clone1 when I arrive!!  This is new!

I check my front end, and suddenly all of my earlier changes to Clone1 Home Layout are now visible on the front end!  I made all these Clone1 changes before I created the Clone2 template!  I could never see the Clone1 changes on the front end until after I created Clone2 and selected Clone2 in the Design>Template.

In Design>Template, if you select Clone2, it will cause Abantecart Layout page and system to use Clone1 instead of Default when building each page.

I'm pretty sure that if I create Clone3, it will use only Clone2 files "by default". 

I'm pretty sure if I create Clone4, it will only use Clone3 files. 

Etc.

I name this problem the Look-Back problem, or LBprob for short. 

Other stuff I did:
I started customizing a storefront. 
I opened clone css files and tpl files and made changes. 

Example:
On the Design>Template page, I selected the Clone2 template, but I edit css files from the Clone1 directory if i want to see the changes on the front end.:  \xampp\htdocs\site_name\extensions\clone1\storefront\view\clone1\stylesheet\style.css

When it is time to upload this site to a live host, I will have fear and loathing again.  I guess I'll upload all templates.  The Default template cannot be stripped away, and the Clone2 template cannot used without the Clone1 directories.  It will be scary.  I'll probably get drunk.

I have confidence that my AbanteCart friends will be able to fix this problem, so I'm not worried about it. 

I'm building a site.
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: DCS on May 01, 2017, 01:41:08 PM
I wrote all this crap as though I was spanning a massive language barrier, and I've been telling myself that I need to post questions before I quit at night so that someone sees them while I'm sleeping, and then i realize that you guys aren't in Russia, you're in Jersey. 

fuhgeddaboudit
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: abolabo on May 02, 2017, 03:38:27 AM
is something in error log after message about switching to default template?
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: DCS on May 02, 2017, 01:48:30 PM
Hello.

I deleted everything and created a fresh install without DemoData. 

The Look-Back problem did not occur on the fresh install.

Comments:
During my 1st AbanteCart install last week, I created a check-list of steps.  This is how i work with all new content systems, frameworks, whatever. 

Yesterday, for the fresh install without DemoData, I followed my checklist, so the 2nd install was done exactly the same as the 1st.  Completely new database, new folder, new everything. 

The only difference was unticking the DemoData box. 

So, if you want to pursue the Look-Back problem, DemoData may be a place to start. 
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: Basara on May 03, 2017, 01:55:58 AM
Hello.

I deleted everything and created a fresh install without DemoData. 

The Look-Back problem did not occur on the fresh install.


Hi. Thank you for reply back, we will review and fix Full clone process glitch. Just want to be sure what version of the developer tools you use: 1.2 or 1.3 beta?
https://github.com/abantecart/developer_tools_extension
Title: Re: Illustrated guide for custom AbanteCart template development
Post by: abolabo on May 04, 2017, 04:20:09 AM
please update your developer tools (i mean v1.3 dev for AbanteCart v1.2.10) and try again.