第 5 章 - 动态模板¶

调整店铺模板¶

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

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

添加横幅。

显示类别标题。

调整左侧的过滤。

删除搜索栏。

调整并移动面包屑。

每行仅显示 3 个产品。

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

小技巧

要启用属性/变体过滤，请激活网站后端设置中的产品变体选项和产品的 configure attributes and variants 。

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

使用**预设**设置商店选项。
使用 website.xml 中的**设置**来自定义产品卡的布局。您可以找到可在 products_design_panel.xml 中使用的所有类的概述
在 Odoo 中找到标准商店模板：website_sale ‣ templates.xml ‣ id=”products”。以此为基础来进行之前 2 个步骤中无法完成的重大更改。通过放置在 website_sale_templates.xml 文件中的 XPaths 进行这些更改。
使用一些 SCSS 完善您的设计。

Solutions

如前所述，修改是通过不同的方法进行的：

感谢 bootstrap_overridden.xml 中的 Bootstrap 变量来调整过滤复选框的外观。
感谢 presets.xml 中的过滤选项和搜索栏的预设。
感谢 website.xml 中对产品卡布局的很大一部分的设置。
感谢`website_sale_templates.xml <https://github.com/odoo/tutorials/blob/19.0/website_airproof/views/website_sale_templates.xml>`_中标准商店模板的改编。您可以在那里找到添加的横幅、类别标题的显示、面包屑的重新定位以及 Sort by 按钮的外观。
为了更好的结构，我们创建了一个单独的文件 product_tile_templates.xml 以在产品卡上添加 Discover more 链接。
最后感谢SCSS
- 我们在 product_card.scss 中改进了产品卡上的悬停效果。
- 在 shop.scss 中，您会发现面包屑外观的修改与 Bootstrap 变量 ($breadcrumb-divider) 的修改相结合。以及延续:guilabel:`Sort by`按钮的适配。

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

移动面包屑。
为产品图像轮播设计适当的布局。
删除 Quantity 和 Compare 选择器以及 Terms and Conditions 部分。
更新 Add to cart 按钮图标。
调整 Add to whishlist 按钮。
将产品规格放入手风琴中。并在此手风琴中添加“更多信息”项。
在产品详细信息下方实施一个新的放置区域，该区域在所有产品上都可见。作为一个用例，使用网站生成器添加 Text-Image 构建块（例如：请参阅 Airproof product page 屏幕截图以及“购买的六个理由…”）。
调整标题，删除文本并将之前创建的产品模板应用到 Alternative products 部分（确保在后端的产品上分配替代产品，以便显示此部分）。

其他资料

请参阅有关如何创建降落区的参考文档。

小技巧

使用预设、XPath 和 SCSS 进行修改。请务必正确注释您的代码，以便您可以找到解决办法。
关于手风琴的“更多信息”项的小提示，它实际上是 Odoo 代码中存在的隐藏模板，您可以在 ID accordion_more_information 下找到它。
在这种情况下，拖放区域将在所有产品上可见。要为每个产品创建特定的放置区域，您需要向产品模型添加新字段。

Solutions