[IMP] website, *: add 'boxed' 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>

7 files changed, 121 insertions, 3 deletions

diff --git a/addons/website/models/theme_models.py b/addons/website/models/theme_models.py
index 76ce5c4c68a..eddbff95495 100644
--- a/addons/website/models/theme_models.py
+++ b/addons/website/models/theme_models.py
@@ -190,6 +190,7 @@ class Theme(models.AbstractModel):
         self.disable_view('website.template_header_slogan')
         self.disable_view('website.template_header_contact')
         self.disable_view('website.template_header_minimalist')
+        self.disable_view('website.template_header_boxed')
 
         # Reinitialize footer templates
         self.enable_view('website.footer_custom')
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index be6fa5fd575..d7ef22b4da0 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -6,6 +6,7 @@
 $o-base-color-palette: map-merge($o-base-color-palette, (
     'body': $o-portal-default-body-bg,
     'menu': 1, // o_cc1
+    'header-boxed': '200',
     'footer': 5, // o_cc5
     'copyright': 'black-15',
 ));
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index b818c72abd8..ad1769d0a19 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -691,6 +691,10 @@ $-transition-duration: 200ms;
         transition: transform $-transition-duration;
     }
 
+    @if o-website-value('header-template') == 'boxed' {
+        background: transparent;
+    }
+
     &.o_header_is_scrolled {
         .navbar-brand {
             font-size: $o-theme-navbar-fixed-logo-height / $line-height-base;
@@ -985,6 +989,10 @@ header {
             top: $o-navbar-height;
         }
     }
+} @else if o-website-value('header-template') == 'boxed' {
+    #wrapwrap:not(.o_header_overlay) .o_header_boxed_background {
+        @include o-apply-colors('header-boxed');
+    }
 }
 
 // Mega menu
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 82c32f3a98a..6da3eec19d8 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -529,9 +529,13 @@
          data-no-check="true"
          groups="website.group_website_designer">
         <we-checkbox string="Sign In" data-customize-website-views="portal.user_sign_in" data-reload="/"/>
-        <we-colorpicker string="Colors"
-                        data-customize-website-color="" data-color="menu"
-                        data-with-combinations="true"/>
+        <we-row string="Colors">
+            <we-colorpicker data-customize-website-color="" data-color="menu"
+                            data-with-combinations="true"/>
+            <we-colorpicker data-dependencies="header_boxed_opt"
+                            data-customize-website-color="" data-color="header-boxed"
+                            data-with-combinations="true"/>
+        </we-row>
         <we-checkbox id="option_header_shadow" string="Shadow"
                      data-customize-website-views="website.header_shadow"
                      data-select-class="shadow"
@@ -589,6 +593,9 @@
             <we-button data-name="header_minimalist_opt"
                        data-customize-website-views="website.template_header_minimalist"
                        data-customize-website-variable="'minimalist'">Minimalist</we-button>
+            <we-button data-name="header_boxed_opt"
+                       data-customize-website-views="website.template_header_boxed"
+                       data-customize-website-variable="'boxed'">Boxed</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 419bb70bff9..1f49ce3cdee 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -814,6 +814,87 @@
     </xpath>
 </template>
 
+<template id="template_header_boxed" inherit_id="website.layout" name="Template Header Boxed" active="False">
+    <xpath expr="//header//nav" position="replace">
+        <div class="o_header_boxed_background o_colored_level o_cc pt8 pb8">
+            <div class="container d-flex align-items-center pb-4">
+                <!-- Social Icons -->
+                <div class="flex-grow-1">
+                    <div class="oe_structure" id="oe_structure_header_boxed_1"/>
+                </div>
+                <ul class="nav ml-auto" contenteditable="false">
+                    <!-- Sign In -->
+                    <t t-call="portal.placeholder_user_sign_in">
+                        <t t-set="_item_class" t-value="'nav-item ml-lg-3'"/>
+                        <t t-set="_link_class" t-value="'nav-link font-weight-bold'"/>
+                    </t>
+                    <!-- User Dropdown -->
+                    <t t-call="portal.user_dropdown">
+                        <t t-set="_avatar" t-value="true"/>
+                        <t t-set="_item_class" t-value="'nav-item dropdown ml-lg-3'"/>
+                        <t t-set="_link_class" t-value="'nav-link'"/>
+                        <t t-set="_dropdown_menu_class" t-value="'dropdown-menu-right'"/>
+                    </t>
+                </ul>
+            </div>
+        </div>
+        <div id="top_menu_container" class="container mt-n4">
+            <nav class="navbar navbar-light navbar-expand-md o_colored_level o_cc shadow-sm rounded pr-2">
+                <!-- Brand -->
+                <t t-call="website.placeholder_header_brand"/>
+                <!-- Navbar Collapse -->
+                <div id="top_menu_collapse" class="collapse navbar-collapse">
+                    <t t-call="website.navbar_nav">
+                        <t t-set="_nav_class" t-value="'mx-auto'"/>
+                        <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>
+                    </t>
+                    <!-- Button -->
+                    <div class="oe_structure" id="oe_structure_header_boxed_2"/>
+                </div>
+            </nav>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_boxed_oe_structure_header_boxed_1" inherit_id="website.template_header_boxed" name="Template Header Boxed (oe_structure_header_boxed_1)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_boxed_1']" position="replace">
+        <div class="oe_structure" id="oe_structure_header_boxed_1">
+            <section class="s_text_block" data-snippet="s_text_block" name="Text">
+                <div class="container">
+                    <div class="s_share text-left" data-name="Social Media">
+                        <a href="/website/social/facebook" class="s_share_facebook" target="_blank">
+                            <i class="fa fa-fw fa-1x fa-facebook"/>
+                        </a>
+                        <a href="/website/social/twitter" class="s_share_twitter" target="_blank">
+                            <i class="fa fa-fw fa-1x fa-twitter"/>
+                        </a>
+                        <a href="/website/social/instagram" class="s_share_linkedin" target="_blank">
+                            <i class="fa fa-fw fa-1x fa-instagram"/>
+                        </a>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_boxed_oe_structure_header_boxed_2" inherit_id="website.template_header_boxed" name="Template Header Boxed (oe_structure_header_boxed_2)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_boxed_2']" position="replace">
+        <div class="oe_structure" id="oe_structure_header_boxed_2">
+            <section class="s_text_block" data-snippet="s_text_block" name="Text">
+                <div class="container">
+                    <a href="#" class="btn btn-primary">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">
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index b415291d1c1..ee715bcd63f 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -163,6 +163,16 @@
         </xpath>
     </template>
 
+    <template id="template_header_boxed" inherit_id="website.template_header_boxed">
+        <xpath expr="//t[@t-call='portal.placeholder_user_sign_in']" position="before">
+            <t t-call="website_sale.header_cart_link">
+                <t t-set="_text" t-value="True"/>
+                <t t-set="_item_class" t-value="'nav-item'"/>
+                <t t-set="_link_class" t-value="'nav-link'"/>
+            </t>
+        </xpath>
+    </template>
+
     <!-- Products Search Bar input-group template -->
     <template id="website_sale_products_search_box" inherit_id="website.website_search_box" primary="True">
         <xpath expr="//input[@name='search']" position="attributes">
diff --git a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
index 1a1907f2a14..45d9a31d386 100644
--- a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
+++ b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
@@ -122,6 +122,16 @@
         </xpath>
     </template>
 
+    <template id="template_header_boxed" inherit_id="website_sale.template_header_boxed">
+        <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="after">
+            <t t-call="website_sale_wishlist.header_wishlist_link">
+                <t t-set="_text" t-value="True"/>
+                <t t-set="_item_class" t-value="'nav-item ml-lg-3'"/>
+                <t t-set="_link_class" t-value="'nav-link'"/>
+            </t>
+        </xpath>
+    </template>
+
     <template id="product_wishlist" name="Wishlist Page">
         <t t-call="website.layout">
             <t t-set="additional_title">Shop Wishlist</t>