[FIX] sale, website_sale, *: fix product's page cta block design

task#2667024

Part-of: odoo/odoo#79651

addons/sale/static/src/scss/product_configurator.scss

@@ -55,21 +55,15 @@
 .css_quantity {
     width: initial; // We don't want the quantity form to be full-width
 
-    .btn {
-        background: gray('200');
-        color: theme-color('primary');
-        font-weight: normal;
-        padding: 0.7rem;
-        border: none;
+    .btn, input {
+        border-color: $input-border-color;
     }
 
     input {
-        background-color: gray('100');
-        height: auto;
-        max-width: 50px;
-        padding: 0.7rem;
-        text-align: center;
-        border-color: gray('200');
+        // Needs !important because themes customize btns' padding direclty
+        // rather than change '$input-btn-padding-X' (shared with inputs).
+        height: auto !important;
+        max-width: 5ch;
     }
 }
 

addons/sale/views/variant_templates.xml

@@ -2,7 +2,7 @@
 <odoo>
     <template id="variants">
         <t t-set="attribute_exclusions" t-value="product._get_attribute_exclusions(parent_combination, parent_name)"/>
-        <ul t-attf-class="list-unstyled js_add_cart_variants #{ul_class}" t-att-data-attribute_exclusions="json.dumps(attribute_exclusions)">
+        <ul t-attf-class="list-unstyled js_add_cart_variants mb-0 #{ul_class}" t-att-data-attribute_exclusions="json.dumps(attribute_exclusions)">
             <t t-foreach="product.valid_product_template_attribute_line_ids" t-as="ptal">
                 <!-- Attributes selection is hidden if there is only one value available and it's not a custom value -->
                 <li t-att-data-attribute_id="ptal.attribute_id.id"

addons/sale_product_configurator/views/templates.xml

@@ -113,7 +113,7 @@
                             <t t-set="product" t-value="product.product_tmpl_id"/>
                         </t>
                         <t t-else="">
-                            <ul class="d-none js_add_cart_variants" t-att-data-attribute_exclusions="{'exclusions: []'}"/>
+                            <ul class="d-none js_add_cart_variants mb-0" t-att-data-attribute_exclusions="{'exclusions: []'}"/>
                         </t>
                     </div>
                 </td>

addons/website_sale/views/templates.xml

@@ -626,13 +626,22 @@
                                             <t t-set="parent_combination" t-value="None" />
                                         </t>
                                         <t t-else="">
-                                            <ul class="d-none js_add_cart_variants" t-att-data-attribute_exclusions="{'exclusions: []'}"/>
+                                            <ul class="d-none js_add_cart_variants mb-0" t-att-data-attribute_exclusions="{'exclusions: []'}"/>
                                         </t>
                                     </t>
                                     <p t-if="True" class="css_not_available_msg alert alert-warning">This combination does not exist.</p>
-                                    <div id="add_to_cart_wrap" class="d-inline">
-                                        <a role="button" id="add_to_cart" class="btn btn-primary btn-lg js_check_product a-submit my-1 mr-1 px-5 font-weight-bold flex-grow-1" href="#"><i class="fa fa-shopping-cart mr-2"/>ADD TO CART</a>
-                                        <div id="product_option_block" class="d-inline-block align-middle"/>
+                                    <div id="o_wsale_cta_wrapper" class="d-flex flex-wrap align-items-center">
+                                        <t t-set="hasQuantities" t-value="false"/>
+                                        <t t-set="hasBuyNow" t-value="false"/>
+                                        <t t-set="ctaSizeBig" t-value="not hasQuantities or not hasBuyNow"/>
+
+                                        <div id="add_to_cart_wrap" class="d-inline-flex align-items-center mb-2 mr-auto">
+                                            <a role="button" id="add_to_cart" t-attf-class="btn btn-primary js_check_product a-submit flex-grow-1 #{'btn-lg' if ctaSizeBig else ''}" href="#">
+                                                <i class="fa fa-shopping-cart mr-2"/>
+                                                <span style="font-weight: bold">ADD TO CART</span>
+                                            </a>
+                                        </div>
+                                        <div id="product_option_block" class="d-flex flex-wrap w-100"/>
                                     </div>
                                 </div>
                             </form>
@@ -653,7 +662,7 @@
                                     </t>
                                 </table>
                             </div>
-                            <div id="o_product_terms_and_share">
+                            <div id="o_product_terms_and_share" class="d-flex justify-content-between flex-column flex-md-row align-items-md-end mb-3">
                             </div>
                         </div>
                     </div>
@@ -666,8 +675,8 @@
 
     <template id="product_custom_text" inherit_id="website_sale.product" active="True" customize_show="True" name="Terms and Conditions" priority="21">
         <xpath expr="//div[@id='o_product_terms_and_share']" position="inside">
-            <p class="text-muted h6 mt-3">
-                <a href="/terms" class="text-muted">Terms and Conditions</a><br/>
+            <p class="text-muted mb-0">
+                <a href="/terms" class="text-muted"><u>Terms and Conditions</u></a><br/>
                 30-day money-back guarantee<br/>
                 Shipping: 2-3 Business Days
             </p>
@@ -676,7 +685,7 @@
 
     <template id="product_share_buttons" inherit_id="website_sale.product" active="True" customize_show="True" name="Share Buttons" priority="22">
         <xpath expr="//div[@id='o_product_terms_and_share']" position="inside">
-            <div class="h4 mt-3 d-flex justify-content-end" contenteditable="false">
+            <div class="h4 mt-3 mb-0 d-flex justify-content-md-end flex-shrink-0" contenteditable="false">
                 <t t-snippet-call="website.s_share">
                     <t t-set="_exclude_share_links" t-value="['whatsapp', 'linkedin']"/>
                     <t t-set="_no_title" t-value="True"/>
@@ -750,16 +759,19 @@
     </template>
 
     <template id="product_quantity" inherit_id="website_sale.product" customize_show="True" name="Select Quantity">
+        <xpath expr="//t[@t-set='hasQuantities']" position="attributes">
+            <attribute name="t-value" remove="false" add="true" separator=" "/>
+        </xpath>
       <xpath expr="//div[@id='add_to_cart_wrap']" position="before">
-        <div class="css_quantity input-group d-inline-flex mr-2 my-1 align-middle" contenteditable="false">
+        <div t-attf-class="css_quantity input-group d-inline-flex mr-2 mb-2 align-middle #{'input-group-lg' if ctaSizeBig else ''}" contenteditable="false">
             <div class="input-group-prepend">
-                <a t-attf-href="#" class="btn btn-primary js_add_cart_json" aria-label="Remove one" title="Remove one">
+                <a t-attf-href="#" class="btn btn-link js_add_cart_json" aria-label="Remove one" title="Remove one">
                     <i class="fa fa-minus"></i>
                 </a>
             </div>
-            <input type="text" class="form-control quantity" data-min="1" name="add_qty" t-att-value="add_qty or 1"/>
+            <input type="text" class="form-control quantity text-center" data-min="1" name="add_qty" t-att-value="add_qty or 1"/>
             <div class="input-group-append">
-                <a t-attf-href="#" class="btn btn-primary float_left js_add_cart_json" aria-label="Add one" title="Add one">
+                <a t-attf-href="#" class="btn btn-link float_left js_add_cart_json" aria-label="Add one" title="Add one">
                     <i class="fa fa-plus"></i>
                 </a>
             </div>
@@ -768,8 +780,14 @@
     </template>
 
     <template id="product_buy_now" inherit_id="website_sale.product" active="False" customize_show="True" name="Buy Now Button">
+        <xpath expr="//t[@t-set='hasBuyNow']" position="attributes">
+            <attribute name="t-value" remove="false" add="true" separator=" "/>
+        </xpath>
         <xpath expr="//a[@id='add_to_cart']" position="after">
-            <a role="button" class="btn btn-outline-primary btn-lg px-5 font-weight-bold o_we_buy_now" href="#"><i class="fa fa-bolt mr-2"/>BUY NOW</a>
+            <a role="button" t-attf-class="btn btn-outline-primary o_we_buy_now ml-1 #{'btn-lg' if ctaSizeBig else ''}" href="#">
+                <i class="fa fa-bolt mr-2"/>
+                <span style="font-weight:bold">BUY NOW</span>
+            </a>
         </xpath>
     </template>
 
@@ -809,7 +827,7 @@
             <t t-if="not product.has_dynamic_attributes() and not product._has_no_variant_attributes() and not product._has_is_custom_values()">
                 <t t-set="attribute_exclusions" t-value="product._get_attribute_exclusions()"/>
                 <t t-set="filtered_sorted_variants" t-value="product._get_possible_variants_sorted()"/>
-                <ul class="d-none js_add_cart_variants" t-att-data-attribute_exclusions="json.dumps(attribute_exclusions)"/>
+                <ul class="d-none js_add_cart_variants mb-0" t-att-data-attribute_exclusions="json.dumps(attribute_exclusions)"/>
                 <input type="hidden" class="product_template_id" t-att-value="product.id"/>
                 <input type="hidden" t-if="len(filtered_sorted_variants) == 1" class="product_id" name="product_id" t-att-value="filtered_sorted_variants[0].id"/>
                 <t t-if="len(filtered_sorted_variants) &gt; 1">

addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss

@@ -63,18 +63,6 @@
     }
 }
 
-// Add to compare button
-#product_details .o_add_compare_dyn {
-    margin-top: 0.75rem;
-}
-
-.o_add_compare_dyn {
-    &, &:hover, &:focus {
-        color: theme-color('primary');
-        text-decoration: none;
-    }
-}
-
 // Specifications
 #product_full_spec {
     border-top: 1px solid gray('400');

addons/website_sale_comparison/views/website_sale_comparison_template.xml

@@ -9,7 +9,7 @@
     </template>
 
     <template id="product_add_to_compare" name='Add to comparison in product page' inherit_id="website_sale.product" priority="8">
-        <xpath expr="//div[@id='add_to_cart_wrap']" position="after">
+        <xpath expr="//div[@id='product_option_block']" position="inside">
             <t t-set="categories" t-value="product.valid_product_template_attribute_line_ids._prepare_categories_for_display()"/>
             <t t-if="not (is_view_active('website_sale_comparison.product_attributes_body') and categories)">
                 <t t-call="website_sale_comparison.add_to_compare_button"/>
@@ -20,7 +20,7 @@
     <template id="add_to_compare_button" name='Add To Compare Button'>
         <t t-if="is_view_active('website_sale_comparison.add_to_compare')">
             <t t-set="product_variant" t-value="product_variant or product._create_first_product_variant()"/>
-            <button t-if="product_variant" type="button" role="button" class="d-none d-md-block btn btn-link p-0 align-self-start o_add_compare_dyn" aria-label="Compare" t-att-data-product-product-id="product_variant.id" data-action="o_comparelist"><span class="fa fa-exchange mr-2"></span>Add to compare</button>
+            <button t-if="product_variant" type="button" role="button" class="d-none d-md-block btn btn-link px-0 pr-3 o_add_compare_dyn order-8" aria-label="Compare" t-att-data-product-product-id="product_variant.id" data-action="o_comparelist"><span class="fa fa-exchange mr-2"></span>Compare</button>
         </t>
     </template>
 

addons/website_sale_stock/static/src/js/variant_mixin.js

@@ -47,9 +47,10 @@ VariantMixin._onChangeCombinationStock = function (ev, $parent, combination) {
 
     const $addQtyInput = $parent.find('input[name="add_qty"]');
     let qty = $addQtyInput.val();
+    let ctaWrapper = $parent[0].querySelector('#o_wsale_cta_wrapper');
+    ctaWrapper.classList.replace('d-none', 'd-flex');
+    ctaWrapper.classList.remove('out_of_stock');
 
-    $parent.find('#add_to_cart').removeClass('out_of_stock');
-    $parent.find('.o_we_buy_now').removeClass('out_of_stock');
     if (combination.product_type === 'product' && !combination.allow_out_of_stock_order) {
         combination.free_qty -= parseInt(combination.cart_qty);
         $addQtyInput.data('max', combination.free_qty || 1);
@@ -61,8 +62,8 @@ VariantMixin._onChangeCombinationStock = function (ev, $parent, combination) {
             $addQtyInput.val(qty);
         }
         if (combination.free_qty < 1) {
-            $parent.find('#add_to_cart').addClass('disabled out_of_stock');
-            $parent.find('.o_we_buy_now').addClass('disabled out_of_stock');
+            ctaWrapper.classList.replace('d-flex', 'd-none');
+            ctaWrapper.classList.add('out_of_stock');
         }
     }
 

addons/website_sale_stock/static/src/xml/website_sale_stock_product_availability.xml

@@ -4,11 +4,11 @@
     <t t-name="website_sale_stock.product_availability">
         <t t-if="product_type == 'product'">
             <!-- show out_of_stock_message whatever the show_availability - pde's spec-->
-            <div id="out_of_stock_message" t-if="free_qty lte 0 and !cart_qty" t-attf-class="availability_message_#{product_template}">
+            <div id="out_of_stock_message" t-if="free_qty lte 0 and !cart_qty" t-attf-class="availability_message_#{product_template} text-danger font-weight-bold">
                 <t t-if='has_out_of_stock_message' t-out='out_of_stock_message'/>
                 <t t-elif="!allow_out_of_stock_order">Out of Stock</t>
             </div>
-            <div id="threshold_message" t-elif="show_availability and free_qty lte available_threshold" t-attf-class="availability_message_#{product_template}">
+            <div id="threshold_message" t-elif="show_availability and free_qty lte available_threshold" t-attf-class="availability_message_#{product_template} text-warning font-weight-bold">
                 Only <t t-esc='free_qty'/> <t t-esc="uom_name" /> left in stock.
             </div>
 

addons/website_sale_stock/views/website_sale_stock_templates.xml

@@ -30,7 +30,7 @@
     </template>
 
   <template id="website_sale_stock_product" inherit_id="website_sale.product" priority="4">
-    <xpath expr="//div[@id='add_to_cart_wrap']" position="after">
+    <xpath expr="//div[@id='o_wsale_cta_wrapper']" position="after">
       <div class="availability_messages o_not_editable"/>
     </xpath>
   </template>

addons/website_sale_wishlist/static/src/scss/website_sale_wishlist.scss

@@ -7,19 +7,8 @@
         display: none;
     }
 
-    .btn.o_add_wishlist_dyn {
-        line-height: 1rem;
-        transform: scale(0.9);
-        transition: transform 300ms;
-
-        &:hover:not(.disabled) {
-            background-color: transparent;
-            color: theme-color('primary');
-            transform: scale(1);
-        }
-        &.disabled i::before {
-            content: "\f004";
-        }
+    .btn.o_add_wishlist_dyn.disabled i::before {
+        content: "\f004";
     }
 }
 

addons/website_sale_wishlist/views/website_sale_wishlist_template.xml

@@ -13,7 +13,7 @@
         <xpath expr="//div[@id='product_option_block']" position="inside">
             <t t-set="product_variant" t-value="product_variant or product._create_first_product_variant()"/>
             <t t-set="in_wish" t-value="product_variant and product_variant._is_in_wishlist()"/>
-            <button t-if="product_variant" type="button" role="button" class="btn btn-outline-primary border-0 my-1 px-2 o_add_wishlist_dyn" t-att-disabled='in_wish or None' t-att-data-product-template-id="product.id" t-att-data-product-product-id="product_variant.id" data-action="o_wishlist" title="Add to wishlist"><i class="fa fa-heart-o fa-2x" role="img" aria-label="Add to wishlist"/></button>
+            <button t-if="product_variant" type="button" role="button" class="btn btn-link px-0 pr-3 o_add_wishlist_dyn" t-att-disabled='in_wish or None' t-att-data-product-template-id="product.id" t-att-data-product-product-id="product_variant.id" data-action="o_wishlist" title="Add to wishlist"><i class="fa fa-heart-o mr-2" role="img" aria-label="Add to wishlist"/>Add to wishlist</button>
         </xpath>
     </template>