[IMP] theme_bookstore: theme improvement

Revamp of `theme_bookstore`

task-4178030

theme_bookstore/__manifest__.py

@@ -58,25 +58,27 @@
         'views/snippets/s_shape_image.xml',
         'views/snippets/s_images_constellation.xml',
         'views/snippets/s_text_cover.xml',
+        'views/snippets/s_accordion.xml',
+        'views/snippets/s_accordion_image.xml',
         'views/new_page_template.xml',
     ],
     'images': [
         'static/description/bookstore_description.jpg',
         'static/description/bookstore_screenshot.jpg',
     ],
     'images_preview_theme': {
-        'website.s_cover_default_image': '/theme_bookstore/static/src/img/snippets/s_cover.jpg',
-        'website.s_masonry_block_default_image_1': '/theme_bookstore/static/src/img/snippets/s_masonry_block.jpg',
-        'website.s_picture_default_image': '/theme_bookstore/static/src/img/snippets/s_picture.jpg',
         'website.s_product_list_default_image_1': '/theme_bookstore/static/src/img/snippets/s_product_1.jpg',
-        'website.s_product_list_default_image_2': '/theme_bookstore/static/src/img/snippets/s_product_2.jpg',
-        'website.s_product_list_default_image_3': '/theme_bookstore/static/src/img/snippets/s_product_3.jpg',
-        'website.s_product_list_default_image_4': '/theme_bookstore/static/src/img/snippets/s_product_4.jpg',
-        'website.s_product_list_default_image_5': '/theme_bookstore/static/src/img/snippets/s_product_5.jpg',
-        'website.s_product_list_default_image_6': '/theme_bookstore/static/src/img/snippets/s_product_6.jpg',
+        'website.s_banner_default_image_3': '/theme_bookstore/static/src/img/snippets/s_banner_3.jpg',
+        'website.s_image_text_default_image': '/theme_bookstore/static/src/img/snippets/s_image_text.jpg',
+        'website.library_image_02': '/theme_bookstore/static/src/img/snippets/library_image_02.jpg',
+        'website.s_cover_default_image': '/theme_bookstore/static/src/img/snippets/s_cover.jpg',
+        'website.s_media_list_default_image_1': '/theme_bookstore/static/src/img/snippets/s_media_list_1.jpg',
+        'website.s_image_text_default_image': '/theme_bookstore/static/src/img/snippets/s_image_text.jpg',
+        'website.s_media_list_default_image_2': '/theme_bookstore/static/src/img/snippets/s_media_list_2.jpg',
+        'website.s_text_image_default_image': '/theme_bookstore/static/src/img/snippets/s_text_image.jpg',
     },
     'configurator_snippets': {
-        'homepage': ['s_banner', 's_masonry_block', 's_process_steps', 's_showcase', 's_title'],
+        'homepage': ['s_banner', 's_key_images', 's_title', 's_accordion_image', 's_cta_box'],
     },
     'new_page_templates': {
         'about': {

theme_bookstore/static/src/js/tour.js

@@ -10,24 +10,24 @@ const snippets = [
         groupName: "Intro",
     },
     {
-        id: 's_masonry_block',
-        name: 'Masonry',
-        groupName: "Images",
+        id: 's_key_images',
+        name: 'Key Images',
+        groupName: "Columns",
     },
     {
-        id: 's_process_steps',
-        name: 'Steps',
-        groupName: "Content",
+        id: 's_title',
+        name: 'Title',
+        groupName: "Text",
     },
     {
-        id: 's_showcase',
-        name: 'Showcase',
+        id: 's_accordion_image',
+        name: 'Accordion Image',
         groupName: "Content",
     },
     {
-        id: 's_title',
-        name: 'Title',
-        groupName: "Text",
+        id: 's_cta_box',
+        name: 'CTA Box',
+        groupName: "Content",
     },
 ];
 

theme_bookstore/static/src/scss/primary_variables.scss

@@ -2,10 +2,6 @@
 // Fonts
 //------------------------------------------------------------------------------
 
-$o-theme-h1-font-size-multiplier: (62 / 16);
-$o-theme-h2-font-size-multiplier: (48 / 16);
-$o-theme-h5-font-size-multiplier: 1;
-
 $o-theme-font-configs: (
     'Heebo': (
         'family': ('Heebo', sans-serif),

theme_bookstore/views/images.xml

@@ -274,7 +274,7 @@ Check in theme_loftspace's primary_variables.scss and theme.scss -->
 <record id="s_accordion_image_default_image" model="theme.ir.attachment">
     <field name="key">website.s_accordion_image_default_image</field>
     <field name="name">website.s_accordion_image_default_image</field>
-    <field name="url">/theme_bookstore/static/src/img/snippets/s_banner_2.jpg</field>
+    <field name="url">/theme_bookstore/static/src/img/snippets/s_accordion_image.jpg</field>
 </record>
 <record id="s_image_title_default_image" model="theme.ir.attachment">
     <field name="key">website.s_image_title_default_image</field>
@@ -414,4 +414,11 @@ Check in theme_loftspace's primary_variables.scss and theme.scss -->
     <field name="url">/theme_bookstore/static/src/img/snippets/s_empowerment_default_image.jpg</field>
 </record>
 
+<!-- Text Cover -->
+<record id="s_text_cover_default_image" model="theme.ir.attachment">
+    <field name="key">website.s_text_cover_default_image</field>
+    <field name="name">website.s_text_cover_default_image</field>
+    <field name="url">/theme_bookstore/static/src/img/snippets/s_text_cover.jpg</field>
+</record>
+
 </odoo>

theme_bookstore/views/snippets/s_accordion.xml

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_accordion" inherit_id="website.s_accordion">
+    <!-- Accordion -->
+    <xpath expr="//div[contains(@t-attf-class, 'accordion')]/div" position="attributes">
+        <attribute name="t-attf-class" add="s_accordion_highlight" separator=" "/>
+    </xpath>
+    <!-- Question 1 -->
+    <xpath expr="(//div[hasclass('accordion-item')])[1]//span" position="replace" mode="inner">
+        What is your return policy?
+    </xpath>
+    <xpath expr="(//div[hasclass('accordion-item')])[1]//p" position="replace" mode="inner">
+        We accept returns within 30 days of purchase, provided the book is in its original condition and accompanied by the receipt. Refunds will be issued in the original form of payment. Please note that certain items, like discounted or final sale items, may not be eligible for return.
+    </xpath>
+    <!-- Question 2 -->
+    <xpath expr="(//div[hasclass('accordion-item')])[1]//span" position="replace" mode="inner">
+        Do you offer gift cards?
+    </xpath>
+    <xpath expr="(//div[hasclass('accordion-item')])[1]//p" position="replace" mode="inner">
+        Yes, we offer both physical and digital gift cards in various amounts. Physical gift cards can be purchased in-store or online and shipped to the recipient, while digital gift cards are sent instantly via email. Both types can be used for online and in-store purchases.
+    </xpath>
+    <!-- Question 3 -->
+    <xpath expr="(//div[hasclass('accordion-item')])[1]//span" position="replace" mode="inner">
+        Can I request a book that's out of stock?
+    </xpath>
+    <xpath expr="(//div[hasclass('accordion-item')])[1]//p" position="replace" mode="inner">
+        Absolutely! If a book is out of stock, you can place a special order through our website or by visiting the store. We'll notify you once the book is back in stock, and you can choose to pick it up in-store or have it shipped to your address. Special orders typically take 1-2 weeks to fulfill, depending on availability.
+    </xpath>
+</template>
+
+</odoo>

theme_bookstore/views/snippets/s_accordion_image.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_accordion_image" inherit_id="website.s_accordion_image">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" remove="o_cc2 pt56 pb56" add="o_cc1 pt80 pb80" separator=" "/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//h2" position="replace" mode="inner">
+        Frequently Asked Questions
+    </xpath>
+    <!-- Paragraph -->
+    <xpath expr="//p[hasclass('lead')]" position="replace" mode="inner">
+        Find quick answers to common questions about our books, services, and policies.
+    </xpath>
+</template>
+
+</odoo>

theme_bookstore/views/snippets/s_banner.xml

@@ -2,9 +2,33 @@
 <odoo>
 
 <template id="s_banner" inherit_id="website.s_banner">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" remove="pb96" add="pb128" separator=" "/>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/14_001', 'colors':{'c3':'o-color-3','c4':'o-color-4'}, 'flip':[]}</attribute>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Origins_14_001" style="background-image: url('/web_editor/shape/web_editor/Origins/14_001.svg?c3=o-color-3&amp;c4=o-color-4')"/>
+    </xpath>
     <!-- Title -->
     <xpath expr="//h1" position="replace" mode="inner">
-        The best sellers <br/>of the year
+        Adventure awaits at the Bookstore
+    </xpath>
+    <!-- Text -->
+    <xpath expr="//p[hasclass('lead')]" position="replace" mode="inner">
+        Discover an extensive collection of books, from bestsellers to hidden gems, curated to ignite your imagination and inspire reading.
+    </xpath>
+    <!-- Button -->
+    <xpath expr="//a" position="replace" mode="inner">
+        Come Visit Us <i class="fa fa-angle-right"/>
+    </xpath>
+    <!-- Blockquote -->
+    <xpath expr="//blockquote/p" position="replace" mode="inner">
+        "I've never found a bookstore with such variety and charm. Every visit feels like uncovering a hidden treasure!"
+    </xpath>
+    <xpath expr="//blockquote//span/span" position="replace" mode="inner">
+        Sci-fi Enthusiast
     </xpath>
 </template>
 

theme_bookstore/views/snippets/s_call_to_action.xml

@@ -4,7 +4,7 @@
 <template id="s_call_to_action" inherit_id="website.s_call_to_action">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc1 pt128 pb32" remove="o_cc5 pt64 pb64" separator=" "/>
+        <attribute name="class" add="o_cc4 pt128 pb128" remove="o_cc5 pt64 pb64" separator=" "/>
     </xpath>
     <!-- Paragraph #1 -->
     <xpath expr="//div[hasclass('col-lg-9')]" position="replace">

theme_bookstore/views/snippets/s_comparisons.xml

@@ -2,24 +2,18 @@
 <odoo>
 
 <template id="s_comparisons" inherit_id="website.s_comparisons">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc5" separator=" "/>
+    </xpath>
     <!-- Left card -->
     <xpath expr="//div[hasclass('row')]//div" position="attributes">
         <attribute name="class" add="pt16" separator=" "/>
     </xpath>
-    <xpath expr="//*[hasclass('card')]" position="attributes">
-        <attribute name="class" add="o_cc2" remove="o_cc1" separator=" "/>
-    </xpath>
-    <!-- Center card -->
-    <xpath expr="(//*[hasclass('card')])[2]" position="attributes">
-        <attribute name="class" add="o_cc4" remove="o_cc1" separator=" "/>
-    </xpath>
     <!-- Right card -->
     <xpath expr="//div[hasclass('row')]//div[3]" position="attributes">
         <attribute name="class" add="pt16" separator=" "/>
     </xpath>
-    <xpath expr="(//*[hasclass('card')])[3]" position="attributes">
-        <attribute name="class" add="o_cc2" remove="o_cc1" separator=" "/>
-    </xpath>
 </template>
 
 </odoo>

theme_bookstore/views/snippets/s_cover.xml

@@ -4,18 +4,14 @@
 <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 o_cc1" remove="parallax s_parallax_is_fixed bg-black-50 o_cc5" separator=" "/>
+        <attribute name="class" add="oe_img_bg o_full_screen_height" remove="parallax s_parallax_is_fixed bg-black-50" separator=" "/>
         <attribute name="data-scroll-background-ratio">0</attribute>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Floats/03","flip":[]}</attribute>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/09_001', 'colors':{'c3':'o-color-1'}}</attribute>
         <attribute name="style">background-image: url('/web/image/website.s_cover_default_image'); background-position: 50% 55%;</attribute>
     </xpath>
-    <!-- Filter -->
-    <xpath expr="//div[hasclass('o_we_bg_filter')]" position="replace">
-        <div class="o_we_bg_filter bg-white-75"/>
-    </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Floats_03"/>
+        <div class="o_we_shape o_web_editor_Origins_09_001" style="background-image: url('/web_editor/shape/web_editor/Origins/09_001.svg?c3=o-color-1');"/>
     </xpath>
     <!-- Disable Parallax -->
     <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>

theme_bookstore/views/snippets/s_cta_box.xml

@@ -2,13 +2,14 @@
 <odoo>
 
 <template id="s_cta_box" inherit_id="website.s_cta_box">
-   <!-- Section -->
-   <xpath expr="//section" position="attributes">
-      <attribute name="class" add="o_cc o_cc4" separator=" "/>
-   </xpath>
-    <!-- Card -->
-    <xpath expr="//div[hasclass('card')]" position="attributes">
-        <attribute name="class" add="o_cc3" remove="o_cc4" separator=" "/>
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" remove="pt80 pb80" add="o_colored_level o_cc o_cc2 pt48 pb48" separator=" "/>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/04_001', 'colors':{'c3':'o-color-4'}}</attribute>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Origins_04_001" style="background-image: url('/web_editor/shape/web_editor/Origins/04_001.svg?c3=o-color-4');"/>
     </xpath>
     <!-- Title -->
     <xpath expr="//h2" position="replace">

theme_bookstore/views/snippets/s_features_wall.xml

@@ -2,27 +2,51 @@
 <odoo>
 
 <template id="s_features_wall" inherit_id="website.s_features_wall">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt96 pb96" remove="pt56 pb56" separator=" "/>
+        <attribute name="data-oe-shape-data"/>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('o_we_shape')]" position="replace"/>
+    <!-- Title -->
+    <xpath expr="//h2" position="replace" mode="inner">
+        Our other services
+    </xpath>
+    <!-- Lead -->
+    <xpath expr="//p[hasclass('lead')]" position="replace" mode="inner">
+        We also offer these additional services, always with the same passion and care that defines everything we do.
+    </xpath>
     <!-- Card 1 -->
     <xpath expr="//div[hasclass('g-col-lg-3')]//h3" position="replace" mode="inner">
         Curated Book Selections
     </xpath>
     <xpath expr="//div[hasclass('g-col-lg-3')]//p" position="replace" mode="inner">
         Discover a handpicked collection of books across genres, featuring bestsellers, classics, and hidden gems for every reader.
     </xpath>
+    <xpath expr="(//img)[1]" position="attributes">
+        <attribute name="class" add="rounded" separator=" "/>
+    </xpath>
     <!-- Card 2 -->
     <xpath expr="//div[hasclass('g-col-lg-3')][4]//h3" position="replace" mode="inner">
         Cozy Reading Nooks
     </xpath>
     <xpath expr="//div[hasclass('g-col-lg-3')][4]//p" position="replace" mode="inner">
         Enjoy a relaxing atmosphere with comfortable seating and quiet spaces perfect for browsing and reading your new favorites.
     </xpath>
+    <xpath expr="(//img)[2]" position="attributes">
+        <attribute name="class" add="rounded" separator=" "/>
+    </xpath>
     <!-- Card 3 -->
     <xpath expr="//div[hasclass('g-col-lg-3')][6]//h3" position="replace" mode="inner">
         Literary Events and Signings
     </xpath>
     <xpath expr="//div[hasclass('g-col-lg-3')][6]//p" position="replace" mode="inner">
         Attend author events, book signings, and literary discussions that connect you with the vibrant world of books and writers.
     </xpath>
+    <xpath expr="(//img)[3]" position="attributes">
+        <attribute name="class" add="rounded" separator=" "/>
+    </xpath>
 </template>
 
 </odoo>

theme_bookstore/views/snippets/s_key_images.xml

@@ -2,23 +2,30 @@
 <odoo>
 
 <template id="s_key_images" inherit_id="website.s_key_images">
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc2" separator=" "/>
+    </xpath>
     <xpath expr="//h2" position="replace" mode="inner">
-        Discover a World of Stories
+        Our bestsellers of the moment
     </xpath>
     <xpath expr="//p[hasclass('lead')]" position="replace" mode="inner">
-        Find Your Next Favorite Book Here
+        Finely hand-picked by our most avid readers
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-3')]//p[3]" position="replace" mode="inner">
-        Explore a wide range of genres for every reader
+    <xpath expr="//div[hasclass('col-lg-3')]//p[3]" position="replace">
+        <h5>Boundless</h5>
+        <p class="text-muted">by <em>Frantzou Fleurine</em></p>
     </xpath>
-    <xpath expr="(//div[hasclass('col-lg-3')])[2]//p[3]" position="replace" mode="inner">
-        From bestsellers to hidden gems, we've got it all
+    <xpath expr="(//div[hasclass('col-lg-3')])[2]//p[3]" position="replace">
+        <h5>Romans</h5>
+        <p class="text-muted">by <em>Steve Backwood</em></p>
     </xpath>
-    <xpath expr="(//div[hasclass('col-lg-3')])[3]//p[3]" position="replace" mode="inner">
-        Cozy up with a book from our carefully curated selection
+    <xpath expr="(//div[hasclass('col-lg-3')])[3]//p[3]" position="replace">
+        <h5>101 Essays That Will Change the Way You Think</h5>
+        <p class="text-muted">by <em>Brianna Wiest</em></p>
     </xpath>
-    <xpath expr="(//div[hasclass('col-lg-3')])[4]//p[3]" position="replace" mode="inner">
-        Join our community of book lovers
+    <xpath expr="(//div[hasclass('col-lg-3')])[4]//p[3]" position="replace">
+        <h5>What I Didn't Post On Instagram</h5>
+        <p class="text-muted">by <em>Christy Stockton</em></p>
     </xpath>
 </template>
 

theme_bookstore/views/snippets/s_media_list.xml

@@ -5,11 +5,11 @@
     <!-- Section -->
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="o_cc5" remove="o_cc2" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/10","flip":[]}</attribute>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Bold/05', 'colors':{'c5':'o-color-1'}}</attribute>
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_10"/>
+        <div class="o_we_shape o_web_editor_Bold_05" style="background-image: url('/web_editor/shape/web_editor/Bold/05.svg?c5=o-color-1');"/>
     </xpath>
     <!-- Container -->
     <xpath expr="//div[hasclass('container')]" position="attributes">

theme_bookstore/views/snippets/s_numbers.xml

@@ -5,11 +5,11 @@
     <!-- Section -->
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="pt112 pb112" remove="pt80 pb80" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Floats/12","flip":[]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/07_002","flip":[]}</attribute>
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Floats_12"/>
+        <div class="o_we_shape o_web_editor_Origins_07_002"/>
     </xpath>
     <!-- Titles -->
     <xpath expr="//span[hasclass('h5-fs')]" position="replace" mode="inner">