Chapter 5 - Dynamic templates

Adapt the shop template

Now, let's adapt the dynamic sections of the website. As you may know, some pages such as those for eCommerce are automatically generated. Pages like the shop, product, and checkout are automatically generated when the website_sale application is installed. These template pages pull their displayed information from the backend.

To modify these pages, we need to edit the standard Odoo template. This can be done using SCSS, presets, settings, and especially XPath. Locate the standard Odoo template you want to modify and extend it using XPath. Following the Airproof design, let's begin by modifying the shop view.

  • Add a banner.

  • Display the category title.

  • Adapt the filtering on the left.

  • Remove the search bar.

  • Adapt and move the breadcrumb.

  • Display only 3 products per row.

  • Create the appropriate design and information for the product cards.

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

Tip

To enable attribute/variant filtering, activate the Varian-varian produk option in the website backend settings and configure attributes and variants for the products.

To adapt the entire shop page, proceed step by step:

  1. Use the presets to set the shop options.

  2. Use the settings, in website.xml, to customise the layout of the product cards. You can find an overview of all the classes that can be used in products_design_panel.xml

  3. Locate the standard shop template in Odoo : website_sale ‣ templates.xml ‣ id="products". Use this as a base to make the significant changes you haven't been able to do yet with the previous 2 steps. Make these changes via XPaths that you place in a website_sale_templates.xml file.

  4. Refine your design with some SCSS.

As mentioned earlier, the modifications have been made through different methods:

  • Thanks to the Bootstrap variables in bootstrap_overridden.xml to adapt the appearance of the filtering checkboxes.

  • Thanks to the presets in presets.xml for the filtering options and the search bar.

  • Thanks to the settings in website.xml for a large part of the product card layout.

  • Thanks to the adaptation of the standard shop template in website_sale_templates.xml. You can find there the banner added, the display of the category title, the relocation of the breadcrumb, and the appearance of the Sort by button.

  • For better structure, we created a separate file product_tile_templates.xml to add the Discover more link on the product card.

  • Finally, thanks to the SCSS

    • We refine the hover effect on the product cards in product_card.scss.

    • In shop.scss you will find the modification of the breadcrumb's appearance combined with the modification of a Bootstrap variable ($breadcrumb-divider). As well as the continuation of the adaptation of the Sort by button.

Adapt the product page template

The client is thrilled with the shop modifications. Next, let's apply our design to the product pages. Based on the Airproof design below, adapt a few elements including:

  • Move the breadcrumb.

  • Design the appropriate layout for the product images carousel.

  • Remove the Quantity and Compare selector and the Terms and Conditions section.

  • Update the Add to cart button icon.

  • Adapt the Add to whishlist button.

  • Put the product specifications into an accordion. And add the "More information" item in this accordion.

  • Implement a new drop zone just below product details, visible on all products. As a use case, add an Text-Image building block using the Website Builder (e.g.: See Airproof product page screenshot with “Six reasons to buy…”).

  • Adapt the title, remove de text and apply the previously created product template to the Alternative products section (ensure alternative products are assigned on the product in the backend for this section to appear).

Lihat juga

See reference documentation on how to create a Drop zone.

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

Tip

  • Make your modifications using presets, XPath, and SCSS. Be sure to comment your code properly so you can find your way around.

  • Little tip for the "More information" item of the accordion, it's actually a hidden template that exists in the Odoo code, which you can find under the ID accordion_more_information.

  • In this case, the drop zone will be visible on all products. To create a specific drop zone per product, you need to add a new field to the product model.

Find the solution in our Airproof example on presets.xml, website_sale_templates.xml part Product page, website_sale_wishlist_templates.xml, and product_page.scss.