Merge pull request #8686 from ajithkumar-maragathavel/layout-extend

dobooth · web-flow · commit f2f286a0fb0a · 2021-02-19T07:39:53.000-05:00
Examples added on layout extend page
diff --git a/src/guides/v2.3/frontend-dev-guide/layouts/layout-extend.md b/src/guides/v2.3/frontend-dev-guide/layouts/layout-extend.md
@@ -20,7 +20,17 @@ To add an extending [page configuration]({{ page.baseurl }}/frontend-dev-guide/l
          |--<layout2>.xml
     ```
 
-For example, to customize the layout defined in `<Magento_Catalog_module_dir>/view/frontend/layout/catalog_product_view.xml`, you need to add a layout file with the same name in your custom theme, such as: `<theme_dir>/Magento_Catalog/layout/catalog_product_view.xml`
+For example, to customize the layout defined in `<Magento_Catalog_module_dir>/view/frontend/layout/catalog_product_view.xml`, you need to add a layout file with the same name in your custom theme, such as: `<theme_dir>/Magento_Catalog/layout/catalog_product_view.xml`. Then do your customizations on the layout xml.
+
+**Example:**
+
+```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"/>
+    </body>
+</page>
+```
 
 To add an extending [page layout]({{ page.baseurl }}/frontend-dev-guide/layouts/layout-types.html#layout-types-page) file:
 
@@ -33,6 +43,19 @@ To add an extending [page layout]({{ page.baseurl }}/frontend-dev-guide/layouts/
          |--<layout2>.xml
     ```
 
+For example, to customize the page layout defined in `<Magento_Theme_module_dir>/view/frontend/page_layout/1column.xml`, you need to add a page layout file with the same name in your custom theme, such as: `<theme_dir>/Magento_Theme/page_layout/1column.xml`. Then do your customizations on the page layout xml.
+
+**Example:**
+
+```xml
+<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
+    <update handle="empty"/>
+    <referenceContainer name="page.wrapper">
+        <container name="page.top.after" label="After Page Top" after="page.top"/>
+    </referenceContainer>
+</layout>
+```
+
 ## Processing extending layouts
 
 Magento merges layout files as follows:
