第 5 章 - 动态模板

调整商店模板

现在，让我们调整网站的动态部分。如您所知，一些页面（例如电子商务页面）是自动生成的。当安装 website_sale 应用时，商店、产品和结账等页面会自动生成。这些模板页面从后端提取显示的信息。

要修改这些页面，我们需要编辑标准的 Odoo 模板。这可以使用 SCSS、预设，尤其是 XPath 来完成。找到您要修改的标准 Odoo 模板，并使用 XPath 扩展它。遵循 Airproof 设计，让我们从修改商店视图开始。

1. 首先，在 Odoo 中找到标准模板： website_sale ‣ templates.xml ‣ id=”products” 。

2. 在您的 website_sale_templates.xml 文件中应用所有更改。从以下开始：

   • 添加横幅。

   • 调整左侧的筛选。

   • 移除搜索栏（您可以同时从商店和产品页面移除它）。

   • 移动面包屑导航。

   • 隐藏列表或网格视图选项。

   • 每行仅显示 3 个产品。

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

小技巧

• 使用预设、XPath 和 SCSS 应用您的修改。

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

Solutions

在我们的 Airproof 示例中的 presets.xml 、 website.xml 、 website_sale_templates.xml 的 商店页面 部分以及 shop.scss 中找到解决方案。

调整产品页面模板

客户对商店的修改感到非常满意。接下来，让我们将我们的设计应用到产品页面。基于下面的 Airproof 设计，调整一些元素，包括：

• 移除搜索栏（如果之前的练习中未完成）。

• 移动面包屑导航。

• 移除数量选择器、条款和条件以及分享图标。

• 更新 加入购物车 按钮图标。

• 启用 “更多信息” 手风琴。

• 将产品规格（仅当产品每个属性只有一个变体时出现的部分）插入到包含 “更多信息” 部分的手风琴中。

• 为产品图片轮播设计适当的布局。

• 添加标题并将先前创建的产品模板应用到 替代产品 部分（确保在后端为产品分配了替代产品，以便此部分出现）。

• 在产品详情下方实现一个新的拖放区域，在所有产品上可见。作为一个用例，使用网站构建器添加一个 文本-图片 构建块（例如：参见带有 “六个购买理由…” 的 Airproof 产品页面截图）。

参见

请参阅关于如何创建 拖放区域 的参考文档。

小技巧

• 使用预设、XPath 和 SCSS 进行修改。确保正确注释您的代码，以便您能够理解。

• 拖放区域将在所有产品上可见。要为每个产品创建特定的拖放区域，您需要向产品模型添加一个新字段。

Solutions

在我们的 Airproof 示例中的 presets.xml 、 website_sale_templates.xml 的 产品页面 部分以及 product_page.scss 中找到解决方案。