Chapter 4 - Customisation, Part II¶

Create a custom background shape¶

Shapes are decorative elements that can be applied to backgrounds or images. They are SVG files that can be animated and customized with different colors.

To better align with the website's desired atmosphere, create a custom background shape that the client can reuse on different blocks.

Create your custom shape using the following setup:
- Declare your shape. You can find the original SVG shape here.
- Set the base color of the shape to the theme's green, and add it to the list of available shapes.

Lihat juga

See reference documentation on how to add a custom background shapes.

Tip

Be careful, there is a trick!
In your shape SVG file, you have to use the colors from the default Odoo palette.
Here, I want it to match my primary color 1 (#CEF8A1). Therefore, in the SVG file, you must
use color 3 from Odoo’s default palette (#3AADAA).

Solutions

Find the solution in our Airproof example for:

the shape declaration on shapes.xml.
adding the shape to the list thanks to primary_variable.scss and option.xml.

Based on the Airproof design, apply the shape you just added to a Text-Image building block on the homepage:
- Ensure the shape is in the right position.
- Set its color to the theme's light blue.

Lihat juga

See reference documentation on how to use background shapes.

Tip

Unlike a standard Odoo shapes, when applying a custom shape to a section, replace web_editor with illustration in the shape class.

Solutions

/website_airproof/data/pages/home.xml¶

<!-- Text-image block & Background shape -->
<section class="s_text_image o_cc o_cc3 o_colored_level pt120 pb96"
data-snippet="s_image_text" data-name="Image - Text" style="background-color: rgb(41, 128, 187);"
data-oe-shape-data="{'shape': 'illustration/airproof/waves', 'colors': {'c1': '#BBE1FA'}, 'flip': ['x']}">
   <div class="o_we_shape o_illustration_airproof_waves o_we_flip_x" style="background-image:
   url('/web_editor/shape/illustration%2Fairproof%2Fwaves.svg?c2=%23BBE1FA');
   background-position: 100% 100%;"/>
   [...]
</section>

Create a custom gradient¶

Next, let's add gradients to backgrounds. To enhance the page's dynamism, apply a gradient from blue rgb(11, 142, 230) to dark blue rgb(41, 128, 187) to your ”Latest products” block. But before that, add the gradient to the website builder so that the client can easily reuse it.

Lihat juga

See reference documentation on how to apply gradients and how to create custom gradients.

Solutions

Create and declare a gradients.xml file and add the custom gradient.

/website_airproof/__manifest__.py¶

'data': [
   # Gradients
  'data/gradients.xml',
]

/website_airproof/data/gradients.xml¶

<record id="colorpicker" model="ir.ui.view">
  <field name="key">website_airproof.colorpicker</field>
  <field name="name">Custom Gradients</field>
  <field name="type">qweb</field>
  <field name="inherit_id" ref="web_editor.colorpicker"/>
  <field name="arch" type="xml">
      <xpath expr="//div[@data-name='predefined_gradients']/t[@t-set='gradients']" position="after">
          <t t-set="gradients" t-value="gradients + ['linear-gradient(0deg, rgb(41, 128, 187) 0%,
          rgb(11, 142, 230) 100%)']"/>
      </xpath>
  </field>
</record>

Apply it to the ”Latest products” section.

/website_airproof/data/pages/home.xml¶

<!-- Latest products section -->
<section data-snippet="s_dynamic_snippet_products" class="s_dynamic_snippet_products s_dynamic
s_dynamic_empty pt32 pb32 o_colored_level s_product_product_airproof o_dynamic_snippet_empty o_cc o_cc5"
data-custom-template-data="{}" data-name="Produits" data-product-category-id="all"
data-show-variants="" data-number-of-records="16" data-filter-id="3" data-carousel-interval="5000"
data-template-key="website_airproof.dynamic_filter_template_product_product_airproof"
style="background-image: linear-gradient(0deg, rgb(41, 128, 187) 0%, rgb(11, 142, 230) 100%) !important;">
   [...]
</section>

Animations¶

The client loves the overall design but finds the page a bit static. Enhance page interactivity with animations such as fade-in, rotate, bounce, etc. These can be applied to columns, images, texts, buttons…

Based on the airproof design, animate the following elements:

the text of the first slide of the carousel.
the sticker and the photo of the drone from the first slide.
the 4 columns with icons.

Adjust animation delays for smoother transitions.

Lihat juga

See reference documentation on how to apply Animations.

Solutions

Find the solution in our Airproof example on home.xml.

Image animation¶

<img src="/web/image/website_airproof.img_sticker" class="img img-fluid position-absolute
x_sticker o_animate o_anim_rotate_in o_visible" style="animation-delay: 0.8s;
--wanim-intensity: 30;"/>

<img src="/web/image/website_airproof.img_drone" class="img img-fluid o_animate
o_anim_zoom_out o_visible" alt="Drone"/>

Text animation¶

<span class="o_animated_text o_animate o_anim_fade_in o_anim_from_bottom o_visible">One
step</span>

Columns animation¶

<div class="o_grid_item o_colored_level g-height-7 g-col-lg-3 col-lg-3 text-center
o_anim_fade_in o_animate o_anim_from_bottom o_visible" style="z-index: 2;
grid-area: 6 / 1 / 12 / 4; --wanim-intensity: 15;">
</div>

Forms¶

The forms in Odoo are very powerful. They can send emails directly to a personal inbox or integrate directly with other Odoo applications. This is great, as one of your client's main priorities is after-sales service. Therefore, the contact form must be properly configured.

Based on the airproof design, create a contact page. Remember to disable the default one and add the new page link to the menu. The client has the following requests for their contact form:

Name and email address field.
Company name field.
Conditional VAT field displayed only if Company name is filled in.
All fields should be mandatory, except for Company name.
Form submission must trigger an email.
After form submission, the thank-you message should remain visible on the contact page.

Lihat juga

See reference documentation on how to:

deactivate default pages,

create a new page,

add a menu item,

create a form.

Tip

To determine the correct code for your form:

Create a test page via the Website Builder.

Drag & drop the building block that interests you and apply the right design.

Use the code generated through Editor HTML/SCSS.
You can also find the original building block code in Odoo: odoo/addons/website/views/snippets/s_website_form.xml.

Solutions

Find the solution in our Airproof example on contact.xml.

Create a page template¶

You don't have the time to create all the service pages for the client. No worries! Create a template page that the client can use to build their own service pages.

This page should be composed as follows:

a Parallax building block,
a Key benefits building block with the title replaced by "Discover our service",
a Call to action building block,
your custom carousel snippet.

Lihat juga

See reference documentation on how to create page templates.

Solutions

Create your new_page_template_templates.xml file and discover its content in our Airproof example.

Don't forget to declare your file in the __manifest__.py file and define what the template page contains.

/website_airproof/__manifest__.py¶

'data': [
   # ...
   'views/new_page_template_templates.xml',
],
'assets': {
   # ...
},
'new_page_templates': {
   'airproof': {
      'services': ['s_parallax', 's_airproof_key_benefits_h2', 's_call_to_action',
      's_airproof_carousel']
   }
},

Edit on GitHub