MAGENTO如何定位layouts

会定位LAYOUTS，就相当于会修改MAGENTO前端了。

Locate layouts

Just like templates, layouts are saved on a per-module basis. You can easily locate the layout file by determining in which module the templates for the element you are interested in reside in. To locate the template, you can use Template Hints or text search in the app directory, as described previously .

After you have determined the module, you can search for the layout in the following locations:

1. <current_theme_dir>/<Namespace>_<Module>/layout/
2. <parent_theme(s)_dir>/<Namespace>_<Module>/layout/
3. <module_dir>/view/frontend/layout/
4. <module_dir>/view/base/layout/

There is no straightforward algorithm how to define at once the exact layout file, but in most cases layout file names are self descriptive. Also you can search them for mentions of the corresponding templates.

Example: 按这里面的顺序查找

Let’s say you need to locate the layout that is responsible for displaying mini shopping cart on the storefront, when the Blank theme by Magento is applied for the store view.

Using the Template Hints we determine that the template is app/code/Magento/Checkout/view/frontend/templates/cart/minicart.phtml, and in the path, we see that it belongs to the Magento_Checkout module.

Let’s search for the layout following the fallback scheme:

1. Check the app/design/frontend/Magento/blank/Magento_Checkout/ layout. To locate the required layout, search this directory for occurrences of the template name, “ minicart.phtml “. No matching file is found, so we proceed to the next fallback level, which is the parent theme layouts.
2. We can find the info about parent theme in a theme configuration file theme.xml, the parent theme name is specified there in the <parent></parent> node. In the app/design/frontend/Magento/blank/theme.xml there’s no <parent> node, which means the Blank theme has no parents. So we should search on the next fallback level which is the module layouts.
3. The Magento_Checkout layouts are located in app/code/Magento/Checkout/view/frontend/layout/. After searching this directory for occurrences of “minicart.phtml”, we define that the layout we are looking for is app/code/Magento/Checkout/view/frontend/layout/default.xml.

After you located the necessary layout file, you can create your custom layout file with the corresponding name in your theme folder to add extending or overriding content. Please see Customizing Theme Layouts for more details.

Locate styles

To locate a CSS rule that is applied to a certain element, find the template for the page that contains the element. Or you can use browser debugging tools, to locate the class name. After you find the class name, use text search in the theme and module styles directories to locate the .less or .css file that defines the class. Perform the search according to the following fallback scheme:

1. Theme styles <current_theme_dir>/web/css/
2. Module theme styles <current_theme_dir>/<Namespace>_<Module>/web/css/
3. Parent theme styles <parent_theme_dir>/web/css/
4. Parent theme Module styles <parent_theme_dir>/<Namespace>_<Module>/web/css/
5. Module styles for the frontend area <module_dir>/view/frontend/web/css/
6. Module styles for the base area <module_dir>/view/base/web/css/

Example:

Let’s find the file defining on the CSS classes used for displaying the mini shopping cart on the storefront, when the Blank theme by Magento is applied for the store view.

In the mini shopping cart template app/code/Magento/Checkout/view/frontend/templates/cart/minicart.phtml the top level element has minicart-wrapper class.

So, let’s search for occurrences of “minicart-wrapper” in according to the fallback scheme:

1. Search in app/design/frontend/Magento/blank/web/css, the search returns no results.
2. Search in app/design/frontend/Magento/blank/Magento_Checkout/web/css.The “minicart-wrapper” style is defined in app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/_minicart.less

After you determine which .css or .less file defines the class, you can override the default class definition in your custom .css or .less files. For details, see CSS in themes.