布局在Magento中扮演了重要角色。在Magento 2中,有几项内容得到了更改和改进,我们终于拥有了一些有用的布局操作选项。

 

布局基础知识

如果您看这篇博客是为了实例并且您已经熟悉Magento 2的布局,请跳过这里。

布局是一种页面结构,由元素层次结构表示,可以是:块和容器。
从技术上讲,布局是在.xml文件中定义的。包含元素声明和不同操作指令的文件。

模块和主题布局文件

Magento 2布局由不同的应用组件提供,我们可以将它们分为两大类:基本布局主题布局。让我们谈谈它们之间的主要区别。

基本布局

此布局文件由模块提供,我们可以在此路径下找到页面配置和通用布局文件:
module_dir/view/frontend/layout

路径上的页面布局文件:
module_dir/view/frontend/page_layout

如果您想检查基本布局的主文件,可以查看以下路径:
Magento_Theme_module_dir/view/frontend/layout/default.xml

主题布局

主题布局是Magento主题提供的逻辑文件。在这里,我们可以找到页面配置和通用布局文件。可以在以下路径查看它们:
theme_dir/Namespace_Module/layout

此外,页面布局文件位于以下路径:
theme_dir/Namespace_Module/page_layout

 

覆盖布局

为了理解如何正确地覆盖Magento 2布局,上述基本知识是必要的。当我们执行某种定制时,需要适当地覆盖布局,例如:

  • 修改方法参数
  • 移除块和/或容器
  • 设置块和容器的XML属性
  • 删除块参数
  • 修改和抑制句柄包含
  • 通过声明具有空句柄的覆盖布局文件来删除所有句柄指令

覆盖基本布局

要覆盖基本布局文件(模块提供的布局),我们需要在以下位置放置一个具有相同名称的布局文件:
/Namespace_Module/layout/override/base/layout.xml

这些文件覆盖以下布局:
/view/frontend/layout/layout.xml

覆盖主题布局

要覆盖主题布局(覆盖父主题布局),请在以下位置放置具有相同名称的布局文件:
theme_dir/Namespace_Module/layout/override/theme/Vendor/theme/layout.xml

这些文件覆盖以下布局:
parent_theme_dir/Namespace_Module/layout/layout.xml
要覆盖页面布局文件,请使用“page_layout”目录名称而不是“layout”。

 

产品页面覆盖

现在,当我们熟悉布局覆盖规则时,让我们试着覆盖产品页面布局。

覆盖特定产品的产品页面

例如,我们的客户有两种或更多类型的产品,除此之外,客户还有一种特殊产品。因此,客户也希望在特定的产品页面中展示该产品。所以,我们至少需要三种不同的产品页面布局。

幸运的是,Magento 2通过使用本地addPageLayoutHandles方法提供了这种灵活性,方法提供了使用以下方法覆盖布局的可能性:

  • Product ID
  • Product SKU
  • Product TYPE

最重要的是,该方法还将支持您的自定义产品类型,例如,如果我们创建名为“magease”的产品类型,则可以创建一个名为catalog_product_view_type_magease.xml文件来处理此类产品的特定布局

因此,让我们首先介绍一个特定产品的覆盖布局

为此,我们需要按照以下步骤操作:

  1. 在我们的主题范围内创建新的布局文件,布局文件的名称将是:catalog_product_view_id_number我们将它放在:
    theme_dir/Namespace_Module/layout/catalog_product_view_id_number.xml

    类似这样:

  2. 覆盖布局文件中我们需要的内容(删除块,添加新块等)。
  3. 清除Magento的缓存和重新加载页面。

我们更倾向于使用产品ID,但是如果产品ID不适合您,您还可以使用SKU来定位产品,在这种情况下,您的布局文件需要具有以下形式的名称:
catalog_product_view_sku_productsku.xml

现在让我们为特定产品类型创建独特的产品页面。您可能知道Magento默认情况下几乎没有不同的产品类型(捆绑,可配置,可下载等)。因此,如果我们希望为可下载产品提供不同的布局,我们需要使用相应的产品类型名称来定位该布局。

为了覆盖下载的产品,请遵循以下步骤:

  1. 在Magento主题中创建新的布局文件catalog_product_view_type_downloadable.xml

    theme_dir/Namespace_Module/layout/catalog_product_view_type_downloadable.xml

  2. 覆盖布局文件中我们需要的内容(删除块,添加新块等)。
  3. 清除Magento的缓存和重新加载页面。

对于其他类型的产品,可以遵循下面的命名原则:

catalog_product_view_type_simple.xml
catalog_product_view_type_configurable.xml
catalog_product_view_type_grouped.xml
catalog_product_view_type_bundle.xml
catalog_product_view_type_virtual.xml
catalog_product_view_type_downloadable.xml