[IMP] website_sale: improve checkout UX
- replace order summary by a dropdown like mobile view - remove 'Pay With' title - match 'Choose delivery method' style with 'Choose payment method' - make order summary sticky so that 'Pay now' is always accessible task-3741412 closes odoo/odoo#154035 Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
This commit is contained in:
Lina (liew)
committed by
Antoine Vandevenne (anv)
Antoine Vandevenne (anv)
parent
a54e64d720
commit
affcba7ea7
@@ -67,12 +67,8 @@
|
||||
<!-- === Payment tokens === -->
|
||||
<div t-if="tokens_sudo">
|
||||
<!-- === Header === -->
|
||||
<h4 id="o_payment_tokens_heading"
|
||||
class="d-flex gap-3 align-items-center mt-4 mb-3 fs-6 small text-uppercase
|
||||
fw-bolder"
|
||||
>
|
||||
<span>Your payment methods</span>
|
||||
<hr class="flex-grow-1 m-0"/>
|
||||
<h4 id="o_payment_tokens_heading" class="fs-6 small text-uppercase fw-bolder">
|
||||
Your payment methods
|
||||
</h4>
|
||||
<!-- === Body === -->
|
||||
<ul class="list-group">
|
||||
@@ -96,12 +92,9 @@
|
||||
t-att-class="'collapse' if collapse_payment_methods else ''"
|
||||
>
|
||||
<!-- === Header === -->
|
||||
<h4 class="d-flex gap-3 align-items-center mt-4 mb-3 fs-6 small text-uppercase
|
||||
fw-bolder"
|
||||
>
|
||||
<h4 class="fs-6 small text-uppercase fw-bolder">
|
||||
<t t-if="not collapse_payment_methods">Choose a payment method</t>
|
||||
<t t-else="">Other payment methods</t>
|
||||
<hr class="flex-grow-1 m-0"/>
|
||||
</h4>
|
||||
<!-- === Body === -->
|
||||
<ul class="list-group">
|
||||
|
||||
@@ -83,7 +83,9 @@
|
||||
<t t-set="include_separator" t-value="True"/>
|
||||
</t>
|
||||
</div>
|
||||
<t t-call="payment.form"/>
|
||||
<div class="mt-4">
|
||||
<t t-call="payment.form"/>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -295,7 +295,7 @@
|
||||
If you believe that it is an error, please contact the website administrator.
|
||||
</div>
|
||||
<div t-else="" id="payment_method" class="text-start">
|
||||
<h3>Pay with</h3>
|
||||
<h3 class="mb-3">Pay with</h3>
|
||||
<t t-call="payment.form">
|
||||
<!-- Inject the order ID to allow Stripe to check if tokenization is required. -->
|
||||
<t t-set="sale_order_id" t-value="sale_order.id"/>
|
||||
|
||||
@@ -4,7 +4,9 @@
|
||||
<!-- Insert the donation form inside the payment form's <form/> element. -->
|
||||
<template id="website_payment.payment_form" inherit_id="payment.form">
|
||||
<xpath expr="//div[@id='o_payment_form_options']" position="before">
|
||||
<t t-if="is_donation" t-call="website_payment.donation_information"/>
|
||||
<div class="mb-3" t-if="is_donation">
|
||||
<t t-call="website_payment.donation_information"/>
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -742,18 +742,19 @@ a.no-decoration {
|
||||
}
|
||||
|
||||
.o_wsale_accordion {
|
||||
.collapse:not(.show) {
|
||||
display: block;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
display: none;
|
||||
}
|
||||
.accordion-button{
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.o_wsale_scrollable_table {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
overflow-y: scroll;
|
||||
height: 21rem;
|
||||
height: 15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2127,13 +2127,10 @@
|
||||
</div>
|
||||
<div class="oe_structure clearfix mt-3" id="oe_structure_website_sale_payment_1"/>
|
||||
|
||||
<t t-if="not errors and website_sale_order.amount_total" name="website_sale_non_free_cart">
|
||||
<div class="mt-4">
|
||||
<h3>Pay with</h3>
|
||||
</div>
|
||||
<div t-if="not errors and website_sale_order.amount_total" name="website_sale_non_free_cart" class="mt-4">
|
||||
<div t-if="payment_methods_sudo or tokens_sudo"
|
||||
id="payment_method"
|
||||
class="o_not_editable mt-4">
|
||||
class="o_not_editable">
|
||||
<t t-call="payment.form"/>
|
||||
</div>
|
||||
<div t-else="" class="alert alert-warning">
|
||||
@@ -2163,7 +2160,7 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
</template>
|
||||
|
||||
@@ -2223,14 +2220,14 @@
|
||||
<div t-else=""
|
||||
class="o_wsale_accordion accordion sticky-lg-top offset-xl-1 col-12 col-lg-5 col-xl-4 order-lg-2 rounded"
|
||||
id="o_wsale_total_accordion">
|
||||
<div class="o_total_card">
|
||||
<div class="accordion-item p-lg-4 border-0">
|
||||
<div class="accordion-header d-block d-lg-none align-items-center mb-4">
|
||||
<div class="o_total_card sticky-lg-top">
|
||||
<div id="o_wsale_total_accordion_item" class="accordion-item p-lg-4 border-0">
|
||||
<div class="accordion-header d-block align-items-center mb-4">
|
||||
<button class="accordion-button px-0 collapsed"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#o_wsale_total_accordion_item"
|
||||
data-bs-target="#o_wsale_accordion_item"
|
||||
aria-expanded="false"
|
||||
aria-controls="o_wsale_total_accordion_item">
|
||||
aria-controls="o_wsale_accordion_item">
|
||||
<div class="d-flex flex-wrap">
|
||||
<b class="w-100">Order summary</b>
|
||||
<span t-out="str(website_sale_order.cart_quantity)"/>
|
||||
@@ -2245,11 +2242,10 @@
|
||||
<div name="cart_summary_info" t-if="not website_sale_order or not website_sale_order.website_order_line" class="alert alert-info">
|
||||
Your cart is empty!
|
||||
</div>
|
||||
<!-- Cart lines are showed in desktop but are in an hidden accordion in mobile -->
|
||||
<div id="o_wsale_total_accordion_item"
|
||||
<div id="o_wsale_accordion_item"
|
||||
class="accordion-collapse collapse mb-4 mb-lg-0"
|
||||
data-bs-parent="#o_wsale_total_accordion">
|
||||
<div t-att-class="len(website_sale_order.website_order_line) > 4 and 'o_wsale_scrollable_table mt-n4 me-n4 pt-4 pe-4'">
|
||||
<div t-att-class="len(website_sale_order.website_order_line) > 3 and 'o_wsale_scrollable_table mt-n4 me-n4 pt-4 pe-4'">
|
||||
<table t-if="website_sale_order and website_sale_order.website_order_line"
|
||||
class="table accordion-body mb-0"
|
||||
id="cart_products">
|
||||
@@ -2302,10 +2298,10 @@
|
||||
<strong>Warning!</strong> <t t-esc='website_sale_order._get_shop_warning()'/>
|
||||
</div>
|
||||
</t>
|
||||
<t t-call="website_sale.total">
|
||||
<t t-set="_cart_total_classes" t-valuef="border-top pt-3"/>
|
||||
</t>
|
||||
</div>
|
||||
<t t-call="website_sale.total">
|
||||
<t t-set="_cart_total_classes" t-valuef="border-top pt-3"/>
|
||||
</t>
|
||||
<div t-if="show_navigation_button" class="o_cta_navigation_container position-absolute position-lg-static start-0 bottom-0 col-12">
|
||||
<t t-call="website_sale.navigation_buttons"/>
|
||||
</div>
|
||||
|
||||
@@ -44,10 +44,10 @@
|
||||
|
||||
<template id="payment_delivery" name="Delivery Costs" inherit_id="website_sale.payment">
|
||||
<!-- //t[@t-if='website_sale_order.amount_total'] should be removed in master -->
|
||||
<xpath expr="//t[@name='website_sale_non_free_cart'] | //t[@t-if='website_sale_order.amount_total']" position="before">
|
||||
<xpath expr="//div[@name='website_sale_non_free_cart'] | //t[@t-if='website_sale_order.amount_total']" position="before">
|
||||
<div t-if="deliveries" id="delivery_carrier">
|
||||
<t t-set="delivery_nb" t-value="len(deliveries)"/>
|
||||
<h4>Choose a delivery method</h4>
|
||||
<h4 class="fs-6 small text-uppercase fw-bolder">Choose a delivery method</h4>
|
||||
<div class="card border-0" id="delivery_method">
|
||||
<ul class="list-group">
|
||||
<t t-foreach="deliveries" t-as="delivery">
|
||||
|
||||
Reference in New Issue
Block a user