Magento2 General Layout custom Task Experience

Set Page layout

The layout of a particular page is defined in the page configuration file, in the <page> layout property of the root node.

For example, change the layout of the Advanced search page from a column layout to a two-column layout with the left column:app/design/frontend/<Vendor>/<theme>/Magento_CatalogSearch/layout/catalogsearch_advanced_index.xml

<page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">...</page>

Load static resources in

JavaScript, CSS, and other static assets are added in the area of the page profile , which app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml is defined by default. It is recommended that you extend the file in your custom theme to load JavaScript, CSS, and other static assets. The following file contains some examples of the files you must add:

<theme_dir>/Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> 

To add an external resource, you must indicate the src_type="url" parameter.

You can use<link src="js/sample.js"/>或<script src="js/sample.js"/>指令来添加本地存储的JavaScript文件到你的主题。

The path to the specified resource must be one of the following:

• <theme_dir>/web
• <theme_dir>/<namespace>_<module>/web

Add a conditional comment

Conditional annotations mean that special instructions are given for Internet Explorer. You can add CSS files to specific versions of Internet Explorer. The following is an example:

This allows you to add an IE conditional comment to the generated HTML as follows:

<!--[if IE 9]><link rel="stylesheet" type="text/css" media="all" href="<your_store_web_address>/pub/static/frontend/OrangeCo/orange/en_US/css/ie-9.css" /><![endif]-->

The example above orange is a custom theme created by Orangeco.

Remove static resources from

To remove static resources from page

app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">   

Note that if the static block in the initial file has a model path (for example: Magento_Catalog::js/sample.js ), then the model path should also be indicated when removing.

Create a container

Use the following example to create (declare) a container

<container name="some.container" as="someContainer" label="Some Container" htmlTag="div" htmlClass="some-container" />

Referencing a container

To 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 block

Blocks 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 block

To 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 template

To 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 parameters

To 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 performance

There 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 elements

In 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>beforeand 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 element

To replace the element, you can remove it and add a new one.

Magento2 General Layout custom Task Experience