Please help us to make AbanteCart Ideal Open Source Ecommerce Solution for everyone.

Support AbanteCart eCommerce

Author Topic: Illustrated guide for custom AbanteCart template development  (Read 139087 times)

rvalani

  • Guest
Re: Illustrated guide for custom AbanteCart template development
« Reply #45 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..
« Last Edit: October 27, 2016, 11:41:53 AM by rvalani »

Offline digitalt

  • Full Member
  • ***
  • Posts: 115
  • Karma: +20/-0
    • View Profile
Re: Illustrated guide for custom AbanteCart template development
« Reply #46 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.

rvalani

  • Guest
Re: Illustrated guide for custom AbanteCart template development
« Reply #47 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
« Last Edit: June 13, 2017, 06:57:59 AM by Basara »

Offline morrisr

  • Newbie
  • *
  • Posts: 9
  • Karma: +4/-0
  • Simple is good
    • View Profile
    • Aloha Elegant
Re: Illustrated guide for custom AbanteCart template development
« Reply #48 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

Offline DCS

  • Newbie
  • *
  • Posts: 21
  • Karma: +3/-1
    • View Profile
Re: Illustrated guide for custom AbanteCart template development
« Reply #49 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? 

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 4362
  • Karma: +301/-10
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: Illustrated guide for custom AbanteCart template development
« Reply #50 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.
Please  rate your experience or leave your review
We need your help to build better free open source ecommerce platform for everyone. See how you can help

Offline DCS

  • Newbie
  • *
  • Posts: 21
  • Karma: +3/-1
    • View Profile
Re: Illustrated guide for custom AbanteCart template development
« Reply #51 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.

Offline DCS

  • Newbie
  • *
  • Posts: 21
  • Karma: +3/-1
    • View Profile
Re: Illustrated guide for custom AbanteCart template development
« Reply #52 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

Offline abolabo

  • core-developer
  • Administrator
  • Hero Member
  • *****
  • Posts: 2064
  • Karma: +326/-13
  • web for all, all for web!
    • View Profile
    • AbanteCart
Re: Illustrated guide for custom AbanteCart template development
« Reply #53 on: May 02, 2017, 03:38:27 AM »
is something in error log after message about switching to default template?
“No one is useless in this world who lightens the burdens of another.”
― Charles Dickens

Offline DCS

  • Newbie
  • *
  • Posts: 21
  • Karma: +3/-1
    • View Profile
Re: Illustrated guide for custom AbanteCart template development
« Reply #54 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. 

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5961
  • Karma: +284/-2
    • View Profile
Re: Illustrated guide for custom AbanteCart template development
« Reply #55 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

Offline abolabo

  • core-developer
  • Administrator
  • Hero Member
  • *****
  • Posts: 2064
  • Karma: +326/-13
  • web for all, all for web!
    • View Profile
    • AbanteCart
Re: Illustrated guide for custom AbanteCart template development
« Reply #56 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.
“No one is useless in this world who lightens the burdens of another.”
― Charles Dickens

Offline HADY

  • Sr. Member
  • ****
  • Posts: 328
  • Karma: +27/-5
    • View Profile
Re: Illustrated guide for custom AbanteCart template development
« Reply #57 on: January 07, 2020, 02:42:23 AM »
Hi Community!

I would like to have your suggestion for the best choice of: what version of the developer tools is the best for AbanteCart v1.2.15???

I wanna clone default template just to be sure I will keep everything as I saved.

 
Thank you In Advanced
Regards
HADY

Offline HADY

  • Sr. Member
  • ****
  • Posts: 328
  • Karma: +27/-5
    • View Profile
Re: Illustrated guide for custom AbanteCart template development
« Reply #58 on: January 09, 2020, 06:38:08 AM »
Any suggestion please???
Thank you In Advanced
Regards
HADY

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5961
  • Karma: +284/-2
    • View Profile
Re: Illustrated guide for custom AbanteCart template development
« Reply #59 on: January 27, 2020, 12:47:44 AM »
Hello.
USe the latest version https://github.com/abantecart/developer_tools_extension/tree/master/v1.3beta and backup database before use

 

Powered by SMFPacks Social Login Mod