wickes-css2 2.98.0-develop.3 → 2.98.0-develop.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.98.0-develop.3",
+  "version": "2.98.0-develop.5",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

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

@@ -18,21 +18,26 @@
                 </li>
             {{/each}}
         {{/if}}
-        {{> checkout-voucher-accordion id=id}}
+        {{#unless hideApplyVoucher}}
+          {{> checkout-voucher-accordion id=id}}
+        {{/unless}}
         {{#if discounts}}
             <li class="checkout-widget__accordion-wrap checkout-widget__details-discount">
-            <span class="checkout-widget__detail-name checkout-widget__detail-name_accordion collapsed" data-toggle="collapse"
-                    data-target="#acheckout-widget-accordion-{{id}}">Discount(s):
-                <span class="icon accordion__header-icon-small">
-                <i class="fas fa-angle-up"></i>
-                </span>
-            </span>
-                <ul class="checkout-widget__details-hidden collapse" id="acheckout-widget-accordion-{{id}}">
-                    {{#each discounts}}
-                        {{> cart-voucher}}
-                    {{/each}}
-                </ul>
-                <span class="checkout-widget__detail-value">£0.00</span>
+              <span
+                class="checkout-widget__detail-name checkout-widget__detail-name_accordion collapsed"
+                data-toggle="collapse"
+                data-target="#acheckout-widget-accordion-{{id}}">
+                  Discount(s):
+                  <span class="icon accordion__header-icon-small">
+                    <i class="fas fa-angle-up"></i>
+                  </span>
+              </span>
+              <ul class="checkout-widget__details-hidden collapse" id="acheckout-widget-accordion-{{id}}">
+                  {{#each discounts}}
+                      {{> cart-voucher}}
+                  {{/each}}
+              </ul>
+              <span class="checkout-widget__detail-value">£0.00</span>
             </li>
         {{/if}}
     </ul>

package/src/components/header-minicart.hbs

@@ -6,12 +6,12 @@
       </span>
       <span class="header-right__link-title">Basket</span>
     </span>
-    <a href="page_shopping-cart.html" class="header-right__link header-minicart__btn header-minicart__btn_link"  style="display: none;">
+    <button type="button" class="header-right__link header-minicart__btn header-minicart__btn_link" style="display: none;">
       <span class="btn__text">
         <i class="fas fa-shopping-basket fa-2x"></i>
       </span>
       <span class="header-right__link-title">Basket</span>
-    </a>
+    </button>
   </div>
   <span class="header-minicart__counter">0</span>
-</div>
+</div>

package/src/components/legal-info.hbs

@@ -1,27 +1,24 @@
-<div class="legal-info container">
-    <div class="row">
-        <div class="col-lg-3"></div>
-        <div class="col-lg-9">
-            <p>
-                Terms and conditions Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-                commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                pariatur.
-                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-                laborum.
-            </p>
-            <p>
-                Terms and conditions Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-                commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                pariatur.
-                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-                laborum.
-            </p>
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      <div class="legal-info">
+        <h3 class="legal-info__toggle" data-toggle="collapse" data-target="#collapseInfo" aria-expanded="false" aria-controls="collapseInfo">
+          {{#if customTitle}}
+            {{customTitle}}
+          {{else}}
+            Frequently Asked Questions
+          {{/if}}
+          <span class="icon-wrap"></span>
+        </h3>
+
+        <div class="collapse" id="collapseInfo">
+          <div class="collapse-wrap">
+            <div class="container">
+              {{{page_category-landing.legal-info}}}
+            </div>
+          </div>
         </div>
+      </div>
     </div>
-</div>
+  </div>
+</div>

package/src/components/mini-basket/mini-basket-empty.hbs

@@ -0,0 +1,17 @@
+<div class="custom-slider mini-basket d-none">
+  <div class="custom-slider__wrap">
+    <div class="custom-slider__header">
+      <span class="custom-slider__count">Your basket (0)</span>
+      <a href="#" type="button" class="icon-wrap close-popup">
+        <i class="far fa-times icon"></i>
+      </a>
+    </div>
+    <div class="custom-slider__empty">
+      <span class="icon-wrap icon-wrap--xl">
+        <i class="fas fa-shopping-basket"></i>
+      </span>
+      <p class="text">Your basket is currently empty.</p>
+      <button class="btn btn-primary close-popup">Continue Shopping</button>
+    </div>
+  </div>
+</div>

package/src/components/mini-basket/mini-basket.hbs

@@ -0,0 +1,39 @@
+<div class="custom-slider mini-basket d-none">
+  <div class="custom-slider__wrap custom-slider__wrap--scroll">
+    <div class="custom-slider__header">
+      <span class="custom-slider__count">Your basket (1)</span>
+      <button type="button" class="icon-wrap close-popup">
+        <i class="far fa-times icon"></i>
+      </button>
+    </div>
+    <ul class="products">
+      {{#each mini-basket.products}}
+        {{> mini-basket/product-item this switch-vat=true}}
+      {{/each}}
+    </ul>
+  </div>
+  <div class="custom-slider__footer footer-fixed">
+    <div class="mini-basket__total">
+      <button class="btn mini-basket__total-toggle" type="button" data-toggle="collapse" data-target="#checkout-details-accordion-3" aria-expanded="false" aria-controls="checkout-details-accordion-3">
+          <span class="mini-basket__wrap-total">
+            <span class="icon-wrap">
+              <i class="fas fa-chevron-down arrow-icon"></i>
+            </span>
+            <span class="text">Total:</span>
+          </span>
+        <span class="value">{{mini-basket.total.totalPrice.formattedValue}}</span>
+      </button>
+
+      {{> checkout_order-summary-new confirmationSummary=true head=true mod=true id=3 mobile=true hideApplyVoucher=true}}
+    </div>
+    <div class="custom-slider__ctas">
+      <a href="page_shopping-cart.html" class="btn btn_full btn-secondary">View Basket</a>
+      <button class="btn btn-action btn_full btn-checkout">
+        Checkout
+        <span class="icon-wrap ml-2">
+          <i class="fas fa-arrow-right"></i>
+        </span>
+      </button>
+    </div>
+  </div>
+</div>

package/src/components/mini-basket/product-item.hbs

@@ -0,0 +1,22 @@
+<li class="products__item">
+  <a class="products__image" href="page_product-details-with-global-search-v2.html">
+    <img class="product-img" src="{{src}}" alt="">
+  </a>
+  <div class="products__details">
+    <a href="#" class="title">{{title}}</a>
+    <p class="item">Click &amp; Collect: <span class="value">{{CC}}</span></p>
+    <p class="item">Qty: <span class="value">{{quantity.value}}</span></p>
+    {{#if switch-vat}}
+      <p class="price including-vat-inherit">
+        {{incVatPrice}}
+        <span class="inc">Inc.VAT</span>
+      </p>
+      <p class="price excluding-vat-inherit">
+        {{excVatPrice}}
+        <span class="inc">Exc.VAT</span>
+      </p>
+    {{else}}
+      <p class="price">{{price}}</p>
+    {{/if}}
+  </div>
+</li>

package/src/components/pdp-price-actions.hbs

@@ -83,4 +83,4 @@
     <span class="btn__text">Order Paint Mix</span>
   </button>
 </div>
-{{/if}}
+{{/if}}

package/src/components/price-block-v2.hbs

@@ -194,7 +194,6 @@
                         big-wins=big-wins
                         wisdom=wisdom
                         mcfc=mcfc
-                        paint-mix=true
                         available=available
                         stock-accordion="stock-accordion"
                         isUserNonRegistered=isUserNonRegistered

package/src/data/data_confirmation-summary.json

@@ -2,12 +2,12 @@
   "confirmation-summary": {
     "info": [
       {
-        "title": "Items Subtotal:",
+        "title": "Items subtotal:",
         "value": "£44.44",
         "mod": "bold"
       },
       {
-        "title": "Includes VAT:",
+        "title": "VAT:",
         "value": "£71.66",
         "mod": "vat"
       },
@@ -21,7 +21,7 @@
         "mod": "delivery"
       },
       {
-        "title": "Young Minds donation:",
+        "title": "Charity donation:",
         "value": "£1.00"
       }
     ],

package/src/data/data_latest-offers.json

@@ -2409,4 +2409,4 @@
       ]
     }
   }
-}
+}

package/src/data/data_mini-basket.json

@@ -11,7 +11,8 @@
         "price": "£2,009.00",
         "incVatPrice": "£30.00",
         "excVatPrice": "£10.00",
-        "lower-quantity": true
+        "lower-quantity": true,
+        "CC": "East Grinstead"
       },
       {
         "quantity": {
@@ -31,9 +32,77 @@
         "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
         "src": "img/placeholders/[e-img-4to3].jpg",
         "price": "£2,009.00",
-        "incVatPrice": "£3,009.00",
-        "excVatPrice": "£1,009.00",
-        "basket-product": true
+        "incVatPrice": "£309.00",
+        "excVatPrice": "£109.00",
+        "bad-amount": true
+      },
+      {
+        "quantity": {
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/tap.jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£30.00",
+        "excVatPrice": "£10.00",
+        "lower-quantity": true,
+        "CC": "East Grinstead"
+      },
+      {
+        "quantity": {
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/[e-img-4to3].jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£309.00",
+        "excVatPrice": "£109.00",
+        "bad-amount": true
+      },
+      {
+        "quantity": {
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/[e-img-4to3].jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£309.00",
+        "excVatPrice": "£109.00",
+        "bad-amount": true
+      },
+      {
+        "quantity": {
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/tap.jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£30.00",
+        "excVatPrice": "£10.00",
+        "lower-quantity": true,
+        "CC": "East Grinstead"
+      },
+      {
+        "quantity": {
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/[e-img-4to3].jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£309.00",
+        "excVatPrice": "£109.00",
+        "bad-amount": true
+      },
+      {
+        "quantity": {
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/[e-img-4to3].jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£309.00",
+        "excVatPrice": "£109.00",
+        "bad-amount": true
       }
     ],
     "just-added": [
@@ -48,6 +117,11 @@
         "excVatPrice": "£1,009.00",
         "basket-product": true
       }
-    ]
+    ],
+    "total": {
+      "totalPrice": {
+        "formattedValue": "£17.50"
+      }
+    }
   }
-}
+}

package/src/data/data_page-category.json

@@ -217,6 +217,7 @@
           }
         ]
       }
-    ]
+    ],
+    "legal-info": "<p>Our selection of toilets is crafted to suit a wide range of <a href=\"https://www.wickes.co.uk/bathroom/suites\">bathroom suites</a>, from compact cloakrooms to spacious bathrooms. With our large selection, you’ll easily find a solution for both modern and traditional spaces. Each toilet is built for efficiency and easy maintenance, helping you achieve a stylish, functional bathroom with a range of finishes and shapes.</p>\n<h3>FAQs</h3>\n<h4>What are the different types of toilets?</h4>\n<p>Different toilet types include close-coupled, back-to-wall, rimless, wall-hung, and <a href=\"https://www.wickes.co.uk/Products/Bathrooms/Toilets+Accessories/Low+High-Level-Toilets/c/1000359\">high and low-level toilets</a>. Each has unique installation and style benefits, suitable for various bathroom sizes and styles.</p>\n<h4>What toilets suit a modern bathroom?</h4>\n<p>Rimless, wall-hung and <a href=\"https://www.wickes.co.uk/Products/Bathrooms/Toilets+Accessories/Back-to-Wall-Toilets/c/1000282\">back-to-wall toilets</a> fit well in modern bathrooms. Their sleek designs and efficient features offer a clean, contemporary look.</p>\n<h4>What toilets look best in a traditional bathroom?</h4>\n<p>High-level and low-level toilets are popular in traditional designs, adding elegance and classic style with vintage-inspired cisterns and details.</p>"
   }
 }

package/src/data/data_page-merge-basket.json

@@ -110,7 +110,7 @@
         "energyEfficiency": {
           "type": "Old",
           "rating": "C",
-          "linkProduct": "https://media.wickes.co.uk/image/upload/v1676542815/documents/wickes/Product-Info-Example_qj5mln.pdf",
+          "linkProduct": "https://media.wickes.co.uk/image/upload/v1676542815/documents/wickes/Product-Info-Example_qj5mln.pdf"
         }
       },
       {

package/src/data/data_store-locator-v2.json

@@ -8,7 +8,7 @@
       "telephone": "01872 6511 101",
       "fax": "01872 6511 101",
       "sat-nav": "X11 1TT",
-      "store-info": "Maecenas nisl leo, consectetur a lacus eu, lacinia tincidunt elit. Suspendisse bibendum molestie lectus sit amet vehicula. Vestibulum in nisi at felis finibus maximus. Fusce placerat viverra semper. Sed in nulla quis neque commodo faucibus a ut eros.",
+      "store-info": "Maecenas nisl leo, consectetur a lacus eu, lacinia tincidunt elit. Suspendisse bibendum molestie lectus sit amet vehicula. Vestibulum in nisi at felis finibus maximus. Fusce placerat viverra semper. Sed in nulla quis neque commodo faucibus a ut eros."
     },
     "accordion-data": [
       {

package/src/js/components/general/backdrop.js

@@ -0,0 +1,23 @@
+var Wick = Wick || {};
+
+Wick.Backdrop = (function () {
+  const el = {
+    modalBackdrop: 'modal-backdrop',
+    modalBackdropShow: 'show'
+  }
+
+  function show() {
+    if (!$(`.${el.modalBackdrop}`).length) {
+      $('body').append(`<div class="${el.modalBackdrop} ${el.modalBackdropShow}"></div>`);
+    }
+  }
+
+  function hide() {
+    $('body').find(`.${el.modalBackdrop}.${el.modalBackdropShow}`).remove();
+  }
+
+  return {
+    show,
+    hide,
+  };
+})();

package/src/js/components/general/cart-slider.js

@@ -0,0 +1,16 @@
+const cartSliderHTML = '<div class="custom-slider just-added d-none"></div>';
+
+createPopupSlider({
+  type: 'cart',
+  sliderSelector: '.custom-slider.just-added',
+  onAppendEvent: 'productAddedToCart',
+  onAppend: function (event, { showSlider, handleScroll, el }) {
+    if (!$('.custom-slider.just-added').length) {
+      $('body').append(cartSliderHTML);
+    }
+    const htmlContent = event.detail.html;
+    $(el.slider).append(htmlContent);
+    showSlider();
+    $(el.sliderWrap).on('scroll', _.debounce(() => handleScroll(el.sliderWrap), 100));
+  },
+});

package/src/js/components/general/create-popup-slider.js

@@ -0,0 +1,196 @@
+function createEvent(eventName, payload, eventDetail) {
+  return new CustomEvent(eventName, {
+    detail: {
+      payload,
+      resolve: eventDetail.resolve,
+      reject: eventDetail.reject,
+    },
+  });
+}
+
+function createPopupSlider({ type, sliderSelector, onAppendEvent, onAppend }) {
+  const events = {
+    CLOSE_JUST_ADDED: 'CLOSE_JUST_ADDED',
+    CLOSE_MINI_BASKET: 'CLOSE_MINI_BASKET'
+  }
+
+  const el = {
+    $body: $('body'),
+    slider: sliderSelector,
+    sliderWrap: `${sliderSelector} .custom-slider__wrap`,
+    sliderWrapScroll: 'custom-slider__wrap--scroll',
+    footer: '.custom-slider__footer',
+    closePopup: `${sliderSelector} .close-popup`,
+    $stickyWrapper: $('.sticky-wrapper'),
+    $headerWrapper: $('.header-wrapper'),
+    scrollDisable: 'slider-scroll-disable',
+    footerFixed: 'footer-fixed',
+    btnMiniBasket: '.header-minicart__btn',
+  };
+
+  function isSmallBreakpoint() {
+    return Wick.Responsive.getCurrentBreakpoint() === 'down-sm';
+  }
+
+  function getAnimationClass() {
+    return isSmallBreakpoint() ? 'bottom-to-top' : 'right-to-left';
+  }
+
+  function adjustHeight() {
+    const stickyWrapperHeight = el.$stickyWrapper.outerHeight() || 0;
+    const headerWrapperHeight = el.$headerWrapper.outerHeight() || 0;
+
+    const totalHeight = stickyWrapperHeight + headerWrapperHeight;
+    $(el.slider).css('height', `calc(100% - ${totalHeight}px)`);
+  }
+
+  function hideSlider() {
+    $(el.slider).removeClass('show');
+
+    setTimeout(() => {
+      el.$body.removeClass(el.scrollDisable);
+
+      if (!isSmallBreakpoint()) {
+        el.$body.css('padding-right', '');
+      }
+
+      if (type === 'cart') {
+        $(el.slider)
+          .removeAttr('style')
+          .empty();
+      }
+
+      $(el.slider).addClass('d-none');
+    }, 400);
+  }
+
+  function handleScroll(sliderWrap) {
+    const scrollHeight = $(sliderWrap)[0].scrollHeight;
+    const scrollTop = $(sliderWrap).scrollTop();
+    const clientHeight = $(sliderWrap)[0].clientHeight;
+    const scrollBottom = scrollHeight - scrollTop - clientHeight;
+
+    if (scrollBottom > 75) {
+      $(el.footer).addClass(el.footerFixed);
+      $(sliderWrap).addClass(el.sliderWrapScroll);
+    } else {
+      $(el.footer).removeClass(el.footerFixed);
+      $(sliderWrap).removeClass(el.sliderWrapScroll);
+    }
+  }
+
+  function showSlider() {
+    if (isSmallBreakpoint()) {
+      adjustHeight();
+    }
+
+    const animationClass = getAnimationClass();
+    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+    $(el.slider)
+      .removeClass('bottom-to-top right-to-left')
+      .addClass(animationClass);
+
+    $('html, body').animate({ scrollTop: 0 }, 300, () => {
+      Wick.Backdrop.show();
+      $(el.slider).removeClass('d-none');
+
+      setTimeout(() => {
+        $(el.slider).addClass('show');
+        handleScroll(el.sliderWrap);
+        el.$body.addClass(el.scrollDisable);
+
+        if (!isSmallBreakpoint()) {
+          el.$body.css('padding-right', `${scrollBarWidth}px`);
+        }
+      }, 100);
+    });
+  }
+
+  function handleSliderClose(eventName) {
+    return new Promise((resolve, reject) => {
+      const eventDetail = {resolve, reject};
+      const event = createEvent(eventName, {}, eventDetail);
+      window.dispatchEvent(event);
+    })
+      .then(() => {})
+      .catch((error) => {
+        console.error(error);
+      })
+      .finally(() => {
+        hideSlider();
+        Wick.Backdrop.hide();
+      })
+  }
+
+  function bindClosePopup() {
+    $(document).on('click', el.closePopup, async () => {
+      if (type === 'cart') {
+        await handleSliderClose(events.CLOSE_JUST_ADDED);
+      }
+
+      if (type === 'miniBasket') {
+        await handleSliderClose(events.CLOSE_MINI_BASKET)
+      }
+
+      hideSlider();
+      Wick.Backdrop.hide();
+    });
+  }
+
+  function handleResize() {
+    const animationClass = getAnimationClass();
+
+    if ($(el.slider).hasClass('show')) {
+      $(el.slider)
+        .removeClass('bottom-to-top right-to-left')
+        .addClass(animationClass);
+
+      if (isSmallBreakpoint()) {
+        adjustHeight();
+      } else {
+        $(el.slider).css('height', '');
+        Wick.Backdrop.show();
+      }
+    }
+  }
+
+  function shouldClosePopup(event) {
+    const $target = $(event.target);
+    return (
+      !$target.closest(el.slider).length &&
+      !$target.closest(el.closePopup).length &&
+      $(el.slider).hasClass('show')
+    );
+  }
+
+  function init() {
+    bindClosePopup();
+
+    if (onAppendEvent && onAppend) {
+      document.addEventListener(onAppendEvent, (event) => {
+        onAppend(event, { showSlider, handleScroll, el });
+      });
+    }
+
+    $(window).on('resize', _.debounce(handleResize, 100));
+
+    $('body').on('click', async (event) => {
+      if (shouldClosePopup(event)) {
+        if (type === 'cart') {
+          await handleSliderClose(events.CLOSE_JUST_ADDED);
+        }
+
+        if (type === 'miniBasket') {
+          await handleSliderClose(events.CLOSE_MINI_BASKET)
+        }
+      }
+    });
+  }
+
+  init();
+
+  return {
+    showSlider,
+    handleScroll,
+  };
+}

package/src/js/components/general/mini-basket-slider.js

@@ -0,0 +1,8 @@
+createPopupSlider({
+  type: 'miniBasket',
+  sliderSelector: '.custom-slider.mini-basket',
+  onAppendEvent: 'showMiniBasket',
+  onAppend: function (event, { showSlider }) {
+    showSlider();
+  },
+});