第 5 章 - 动态模板¶

适配商店模板¶

现在，让我们来适配网站的各个动态部分。您可能知道，有些页面（例如电子商务相关页面）是自动生成的。安装 website_sale 应用后，商店、产品和结账等页面会自动生成。这些模板页面从后端获取所显示的信息。

要修改这些页面，我们需要编辑 Odoo 标准模板。这可以通过 SCSS、预设、设置，尤其是 XPath 来完成。找到要修改的 Odoo 标准模板，并使用 XPath 对其进行扩展。按照 Airproof 设计，让我们先从修改商店视图开始。

添加横幅。

显示分类标题。

适配左侧的筛选功能。

移除搜索栏。

适配并移动面包屑导航。

每行仅显示 3 个产品。

为产品卡片创建合适的设计和信息。

小技巧

要启用属性/变体筛选，请在网站后台设置中启用产品变体选项，并为产品配置属性和变体。

要适配整个商店页面，请逐步进行：

使用预设设置商店选项。
使用 website.xml 中的设置来自定义产品卡片的布局。您可以在 products_design_panel.xml 中找到所有可用类的概览
在 Odoo 中找到标准商店模板： website_sale ‣ templates.xml ‣ id=”products”。以此为基础，完成前 2 个步骤中尚未实现的重大修改。通过 XPaths 进行这些修改，并将其放在 website_sale_templates.xml 文件中。
使用 SCSS 进一步优化您的设计。

Solutions

如前所述，这些修改是通过不同方法完成的：

借助 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 设计，适配以下几个元素：

移动面包屑导航。
为产品图片轮播设计合适的布局。
移除数量和比较选择器以及 Terms and Conditions 部分。
更新加入购物车按钮图标。
适配添加到愿望清单按钮。
将产品规格放入折叠面板中。并在此折叠面板中添加“ 更多信息”项。
在产品详情正下方实现一个新的拖放区域，对所有产品可见。作为用例，使用网站构建器添加一个 Text-Image 构建块（例如：参见 Airproof 产品页面截图中显示的“ 购买它的六个理由……”）。
适配标题，删除文本，并将之前创建的产品模板应用到 Alternative products 部分（请确保在后端为产品分配了替代产品，该部分才会显示）。