feat(payment): PAYPAL-1474 added an ID for 'Check out' button and add…

…ed extra container to render Accelerated Checkout in
bigcommerce · Sep 6, 2022 · 575b85a · 575b85a
1 parent 77a1b01
commit 575b85a
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 10 deletions.
diff --git a/assets/scss/components/stencil/cart/_cart.scss b/assets/scss/components/stencil/cart/_cart.scss
@@ -535,14 +535,15 @@ $card-preview-zoom-bottom-offset:       6rem;
     }
 }
 
-.cart-additionalCheckoutButtons {
-    @extend %additionalCheckoutButtons;
+.cart-acceleratedCheckoutButtons {
+    align-items: end;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
 }
 
-.previewCart-additionalCheckoutButtons {
+.cart-additionalCheckoutButtons {
     @extend %additionalCheckoutButtons;
-    padding-bottom: spacing("single");
-    padding-right: spacing("single");
 }
 
 // Cart Preview
@@ -679,3 +680,13 @@ $card-preview-zoom-bottom-offset:       6rem;
     padding: spacing("double");
     text-align: center;
 }
+
+.previewCart-acceleratedCheckoutButtons {
+    width: 100%;
+}
+
+.previewCart-additionalCheckoutButtons {
+    @extend %additionalCheckoutButtons;
+    padding-bottom: spacing("single");
+    padding-right: spacing("single");
+}
diff --git a/templates/components/common/cart-preview.html b/templates/components/common/cart-preview.html
@@ -47,9 +47,16 @@ <h6 class="previewCartItem-name">
                 {{/each}}
             </ul>
             <div class="previewCartAction">
+                {{#if cart.additional_checkout_buttons}}
+                    <div data-cart-accelerated-checkout-buttons class="previewCart-acceleratedCheckoutButtons"></div>
+                {{/if}}
                 {{#if cart.show_primary_checkout_button}}
                     <div class="previewCartAction-checkout">
-                        <a href="{{urls.checkout.single_address}}" class="button button--small button--primary">
+                        <a
+                                href="{{urls.checkout.single_address}}"
+                                class="button button--small button--primary"
+                                data-primary-checkout-now-action
+                        >
                             {{lang 'cart.preview.checkout_now'}}
                         </a>
                     </div>

diff --git a/templates/pages/cart.html b/templates/pages/cart.html
@@ -28,9 +28,20 @@
 
             {{{region name="cart_below_totals"}}}
 
+            {{#if cart.additional_checkout_buttons}}
+                <div data-cart-accelerated-checkout-buttons class="cart-acceleratedCheckoutButtons cart-content-padding-right"></div>
+            {{/if}}
+
             {{#if cart.show_primary_checkout_button}}
                 <div class="cart-actions cart-content-padding-right">
-                    <a class="button button--primary" href="{{urls.checkout.single_address}}" title="{{lang 'cart.checkout.title'}}">{{lang 'cart.checkout.button'}}</a>
+                    <a
+                            class="button button--primary"
+                            href="{{urls.checkout.single_address}}"
+                            title="{{lang 'cart.checkout.title'}}"
+                            data-primary-checkout-now-action
+                    >
+                        {{lang 'cart.checkout.button'}}
+                    </a>
                     {{#if cart.show_multiple_address_shipping}}
                         <a class="checkoutMultiple" href="{{urls.checkout.multiple_address}}">
                             {{lang 'cart.preview.checkout_multiple'}}
@@ -43,9 +54,11 @@
                 </div>
             {{/if}}
 
-            <div data-cart-additional-checkout-buttons class="cart-additionalCheckoutButtons cart-content-padding-right">
-                {{> components/cart/additional-checkout-buttons}}
-            </div>
+            {{#if cart.additional_checkout_buttons}}
+                <div data-cart-additional-checkout-buttons class="cart-additionalCheckoutButtons cart-content-padding-right">
+                    {{> components/cart/additional-checkout-buttons}}
+                </div>
+            {{/if}}
 
         {{else}}
             <h3 tabindex="0">{{lang 'cart.checkout.empty_cart'}}</h3>