Create a containerUse the following example to create (declare) a container
<container name="some.container" as="someContainer" label="Some Container" htmlTag="div" htmlClass="some-container" />
Referencing a containerTo update a container, use the <referenceContainer>
directive.
Example: Adding a link to a page header panel
<referenceContainer name="header.panel"> <block class="Magento\Framework\View\Element\Html\Links" name="header.links"> <arguments> <argument name="css_class" xsi:type="string">header links </arguments> </block></referenceContainer>
Create a blockBlocks are created (declared) using <block>
directives.
Example: adding a block of product SKU information
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.sku" template="product/view/attribute.phtml" after="product.info.type"> <arguments> <argument name="at_call" xsi:type="string">getSku</argument> <argument name="at_code" xsi:type="string">sku</argument> <argument name="css_class" xsi:type="string">sku</argument> </arguments></block>
Referencing a blockTo update a block, use the <referenceBlock>
directive.
Example: transferring a picture to a logo
block
<referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">images/logo.png</argument> </arguments></referenceBlock>
Using blocks to set up a templateTo set the block of a template, use <argument>
instructions to pass it.
Example: Changing the title block of a page template
<referenceBlock name="page.main.title"> <arguments> <argument name="template" xsi:type="string">Namespace_Module::title_new.phtml</argument> </arguments> </referenceBlock>
The path to the model is indicated by the directory that relates to the model view/<area>/templates/
. <area>
where the corresponding layout file is used.
modifying block parametersTo modify block parameters, use <referenceBlock>
directives
Example: Changing a parameter in an existing block and adding a new parameter.
Initial block declaration:
...<block class="Namespace_Module_Block_Type" name="block.example"> <arguments> <argument name="label" xsi:type="string">Block Label</argument> </arguments></block>...
Extended layout:
...<referenceBlock name="block.example"> <arguments> <!-- Modified block argument --> <argument name="label" xsi:type="string">New Block Label</argument> <!- Newly added block argument --> <argument name="custom_label" xsi:type="string">Custom Block Label</argument> </arguments></referenceBlock> ...
Using block object methods to set block performanceThere are two ways of accessing block object methods:
- Right
<block>
or <referenceBlock>
use <argument> instructions
- Use the <action> directive. This method is not recommended, but can be used to invoke methods that are not refactored and cannot be used
<argument>
.
Example 1: Using <argument>
a CSS class for a product page and adding a property
Extended layout:
<referenceBlock name="page.main.title"><arguments> <argument name="css_class" xsi:type="string">product</argument> <argument name="add_base_attribute" xsi:type="string">itemprop="name"</argument></arguments></referenceBlock>
Example 2: Using the <action>
Settings page title
Extended layout:
...<referenceBlock name="page.main.title"> <action method="setPageTitle"> <argument translate="true" name="title" xsi:type="string">Catalog Advanced Search</argument> </action></referenceBlock>...
Re-ordering elementsIn the layout file you can change the order of the elements in the page, using the following method:
<move>
directive: Allows to change the order of elements and the father.
<block>
before
and after
properties: Allows you to change the order of elements that have the same father.
<move>
Use example: Place the stock availability and SKU blocks on the product page next to the product price.
In the Magento blank theme, the positions of these elements are as follows:
Let's put the product inventory and SKU block behind the product price block and move the review block out of the Product-info-price container. To implement these, app/design/frontend/OrangeCo/orange/Magento_Catalog/layout/
add them under the directory catalog_product_view.xml
.
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <move element="product.info.stock.sku" destination="product.info.price" after="product.price.final"/> <move element="product.info.review" destination="product.info.main" before="product.info.price"/> </body></page>
This will make the product page look like this:
remove element<referenceBlock>
<referenceContainer>
The properties that remove
are used and can be removed from the element.
Example: Removing the Compare products Sidebar in the store page
This block app/code/Magento/Catalog/view/frontend/layout/default.xml
is declared in:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body>... <referenceContainer name="sidebar.additional"> <block class="Magento\Catalog\Block\Product\Compare\Sidebar" name="catalog.compare.sidebar" template="product/compare/sidebar.phtml"/> </referenceContainer>... </body></page>
To remove this block, you need to extend it in your theme default.xml
:
<theme_dir>/Magento_Catalog/layout/default.xml
In this file, refer to the element that has been added to the remove
attribute:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body>... <referenceBlock name="catalog.compare.sidebar" remove="true" />... </body></page>
Replace elementTo replace the element, you can remove it and add a new one.
Magento2 General Layout custom Task Experience