系统学习magento二次开发,推荐小册:《Magento中文全栈二次开发 》
本小册面向Magento2以上版本,书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发,后端开发,magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。
在 Magento 2 中,产品布局指的是产品页面的布局和结构。产品布局可以通过在主题或模块中创建新布局文件来自定义。下面是一些 Magento 2 创建产品布局的基本概念和代码示例:
定义产品布局文件
首先,需要在主题或模块中创建一个新的布局文件,以指定产品页面的布局和结构。布局文件通常保存在 app/design/frontend/MyVendor/mytheme/Magento_Catalog/layout/ 目录下,并使用 .xml 文件扩展名。布局文件的名称通常基于其作用,例如 catalog_product_view.xml 用于定义产品页面的布局。
指定产品页面布局
在产品布局文件中,可以使用 <referenceBlock> 标记来指定页面上的块和其他元素。<referenceBlock> 标记可以使用多种属性来指定块的名称、模板、类和其他选项。下面是一个简单的 Magento 2 产品页面布局的代码示例:
<!-- File: app/design/frontend/MyVendor/mytheme/Magento_Catalog/layout/catalog_product_view.xml --> <referenceBlock name="product.info.price"> <arguments> <argument name="template" xsi:type="string">Magento_Catalog::product/price.phtml</argument> </arguments> </referenceBlock> <referenceBlock name="product.info.media.image"> <arguments> <argument name="template" xsi:type="string">Magento_Catalog::product/view/gallery.phtml</argument> </arguments> </referenceBlock> <referenceContainer name="product.info.main"> <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info"> <arguments> <argument name="at_call" xsi:type="string">getDescription</argument> <argument name="at_code" xsi:type="string">description</argument> <argument name="css_class" xsi:type="string">description</argument> <argument name="at_label" xsi:type="string">none</argument> <argument name="title" translate="true" xsi:type="string">Description</argument> </arguments> </block> </referenceContainer>
在上述代码中,使用 <referenceBlock> 标记来指定产品页面上的块。在第一个 <referenceBlock> 元素中,将 product.info.price 块的模板更改为 Magento_Catalog::product/price.phtml。在第二个 <referenceBlock> 元素中,将 product.info.media.image 块的模板更改为 Magento_Catalog::product/view/gallery.phtml。在 <referenceContainer> 元素中,定义了一个名为 product.info.description 的产品描述块。
引用产品布局文件
最后,需要将产品布局文件引用到主题或模块的布局文件中。可以使用 <update> 标记来引用其他布局文件,并将它们的内容合并到当前布局文件中。