Layout overview | Magento 2 Developer Documentation. Introduction. Magento application implements the Model- view- controller architecture pattern; meaning, the Magento software is architected into layers, including the view layer. The major part of the view layer of Magento application is layout. Functionally, layout is a page structure, represented by hierarchy of elements (element tree), which can be of two types: blocks and containers. Technically, layout is defined in the . This article describes the basic concepts you need to know to create layouts for your custom theme. Terms used. Layout handle. A layout handle is a uniquely identified set of layout instructions that serves as a name of a layout file. There are three kinds of layout handles: page type layout handles – Synonyms of the page type identifiers. Correspond to “full action names” of controller actions, for example, catalog_product_view. Identifiers of specific pages. Correspond to controller actions with parameters that identify specific pages, for example, catalog_product_view_type_simple_id_1. Do not correspond to any page type, but other handles use them by including. Basic layout elements. In this article, we will be covering the basics of Magento layout XML. We will go over local.xml and do some basic modifications. This will include adding and. This article is about creating a custom layout handle in Magento, which can be used to apply different content and styling for specific customer groups. Contribute to magento-rjs-config development by creating. Edit build.js to remove/add files from your. To add a bundle file to corresponding layout handle. The basic components of Magento page design are blocks and containers. A container exists for the sole purpose of assigning content structure to a page. A container has no additional content except the content of included elements. Examples of containers include the header, left column, main column, and footer. The following figure shows an example: A block represents each feature on a page and employs templates to generate the HTML to insert into its parent structural block. Examples of blocks include a category list, a mini cart, product tags, and product listing. The following figure shows an example. Basic layouts. The basic view of all Magento storefront pages is defined in two page configuration layout files located in the Magento_Theme module: < Magento_Theme_module_dir> /view/frontend/layout/default. Magento_Theme_module_dir> /view/frontend/layout/default_head_blocks. These basic page configuration layouts are extended in other Magento modules and in Magento themes. You can also extend or override these files in your custom theme. Layout files types and conventions. Layout file types: by role. For a particular page, its layout is defined by two major layout components: page layout file and page configuration file (or generic layout for pages returned in AJAX requests, emails, and so on). Following are the definitions of each layout file type: Page layout: an XML file declaring a page wireframe inside the < body> section of the HTML page markup, for example, two- column page layout. Page configuration: an XML file declaring detailed structure, contents and meta- information of a page (includes the < html> , < head> , and < body> sections of the HTML page markup). Generic layout: an XML file declaring page detailed structure and contents inside the body section of the HTML page markup. Used for pages returned by AJAX requests, emails, HTML snippets, and so on. For details, refer to Layout file types. In this guide we use layout files when talking about concepts which are similarly applied to all of these types of layout files. Module and theme layout files. The following terms are used to distinguish layouts provided by different application components: Base layouts: Layout files provided by modules. Conventional location. Page configuration and generic layout files: < module_dir> /view/frontend/layout. Page layout files: < module_dir> /view/frontend/page_layout. Theme layouts: Layout files provided by themes. Conventional location. Page configuration and generic layout files: < theme_dir> /< Namespace> _< Module> /layout. Page layout files: < theme_dir> /< Namespace> _< Module> /page_layout. Customize layout. To ensure stability and secure your customizations from being deleted during upgrade, do not change out- of- the- box Magento module and theme layouts. To make the necessary changes, create extending and overriding layout files in your custom theme. Layout files processing. The Magento application processes layout files in the following order: Collects all layout files from modules. The order is determined by the modules order in the module list from app/etc/config. Determines the sequence of inherited themes [< parent_theme> , .., < parent. Iterates the sequence of themes from last ancestor to current: a. Adds all extending theme layout files to the list. Replaces overridden layout files in the list. Merges all layout files from the list. Layout files that belong to inactive modules or modules with disabled output are ignored.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
November 2017
Categories |