How to Create New Layout to Get Block Contents of Magento 2.4?

There are at least 100 categories under www.bestpriceglasses.com. My customer plan to add different contents from different blocks for some categories say prescription ski goggles and prescription swimming goggles, and we plan to display the contents within the footer section. All Magento 2.3. and Magento 2.4 default existing page layouts won’t meet my customer’s requirements, so we can create a new page layout in Magento. Follow me!

First, we need to know what kind of layout we need, 1 column, 2 columns, or 3 columns. Say, we need 1 column layout. Create a custom page-layout XML file, named default.xml , and place it under app/design/Young/goggles/Magento_Theme/layout/:

           <referenceContainer name="ski-goggles-content">   <!-- ski-goggles-content, same as the name of inner container from ski-goglges.xml -->
               <block class="Magento\Cms\Block\Block" name="prescripiton ski goggles"> 
                   <arguments> 
                       <argument name="block_id" xsi:type="string">ski_goggles_category</argument> 
                   </arguments> 
               </block> 
           </referenceContainer>

           <referenceContainer name="swimming-goggles-content"> <!-- swimming-goggles-content, same as the name of inner container from swimming-goglges.xml -->
               <block class="Magento\Cms\Block\Block" name="prescripiton swimming goggles"> 
                   <arguments> 
                       <argument name="block_id" xsi:type="string">swimming_goggles_category</argument> 
                   </arguments> 
               </block> 
           </referenceContainer>

Note:

  1. ski_goggles_category is the Identifier of a block.

2. ski-goggles-content, should be the same as the name of inner container from ski-goglges.xml

Next, add a block to the container, create the layout, let’s create ski-goggles.xml, and place it under app/design/Young/goggles/Magento_Theme/page_layout/.

<?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="ski-goggles" as="ski-goggles" after="footer" label="Ski Goggles" htmlTag="footer" htmlClass="category-ski-goggles">
            <container name="ski-goggles-content" as="ski-goggles-content" htmlTag="div" htmlClass="footer content" />
        </container>
    </referenceContainer>
</layout>

ski-goggles, container name, should be the same as the layout id of layout.xml

Third, add the newly created page layout to the layouts.xml file of the theme directory: app/design/Young/goggles/Magento_Theme/

<?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="ski-goggles">
        <label translate="true">Ski Goggles</label>
    </layout>

    <layout id="swimming-goggles">
        <label translate="true">Swimming Goggles</label>
    </layout>
</page_layouts>

Note: ski-goggles, layout id, should be the same as the name of container name from ski-goggles.xml, which is under app/design/Young/goggles/Magento_Theme/page_layout/

Remember to clean the cache by going to System > Cache Management > Flush Magento Cache or by entering the following command: bin/magento cache:clean or bin/magento c:c

Published By
Categorized as Magento