[IMP] website_sale_insurance_caser: Change the selector so that the quantity selector for the “Add to Cart” button does not move

TT59185

Author: pilarvargas-tecnativa

website_sale_insurance_caser/README.rst

@@ -33,11 +33,11 @@ purchase insurance for their products directly from the online store.
 
 This module extends **sale_insurance_caser** by adding:
 
-- Checkbox on product page to add insurance
-- Interactive modal at checkout offering insurance for uncovered
-  products
-- Visual badges identifying insurance lines in the cart
-- Automatic synchronization between cart and insurance lines
+-  Checkbox on product page to add insurance
+-  Interactive modal at checkout offering insurance for uncovered
+   products
+-  Visual badges identifying insurance lines in the cart
+-  Automatic synchronization between cart and insurance lines
 
 **Table of contents**
 
@@ -49,16 +49,16 @@ Configuration
 
 1. **Configure the base module** ``sale_insurance_caser``:
 
-   - Define price ranges (``caser.price.range``)
-   - Configure insurance products
-   - Set up Caser API credentials
+   -  Define price ranges (``caser.price.range``)
+   -  Configure insurance products
+   -  Set up Caser API credentials
 
 2. **Enable insurance on eCommerce products**:
 
-   - Go to *Inventory > Products > Products*
-   - Open a product you want to offer with insurance
-   - In the **Sales** tab, check the **Caser Insurance in eCommerce**
-     checkbox
+   -  Go to *Inventory > Products > Products*
+   -  Open a product you want to offer with insurance
+   -  In the **Sales** tab, check the **Caser Insurance in eCommerce**
+      checkbox
 
 Usage
 =====
@@ -83,9 +83,9 @@ Usage
    uninsured products
 7. The modal displays:
 
-   - Product image and name
-   - Insurance price per unit and total
-   - Toggle switches to select which products to insure
+   -  Product image and name
+   -  Insurance price per unit and total
+   -  Toggle switches to select which products to insure
 
 8. Upon confirmation, page reloads with new insurance lines added
 
@@ -110,9 +110,9 @@ Authors
 Contributors
 ------------
 
-- `Tecnativa <https://www.tecnativa.com>`__:
+-  `Tecnativa <https://www.tecnativa.com>`__:
 
-  - Juan Carlos Oñate
+   -  Juan Carlos Oñate
 
 Maintainers
 -----------

website_sale_insurance_caser/views/templates.xml

@@ -5,40 +5,45 @@
         inherit_id="website_sale.product"
         name="Caser Insurance Checkbox"
     >
-        <xpath expr="//div[@id='add_to_cart_wrap']" position="before">
+        <xpath expr="//div[@id='o_wsale_cta_wrapper']/*" position="before">
             <t
                 t-if="website.caser_insurance_enabled and product.caser_insurance_ecommerce"
             >
                 <t
                     t-set="caser_price_display"
                     t-value="product.get_caser_insurance_price_display(combination_info['price'])"
                 />
-                <div class="mb-3 w-100">
-                    <div>
-                        Tu dispositivo protegido, pase lo que pase
+                <div class="p-2 mb-3 w-100 border border-secondary">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="me-3">
+                            <div>Tu dispositivo protegido, pase lo que pase</div>
+                            <t t-if="caser_price_display">
+                                <div class="form-check">
+                                    <input
+                                        type="checkbox"
+                                        class="form-check-input"
+                                        id="caser_insurance_checkbox"
+                                        name="caser_add_insurance"
+                                        value="1"
+                                    />
+                                    <label
+                                        class="form-check-label"
+                                        for="caser_insurance_checkbox"
+                                    >
+                                        Seguro anual por <t
+                                        t-esc="caser_price_display"
+                                    />
+                                    </label>
+                                </div>
+                            </t>
+                        </div>
                         <img
-                        src="/website_sale_insurance_caser/static/src/img/logo-caser.png"
-                        alt="Caser"
-                        style="height: 30px; margin-left: 10px;"
-                    />
+                            src="/website_sale_insurance_caser/static/src/img/logo-caser.png"
+                            alt="Caser"
+                            class="d-block flex-shrink-0"
+                            style="height: 30px;"
+                        />
                     </div>
-                    <t t-if="caser_price_display">
-                        <div class="form-check">
-                            <input
-                                type="checkbox"
-                                class="form-check-input"
-                                id="caser_insurance_checkbox"
-                                name="caser_add_insurance"
-                                value="1"
-                            />
-                            <label
-                                class="form-check-label"
-                                for="caser_insurance_checkbox"
-                            >
-                                Seguro anual por <t t-esc="caser_price_display" />
-                            </label>
-                        </div>
-                    </t>
                 </div>
             </t>
         </xpath>