第 5 章 - 动态模板

适配商店模板

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

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

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

  2. 在 website_sale_templates.xml 文件中应用所有更改。首先：

    • 添加横幅。

    • 调整左侧电商类别筛选的布局。

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

    • 移动面包屑导航。

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

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

../../../_images/airproof-shop-page.png

Tip

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

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

在 Airproof 示例的 presets.xml、shop page 部分的 website_sale_templates.xml 以及 shop.scss 中查找解决方案。

适配产品页面模板

客户对商店的修改非常满意。接下来，让我们将设计应用到产品页面。根据下面的 Airproof 设计，适配以下几个元素：

  • 移除搜索栏（如果上一个练习尚未完成）。

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

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

  • 在产品规格上方插入一个标题（仅当产品每个属性只有一个变体时，此区块才会出现）。

  • 为轮播图设计合适的布局。

  • 添加一个标题，并将先前创建的产品模板应用到 Alternative products 区块（需确保在后台的产品上分配了替代产品，该区块才会显示）。

  • 在产品详情下方实现一个新的拖放区，在所有产品上都可见。作为用例，使用网站构建器添加一个 Text-Image 构建块（例如：参见 Airproof 产品页截图中带“Six reasons to buy…”的部分）。

更多内容

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

../../../_images/airproof-product-page.png

Tip

  • 使用预设、XPath 和 SCSS 进行修改。请务必为代码添加适当的注释，以便日后查找。

  • 该拖放区将在所有产品上可见。要为每个产品创建专属拖放区，你需要在产品模型中添加一个新字段。

在 Airproof 示例的 presets.xml、product page 部分的 website_sale_templates.xml 以及 product_page.scss 中查找解决方案。