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

Support AbanteCart eCommerce

Author Topic: Custom layout; different layouts for GS1 & GS2  (Read 241 times)

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 122
  • Karma: +20/-2
    • View Profile
Custom layout; different layouts for GS1 & GS2
« on: October 02, 2017, 02:42:27 AM »
Guest Checkout Step 1 page shares the same layout with Guest Checkout Step 2 page. 

Custom Layouts are simple to create for Product, Category, Manufacturer, or Content pages, but not for a Checkout page. 

I would like to create a custom layout so that Guest Step 1 page can have its own layout different than guest step 2 page.

In the layout.xml file for my template extension, I added a new layout (copied the Checkout Pages section, pasted it, then gave it a new <name> and also [![CDATA... name. 

I hoped that this would show a new layout in the Layouts drop-down menu, but it didn't work. 

What else do I have to do to get a new Custom layout to show up in the Layouts menu, when the new layout is for a checkout page?

Then...

Which file do I edit to assign a new custom layout to guest step 1 page?

Thanks. 

Offline maxter

  • Newbie
  • *
  • Posts: 47
  • Karma: +15/-0
    • View Profile
Re: Custom layout; different layouts for GS1 & GS2
« Reply #1 on: October 02, 2017, 09:11:26 AM »
All checkout pages share the same layout.
You can see this in the database table ac_layouts.

https://github.com/abantecart/abantecart-src/blob/master/public_html/install/abantecart_database.sql#L10376

If you need to create a completely new layout that is assigned to specific page you need to update following tables.

1. Create new row to ac_layouts:
Code: [Select]
INSERT INTO `ac_layouts` (`layout_id`, `template_id`, `layout_type`, `layout_name`, `date_added`)
VALUES
('', 'default', 1, 'Guest Checkout Pages', now());

2. Register new page in ac_pages:
Code: [Select]
INSERT INTO `ac_pages` (`page_id`, `parent_page_id`, `controller`, `key_param`, `key_value`, `date_added`)
VALUES
('', 0, 'checkout/guest_step_1', '', '', now() ),
Note: You might need to do the same for checkout/guest_step_2, checkout/guest_step_3 ..

3. Create new row to pages_layouts:
Code: [Select]
INSERT INTO `ac_pages_layouts` (`layout_id`, `page_id`)
VALUES
([new layout_id from ac_layouts], [new page_id from ac_pages]);
You repeat this for every new layout / page that you create

Do not forget to clear the cache after you update tables directly.

Load your XML with layout.

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 122
  • Karma: +20/-2
    • View Profile
Re: Custom layout; different layouts for GS1 & GS2
« Reply #2 on: October 03, 2017, 01:56:27 AM »
Hi Maxter. 

Wow, thanks for your clear explanation!  Much appreciated. 

« Last Edit: October 03, 2017, 02:07:47 AM by Geoffrey »

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 122
  • Karma: +20/-2
    • View Profile
Re: Custom layout; different layouts for GS1 & GS2
« Reply #3 on: October 03, 2017, 03:15:51 PM »
OK, I had partial success, but it doesn't work. 

My db prefix is "bob".  My template extension is "joe".

In bob_layouts, I inserted 2 new layouts:
9, default, GS1 Layout, 1
29, joe, GS1 Layout, 1

In bob_pages, I inserted 1 new page:
6,0, checkout/guest_step_1

In bob_pages_layouts, I inserted 2 new relationships:
9, 6
29, 6

So basically I made a new layout and new page-layout association for both the default and joe extensions. 

Then, in root/extensions/joe/layout.xml, I copied the entire set of definitions for the Checkout Pages layout ( from <layout> thru </layout> ), and I pasted it just below the Checkout Pages section, then edited 3 lines on the paste as follows, then saved the file:
<name>GS1 Layout</name>
<controller>pages/checkout/guest_step_1</controller>
<name><![CDATA[GS1 Layout]]></name>

Then I cleared cache for the Configuration and Layouts & Blocks elements. 

The new layout "GS1 Layout" now appears in the Layouts dropdown menu of my template extension, but I have 2 problems:
The new layout only has 1 feature: Content Area.
My guest_step_1 webpage is still using the Checkout Pages layout. 

I think the next steps will probably be to create new pages and specific layout associations for all of my other checkout pages,
and then perhaps to remove the original generalized Checkout Pages rows from the 3 different tables,
but before I do that, I would like to be able to see the full set of fields in my new GS1 Layout, not just the Content Area field.

What else do i need to do so that the new GS1 Layout has a full set of block fields?

Is there another layout.xml file somewhere?  I searched but cannot find one. 

Once I get a complete set of block fields in my new layout, do i need to do something else to assign specific layouts to specific checkout pages?

Thanks. 
« Last Edit: October 03, 2017, 04:00:36 PM by Geoffrey »

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 122
  • Karma: +20/-2
    • View Profile
Re: Custom layout; different layouts for GS1 & GS2
« Reply #4 on: October 04, 2017, 10:11:50 PM »
Hello-o.

Can anyone offer an explanation as to why my new GS1 Layout was empty? 

Can anyone say how to assign a new custom layout to a new custom page and actually have it work? 

Maxman. The Maxster.  Maxorama!  Maximum Maxage!!

what up?

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 3141
  • Karma: +226/-9
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: Custom layout; different layouts for GS1 & GS2
« Reply #5 on: October 04, 2017, 11:06:44 PM »
Maxter explained a database relationship to give better understanding how layouts are related to pages.
There is a different way to load layout to the page/controller.

Did you try to use Dev Tools to generate layout?
http://docs.abantecart.com/pages/developer/template_dev_tools.html
You can build your layout in admin and export it with dev tools. After you export, you need to rename page controller and load back usign code below. Once layout is loaded it will assign new layout to the page/controller.

You can load new layout to your page with the following code that you can include into extension install.php :

Code: [Select]
$file = DIR_EXT . '/YOUR_EXTENSION/layout.xml';
$layout = new ALayoutManager('default');
$layout->loadXml(array('file' => $file));

In layout.xml, you include your layout file with update page controller in <controller>...
Important to specify a page controller that you like to link this layout to.

Here is an example:
Code: [Select]
<?xml version="1.0" encoding="UTF-8"?>
<template_layouts>
<layout>
<name>Default Page Layout</name>
<template_id>default</template_id>
<type>Default</type>
<pages>
<page>
<controller>pages/index/home</controller>
<page_descriptions>
<page_description>
<language>english</language>
<name><![CDATA[Page Name]]></name>
</page_description>
</page_descriptions>
</page>
</pages>
<blocks>
                ...

Above section registers the page and links a new layout to it.

More manuals:
http://docs.abantecart.com/pages/developer/template_customization_or_development_guide.html

We need your help to build better free open source eCommerce platform for everyone.
See how you can help

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 122
  • Karma: +20/-2
    • View Profile
Re: Custom layout; different layouts for GS1 & GS2
« Reply #6 on: October 06, 2017, 02:38:42 AM »
Hi, this is the 2nd response I have ever received from you. 

In the 1st one, you helped me modify the block_templates table to permit placement of the "menu" block into header_bottom section.  That modification became the foundation for my particular style of AbanteCart.  It ultimately resulted in a clean approach to responsive navbar and an alternative consideration of categories.  It was very helpful in building my streamlined approach to ecommerce, where the homepage is shopping. 
I'm continuing to modify AC to remove extraneous pages from the checkout sequence.  Less clicks, less pages, less everything. 

So thanks for your 2nd response.

It didn't help. 

In Developer Tools, I have one project.  It is my template extension.  It is a clone of default.   

If I open that project (my template), I can see 4 buttons to do stuff, but none of them relate to layouts.  There is no method for adding a layout. 

In Developer Tools, I can start a new project.  There are 7 available types of new projects, but none are "layouts". 
Furthermore, I do not recognize the wisdom of creating a new extension for a layout for a different extension.  I don't recognize the architectural relationship capability of that suggestion.  Do I really need a layout extension to add a layout to a different extension?  If so, how is it done?

Bottom line - I don't see how Developer Tools is used to create a new layout.  I looked.  I read.  I opened everything.  I don't see it. 

So I looked at the underlying "values" of your proposal, and I compared them to Maxter's instructions. 

By following Maxter, I inserted a new layout in the layouts table.
And I inserted a new layout-to-page relationship in the pages_layouts table. 
And I inserted a new page in the pages table, but it isn't really a new page, it's just a more granular or precise specification of an existing page. 
Then I inserted all of the new layout elements into the layout.xml file for the template extension.  I gave the proper name, controller, and name-CDATA values to this new section of layout.xml.  It's just a copy of the Checkout Pages section, but with changed name and controller values. 

I looked at install.php for my extension.  The code you referenced above is already in that file.

I cleared cache for Configuration and Layouts & Blocks.

The new layout appeared in my menu of layouts for my extension, but the new layout did not change the target page, and furthermore, the new layout was empty.     

I think that I accomplished all the "values" mentioned in your response, but I did it by following Maxter's instructions, and I couldn't find anything in Developer Tools to improve or augment those "values" or the outcome. 

So I have 2 probs:
1 - my new layout exists, but it is empty.
2 - my page ignored the new layout. 
I think it best to solve them in order. 

Big picture: there are a lot of checkout pages in AC.  A lot. 
Some of them are redundant. 
Too many clicks, just to finish.  Amazon created 1-click checkout for a reason.  People wanna be done.

My goal is to shrink the checkout process to bare essentials.  Faster.  Less clicks.

My success depends on my ability to use different layouts for different checkout pages. 

Maybe my needs are less important than the global need.  Maybe having all checkout pages based on the same single layout is sub-optimal.  Maybe all AC users could benefit from having access to a choice of more than 1 layout for all the checkout pages. 

Thanks.

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 122
  • Karma: +20/-2
    • View Profile
Re: Custom layout; different layouts for GS1 & GS2
« Reply #7 on: October 06, 2017, 01:48:02 PM »
If a new layout is inserted into layouts table, and defined in layout.xml, and visible in admin dropdown menu of layouts, why is the layout empty? 

Here is the layout.xml snippet:

Code: [Select]
    <layout>
    <name>GS1 Layout</name>
    <template_id>joe</template_id>
    <type>Active</type>
    <pages>
      <page>
        <controller>pages/checkout/guest_step_1</controller>
        <page_descriptions>
          <page_description>
            <language>english</language>
            <name><![CDATA[GS1 Layout]]></name>
          </page_description>
        </page_descriptions>
      </page>
    </pages>
    <blocks>
      <block>
        <block_txt_id>header</block_txt_id>
        <status>1</status>
        <position>10</position>
        <block>
          <block_txt_id>customer</block_txt_id>
          <status>1</status>
          <position>20</position>
        </block>
        <block>
          <block_txt_id>menu</block_txt_id>
          <status>1</status>
          <position>30</position>
        </block>
        <block>
          <block_txt_id>search</block_txt_id>
          <status>1</status>
          <position>40</position>
        </block>
        <block>
          <block_txt_id>language</block_txt_id>
          <status>1</status>
          <position>50</position>
        </block>
        <block>
          <block_txt_id>currency</block_txt_id>
          <status>1</status>
          <position>60</position>
        </block>
        <block>
          <block_txt_id>cart</block_txt_id>
          <status>1</status>
          <position>70</position>
        </block>
      </block>
      <block>
        <block_txt_id>header_bottom</block_txt_id>
        <status>1</status>
        <position>20</position>
        <block>
          <block_txt_id>category</block_txt_id>
          <status>1</status>
          <position>10</position>
        </block>
        <block>
          <block_txt_id>breadcrumbs</block_txt_id>
          <status>1</status>
          <position>20</position>
        </block>
      </block>
      <block>
        <block_txt_id>column_left</block_txt_id>
        <status>0</status>
        <position>30</position>
      </block>
      <block>
        <block_txt_id>content_top</block_txt_id>
        <status>1</status>
        <position>40</position>
      </block>
      <block>
        <block_txt_id>content_bottom</block_txt_id>
        <status>1</status>
        <position>50</position>
      </block>
      <block>
        <block_txt_id>content_bottom</block_txt_id>
        <status>1</status>
        <position>50</position>
      </block>
      <block>
        <block_txt_id>column_right</block_txt_id>
        <status>1</status>
        <position>60</position>
        <block>
          <block_txt_id>order_summary</block_txt_id>
          <status>1</status>
          <position>10</position>
        </block>
      </block>
      <block>
        <block_txt_id>footer_top</block_txt_id>
        <status>1</status>
        <position>70</position>
      </block>
      <block>
        <block_txt_id>footer</block_txt_id>
        <status>1</status>
        <position>80</position>
        <block>
          <block_txt_id>newsletter_signup</block_txt_id>
          <status>1</status>
          <position>40</position>
        </block>
        <block>
          <block_txt_id>content</block_txt_id>
          <status>1</status>
          <position>50</position>
        </block>
        <block>
          <block_txt_id>credit_cards</block_txt_id>
          <status>1</status>
          <position>70</position>
        </block>
        <block>
          <block_txt_id>donate</block_txt_id>
          <status>1</status>
          <position>80</position>
        </block>
      </block>
    </blocks>
  </layout>

This is my entire install.php from same folder:

Code: [Select]
<?php

if (! defined 'DIR_CORE' )) {
header 'Location: static_pages/' );
}

$file DIR_EXT '/joe/layout.xml';
$layout = new ALayoutManager('default');
$layout->loadXml(array('file' => $file));

Can anyone explain why the layout is empty?

Thx. 


Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 3141
  • Karma: +226/-9
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: Custom layout; different layouts for GS1 & GS2
« Reply #8 on: October 06, 2017, 02:14:27 PM »
XML looks right to me. Do you get any error or warning in the log?
Did you clear cache?

I will try your XML a bit later.
We need your help to build better free open source eCommerce platform for everyone.
See how you can help

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 122
  • Karma: +20/-2
    • View Profile
Re: Custom layout; different layouts for GS1 & GS2
« Reply #9 on: October 06, 2017, 05:15:31 PM »
The log has a few miscellaneous warnings, but nothing related to layout.xml or anything else related to layouts.

Yes, cache cleared. 

Admin page debug is identical for Checkout Pages layout vs new GS1 Layout. 

Thanks for help. 

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 3141
  • Karma: +226/-9
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: Custom layout; different layouts for GS1 & GS2
« Reply #10 on: October 07, 2017, 09:30:31 PM »
I think your problem is with the code in the install.

You have template ID of joe:
Code: [Select]
<template_id>joe</template_id>
But in the code you use default:
Code: [Select]
$layout = new ALayoutManager('default');
Try this:
Code: [Select]
<?php

if (! defined 'DIR_CORE' )) {
header 'Location: static_pages/' );
}

$file DIR_EXT '/joe/layout.xml';
$layout = new ALayoutManager('joe');
$layout->loadXml(array('file' => $file));
We need your help to build better free open source eCommerce platform for everyone.
See how you can help

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 122
  • Karma: +20/-2
    • View Profile
Re: Custom layout; different layouts for GS1 & GS2
« Reply #11 on: October 09, 2017, 03:30:18 PM »
Hi, thanks again for your help. 

I made the change you suggested to install.php, and then cleared all cache, but it did not work. 

My new Layout "GS1 Layout" appears in the Layouts dropdown menu for both the default and joe templates, but it is empty regardless of template selected.  (It has a "Content Area", but no other blocks or sections.)

Food for thought:  I am using a template extension.  It was a clone of default.  I used Admin to modify all of the available layouts for my extension. 
Before today, I have never edited the install.php file in my extension folder root.
Until today, the ALayoutManager value was always 'default'. 
My site works.  My layout modifications work.  My template extension works. 
Everything works despite the difference between template_id value 'joe' in layout.xml and the ALayoutManager value 'default' in install.php. 

Changing the ALayoutmanager value from 'default' to 'joe' did not affect any part of my site, and it did not populate the new GS1 Layout with the fields or blocks specified in the layout.xml file. 

So I'm still trying to solve the 1st problem.  I can edit the tables to create a new layout, and I can specify the components of the new layout in layout.xml, but when I open the new layout in Admin, it is empty. 

Thanks for helping me solve this. 

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 122
  • Karma: +20/-2
    • View Profile
Re: Custom layout; different layouts for GS1 & GS2
« Reply #12 on: October 09, 2017, 09:13:40 PM »
Hey, I got it!

To add a new custom layout for a checkout page, use phpMyAdmin to edit four tables in your database:

1 - add the new layout to the _layouts table.

2 - add a new page to the _pages table.  This won't be an actual new page, but rather a more granular specification of an existing page.  In default AC, all checkout pages except the Cart page share the same layout.  In the _pages table, you will see 2 rows for checkouts pages:
a - pages/checkout
b - pages/checkout/cart
The system applies the Checkout Pages layout to all checkout pages except the Cart page, because the cart page is defined more precisely to use the pages/checkout/cart layout. 
Your goal in step 2 is to add a a 3rd row, a more specifically-defined page.  So you pick a new page_id number and use a more specific controller name.  In my case, it was pages/checkout/guest-step-1.

3 - edit the _pages_layouts table to add a new association between the new page with the new layout. 

4 - edit the _block_layouts table.  What this table does is associate various blocks with a layout.  Sort the table by layout_id.  You will then multiple rows for each layout, each row associating a block with that layout.  You made a new layout, but it will be empty until you associate various blocks.  The easiest way to do this is to pick another known layout in that table, click every box in every row of the layout, then scroll to page bottom and click Copy.  This will open a new view where you are editing every block assignment for the known layout.  Change every layout_id value from the value for the known layout to the value for your new layout, then click Go button to save.  Basically, this will clone the known layout into your new layout. 

Close phpMyAdmin.

Open your template layout.xml file in an editor.  Find the section of code for the Checkout Pages layout.  Copy everything from the <layout> tag thru the </layout> tag.  Paste that content at the bottom of the file.  Then edit the 2 <name> values you will see at the top of the pasted section.  Change them from "Checkout Pages" to whatever name you used for layout_name in the _layouts table.  Also edit the <controller> line to match the controller value you specified in the _pages table.  Save and close. 

Clear cache.

That's it.  You will now see your new Layout in Admin, and you can set it however you like. 

Thanks to Maxter and AC for bringing me far enough along so that I could recognize the missing piece: the _block_layouts table.
« Last Edit: October 09, 2017, 09:15:33 PM by Geoffrey »

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 3141
  • Karma: +226/-9
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: Custom layout; different layouts for GS1 & GS2
« Reply #13 on: October 10, 2017, 01:56:19 PM »
Glad you resolved it.
We need your help to build better free open source eCommerce platform for everyone.
See how you can help

 

application and website monitoring