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

package/src/js/emulation/mock.js

@@ -20,5 +20,50 @@ Wick.FEMock = {
       "page": 2,
       "html": '<article class="active-orders__item"><header class="order-header"><h3 class="order-header__title">Order 940564001</h3><div class="order-status completed"><svg class="svg-inline--fa fa-check-circle fa-w-16 icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg><span>Complete</span></div></header><section class="order-details"><div class="order-details__summary"><span class="order-details__price">£92.75</span> <span class="order-details__count">7 item(s)</span></div><time class="order-details__date" datetime="21st November 2024 4:32 PM">21st November 2024 4:32 PM</time></section><div class="view-more"><a class="link" href="/"><span>View More</span> <svg class="svg-inline--fa fa-arrow-right fa-w-14 icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></a></div></article><article class="active-orders__item"><header class="order-header"><h3 class="order-header__title">Order 940520002</h3><div class="order-status cancelled"><svg class="svg-inline--fa fa-times fa-w-10 icon" aria-hidden="true" focusable="false" data-prefix="far" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg><span>Cancelled</span></div></header><section class="order-details"><div class="order-details__summary"><span class="order-details__price">£32.00</span> <span class="order-details__count">1 item(s)</span></div><time class="order-details__date" datetime="28th October 2024 7:29 AM">28th October 2024 7:29 AM</time></section><div class="view-more"><a class="link" href="/"><span>View More</span> <svg class="svg-inline--fa fa-arrow-right fa-w-14 icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></a></div></article>'
     }
-  ]
+  ],
+  cartPDP: `
+          <div class="custom-slider__wrap custom-slider__wrap--scroll">
+            <div class="custom-slider__header">
+              <a href="#" type="button" class="link close-popup">
+                  <span class="icon-wrap">
+                    <svg class="svg-inline--fa fa-angle-left fa-w-6" aria-hidden="true" focusable="false" data-prefix="far" data-icon="angle-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512" data-fa-i2svg=""><path fill="currentColor" d="M4.2 247.5L151 99.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17L69.3 256l118.5 119.7c4.7 4.7 4.7 12.3 0 17L168 412.5c-4.7 4.7-12.3 4.7-17 0L4.2 264.5c-4.7-4.7-4.7-12.3 0-17z"></path></svg>
+                  </span>
+                Continue shopping
+              </a>
+              <a href="#" type="button" class="icon-wrap close-popup">
+                <svg class="svg-inline--fa fa-times fa-w-10 icon" aria-hidden="true" focusable="false" data-prefix="far" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg>
+              </a>
+            </div>
+            <div class="custom-slider__message">
+                <span class="icon-wrap success">
+                    <svg class="svg-inline--fa fa-check-circle fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg>
+                </span>
+              <div class="messages">
+                <p class="messages__text">You’ve just added</p>
+                <span class="messages__notice">Excluding items already in the basket</span>
+              </div>
+            </div>
+            <ul class="products">
+              <li class="products__item">
+                <a class="products__image" href="page_product-details-with-global-search-v2.html">
+                  <img class="product-img" src="img/placeholders/tap.jpg" alt="">
+                </a>
+                <div class="products__details">
+                  <a href="#" class="title">Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim</a>
+                  <p class="item">Click &amp; Collect: <span class="value">East Grinstead</span></p>
+                  <p class="item">Qty: <span class="value">1</span></p>
+                  <p class="price including-vat-inherit">£30.00 <span class="inc">Inc.VAT</span></p>
+                  <p class="price excluding-vat-inherit">£10.00 <span class="inc">Exc.VAT</span></p>
+                </div>
+              </li>
+            </ul>
+            <div class="custom-slider__content">
+              <p>Product description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget. Product description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
+            </div>
+          </div>
+          <div class="custom-slider__footer footer-fixed">
+            <button class="btn btn_full btn-secondary close-popup">Continue Shopping</button>
+            <button class="btn btn-action btn_full">View Basket</button>
+          </div>
+      `
 }

package/src/js/emulation/popover-mini-basket.js

@@ -129,8 +129,8 @@ Wick.MiniBasket = (function() {
       });
     },
     bindEvents: function(){
-      this._bindEvents();
-      this._bindTouchEvents();
+      // this._bindEvents();
+      // this._bindTouchEvents();
     },
     enable: function(){
       rollover.isDisabled = false;

package/src/js/page/pdp.js

@@ -24,7 +24,10 @@ Wick.PDP = (function () {
     $page
       .find('.btn-add-to-basket, .card-store-collect__btn')
       .on('click', function(){
-        Wick.MiniBasket && Wick.MiniBasket.showJustAdded();
+        // TODO: This code is currently not in use because the backend (BE) has its own build for PDP.
+        //       Consider removing this fragment if it's confirmed to be obsolete, or document why it might still be needed.
+
+        // Wick.MiniBasket && Wick.MiniBasket.showJustAdded();
       });
   }
 

package/src/layouts/base.hbs

@@ -42,6 +42,12 @@
       {{> footer }}
     {{/block}}
 
+    {{#if miniBasketEmpty}}
+      {{> mini-basket/mini-basket-empty }}
+    {{else}}
+      {{> mini-basket/mini-basket }}
+    {{/if}}
+
     {{#block "foot"}}
       {{> scripts }}
     {{/block}}

package/src/layouts/my-account-v2.hbs

@@ -21,6 +21,13 @@
 {{#block "footer"}}
   {{> footer }}
 {{/block}}
+
+{{#if miniBasketEmpty}}
+  {{> mini-basket/mini-basket-empty }}
+{{else}}
+  {{> mini-basket/mini-basket }}
+{{/if}}
+
 {{#block "foot"}}
   {{> scripts}}
 {{/block}}

package/src/page_product-details-saved-pl.html

@@ -1,16 +1,19 @@
-{{#extend "base" pageClass="page-product-details" title="Product details page new"
-          isDiscount=true
-          isSQM=true
-          isDescription=true
-          isCashback=false
-          isSize=true
-          isGuide=true
-          hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
-          currentlyInStock=true
-          pagePdp=true
+{{#extend "base"
+    pageClass="page-product-details"
+    title="Product details page new"
+    isDiscount=true
+    isSQM=true
+    isDescription=true
+    isCashback=false
+    isSize=true
+    isGuide=true
+    hourly-delivery=true
+    badge-text='15% off'
+    badge-color='yellow'
+    badge-text-color='gray'
+    currentlyInStock=true
+    pagePdp=true
+    miniBasketEmpty=true
 }}
     {{#content "head" mode="append" pagePdp=true}}{{/content}}
     {{#content "body"}}

package/src/page_product-details-with-global-search-v2.html

@@ -12,6 +12,7 @@ badge-text-color='gray'
 currentlyInStock=true
 pagePdp=true
 globalSearchV2="true"
+switch-vat=true
 }}
 {{#content "head" mode="append" pagePdp=true}}
 <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">

package/src/scss/common/_scroll-disable.scss

@@ -1,6 +1,8 @@
-.scroll-disable {
+.scroll-disable,
+.slider-scroll-disable {
   position: fixed;
-  inset: 0;
   width: 100%;
   overflow: hidden;
+  top: 0;
+  inset: auto;
 }

package/src/scss/components/_custom-slider.scss

@@ -0,0 +1,512 @@
+@import '../helpers/helpers';
+
+.custom-slider {
+  height: 100%;
+  margin-bottom: 0;
+  border-radius: 0;
+  position: fixed;
+  background-color: $white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
+  transition: transform .4s ease, opacity .4s ease;
+  opacity: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  z-index: 1041;
+
+  &__wrap {
+    padding: 8px 16px 0;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+
+    &--scroll {
+      margin-bottom: 72px;
+    }
+  }
+
+  &.bottom-to-top {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transform: translateY(100%);
+  }
+
+  &.right-to-left {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    transform: translateX(100%);
+  }
+
+  &.show {
+    transform: translateY(0) translateX(0);
+    opacity: 1;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .link {
+      display: flex;
+      align-items: center;
+      font-weight: 500;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      .icon-wrap {
+        font-size: 1.2rem;
+        margin-right: 8px;
+      }
+    }
+
+    .close-popup {
+      cursor: pointer;
+      font-size: 1rem;
+    }
+
+    .icon-wrap.close-popup {
+      color: $warm-grey;
+      background: none;
+      border: 0;
+      outline: none;
+    }
+  }
+
+  &__message {
+    margin-top: 8px;
+    display: flex;
+
+    .icon-wrap {
+      font-size: 1rem;
+      margin-right: 8px;
+
+      &.success {
+        color: $green;
+      }
+
+      &.warning {
+        color: $orange;
+      }
+
+      &.error {
+        color: $app-error;
+      }
+    }
+
+    .messages {
+      display: flex;
+      flex-direction: column;
+
+      &__text {
+        font-size: 1rem;
+        font-weight: 500;
+        line-height: 1.5rem;
+        margin-bottom: 0;
+      }
+
+      &__notice {
+        margin-top: 4px;
+        font-size: .75rem;
+        font-weight: 400;
+        line-height: 1rem;
+        color: $squant;
+      }
+    }
+  }
+
+  .products {
+    margin-top: 8px;
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style-type: none;
+
+    &__item {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: space-between;
+      grid-gap: 8px;
+      padding: 8px 0;
+
+      & + .products__item {
+        border-top: 1px solid $gray-light;
+      }
+    }
+
+    &__image {
+      width: 100%;
+      height: auto;
+      max-width: 64px;
+
+      .product-img {
+        width: 100%;
+        height: auto;
+      }
+    }
+
+    &__details {
+      flex: 1;
+
+      .item,
+      .price {
+        margin-bottom: 0;
+      }
+
+      .title {
+        font-size: .875rem;
+        font-weight: 500;
+        line-height: 1.375rem;
+        text-decoration: none;
+      }
+
+      .item {
+        font-size: .75rem;
+        font-weight: 400;
+        line-height: 1rem;
+        color: $squant;
+
+        .value {
+          color: $gray-dark;
+        }
+
+        & + .item {
+          margin-top: 4px;
+        }
+      }
+
+      .price {
+        @include font-size(18);
+        @include line-height(24);
+        margin-top: 8px;
+        font-weight: 700;
+        color: $blue-dark;
+
+        .inc {
+          @include font-size(12);
+          @include line-height(16);
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  &__footer {
+    margin-top: auto;
+    display: flex;
+    grid-gap: 16px;
+    padding: 16px;
+    background: $white;
+    transition: all .3s ease;
+
+    &.footer-fixed {
+      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, .08);
+      position: fixed;
+      width: 100%;
+      left: 0;
+      bottom: 0;
+      transform: none;
+    }
+  }
+
+  &__ctas {
+    display: flex;
+    grid-gap: 16px;
+
+    .btn-checkout {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  &__content {
+    margin-top: 16px;
+  }
+
+  .icon-wrap {
+    @include icon-wrap;
+
+    &--xl {
+      width: 124px;
+      height: 124px;
+      font-size: 5rem;
+      color: $blue-satin;
+    }
+  }
+
+  &__count {
+    @include font-size(18);
+    @include line-height(24);
+    font-weight: 700;
+  }
+
+  &__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    .text {
+      @include font-size(16);
+      @include line-height(24);
+      margin-top: 16px;
+      margin-bottom: 0;
+      font-weight: 400;
+    }
+
+    .close-popup {
+      margin-top: 24px;
+    }
+  }
+
+  &.mini-basket {
+    .custom-slider__wrap {
+      padding-top: 16px;
+    }
+
+    .custom-slider__footer {
+      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, .08);
+      flex-direction: column;
+    }
+  }
+
+  .mini-basket {
+    &__total {
+      display: flex;
+      flex-direction: column;
+
+      &-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        background: transparent;
+        padding: 0;
+
+        .text {
+          @include font-size(14);
+          @include line-height(22);
+          font-weight: 500;
+        }
+
+        .value {
+          @include font-size(18);
+          @include line-height(24);
+          font-weight: 700;
+        }
+
+        &[aria-expanded="true"] {
+          .icon-wrap .arrow-icon {
+            transform: rotate(180deg);
+          }
+        }
+      }
+
+      &-collapse {
+        padding-left: 32px;
+      }
+
+      .checkout-widget {
+        &__details {
+          padding-left: 32px;
+          margin-bottom: 0;
+          list-style-type: none;
+        }
+
+        &__item {
+          @include font-size(14);
+          @include line-height(22);
+          font-weight: 400;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          &:first-child {
+            padding-top: 16px;
+          }
+
+          &-value {
+            font-weight: 500;
+          }
+
+          & + .checkout-widget__item:not(.checkout-widget__item-vat) {
+            margin-top: 16px;
+          }
+
+          &-vat {
+            @include font-size(12);
+            @include line-height(16);
+            font-weight: 400;
+            color: $squant;
+            padding-bottom: 16px;
+            margin-top: 4px;
+            margin-bottom: 16px;
+            border-bottom: 1px solid $gray-light;
+          }
+
+          &-free {
+            align-items: center;
+            justify-content: flex-start;
+
+            span {
+              display: flex;
+              align-items: center;
+
+              .icon {
+                margin-left: 10px;
+                color: $polishedPine;
+              }
+            }
+          }
+        }
+
+        &__details-discount {
+          margin-top: 16px;
+          display: grid;
+          grid-template-columns: 1fr auto;
+
+          .checkout-widget__detail-name {
+            cursor: pointer;
+          }
+
+          .checkout-widget__detail-value {
+            grid-column: 2;
+            grid-row: 1;
+            margin-left: auto;
+            font-weight: 500;
+          }
+
+          .checkout-widget__details-hidden {
+            padding-left: 15px;
+            font-size: .75rem;
+            line-height: 1rem;
+            list-style-type: disc;
+            font-weight: 400;
+            color: $gray-dark;
+          }
+
+          .checkout-widget__detail-name {
+            .icon {
+              color: $blue;
+              font-size: 1rem;
+              transition: all .3s ease;
+              transform: rotate(180deg);
+            }
+
+            &[aria-expanded="true"] {
+              .icon {
+                transform: rotate(0);
+              }
+            }
+          }
+
+          .checkout-widget__voucher-remove {
+            display: none;
+          }
+        }
+      }
+    }
+
+    &__wrap-total {
+      display: flex;
+      align-items: center;
+
+      .icon-wrap {
+        color: $warm-grey;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .custom-slider {
+    &__wrap {
+      padding: 24px 24px 0;
+      margin: 0 auto;
+
+      &--scroll {
+        margin-bottom: 88px;
+      }
+    }
+
+    .products {
+      margin-top: 12px;
+
+      &__details .title {
+        @include multiline-ellipsis();
+      }
+
+      &__item {
+        padding: 12px 0;
+        grid-gap: 12px;
+      }
+
+      &__image {
+        max-width: 94px;
+      }
+    }
+
+    &__footer {
+      padding: 24px;
+    }
+
+    &__content {
+      margin-top: 24px;
+    }
+
+    &.mini-basket {
+      .custom-slider__wrap {
+        padding-top: 24px;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .custom-slider {
+    &__header {
+      position: relative;
+
+      .link.close-popup {
+        display: none;
+      }
+
+      .icon-wrap.close-popup {
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    }
+
+    &__message {
+      margin-top: 0;
+
+      .message__text {
+        max-width: 90%;
+      }
+    }
+
+    &__wrap {
+      width: 500px;
+      position: relative;
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .custom-slider {
+    &__wrap {
+      width: 600px;
+    }
+  }
+}

package/src/scss/globals/_global-components.scss

@@ -4,6 +4,7 @@
 @import '../components/back-to-top';
 @import '../components/payments';
 @import '../components/popover-mini-basket';
+@import '../components/custom-slider';
 @import '../components/autocomplete';
 @import '../components/google_banner';
 @import '../components/smart-banner';

package/src/scss/helpers/_mixins.scss

@@ -148,6 +148,14 @@
   line-height: #{$line-height-px / 16}rem;
 }
 
+@mixin multiline-ellipsis($line-count: 1) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  -webkit-line-clamp: $line-count;
+}
+
 @mixin icon-wrap($width: 24px, $height: 24px, $font-size-px: 16) {
   width: $width;
   height: $height;