wickes-css2 2.94.0-order-summary.2 → 2.94.0-order-summary.4

package/build/js/page/basket-v2.js

@@ -29,6 +29,7 @@ import {
 } from './basket/session-sync'
 import {displayEnergyEfficiency} from "./basket/display-energy-efficiency";
 import {appendLoader, hideLoader, showLoader} from "./utils/loader";
+import { initStickySummary } from './components/sticky-order-summary';
 
 var Wick = window.Wick || {};
 Wick.BasketPage = {
@@ -1256,6 +1257,9 @@ Wick.BasketPage = {
         $(Wick.BasketPage.el.content).find(quantityButton).prop('disabled', false);
     }
 };
+
+$(document).on('cartUpdate', initStickySummary);
+
 $(document).ready(function () {
     function init() {
 
@@ -1290,6 +1294,7 @@ $(document).ready(function () {
 
         $(Wick.BasketPage.el.voucherRemove).unbind('click');
         Wick.BasketPage.paintActionButton();
+        initStickySummary();
         Wick.BasketPage.updateCart(...Array(3), true);
         setDefaultCharityValue();
         if (!$(Wick.BasketPage.el.loader).length) {

package/build/js/page/components/sticky-order-summary.js

@@ -0,0 +1,40 @@
+export function initStickySummary () {
+  let io;
+  const $summaries = $('[data-summary-main]');
+  const $stickies  = $('[data-summary-sticky]');
+  if (!$summaries.length || !$stickies.length) return;
+
+  const toggle = (hide) => {
+    $stickies.toggleClass('is-hidden', hide);
+    $('body').toggleClass('summary-hidden', hide);
+
+    if (hide) {
+      $('.summary__aside.collapse.show').collapse('hide');
+    }
+  };
+
+  if ('IntersectionObserver' in window) {
+    if (io) io.disconnect();
+    io = new IntersectionObserver(
+      entries => {
+        const visible = entries.some(e => e.isIntersecting);
+        toggle(visible);
+      },
+      { rootMargin: '0px 0px -20% 0px', threshold: 0 }
+    );
+    $summaries.each(function () { io.observe(this); });
+    return;
+  }
+
+  function check () {
+    let hide = false;
+    $summaries.each(function () {
+      const r = this.getBoundingClientRect();
+      if (r.top < window.innerHeight * 0.8 && r.bottom > 0) hide = true;
+    });
+    toggle(hide);
+  }
+  $(window).off('scroll.sticky resize.sticky')
+    .on('scroll.sticky resize.sticky', check);
+  check();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.94.0-order-summary.2",
+  "version": "2.94.0-order-summary.4",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

package/src/components/checkout_order-summary-new.hbs

@@ -37,7 +37,7 @@
         {{/if}}
     </ul>
   {{#unless mobile}}
-    <div class="checkout-widget__total">
+    <div class="checkout-widget__total" data-summary-main>
         {{#if confirmationSummary}}
             <div> {{ confirmation-summary.total.title }}</div>
             <div class="checkout-widget__total-value">{{ confirmation-summary.total.value }}</div>

package/src/components/order-summary.hbs

@@ -1,7 +1,7 @@
 {{#if basket}}
 <div class="summary summary--mobile d-lg-none" id="summary-mobile-{{id}}">
   {{> summary-mobile-bar}}
-  <div class="collapse summary__aside container" id="checkout-summary-mobile-accordion-{{id}}">
+  <div class="collapse summary__aside container" id="checkout-summary-mobile-accordion-{{id}}" data-summary-sticky>
 
     {{> checkout_order-summary-new head=title mod=mod id=(concat id "-mobile") mobile="true"}}
     {{#unless basket}}

package/src/components/summary-mobile-bar.hbs

@@ -1,4 +1,4 @@
-<div class="summary__mobile-bar">
+<div class="summary__mobile-bar" data-summary-sticky>
   <div class="summary__mobile-order collapsed"
        data-toggle="collapse"
        aria-expanded="false"
@@ -13,5 +13,7 @@
       </div>
     </div>
   </div>
-  {{> checkout-action container="true" hidePaypalEmail="true"}}
+  <div>
+    {{> checkout-action container="true" hidePaypalEmail="true"}}
+  </div>
 </div>

package/src/js/page/basket-v2.js

@@ -29,6 +29,7 @@ import {
 } from './basket/session-sync'
 import {displayEnergyEfficiency} from "./basket/display-energy-efficiency";
 import {appendLoader, hideLoader, showLoader} from "./utils/loader";
+import { initStickySummary } from './components/sticky-order-summary';
 
 var Wick = window.Wick || {};
 Wick.BasketPage = {
@@ -1256,6 +1257,9 @@ Wick.BasketPage = {
         $(Wick.BasketPage.el.content).find(quantityButton).prop('disabled', false);
     }
 };
+
+$(document).on('cartUpdate', initStickySummary);
+
 $(document).ready(function () {
     function init() {
 
@@ -1290,6 +1294,7 @@ $(document).ready(function () {
 
         $(Wick.BasketPage.el.voucherRemove).unbind('click');
         Wick.BasketPage.paintActionButton();
+        initStickySummary();
         Wick.BasketPage.updateCart(...Array(3), true);
         setDefaultCharityValue();
         if (!$(Wick.BasketPage.el.loader).length) {

package/src/js/page/components/sticky-order-summary.js

@@ -0,0 +1,40 @@
+export function initStickySummary () {
+  let io;
+  const $summaries = $('[data-summary-main]');
+  const $stickies  = $('[data-summary-sticky]');
+  if (!$summaries.length || !$stickies.length) return;
+
+  const toggle = (hide) => {
+    $stickies.toggleClass('is-hidden', hide);
+    $('body').toggleClass('summary-hidden', hide);
+
+    if (hide) {
+      $('.summary__aside.collapse.show').collapse('hide');
+    }
+  };
+
+  if ('IntersectionObserver' in window) {
+    if (io) io.disconnect();
+    io = new IntersectionObserver(
+      entries => {
+        const visible = entries.some(e => e.isIntersecting);
+        toggle(visible);
+      },
+      { rootMargin: '0px 0px -20% 0px', threshold: 0 }
+    );
+    $summaries.each(function () { io.observe(this); });
+    return;
+  }
+
+  function check () {
+    let hide = false;
+    $summaries.each(function () {
+      const r = this.getBoundingClientRect();
+      if (r.top < window.innerHeight * 0.8 && r.bottom > 0) hide = true;
+    });
+    toggle(hide);
+  }
+  $(window).off('scroll.sticky resize.sticky')
+    .on('scroll.sticky resize.sticky', check);
+  check();
+}

package/src/page_shopping-cart-v2.html

@@ -19,10 +19,10 @@
   {{/content}}
 {{#content "aside"}}
   {{> order-summary
-    shopping-cart-v2.checkout
-    id=1
-    title="Order Summary"
-    basket=true
+  shopping-cart-v2.checkout
+  id=1
+  title="Order Summary"
+  basket=true
   }}
   {{> checkout-action  mod="mounted"}}
   {{> checkout-action  mod="mounted" view="mobile"}}

package/src/scss/components/_order-summary.scss

@@ -1,5 +1,35 @@
 @import '../helpers/helpers';
 
+[data-summary-sticky] {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  transform: translateY(100%);
+  opacity: 0;
+  pointer-events: none;
+  will-change: transform, opacity;
+  transition: transform 0.5s ease, opacity 0.5s ease;
+}
+
+[data-summary-sticky]:not(.is-hidden) {
+  transform: translateY(0);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+[data-summary-sticky].is-hidden {
+  transform: translateY(100%);
+  opacity: 0;
+  transition: transform 0.5s ease 0s, opacity   0.5s ease 5s;
+  pointer-events: none;
+}
+
+body.summary-hidden .back-to-top {
+  bottom: 20px !important;
+  right: 16px !important;
+}
+
 .summary {
   &__aside {
     padding: 15px;