pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website_sale: allow the checkout wizard to have any number of steps

Browse Source 
Previously, the columns of the checkout wizard were hardcoded (3 columns
or 4 if the extra step is enabled). Using a bootstrap grid allows us to
support any number of steps. This is convenient, for instance, when we
need to specify some country specific fields in an additional
information tab.

related to task-3089169

Part-of: odoo/odoo#108181
This commit is contained in:
Julien Van Roy
2023-01-26 18:51:01 +01:00
parent f5eec1d539
commit 0499bc1687
2 changed files with 13 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_sale/static/src/scss/website_sale_frontend.scss
+6 -6
View File
@@ -29,17 +29,17 @@ $o-wsale-wizard-label-completed: $success;
padding: 0;
}
.col {
@include media-breakpoint-down(md) {
flex: none;
}
}
.progress-wizard-step {
position: relative;
@include media-breakpoint-up(md) {
margin-top: $tmp-dot-radius + $o-wsale-wizard-thickness*3.5;
float: left;
width: percentage(1/3);
.o_wizard_has_extra_step + & {
width: percentage(1/4);
}
}
@include media-breakpoint-down(md) {
&.disabled, &.complete {
addons/website_sale/views/templates.xml
+7 -11
View File
@@ -1239,23 +1239,23 @@
<div class="row">
<div class="col-xl">
<div class="wizard">
<div class="progress-wizard">
<a class="no-decoration" t-att-href="step&gt;=10 and '/shop/cart' or '#'">
<div class="wizard container">
<div class="progress-wizard row g-0">
<a class="no-decoration col" t-att-href="step&gt;=10 and '/shop/cart' or '#'">
<div id="wizard-step10" t-att-class="'progress-wizard-step %s' % (step == 10 and 'active' or step&gt;10 and 'complete' or 'disabled')">
<div class="progress-wizard-bar d-none d-md-block"/>
<span class="progress-wizard-dot d-none d-md-inline-block"></span>
<div class="text-center progress-wizard-steplabel">Review Order</div>
</div>
</a>
<a class="no-decoration" t-att-href="step&gt;=20 and '/shop/checkout' or '#'">
<a class="no-decoration col" t-att-href="step&gt;=20 and '/shop/checkout' or '#'">
<div id="wizard-step20" t-att-class="'progress-wizard-step %s' % (step == 20 and 'active' or step&gt;20 and 'complete' or 'disabled')">
<div class="progress-wizard-bar d-none d-md-block"/>
<span class="progress-wizard-dot d-none d-md-inline-block"></span>
<div class="text-center progress-wizard-steplabel">Address</div>
</div>
</a>
<a class="no-decoration" t-att-href="step&gt;=40 and '/shop/payment' or '#'">
<a class="no-decoration col" t-att-href="step&gt;=40 and '/shop/payment' or '#'">
<div id="wizard-step40" t-att-class="'progress-wizard-step %s' % (step == 40 and 'active' or step&gt;40 and 'complete' or 'disabled')">
<div class="progress-wizard-bar d-none d-md-block"/>
<span class="progress-wizard-dot d-none d-md-inline-block"></span>
@@ -1338,12 +1338,8 @@
</template>
<template id="extra_info_option" name="Extra Step Option" inherit_id="wizard_checkout" active="False">
<!-- Add a "flag element" to trigger style variation -->
<xpath expr="//div[hasclass('wizard')]/div" position="before">
<span class="o_wizard_has_extra_step d-none"/>
</xpath>
<xpath expr="//div[@id='wizard-step20']" position="after">
<a class="no-decoration" t-att-href="step&gt;=30 and '/shop/extra_info' or '#'">
<xpath expr="//div[@id='wizard-step20']/parent::a" position="after">
<a class="no-decoration col" t-att-href="step&gt;=30 and '/shop/extra_info' or '#'">
<div id="wizard-step30" t-att-class="'progress-wizard-step %s' % (step == 30 and 'active' or step&gt;30 and 'complete' or 'disabled')">
<div class="progress-wizard-bar d-none d-md-block"/>
<span class="progress-wizard-dot d-none d-md-inline-block"></span>