0

I have some big grouped products (with sku: montagekonsole and montageschiene). I need to change the layout for both.

First I just created custom sku handles for each product like this:

THEME/Magento_GroupedProduct/layout/catalog_product_view_sku_montagekonsole.xml:

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <container name="hf_big_grouped_product_table_container" 
                   htmlTag="div" htmlId="hf_big_grouped_product_table_container">
            <!-- Page Builder Row -->
            <block class="Magento\Framework\View\Element\Template" 
                   name="hf_big_grouped_product_table_block" template="Company_Base::page-builder/row/contained.phtml" />
        </container>
        
        <move element="hf_big_grouped_product_table_container" 
              destination="page.wrapper" before="hf_product_details_tabs_container" />
        
        <move element="product.info" 
              destination="hf_big_grouped_product_table_block" after="-" />
    </body>
</page>

This works perfectly fine.

But since I don't want to duplicate the exact same file again and again for any product where I need to apply this, I created a new page layout:


THEME\Magento_Theme\layouts.xml

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="hf-grouped-product-big-1col">
        <label translate="true">Hf Grouped Product (Big) -- 1 Col</label>
    </layout>
</page_layouts>

THEME\Magento_Theme\page_layout\hf-grouped-product-big-1col.xml

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
        xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="1column"/>

    <container name="hf_big_grouped_product_table_container" 
               htmlTag="div" htmlId="hf_big_grouped_product_table_container">
        <!-- Page Builder Row -->
        <block class="Magento\Framework\View\Element\Template" 
               name="hf_big_grouped_product_table_block" 
               template="Company_Base::page-builder/row/contained.phtml" />
    </container>

    <move element="hf_big_grouped_product_table_container" 
          destination="page.wrapper" before="hf_product_details_tabs_container" />

    <move element="product.info" 
          destination="hf_big_grouped_product_table_block" after="-" />
</layout>

Then I deleted the now not needed layout THEME/Magento_GroupedProduct/layout/catalog_product_view_sku_montagekonsole.xml again and changed the page layout in the product with the sku montagekonsole to my new Page Layout Hf Grouped Product (Big) -- 1 Col and flushed the cache.

But now the container hf_big_grouped_product_table_container is loaded at the very bottom after the footer.

What am I doing wrong?

8
  • what was the layout previously selected for your product (when you used the first layout update file for that particular sku)? – Diana Botean Apr 21 at 13:22
  • 1
    It was set to "No Layout updates" – Black Apr 21 at 13:23
  • 1
    I already tried that. But I tested it again (applying the THEME/Magento_GroupedProduct/layout/catalog_product_view_sku_montagekonsole.xml again and setting Layout Update to 1 column) . It works this way. – Black Apr 21 at 13:28
  • 1
    ok, thanks. i'll think of something else then :) – Diana Botean Apr 21 at 13:28
  • 1
    Yes, my theme inherits from the Luma Theme. – Black Apr 21 at 13:37
1

Adding a new page layout should look like this (note that I am referencing the page.wrapper and adding the custom container and block inside as opposed to adding the custom container then moving it as displayed in your trial code):

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="1column"/>
    <referenceContainer name="page.wrapper">
         <container name="hf_big_grouped_product_table_container" htmlTag="div" htmlId="hf_big_grouped_product_table_container">
            <!-- Page Builder Row -->
            <block class="Magento\Framework\View\Element\Template" 
                  name="hf_big_grouped_product_table_block" 
                  template="Company_Base::page-builder/row/contained.phtml" />
        </container>
    </referenceContainer>

    <move element="product.info" destination="hf_big_grouped_product_table_block" after="-" />
</layout>

However, as discussed in the chat there are issues with regards to the referenced block hf_product_details_tabs_container which is defined somewhere else, so I have omitted the 'before' instructions above.

Since this looks like a business specific issue, I would suggest you take the example of the Page_Builder module which defines a new layout product-full-width.xml on top of 1column layout and start from there, maybe you need to redefine the page structure in order to accommodate your custom 'hf_product_details_tabs_container' block so that the 'hf_big_grouped_product_table_block' is rendered in the proper location.

Cheers and good luck!

2
  • Thx for your assistance. The problem is that my custom page layout is loaded before the layout catalog_product_view.xml where hf_product_details_tabs_container is defined. So the catalog_product_view.xml is overwriting the changes from my custom page layout. I need to force my page layout to get loaded last somehow. I think I will need to extend some core class to achieve this. I will try this. +1 for your assistance! – Black Apr 21 at 15:27
  • 1
    no problem, anytime! hope you sort this out soon! – Diana Botean Apr 22 at 7:51
0

I figured it out. The problem is in the nature of the layouts <move> statements in general.

All layout files are getting merged to one big layout file at the end.

The page layouts are getting loaded earlier than other layouts, so they are getting overriden by layouts which are getting loaded later.


I had defined the container hf_product_details_tabs_container in the following layout file and moved it to the container "main.content" by using the move statement.

THEME\Magento_Catalog\layout\catalog_product_view.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        ...
        
        <move element="hf_product_details_tabs_container" destination="page.wrapper" after="main.content" />

        ...

        <container name="hf_product_details_tabs_container" 
                       htmlTag="div" htmlId="hf_product_details_tabs_container"/>

        ...
    </body>
</page>

Problem:

I had to change my catalog_product_view.xml to this:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="page.wrapper">
            <container name="hf_product_details_tabs_container" 
                       htmlTag="div"
                       htmlId="hf_product_details_tabs_container"
                       after="main.content"
            />
        </referenceContainer>
    </body>
</page>

and I had to change the page_layout to this, like @Diana Botean pointed out correctly:

THEME\Magento_Theme\page_layout\hf-grouped-product-big-1col.xml

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="1column"/>
    <referenceContainer name="page.wrapper">
         <container name="hf_big_grouped_product_table_container"
                    htmlTag="div" 
                    htmlId="hf_big_grouped_product_table_container" 
                    before="hf_product_details_tabs_container"
         >
            <!-- Page Builder Row -->
            <block class="Magento\Framework\View\Element\Template" 
                  name="hf_big_grouped_product_table_block" 
                  template="Company_Base::page-builder/row/contained.phtml" />
        </container>
    </referenceContainer>

    <move element="product.info" destination="hf_big_grouped_product_table_block" after="-" />
</layout>

I will add more information about this, as soon as I gained more knowledge about the move statements.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.