[IMP] theme_*: adapt s_product_list

task-4048196
Part of task-3619705

Part-of: odoo/design-themes#919
Related: odoo/odoo#180736
Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Antoine (anso)
2024-08-01 12:32:17 +02:00
committed by qsm-odoo
parent bb8254a09f
commit 05fdc8e75f
9 changed files with 263 additions and 285 deletions
@@ -4,11 +4,26 @@
<template id="s_product_list" inherit_id="website.s_product_list"> <template id="s_product_list" inherit_id="website.s_product_list">
<!-- Section --> <!-- Section -->
<xpath expr="//section" position="attributes"> <xpath expr="//section" position="attributes">
<attribute name="class" add="pt72 pb72" separator=" "/> <attribute name="class" add="pt72 pb72" remove="pt64 pb64" separator=" "/>
</xpath> </xpath>
<!-- Container --> <!-- Cards -->
<xpath expr="//div[hasclass('container-fluid')]" position="attributes"> <xpath expr="//div[hasclass('col-lg-2')]//div[hasclass('card')]" position="attributes">
<attribute name="class" add="container" remove="container-fluid" separator=" "/> <attribute name="style">border-width: 0px !important;</attribute>
</xpath>
<xpath expr="//div[hasclass('col-lg-2')][2]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-width: 0px !important;</attribute>
</xpath>
<xpath expr="//div[hasclass('col-lg-2')][3]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-width: 0px !important;</attribute>
</xpath>
<xpath expr="//div[hasclass('col-lg-2')][4]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-width: 0px !important;</attribute>
</xpath>
<xpath expr="//div[hasclass('col-lg-2')][5]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-width: 0px !important;</attribute>
</xpath>
<xpath expr="//div[hasclass('col-lg-2')][6]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-width: 0px !important;</attribute>
</xpath> </xpath>
<!-- Item #1 - Img --> <!-- Item #1 - Img -->
<xpath expr="//img" position="attributes"> <xpath expr="//img" position="attributes">
+13 -17
View File
@@ -6,28 +6,24 @@
<xpath expr="//section" position="attributes"> <xpath expr="//section" position="attributes">
<attribute name="class" add="o_cc o_cc5" separator=" "/> <attribute name="class" add="o_cc o_cc5" separator=" "/>
</xpath> </xpath>
<!-- Container --> <!-- Cards -->
<xpath expr="//div[hasclass('container-fluid')]" position="attributes"> <xpath expr="//div[hasclass('col-lg-2')]//div[hasclass('card')]" position="attributes">
<attribute name="class" add="container" remove="container-fluid" separator=" "/> <attribute name="class" remove="o_cc o_cc1" add="o_cc o_cc5" separator=" "/>
</xpath> </xpath>
<!-- Buttons --> <xpath expr="//div[hasclass('col-lg-2')][2]//div[hasclass('card')]" position="attributes">
<xpath expr="//a[hasclass('btn')]" position="replace" mode="inner"> <attribute name="class" remove="o_cc o_cc1" add="o_cc o_cc5" separator=" "/>
More info
</xpath> </xpath>
<xpath expr="(//a[hasclass('btn')])[2]" position="replace" mode="inner"> <xpath expr="//div[hasclass('col-lg-2')][3]//div[hasclass('card')]" position="attributes">
More info <attribute name="class" remove="o_cc o_cc1" add="o_cc o_cc5" separator=" "/>
</xpath> </xpath>
<xpath expr="(//a[hasclass('btn')])[3]" position="replace" mode="inner"> <xpath expr="//div[hasclass('col-lg-2')][4]//div[hasclass('card')]" position="attributes">
More info <attribute name="class" remove="o_cc o_cc1" add="o_cc o_cc5" separator=" "/>
</xpath> </xpath>
<xpath expr="(//a[hasclass('btn')])[4]" position="replace" mode="inner"> <xpath expr="//div[hasclass('col-lg-2')][5]//div[hasclass('card')]" position="attributes">
More info <attribute name="class" remove="o_cc o_cc1" add="o_cc o_cc5" separator=" "/>
</xpath> </xpath>
<xpath expr="(//a[hasclass('btn')])[5]" position="replace" mode="inner"> <xpath expr="//div[hasclass('col-lg-2')][6]//div[hasclass('card')]" position="attributes">
More info <attribute name="class" remove="o_cc o_cc1" add="o_cc o_cc5" separator=" "/>
</xpath>
<xpath expr="(//a[hasclass('btn')])[6]" position="replace" mode="inner">
More info
</xpath> </xpath>
</template> </template>
+49 -17
View File
@@ -4,54 +4,86 @@
<template id="s_product_list" inherit_id="website.s_product_list"> <template id="s_product_list" inherit_id="website.s_product_list">
<!-- Section --> <!-- Section -->
<xpath expr="//section" position="attributes"> <xpath expr="//section" position="attributes">
<attribute name="class" add="pt96 pb96" separator=" "/> <attribute name="class" add="pt96 pb96" remove="pt64 pb64" separator=" "/>
</xpath>
<!-- Container -->
<xpath expr="//div[hasclass('container-fluid')]" position="attributes">
<attribute name="class" add="container" remove="container-fluid" separator=" "/>
</xpath> </xpath>
<!-- Item #1 --> <!-- Item #1 -->
<xpath expr="//img" position="attributes"> <xpath expr="//div[hasclass('col-lg-2')]//img" position="attributes">
<attribute name="class" add="rounded-circle" separator=" "/> <attribute name="class" add="rounded-circle" separator=" "/>
</xpath> </xpath>
<xpath expr="//a[hasclass('btn')]" position="replace" mode="inner"> <xpath expr="//div[hasclass('col-lg-2')]//figure" position="attributes">
<attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
</xpath>
<xpath expr="//div[hasclass('col-lg-2')]//h3" position="replace" mode="inner">
Make-up Make-up
</xpath> </xpath>
<xpath expr="//div[hasclass('col-lg-2')]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-width: 0px !important;</attribute>
</xpath>
<!-- Item #2 --> <!-- Item #2 -->
<xpath expr="(//img)[2]" position="attributes"> <xpath expr="//div[hasclass('col-lg-2')][2]//img" position="attributes">
<attribute name="class" add="rounded-circle" separator=" "/> <attribute name="class" add="rounded-circle" separator=" "/>
</xpath> </xpath>
<xpath expr="(//a[hasclass('btn')])[2]" position="replace" mode="inner"> <xpath expr="//div[hasclass('col-lg-2')][2]//figure" position="attributes">
<attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
</xpath>
<xpath expr="//div[hasclass('col-lg-2')][2]//h3" position="replace" mode="inner">
Skin gel Skin gel
</xpath> </xpath>
<xpath expr="//div[hasclass('col-lg-2')][2]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-width: 0px !important;</attribute>
</xpath>
<!-- Item #3 --> <!-- Item #3 -->
<xpath expr="(//img)[3]" position="attributes"> <xpath expr="//div[hasclass('col-lg-2')][3]//img" position="attributes">
<attribute name="class" add="rounded-circle" separator=" "/> <attribute name="class" add="rounded-circle" separator=" "/>
</xpath> </xpath>
<xpath expr="(//a[hasclass('btn')])[3]" position="replace" mode="inner"> <xpath expr="//div[hasclass('col-lg-2')][3]//figure" position="attributes">
<attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
</xpath>
<xpath expr="//div[hasclass('col-lg-2')][3]//h3" position="replace" mode="inner">
Lipstick Lipstick
</xpath> </xpath>
<xpath expr="//div[hasclass('col-lg-2')][3]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-width: 0px !important;</attribute>
</xpath>
<!-- Item #4 --> <!-- Item #4 -->
<xpath expr="(//img)[4]" position="attributes"> <xpath expr="//div[hasclass('col-lg-2')][4]//img" position="attributes">
<attribute name="class" add="rounded-circle" separator=" "/> <attribute name="class" add="rounded-circle" separator=" "/>
</xpath> </xpath>
<xpath expr="(//a[hasclass('btn')])[4]" position="replace" mode="inner"> <xpath expr="//div[hasclass('col-lg-2')][4]//figure" position="attributes">
<attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
</xpath>
<xpath expr="//div[hasclass('col-lg-2')][4]//h3" position="replace" mode="inner">
Eyeliner Eyeliner
</xpath> </xpath>
<xpath expr="//div[hasclass('col-lg-2')][4]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-width: 0px !important;</attribute>
</xpath>
<!-- Item #5 --> <!-- Item #5 -->
<xpath expr="(//img)[5]" position="attributes"> <xpath expr="//div[hasclass('col-lg-2')][5]//img" position="attributes">
<attribute name="class" add="rounded-circle" separator=" "/> <attribute name="class" add="rounded-circle" separator=" "/>
</xpath> </xpath>
<xpath expr="(//a[hasclass('btn')])[5]" position="replace" mode="inner"> <xpath expr="//div[hasclass('col-lg-2')][5]//figure" position="attributes">
<attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
</xpath>
<xpath expr="//div[hasclass('col-lg-2')][5]//h3" position="replace" mode="inner">
Perfume Perfume
</xpath> </xpath>
<xpath expr="//div[hasclass('col-lg-2')][5]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-width: 0px !important;</attribute>
</xpath>
<!-- Item #6 --> <!-- Item #6 -->
<xpath expr="(//img)[6]" position="attributes"> <xpath expr="//div[hasclass('col-lg-2')][6]//img" position="attributes">
<attribute name="class" add="rounded-circle" separator=" "/> <attribute name="class" add="rounded-circle" separator=" "/>
</xpath> </xpath>
<xpath expr="(//a[hasclass('btn')])[6]" position="replace" mode="inner"> <xpath expr="//div[hasclass('col-lg-2')][6]//figure" position="attributes">
<attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
</xpath>
<xpath expr="//div[hasclass('col-lg-2')][6]//h3" position="replace" mode="inner">
Essential oils Essential oils
</xpath> </xpath>
<xpath expr="//div[hasclass('col-lg-2')][6]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-width: 0px !important;</attribute>
</xpath>
</template> </template>
<template id="configurator_s_product_list" inherit_id="website.configurator_s_product_list"> <template id="configurator_s_product_list" inherit_id="website.configurator_s_product_list">
@@ -4,72 +4,67 @@
<template id="s_product_list" inherit_id="website.s_product_list"> <template id="s_product_list" inherit_id="website.s_product_list">
<!-- Section --> <!-- Section -->
<xpath expr="//section" position="attributes"> <xpath expr="//section" position="attributes">
<attribute name="class" add="o_cc o_cc5 pb96" separator=" "/> <attribute name="class" add="o_cc o_cc5 pb96" remove="pb64" separator=" "/>
</xpath> </xpath>
<!-- Container --> <!-- Item #1 -->
<xpath expr="//div[hasclass('container-fluid')]" position="replace"> <xpath expr="//div[hasclass('col-lg-2')]//h3/a" position="replace" mode="inner">
<div class="container"> View the book
<!-- Row #1 --> </xpath>
<div class="row"> <xpath expr="//div[hasclass('col-lg-2')]//div[hasclass('card')]" position="attributes">
<!-- Item #1 --> <attribute name="style">border-width: 0px !important;</attribute>
<div class="h-100 pb16 col-lg-4"> </xpath>
<a href="#"> <xpath expr="//div[hasclass('col-lg-2')]//figure" position="attributes">
<img src="/web/image/website.s_product_list_default_image_1" alt="" class="img img-fluid w-100" style="max-height: 100%;"/> <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
</a> </xpath>
<div class="s_product_list_item_link"> <!-- Item #2 -->
<a href="#" class="btn btn-primary">View the book</a> <xpath expr="//div[hasclass('col-lg-2')][2]//h3/a" position="replace" mode="inner">
</div> View the book
</div> </xpath>
<!-- Item #2 --> <xpath expr="//div[hasclass('col-lg-2')][2]//div[hasclass('card')]" position="attributes">
<div class="h-100 pb16 col-lg-4"> <attribute name="style">border-width: 0px !important;</attribute>
<a href="#"> </xpath>
<img src="/web/image/website.s_product_list_default_image_2" alt="" class="img img-fluid w-100" style="max-height: 100%;"/> <xpath expr="//div[hasclass('col-lg-2')][2]//figure" position="attributes">
</a> <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
<div class="s_product_list_item_link"> </xpath>
<a href="#" class="btn btn-primary">View the book</a> <!-- Item #3 -->
</div> <xpath expr="//div[hasclass('col-lg-2')][3]//h3/a" position="replace" mode="inner">
</div> View the book
<!-- Item #3 --> </xpath>
<div class="h-100 pb16 col-lg-4"> <xpath expr="//div[hasclass('col-lg-2')][3]//div[hasclass('card')]" position="attributes">
<a href="#"> <attribute name="style">border-width: 0px !important;</attribute>
<img src="/web/image/website.s_product_list_default_image_5" alt="" class="img img-fluid w-100" style="max-height: 100%;"/> </xpath>
</a> <xpath expr="//div[hasclass('col-lg-2')][3]//figure" position="attributes">
<div class="s_product_list_item_link"> <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
<a href="#" class="btn btn-primary">View the book</a> </xpath>
</div> <!-- Item #4 -->
</div> <xpath expr="//div[hasclass('col-lg-2')][4]//h3/a" position="replace" mode="inner">
</div> View the book
<!-- Row #2 --> </xpath>
<div class="row"> <xpath expr="//div[hasclass('col-lg-2')][4]//div[hasclass('card')]" position="attributes">
<!-- Item #4 --> <attribute name="style">border-width: 0px !important;</attribute>
<div class="h-100 pb16 col-lg-4"> </xpath>
<a href="#"> <xpath expr="//div[hasclass('col-lg-2')][4]//figure" position="attributes">
<img src="/web/image/website.s_product_list_default_image_3" alt="" class="img img-fluid w-100" style="max-height: 100%;"/> <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
</a> </xpath>
<div class="s_product_list_item_link"> <!-- Item #5 -->
<a href="#" class="btn btn-primary">View the book</a> <xpath expr="//div[hasclass('col-lg-2')][5]//h3/a" position="replace" mode="inner">
</div> View the book
</div> </xpath>
<!-- Item #5 --> <xpath expr="//div[hasclass('col-lg-2')][5]//div[hasclass('card')]" position="attributes">
<div class="h-100 pb16 col-lg-4"> <attribute name="style">border-width: 0px !important;</attribute>
<a href="#"> </xpath>
<img src="/web/image/website.s_product_list_default_image_4" alt="" class="img img-fluid w-100" style="max-height: 100%;"/> <xpath expr="//div[hasclass('col-lg-2')][5]//figure" position="attributes">
</a> <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
<div class="s_product_list_item_link"> </xpath>
<a href="#" class="btn btn-primary">View the book</a> <!-- Item #6 -->
</div> <xpath expr="//div[hasclass('col-lg-2')][6]//h3/a" position="replace" mode="inner">
</div> View the book
<!-- Item #6 --> </xpath>
<div class="h-100 pb16 col-lg-4"> <xpath expr="//div[hasclass('col-lg-2')][6]//div[hasclass('card')]" position="attributes">
<a href="#"> <attribute name="style">border-width: 0px !important;</attribute>
<img src="/web/image/website.s_product_list_default_image_6" alt="" class="img img-fluid w-100" style="max-height: 100%;"/> </xpath>
</a> <xpath expr="//div[hasclass('col-lg-2')][6]//figure" position="attributes">
<div class="s_product_list_item_link"> <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
<a href="#" class="btn btn-primary">View the book</a>
</div>
</div>
</div>
</div>
</xpath> </xpath>
</template> </template>
+1 -1
View File
@@ -21,7 +21,7 @@ const snippets = [
{ {
id: 's_product_list', id: 's_product_list',
name: 'Items', name: 'Items',
groupName: "Content", groupName: "Columns",
}, },
{ {
id: 's_call_to_action', id: 's_call_to_action',
+26 -46
View File
@@ -4,92 +4,72 @@
<template id="s_product_list" inherit_id="website.s_product_list"> <template id="s_product_list" inherit_id="website.s_product_list">
<!-- Section --> <!-- Section -->
<xpath expr="//section" position="attributes"> <xpath expr="//section" position="attributes">
<attribute name="class" add="pt96 pb96" separator=" "/> <attribute name="class" add="pt96 pb96" remove="pt64 pb64" separator=" "/>
</xpath> </xpath>
<!-- Container --> <!-- Title -->
<xpath expr="//div[hasclass('container-fluid')]" position="attributes"> <xpath expr="//h2" position="attributes">
<attribute name="class" add="container" remove="container-fluid" separator=" "/> <attribute name="style">text-align: center;</attribute>
</xpath>
<xpath expr="//div[hasclass('row')]" position="attributes">
<attribute name="class" add="justify-content-center" separator=" "/>
</xpath> </xpath>
<!-- Item n°1 --> <!-- Item n°1 -->
<xpath expr="//div[hasclass('col-lg-2')]" position="attributes"> <xpath expr="//div[hasclass('col-lg-2')]" position="attributes">
<attribute name="class" add="border rounded mx-3" separator=" "/> <attribute name="class" add="offset-lg-1" separator=" "/>
</xpath>
<xpath expr="//div[hasclass('col-lg-2')]//h3" position="replace" mode="inner">
About us
</xpath>
<xpath expr="//div[hasclass('col-lg-2')]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute> <attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute>
</xpath> </xpath>
<xpath expr="//div[hasclass('s_product_list_item_link')]" position="attributes">
<attribute name="class" add="pb24" separator=" "/>
</xpath>
<xpath expr="//div[hasclass('s_product_list_item_link')]//a" position="replace">
<a t-att-href="url">About us</a>
</xpath>
<!-- Item n°1 : SVG with dynamic color --> <!-- Item n°1 : SVG with dynamic color -->
<xpath expr="//div[hasclass('col-lg-2')]//img" position="attributes"> <xpath expr="//div[hasclass('col-lg-2')]//img" position="attributes">
<attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_1.svg?c1=o-color-1&amp;c2=o-color-2</attribute> <attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_1.svg?c1=o-color-1&amp;c2=o-color-2</attribute>
</xpath> </xpath>
<!-- Item n°2 --> <!-- Item n°2 -->
<xpath expr="(//div[hasclass('col-lg-2')])[2]" position="attributes"> <xpath expr="(//div[hasclass('col-lg-2')])[2]//h3" position="replace" mode="inner">
<attribute name="class" add="border rounded mx-3" separator=" "/> Our team
</xpath>
<xpath expr="//div[hasclass('col-lg-2')][2]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute> <attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute>
</xpath> </xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')])[2]" position="attributes">
<attribute name="class" add="pb24" separator=" "/>
</xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')])[2]//a" position="replace">
<a t-att-href="url">Our team</a>
</xpath>
<!-- Item n°2 : SVG with dynamic color --> <!-- Item n°2 : SVG with dynamic color -->
<xpath expr="(//div[hasclass('col-lg-2')])[2]//img" position="attributes"> <xpath expr="(//div[hasclass('col-lg-2')])[2]//img" position="attributes">
<attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_2.svg?c1=o-color-1&amp;c2=o-color-2</attribute> <attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_2.svg?c1=o-color-1&amp;c2=o-color-2</attribute>
</xpath> </xpath>
<!-- Item n°3 --> <!-- Item n°3 -->
<xpath expr="(//div[hasclass('col-lg-2')])[3]" position="attributes"> <xpath expr="(//div[hasclass('col-lg-2')])[3]//h3" position="replace" mode="inner">
<attribute name="class" add="border rounded mx-3" separator=" "/> Playground
</xpath>
<xpath expr="//div[hasclass('col-lg-2')][3]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute> <attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute>
</xpath> </xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')])[3]" position="attributes">
<attribute name="class" add="pb24" separator=" "/>
</xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')])[3]//a" position="replace">
<a t-att-href="url">Playground</a>
</xpath>
<!-- Item n°3 : SVG with dynamic color --> <!-- Item n°3 : SVG with dynamic color -->
<xpath expr="(//div[hasclass('col-lg-2')])[3]//img" position="attributes"> <xpath expr="(//div[hasclass('col-lg-2')])[3]//img" position="attributes">
<attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_3.svg?c1=o-color-1&amp;c2=o-color-2</attribute> <attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_3.svg?c1=o-color-1&amp;c2=o-color-2</attribute>
</xpath> </xpath>
<!-- Item n°4 --> <!-- Item n°4 -->
<xpath expr="(//div[hasclass('col-lg-2')])[4]" position="attributes"> <xpath expr="(//div[hasclass('col-lg-2')])[4]//h3" position="replace" mode="inner">
<attribute name="class" add="border rounded mx-3" separator=" "/> Events
</xpath>
<xpath expr="//div[hasclass('col-lg-2')][4]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute> <attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute>
</xpath> </xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')])[4]" position="attributes">
<attribute name="class" add="pb24" separator=" "/>
</xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')])[4]//a" position="replace">
<a t-att-href="url">Events</a>
</xpath>
<!-- Item n°4 : SVG with dynamic color --> <!-- Item n°4 : SVG with dynamic color -->
<xpath expr="(//div[hasclass('col-lg-2')])[4]//img" position="attributes"> <xpath expr="(//div[hasclass('col-lg-2')])[4]//img" position="attributes">
<attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_4.svg?c1=o-color-1&amp;c2=o-color-2</attribute> <attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_4.svg?c1=o-color-1&amp;c2=o-color-2</attribute>
</xpath> </xpath>
<!-- Item n°5 --> <!-- Item n°5 -->
<xpath expr="(//div[hasclass('col-lg-2')])[5]" position="attributes"> <xpath expr="(//div[hasclass('col-lg-2')])[5]//h3" position="replace" mode="inner">
<attribute name="class" add="border rounded mx-3" separator=" "/> Visit us
</xpath>
<xpath expr="//div[hasclass('col-lg-2')][5]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute> <attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute>
</xpath> </xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')])[5]" position="attributes">
<attribute name="class" add="pb24" separator=" "/>
</xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')])[5]//a" position="replace">
<a t-att-href="url">Visit us</a>
</xpath>
<!-- Item n°5 : SVG with dynamic color --> <!-- Item n°5 : SVG with dynamic color -->
<xpath expr="(//div[hasclass('col-lg-2')])[5]//img" position="attributes"> <xpath expr="(//div[hasclass('col-lg-2')])[5]//img" position="attributes">
<attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_6.svg?c1=o-color-1&amp;c2=o-color-2</attribute> <attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_6.svg?c1=o-color-1&amp;c2=o-color-2</attribute>
+66 -65
View File
@@ -4,72 +4,73 @@
<template id="s_product_list" inherit_id="website.s_product_list"> <template id="s_product_list" inherit_id="website.s_product_list">
<!-- Section --> <!-- Section -->
<xpath expr="//section" position="attributes"> <xpath expr="//section" position="attributes">
<attribute name="class" add="o_cc o_cc5 pb80 pt96" separator=" "/> <attribute name="class" add="o_cc o_cc5 pb80 pt96" remove="pt64 pb64" separator=" "/>
</xpath> </xpath>
<!-- Container --> <!-- Item #1 -->
<xpath expr="//div[hasclass('container-fluid')]" position="replace"> <xpath expr="//div[hasclass('col-lg-2')]//h3/a" position="replace" mode="inner">
<div class="container"> T-shirts
<!-- Row #1 --> </xpath>
<div class="row"> <xpath expr="//div[hasclass('col-lg-2')]//div[hasclass('card')]" position="attributes">
<!-- Item #1 --> <attribute name="class" remove="o_cc1" add="o_cc4" separator=" "/>
<div class="h-100 pb16 col-lg-4"> <attribute name="style">border-width: 0px !important;</attribute>
<a href="#"> </xpath>
<img src="/web/image/website.s_product_list_default_image_1" alt="" class="img img-fluid w-100 rounded" style="max-height: 100%;"/> <xpath expr="//div[hasclass('col-lg-2')]//figure" position="attributes">
</a> <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
<div class="s_product_list_item_link"> </xpath>
<a href="#" class="btn btn-primary">T-shirts</a> <!-- Item #2 -->
</div> <xpath expr="//div[hasclass('col-lg-2')][2]//h3/a" position="replace" mode="inner">
</div> Hoodies
<!-- Item #2 --> </xpath>
<div class="h-100 pb16 col-lg-4"> <xpath expr="//div[hasclass('col-lg-2')][2]//div[hasclass('card')]" position="attributes">
<a href="#"> <attribute name="class" remove="o_cc1" add="o_cc4" separator=" "/>
<img src="/web/image/website.s_product_list_default_image_2" alt="" class="img img-fluid w-100 rounded" style="max-height: 100%;"/> <attribute name="style">border-width: 0px !important;</attribute>
</a> </xpath>
<div class="s_product_list_item_link"> <xpath expr="//div[hasclass('col-lg-2')][2]//figure" position="attributes">
<a href="#" class="btn btn-primary">Hoodies</a> <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
</div> </xpath>
</div> <!-- Item #3 -->
<!-- Item #3 --> <xpath expr="//div[hasclass('col-lg-2')][3]//h3/a" position="replace" mode="inner">
<div class="h-100 pb16 col-lg-4"> Vinyls
<a href="#"> </xpath>
<img src="/web/image/website.s_product_list_default_image_5" alt="" class="img img-fluid w-100 rounded" style="max-height: 100%;"/> <xpath expr="//div[hasclass('col-lg-2')][3]//div[hasclass('card')]" position="attributes">
</a> <attribute name="class" remove="o_cc1" add="o_cc4" separator=" "/>
<div class="s_product_list_item_link"> <attribute name="style">border-width: 0px !important;</attribute>
<a href="#" class="btn btn-primary">Vinyls</a> </xpath>
</div> <xpath expr="//div[hasclass('col-lg-2')][3]//figure" position="attributes">
</div> <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
</div> </xpath>
<!-- Row #2 --> <!-- Item #4 -->
<div class="row"> <xpath expr="//div[hasclass('col-lg-2')][4]//h3/a" position="replace" mode="inner">
<!-- Item #4 --> Sunglasses
<div class="h-100 pb16 col-lg-4"> </xpath>
<a href="#"> <xpath expr="//div[hasclass('col-lg-2')][4]//div[hasclass('card')]" position="attributes">
<img src="/web/image/website.s_product_list_default_image_3" alt="" class="img img-fluid w-100 rounded" style="max-height: 100%;"/> <attribute name="class" remove="o_cc1" add="o_cc4" separator=" "/>
</a> <attribute name="style">border-width: 0px !important;</attribute>
<div class="s_product_list_item_link"> </xpath>
<a href="#" class="btn btn-primary">Sunglasses</a> <xpath expr="//div[hasclass('col-lg-2')][4]//figure" position="attributes">
</div> <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
</div> </xpath>
<!-- Item #5 --> <!-- Item #5 -->
<div class="h-100 pb16 col-lg-4"> <xpath expr="//div[hasclass('col-lg-2')][5]//h3/a" position="replace" mode="inner">
<a href="#"> Caps
<img src="/web/image/website.s_product_list_default_image_4" alt="" class="img img-fluid w-100 rounded" style="max-height: 100%;"/> </xpath>
</a> <xpath expr="//div[hasclass('col-lg-2')][5]//div[hasclass('card')]" position="attributes">
<div class="s_product_list_item_link"> <attribute name="class" remove="o_cc1" add="o_cc4" separator=" "/>
<a href="#" class="btn btn-primary">Caps</a> <attribute name="style">border-width: 0px !important;</attribute>
</div> </xpath>
</div> <xpath expr="//div[hasclass('col-lg-2')][5]//figure" position="attributes">
<!-- Item #6 --> <attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
<div class="h-100 pb16 col-lg-4"> </xpath>
<a href="#"> <!-- Item #6 -->
<img src="/web/image/website.s_product_list_default_image_6" alt="" class="img img-fluid w-100 rounded" style="max-height: 100%;"/> <xpath expr="//div[hasclass('col-lg-2')][6]//h3/a" position="replace" mode="inner">
</a> CD Albums
<div class="s_product_list_item_link"> </xpath>
<a href="#" class="btn btn-primary">CD Albums</a> <xpath expr="//div[hasclass('col-lg-2')][6]//div[hasclass('card')]" position="attributes">
</div> <attribute name="class" remove="o_cc1" add="o_cc4" separator=" "/>
</div> <attribute name="style">border-width: 0px !important;</attribute>
</div> </xpath>
</div> <xpath expr="//div[hasclass('col-lg-2')][6]//figure" position="attributes">
<attribute name="class" remove="ratio-4x3" add="ratio-1x1" separator=" "/>
</xpath> </xpath>
</template> </template>
@@ -2,70 +2,29 @@
<odoo> <odoo>
<template id="s_product_list" inherit_id="website.s_product_list"> <template id="s_product_list" inherit_id="website.s_product_list">
<!-- Container --> <!-- Item #1 -->
<xpath expr="//div[hasclass('container-fluid')]" position="replace"> <xpath expr="//div[hasclass('col-lg-2')]//h3/a" position="replace" mode="inner">
<div class="container"> Social Strategy
<!-- Row #1 --> </xpath>
<div class="row"> <!-- Item #2 -->
<!-- Item #1 --> <xpath expr="//div[hasclass('col-lg-2')][2]//h3/a" position="replace" mode="inner">
<div class="h-100 pb16 col-lg-4"> Executive Strategy
<a href="#"> </xpath>
<img src="/web/image/website.s_product_list_default_image_1" alt="" class="img img-fluid w-100" style="max-height: 100%;"/> <!-- Item #3 -->
</a> <xpath expr="//div[hasclass('col-lg-2')][3]//h3/a" position="replace" mode="inner">
<div class="s_product_list_item_link"> Corporate Finance
<a href="#" class="btn btn-primary">Social Strategy</a> </xpath>
</div> <!-- Item #4 -->
</div> <xpath expr="//div[hasclass('col-lg-2')][4]//h3/a" position="replace" mode="inner">
<!-- Item #2 --> Growth &amp; Innovation
<div class="h-100 pb16 col-lg-4"> </xpath>
<a href="#"> <!-- Item #5 -->
<img src="/web/image/website.s_product_list_default_image_2" alt="" class="img img-fluid w-100" style="max-height: 100%;"/> <xpath expr="//div[hasclass('col-lg-2')][5]//h3/a" position="replace" mode="inner">
</a> Digital Strategy
<div class="s_product_list_item_link"> </xpath>
<a href="#" class="btn btn-primary">Executive Strategy</a> <!-- Item #6 -->
</div> <xpath expr="//div[hasclass('col-lg-2')][6]//h3/a" position="replace" mode="inner">
</div> Business Strategy
<!-- Item #3 -->
<div class="h-100 pb16 col-lg-4">
<a href="#">
<img src="/web/image/website.s_product_list_default_image_5" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
</a>
<div class="s_product_list_item_link">
<a href="#" class="btn btn-primary">Corporate Finance</a>
</div>
</div>
</div>
<!-- Row #2 -->
<div class="row">
<!-- Item #4 -->
<div class="h-100 pb16 col-lg-4">
<a href="#">
<img src="/web/image/website.s_product_list_default_image_3" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
</a>
<div class="s_product_list_item_link">
<a href="#" class="btn btn-primary">Growth &amp; Innovation</a>
</div>
</div>
<!-- Item #5 -->
<div class="h-100 pb16 col-lg-4">
<a href="#">
<img src="/web/image/website.s_product_list_default_image_4" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
</a>
<div class="s_product_list_item_link">
<a href="#" class="btn btn-primary">Digital Strategy</a>
</div>
</div>
<!-- Item #6 -->
<div class="h-100 pb16 col-lg-4">
<a href="#">
<img src="/web/image/website.s_product_list_default_image_6" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
</a>
<div class="s_product_list_item_link">
<a href="#" class="btn btn-primary">Business Strategy</a>
</div>
</div>
</div>
</div>
</xpath> </xpath>
</template> </template>
+6 -6
View File
@@ -412,22 +412,22 @@
<!-- ======== PRODUCT LIST ======== --> <!-- ======== PRODUCT LIST ======== -->
<template id="s_product_list" inherit_id="website.s_product_list"> <template id="s_product_list" inherit_id="website.s_product_list">
<xpath expr="(//div[hasclass('s_product_list_item_link')]//a)" position="replace" mode="inner"> <xpath expr="//div[hasclass('col-lg-2')]//h3" position="replace" mode="inner">
Brakes #1 Brakes #1
</xpath> </xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')]//a)[2]" position="replace" mode="inner"> <xpath expr="//div[hasclass('col-lg-2')][2]//h3" position="replace" mode="inner">
Brakes #2 Brakes #2
</xpath> </xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')]//a)[3]" position="replace" mode="inner"> <xpath expr="//div[hasclass('col-lg-2')][3]//h3" position="replace" mode="inner">
Brakes #3 Brakes #3
</xpath> </xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')]//a)[4]" position="replace" mode="inner"> <xpath expr="//div[hasclass('col-lg-2')][4]//h3" position="replace" mode="inner">
Brakes #4 Brakes #4
</xpath> </xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')]//a)[5]" position="replace" mode="inner"> <xpath expr="//div[hasclass('col-lg-2')][5]//h3" position="replace" mode="inner">
Brakes #5 Brakes #5
</xpath> </xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')]//a)[6]" position="replace" mode="inner"> <xpath expr="//div[hasclass('col-lg-2')][6]//h3" position="replace" mode="inner">
Brakes #6 Brakes #6
</xpath> </xpath>
</template> </template>