第 5 章 - 动态模板¶
调整商店模板¶
现在，让我们调整网站的动态部分。如您所知，一些页面（例如电子商务页面）是自动生成的。当安装 website_sale 应用时，商店、产品和结账等页面会自动生成。这些模板页面从后端提取显示的信息。
要修改这些页面，我们需要编辑 Odoo 的标准模板。可以使用 SCSS、预设（preset）、设置，尤其是 XPath 来完成。找到要修改的 Odoo 标准模板，并使用 XPath 对其进行扩展。按照 Airproof 的设计稿，让我们从修改商城视图开始。
添加横幅。
显示类别标题。
调整左侧的筛选。
移除搜索栏。
调整并移动面包屑导航。
每行仅显示 3 个产品。
为产品卡片创建适当的设计和信息。
小技巧
要启用属性/变体筛选，请在网站后台设置中激活 产品变体 选项，并为产品 配置属性和变体。
要对整个商城页面进行适配，请按以下步骤逐步进行：
使用 预设 来设置商城选项。
使用
website.xml中的 设置 来自定义产品卡片的布局。有关所有可用类的概览，请参阅 products_design_panel.xml。在 Odoo 中定位标准商城模板：。以此为基础，完成前两步尚无法实现的重要更改。通过放置在
website_sale_templates.xml文件中的 XPath 来实现这些更改。使用一些 SCSS 来完善您的设计。
如前所述，这些修改通过多种方法实现：
借助 bootstrap_overridden.xml 中的 Bootstrap 变量，调整筛选复选框的外观。
借助 presets.xml 中的预设，配置筛选选项和搜索栏。
借助 website.xml 中的设置，实现产品卡片布局的大部分。
通过对 website_sale_templates.xml 中的标准商城模板进行调整实现。在其中您可以找到所添加的横幅、类别标题的显示、面包屑导航的重新定位，以及 排序 按钮的外观。
为了更清晰的结构，我们单独创建了 product_tile_templates.xml 文件，以在产品卡片上添加 发现更多 链接。
最后，借助 SCSS
我们在 product_card.scss 中完善了产品卡片上的悬停效果。
在 shop.scss 中，您会看到对面包屑导航外观的修改，其结合了对一个 Bootstrap 变量 ($breadcrumb-divider) 的修改。以及对 排序 按钮的后续调整。
调整产品页面模板¶
客户对商店的修改感到非常满意。接下来，让我们将我们的设计应用到产品页面。基于下面的 Airproof 设计，调整一些元素，包括：
移动面包屑导航。
为产品图片轮播设计适当的布局。
移除 数量 和 比较 选择器，以及
条款与条件部分。更新 加入购物车 按钮图标。
调整 添加至心愿单 按钮。
将产品规格放入折叠面板（accordion）中。并在此折叠面板中添加”More information”项。
在产品信息正下方实现一个新的拖放区域（drop zone），使其在所有产品上可见。作为一个用例，使用网站编辑器添加一个
Text-Image构建块 (例如：参见带有“Six reasons to buy…”的 Airproof 产品页面 截图)。调整标题，删除文本，并将之前创建的产品模板应用到
替代产品部分 (确保已在后台为产品分配了替代产品，该部分才会显示)。
另请参阅
请参阅关于如何创建 拖放区域 的参考文档。
小技巧
使用预设、XPath 和 SCSS 进行修改。确保正确注释您的代码，以便您能够理解。
关于折叠面板中 “More information” 项的小技巧：它实际上是 Odoo 代码中存在的一个隐藏模板，可在 ID
accordion_more_information下找到。在这种情况下，拖放区域将在所有产品上可见。要为每个产品创建专属的拖放区域，需要向产品模型添加一个新字段。
在我们的 Airproof 示例中，解决方案位于 presets.xml、website_sale_templates.xml 的 产品页面 部分、website_sale_wishlist_templates.xml 以及 product_page.scss。