[IMP] website, *: add 'image' header template

*: website_sale, website_sale_wishlist

Part of https://github.com/odoo/odoo/pull/56427
task-2264627

Co-authored-by: qsm-odoo <qsm@odoo.com>

5 files changed, 80 insertions, 0 deletions

diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml
index af1d1272ccb..b9e21640add 100644
--- a/addons/website/data/website_data.xml
+++ b/addons/website/data/website_data.xml
@@ -445,6 +445,14 @@
             <field name="url">/website/static/src/img/backgrounds/sails.jpg</field>
         </record>
 
+        <!-- Header default images (to be replaced by themes) -->
+        <record id="website.header_image_1_default_image" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">header_image_1_default_image.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/header_image_1_default_image.jpg</field>
+        </record>
+
         <!-- Snippets' Default Images (to be replaced by themes) -->
         <record id="website.s_cover_default_image" model="ir.attachment">
             <field name="public" eval="True"/>
diff --git a/addons/website/models/theme_models.py b/addons/website/models/theme_models.py
index 0ca529c2877..a55ef2c9e4e 100644
--- a/addons/website/models/theme_models.py
+++ b/addons/website/models/theme_models.py
@@ -192,6 +192,7 @@ class Theme(models.AbstractModel):
         self.disable_view('website.template_header_minimalist')
         self.disable_view('website.template_header_boxed')
         self.disable_view('website.template_header_centered_logo')
+        self.disable_view('website.template_header_image')
 
         # Reinitialize footer templates
         self.enable_view('website.footer_custom')
diff --git a/addons/website/static/src/img/snippets_demo/header_image_1_default_image.jpg b/addons/website/static/src/img/snippets_demo/header_image_1_default_image.jpg
new file mode 100644
index 00000000000..06a5d90dbf0
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/header_image_1_default_image.jpg
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 4e3d97afa1c..f09a8ec82e2 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -599,6 +599,9 @@
             <we-button data-name="header_centered_logo_opt"
                        data-customize-website-views="website.template_header_centered_logo"
                        data-customize-website-variable="'centered_logo'">Centered Logo</we-button>
+            <we-button data-name="header_image_opt"
+                       data-customize-website-views="website.template_header_image"
+                       data-customize-website-variable="'image'">Image</we-button>
         </we-select>
 
         <!-- Header Sidebar Template - Options -->
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 0504f19e884..f3d02bcd1b3 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -936,6 +936,74 @@
     </xpath>
 </template>
 
+<template id="template_header_image" inherit_id="website.layout" name="Template Header Image" active="False">
+    <xpath expr="//header//nav" position="replace">
+        <div class="oe_structure" id="oe_structure_header_image_1"/>
+        <nav class="navbar navbar-light navbar-expand-lg o_colored_level o_cc shadow-sm">
+            <div id="top_menu_container" class="container">
+                <!-- Brand -->
+                <t t-call="website.placeholder_header_brand"/>
+                <!-- Navbar Toggler -->
+                <t t-call="website.navbar_toggler"/>
+                <!-- Navbar Collapse -->
+                <div id="top_menu_collapse" class="collapse navbar-collapse">
+                    <t t-call="website.navbar_nav">
+                        <t t-set="_nav_class" t-value="'ml-3 flex-grow-1'"/>
+                        <!-- Menu -->
+                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-value="'nav-item'"/>
+                                <t t-set="link_class" t-value="'nav-link'"/>
+                            </t>
+                        </t>
+                        <!-- Sign In -->
+                        <t t-call="portal.placeholder_user_sign_in">
+                            <t t-set="_item_class" t-value="'nav-item ml-lg-auto'"/>
+                            <t t-set="_link_class" t-value="'nav-link'"/>
+                        </t>
+                        <!-- User Dropdown -->
+                        <t t-call="portal.user_dropdown">
+                            <t t-set="_icon" t-value="True"/>
+                            <t t-set="_user_name" t-value="True"/>
+                            <t t-set="_item_class" t-value="'nav-item dropdown ml-lg-auto'"/>
+                            <t t-set="_link_class" t-value="'nav-link'"/>
+                        </t>
+                        <!-- Button -->
+                        <li class="nav-item">
+                            <div class="oe_structure" id="oe_structure_header_image_2"/>
+                        </li>
+                    </t>
+                </div>
+            </div>
+        </nav>
+    </xpath>
+</template>
+
+<template id="template_header_image_oe_structure_header_image_1" inherit_id="website.template_header_image" name="Template Header image (oe_structure_header_image_1)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_image_1']" position="replace">
+        <div class="oe_structure" id="oe_structure_header_image_1">
+            <section class="s_cover oe_img_bg pt8 pb8" data-snippet="s_cover" data-name="Cover"
+                     style="background-image: url('/web/image/website.header_image_1_default_image');">
+                <div class="container s_allow_columns">
+                    <p class="mb-0"><br/></p>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_image_oe_structure_header_image_2" inherit_id="website.template_header_image" name="Template Header image (oe_structure_header_image_1)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_image_2']" position="replace">
+        <div class="oe_structure" id="oe_structure_header_image_2">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <a href="#" class="btn btn-primary mt-3 mt-lg-0 ml-lg-3">Button</a>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
 <!-- Navbar Hamburger Options -->
 <template id="option_header_off_canvas" inherit_id="website.navbar_nav" name="Off-Canvas Header" active="False">
     <xpath expr="//ul[@id='top_menu']" position="attributes">