[IMP] theme_bookstore: improve the theme

Revamp of `theme_bookstore`.

task-4109584

closes odoo/design-themes#862

Related: odoo/odoo#176503
Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>

theme_bookstore/__manifest__.py

@@ -20,6 +20,7 @@
         'views/snippets/s_call_to_action.xml',
         'views/snippets/s_cover.xml',
         'views/snippets/s_image_text.xml',
+        'views/snippets/s_showcase.xml',
         'views/snippets/s_masonry_block.xml',
         'views/snippets/s_banner.xml',
         'views/snippets/s_numbers.xml',
@@ -49,7 +50,7 @@
         'website.s_product_list_default_image_6': '/theme_bookstore/static/src/img/snippets/s_product_6.jpg',
     },
     'configurator_snippets': {
-        'homepage': ['s_cover', 's_masonry_block', 's_image_text', 's_picture', 's_product_list', 's_call_to_action'],
+        'homepage': ['s_banner', 's_masonry_block', 's_process_steps', 's_showcase', 's_title'],
     },
     'new_page_templates': {
         'about': {

theme_bookstore/models/theme_bookstore.py

@@ -5,5 +5,4 @@ class ThemeBookstore(models.AbstractModel):
     _inherit = 'theme.utils'
 
     def _theme_bookstore_post_copy(self, mod):
-        self.enable_view('website.template_header_sales_one')
+        self.enable_view('website.template_header_search')
-        self.enable_view('website.template_footer_links')

theme_bookstore/static/src/js/tour.js

@@ -5,8 +5,8 @@ import { _t } from "@web/core/l10n/translation";
 
 const snippets = [
     {
-        id: 's_cover',
+        id: 's_banner',
-        name: 'Cover',
+        name: 'Banner',
         groupName: "Intro",
     },
     {
@@ -15,29 +15,24 @@ const snippets = [
         groupName: "Images",
     },
     {
-        id: 's_image_text',
+        id: 's_process_steps',
-        name: 'Image - Text',
+        name: 'Steps',
         groupName: "Content",
     },
     {
-        id: 's_picture',
+        id: 's_showcase',
-        name: 'Title - Image',
+        name: 'Showcase',
-        groupName: "Images",
-    },
-    {
-        id: 's_product_list',
-        name: 'Items',
         groupName: "Content",
     },
     {
-        id: 's_call_to_action',
+        id: 's_title',
-        name: 'Call to Action',
+        name: 'Title',
-        groupName: "Content",
+        groupName: "Text",
     },
 ];
 
 wTourUtils.registerThemeHomepageTour("bookstore_tour", () => [
-    wTourUtils.assertCssVariable('--color-palettes-name', '"generic-8"'),
+    wTourUtils.assertCssVariable('--color-palettes-name', '"default-26"'),
     ...wTourUtils.dragNDrop(snippets[0]),
     ...wTourUtils.clickOnText(snippets[0], 'h1'),
     wTourUtils.goBackToBlocks(),
@@ -48,5 +43,4 @@ wTourUtils.registerThemeHomepageTour("bookstore_tour", () => [
     ...wTourUtils.clickOnSnippet(snippets[4]),
     wTourUtils.changeOption('ContainerWidth', 'we-button-group.o_we_user_value_widget', _t('width')),
     wTourUtils.goBackToBlocks(),
-    ...wTourUtils.dragNDrop(snippets[5]),
 ]);

theme_bookstore/static/src/scss/primary_variables.scss

@@ -51,6 +51,10 @@ $o-theme-font-configs: (
         'family': ('DM Serif Display', serif),
         'url': 'DM+Serif+Display:400,400i',
     ),
+    'Inter': (
+        'family': ('Inter', sans-serif),
+        'url': 'Inter:300,300i,,400,400i,700,700i',
+    ),
 );
 
 //------------------------------------------------------------------------------
@@ -59,20 +63,22 @@ $o-theme-font-configs: (
 
 $o-website-values-palettes: (
     (
-        'color-palettes-name': 'generic-8',
+        'color-palettes-name': 'default-26',
         'header-font-size': 1rem,
-        'btn-border-radius': 0px,
+        'btn-border-radius': 8px,
-        'btn-border-radius-sm': 0px,
+        'btn-border-radius-sm': 4px,
-        'btn-border-radius-lg': 0px,
+        'btn-border-radius-lg': 12px,
-        'font': 'Source Sans Pro',
+        'btn-padding-x': 16px,
+        'btn-padding-x-lg': 20px,
+        'btn-padding-y-lg': 12px,
+        'font': 'Inter',
         'headings-font': 'DM Serif Display',
-        'header-template': 'sales_one',
+        'header-template': 'search',
-        'footer-template': 'links',
         'link-underline': 'never',
     ),
 );
 
-$o-selected-color-palettes-names: append($o-selected-color-palettes-names, 'generic-8');
+$o-selected-color-palettes-names: append($o-selected-color-palettes-names, 'default-26');
 
 $o-color-palettes-compatibility-indexes: (
     1: 'bookstore-1',

theme_bookstore/views/snippets/s_banner.xml

@@ -6,10 +6,6 @@
     <xpath expr="//h1" position="replace" mode="inner">
         The best sellers <br/>of the year
     </xpath>
-    <!-- Button -->
-    <xpath expr="//a[hasclass('btn')]" position="replace" mode="inner">
-        Discover it <span class="fa fa-angle-right ms-2"/>
-    </xpath>
 </template>
 
 </odoo>

theme_bookstore/views/snippets/s_call_to_action.xml

@@ -24,15 +24,4 @@
     </xpath>
 </template>
 
-<template id="configurator_s_call_to_action" inherit_id="website.configurator_s_call_to_action">
-    <!-- Shape option -->
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/20","flip":["x","y"]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_20" style="background-image: url('/web_editor/shape/web_editor/Wavy/20.svg?c2=o-color-5&amp;flip=xy'); background-position: 50% 0%;"/>
-    </xpath>
-</template>
-
 </odoo>

theme_bookstore/views/snippets/s_cover.xml

@@ -4,7 +4,7 @@
 <template id="s_cover" inherit_id="website.s_cover">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="oe_img_bg o_full_screen_height" remove="parallax s_parallax_is_fixed bg-black-50" separator=" "/>
+        <attribute name="class" add="oe_img_bg o_full_screen_height o_cc1" remove="parallax s_parallax_is_fixed bg-black-50 o_cc4" separator=" "/>
         <attribute name="data-scroll-background-ratio">0</attribute>
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Floats/03","flip":[]}</attribute>
         <attribute name="style">background-image: url('/web/image/website.s_cover_default_image'); background-position: 50% 55%;</attribute>

theme_bookstore/views/snippets/s_cta_box.xml

@@ -20,7 +20,7 @@
     </xpath>
     <!-- Button -->
     <xpath expr="//a[hasclass('btn')]" position="replace">
-        <a t-att-href="cta_btn_href" class="btn btn-lg btn-primary"><span class="fa fa-shopping-cart"/> Shop Now</a>
+        <a t-att-href="cta_btn_href" class="btn btn-lg btn-secondary">Start Now<i class="fa fa-angle-right ms-2" role="img"/></a>
     </xpath>
 </template>
 

theme_bookstore/views/snippets/s_image_text.xml

@@ -6,11 +6,6 @@
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="o_cc o_cc2 pt112 pb112" remove="pt80 pb80" separator=" "/>
     </xpath>
-    <!-- Image -->
-    <xpath expr="//img" position="attributes">
-        <attribute name="style" add="padding: 32px !important;" separator=";"/>
-        <attribute name="src">/web_editor/shape/theme_bookstore/s_image_text.svg?c1=o-color-1</attribute>
-    </xpath>
     <!-- Title -->
     <xpath expr="//h2" position="replace" mode="inner">
         Once upon a time...
@@ -25,15 +20,4 @@
     </xpath>
 </template>
 
-<template id="configurator_s_image_text" inherit_id="website.configurator_s_image_text">
-    <!-- Shape option -->
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/20","flip":[]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_20"/>
-    </xpath>
-</template>
-
 </odoo>

theme_bookstore/views/snippets/s_masonry_block.xml

@@ -2,13 +2,15 @@
 <odoo>
 
 <template id="s_masonry_block_default_template" inherit_id="website.s_masonry_block_default_template">
+    <!-- Image -->
+    <xpath expr="//div[hasclass('col-lg-5')]" position="attributes">
+        <attribute name="class" add="rounded" remove="rounded-4" separator=" "/>
+    </xpath>
     <!-- Little block #1 -->
     <!-- Main div -->
     <xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Rainy/10","flip":[]}</attribute>
+        <attribute name="class" add="rounded" remove="rounded-4" separator=" "/>
-    </xpath>
+        <attribute name="style" remove="background-image: linear-gradient(135deg, var(--o-color-4) -400%, var(--o-color-2) 100%);" separator=" "/>
-    <xpath expr="//div[hasclass('col-lg-4')]/h3" position="before">
-        <div class="o_we_shape o_web_editor_Rainy_10"/>
     </xpath>
     <!-- Title -->
     <xpath expr="//div[hasclass('col-lg-4')]/h3" position="replace" mode="inner">
@@ -22,10 +24,8 @@
     <!-- Little block #2 -->
     <!-- Main div -->
     <xpath expr="//div[hasclass('col-lg-4')][2]" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/02","flip":[]}</attribute>
+        <attribute name="class" add="rounded" remove="rounded-4" separator=" "/>
-    </xpath>
+        <attribute name="style" remove="background-image: linear-gradient(135deg, var(--o-color-4) -400%, var(--o-color-1) 100%);" separator=" "/>
-    <xpath expr="//div[hasclass('col-lg-4')][2]/h3" position="before">
-        <div class="o_we_shape o_web_editor_Airy_02"/>
     </xpath>
     <!-- Title -->
     <xpath expr="//div[hasclass('col-lg-4')][2]/h3" position="replace" mode="inner">
@@ -39,10 +39,7 @@
     <!-- Little block #3 -->
     <!-- Main div -->
     <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Rainy/04","flip":[]}</attribute>
+        <attribute name="class" add="rounded" remove="rounded-4" separator=" "/>
-    </xpath>
-    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="before">
-        <div class="o_we_shape o_web_editor_Rainy_04"/>
     </xpath>
     <!-- Title -->
     <xpath expr="//div[hasclass('col-lg-3')]/h3" position="replace" mode="inner">
@@ -56,10 +53,7 @@
     <!-- Little block #4 -->
     <!-- Main div -->
     <xpath expr="//div[hasclass('col-lg-3')][2]" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/26","flip":[]}</attribute>
+        <attribute name="class" add="rounded" remove="rounded-4" separator=" "/>
-    </xpath>
-    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_26"/>
     </xpath>
     <!-- Title -->
     <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="replace" mode="inner">

theme_bookstore/views/snippets/s_showcase.xml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_showcase" inherit_id="website.s_showcase">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt80 pb80" remove="pt48 pb48" separator=" "/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//h3" position="replace" mode="inner">
+        We also sell prime quality second hand books
+    </xpath>
+    <!-- Lead -->
+    <xpath expr="//p[hasclass('lead')]" position="replace" mode="inner">
+        Prime quality second-hand books, carefully selected for value and charm. Timeless stories at great prices.
+    </xpath>
+    <!-- Features -->
+    <xpath expr="//h5" position="replace" mode="inner">
+        Timeless Reads
+    </xpath>
+    <xpath expr="//div[hasclass('col-12')][2]//p" position="replace" mode="inner">
+        Explore beloved stories from every era. Find cherished classics to enjoy again and again.
+    </xpath>
+    <xpath expr="(//h5)[2]" position="replace" mode="inner">
+        Affordable Classics
+    </xpath>
+    <xpath expr="//div[hasclass('col-12')][3]//p" position="replace" mode="inner">
+        Own literary masterpieces without breaking the bank. Your favorite classic books at budget-friendly prices.
+    </xpath>
+    <xpath expr="(//h5)[3]" position="replace" mode="inner">
+        Hidden Treasures
+    </xpath>
+    <xpath expr="//div[hasclass('col-12')][4]//p" position="replace" mode="inner">
+        Discover rare and unique books waiting to be found. Unearth hidden gems in our collection.
+    </xpath>
+    <!-- Image -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="src">/web/image/website.s_three_columns_default_image_1</attribute>
+    </xpath>
+</template>
+
+</odoo>

theme_bookstore/views/snippets/s_title.xml

@@ -4,12 +4,12 @@
 <template id="s_title" inherit_id="website.s_title">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt64 pb64 o_half_screen_height parallax s_parallax_is_fixed bg-black-50" remove="pt40 pb40" separator=" "/>
+        <attribute name="class" add="pt120 pb120 o_cc o_cc5" remove="pt40 pb40" separator=" "/>
-        <attribute name="data-scroll-background-ratio">1</attribute>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Airy/03_001','colors':{'c5':'o-color-1'},'flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0','animated':'true'}</attribute>
     </xpath>
+    <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 50%;"/>
+        <div class="o_we_shape o_web_editor_Airy_03_001 o_we_animated" style="background-image: url('/web_editor/shape/web_editor/Airy/03_001.svg?c5=o-color-1');"/>
-        <div class="o_we_bg_filter bg-black-50"/>
     </xpath>
     <!-- Title -->
     <xpath expr="//h2" position="replace" mode="inner">