wickes-css2 2.106.0-develop.1 → 2.106.0-develop.3

package/src/js/page/quick-filter.js

@@ -1,108 +1,111 @@
 $(document).ready(function () {
-  const SELECTORS = {
-    quickFilter: '.quick-filter',
-    swiperContainer: '.swiper-container',
-    pagination: '.swiper-pagination',
-    nextButton: '.quick-filter__next-btn',
-    prevButton: '.quick-filter__prev-btn',
-  };
-
-  const CSS_CLASSES = {
-    locked: 'quick-filter--locked',
-    colourSwatch: 'quick-filter--colour',
-    textOnly: 'quick-filter--text',
-    bulletClass: 'swiper-pagination-bullet',
-    bulletActiveClass: 'swiper-pagination-bullet-active'
-  };
-
-  const CONFIG = {
-    speed: 400,
-    defaultSpaceBetween: 16,
-    textOnlySpaceBetween: 8,
-    resizeDebounceTime: 250,
-    breakpoints: {
-      mobile: 767,
-      mobileSpaceBetween: 8,
-    },
-  };
-
-  function shouldSkipSlider($slider) {
-    return $slider.hasClass(CSS_CLASSES.colourSwatch);
-  }
-
-  function getSpaceBetween($slider) {
-    const isTextOnly = $slider.hasClass(CSS_CLASSES.textOnly);
-    return isTextOnly ? CONFIG.textOnlySpaceBetween : CONFIG.defaultSpaceBetween;
-  }
-
-  function getSwiperConfig($pagination, $nextBtn, $prevBtn, spaceBetween) {
-    return {
-      speed: CONFIG.speed,
-      spaceBetween: spaceBetween,
-      slidesPerView: 'auto',
-      watchOverflow: true,
-      pagination: {
-        el: $pagination[0],
-        type: 'bullets',
-        clickable: true,
-        bulletClass: CSS_CLASSES.bulletClass,
-        bulletActiveClass: CSS_CLASSES.bulletActiveClass,
-      },
-      navigation: {
-        nextEl: $nextBtn[0],
-        prevEl: $prevBtn[0],
-      },
-      breakpoints: {
-        [CONFIG.breakpoints.mobile]: {
-          spaceBetween: CONFIG.breakpoints.mobileSpaceBetween,
-        },
-      },
-      on: {
-        lock: handleLock,
-        unlock: handleUnlock,
-      },
+    const SELECTORS = {
+        quickFilter: '.quick-filter',
+        swiperContainer: '.swiper-container',
+        pagination: '.swiper-pagination',
+        nextButton: '.quick-filter__next-btn',
+        prevButton: '.quick-filter__prev-btn',
     };
-  }
-
-  function handleLock() {
-    this.el.parentElement.classList.add(CSS_CLASSES.locked);
-  }
-
-  function handleUnlock() {
-    this.el.parentElement.classList.remove(CSS_CLASSES.locked);
-  }
-
-  function initializeSwiper($slider) {
-    const $container = $slider.find(SELECTORS.swiperContainer);
-    const $pagination = $slider.find(SELECTORS.pagination);
-    const $nextBtn = $slider.find(SELECTORS.nextButton);
-    const $prevBtn = $slider.find(SELECTORS.prevButton);
-
-    const spaceBetween = getSpaceBetween($slider);
-    const config = getSwiperConfig($pagination, $nextBtn, $prevBtn, spaceBetween);
-
-    const swiper = new Swiper($container[0], config);
 
-    bindResizeHandler(swiper);
-  }
-
-  function bindResizeHandler(swiper) {
-    $(window).on('resize', _.debounce(function () {
-      swiper.update();
-    }, CONFIG.resizeDebounceTime));
-  }
-
-  function init() {
-    $(SELECTORS.quickFilter).each(function (index, slider) {
-      const $slider = $(slider);
-
-      if (shouldSkipSlider($slider)) {
-        return;
-      }
+    const CSS_CLASSES = {
+        locked: 'quick-filter--locked',
+        colourSwatch: 'quick-filter--colour',
+        textOnly: 'quick-filter--text',
+        bulletClass: 'swiper-pagination-bullet',
+        bulletActiveClass: 'swiper-pagination-bullet-active',
+    };
 
-      initializeSwiper($slider);
-    });
-  }
+    const CONFIG = {
+        speed: 400,
+        defaultSpaceBetween: 16,
+        textOnlySpaceBetween: 8,
+        resizeDebounceTime: 250,
+        breakpoints: {
+            mobile: 767,
+            mobileSpaceBetween: 8,
+        },
+    };
 
-  init();
-});
+    function shouldSkipSlider($slider) {
+        return $slider.hasClass(CSS_CLASSES.colourSwatch);
+    }
+
+    function getSpaceBetween($slider) {
+        const isTextOnly = $slider.hasClass(CSS_CLASSES.textOnly);
+        return isTextOnly ? CONFIG.textOnlySpaceBetween : CONFIG.defaultSpaceBetween;
+    }
+
+    function getSwiperConfig($pagination, $nextBtn, $prevBtn, spaceBetween) {
+        return {
+            speed: CONFIG.speed,
+            spaceBetween: spaceBetween,
+            slidesPerView: 'auto',
+            watchOverflow: true,
+            pagination: {
+                el: $pagination[0],
+                type: 'bullets',
+                clickable: true,
+                bulletClass: CSS_CLASSES.bulletClass,
+                bulletActiveClass: CSS_CLASSES.bulletActiveClass,
+            },
+            navigation: {
+                nextEl: $nextBtn[0],
+                prevEl: $prevBtn[0],
+            },
+            breakpoints: {
+                [CONFIG.breakpoints.mobile]: {
+                    spaceBetween: CONFIG.breakpoints.mobileSpaceBetween,
+                },
+            },
+            on: {
+                lock: handleLock,
+                unlock: handleUnlock,
+            },
+        };
+    }
+
+    function handleLock() {
+        this.el.parentElement.classList.add(CSS_CLASSES.locked);
+    }
+
+    function handleUnlock() {
+        this.el.parentElement.classList.remove(CSS_CLASSES.locked);
+    }
+
+    function initializeSwiper($slider) {
+        const $container = $slider.find(SELECTORS.swiperContainer);
+        const $pagination = $slider.find(SELECTORS.pagination);
+        const $nextBtn = $slider.find(SELECTORS.nextButton);
+        const $prevBtn = $slider.find(SELECTORS.prevButton);
+
+        const spaceBetween = getSpaceBetween($slider);
+        const config = getSwiperConfig($pagination, $nextBtn, $prevBtn, spaceBetween);
+
+        const swiper = new Swiper($container[0], config);
+
+        bindResizeHandler(swiper);
+    }
+
+    function bindResizeHandler(swiper) {
+        $(window).on(
+            'resize',
+            _.debounce(function () {
+                swiper.update();
+            }, CONFIG.resizeDebounceTime)
+        );
+    }
+
+    function init() {
+        $(SELECTORS.quickFilter).each(function (index, slider) {
+            const $slider = $(slider);
+
+            if (shouldSkipSlider($slider)) {
+                return;
+            }
+
+            initializeSwiper($slider);
+        });
+    }
+
+    init();
+});

package/src/js/page/utils/create-count-stepper.js

@@ -0,0 +1,141 @@
+import countButton from '../../../elements/count-button.hbs';
+
+// ===== HELPERS =====
+
+function normalizeOptions(options) {
+    return {
+        inputSel: '#quantity-field',
+
+        min: 1,
+
+        enhancedInputClass: 'count-stepper__input',
+        enhancedParentClass: 'count-stepper',
+
+        onChange: null,
+
+        ...options,
+    };
+}
+
+function toInt(value) {
+    const n = parseInt(String(value || '').trim(), 10);
+    return Number.isFinite(n) ? n : NaN;
+}
+
+function clampMin(n, min) {
+    return Math.max(min, n);
+}
+
+function ensureQty(value, fallback) {
+    const n = toInt(value);
+    return Number.isFinite(n) ? n : fallback;
+}
+
+function buildBtn(type, disabled) {
+    return countButton({
+        type,
+        icon: type === 'plus' ? 'fa-plus' : 'fa-minus',
+        ariaLabel: type === 'plus' ? 'Increase quantity' : 'Decrease quantity',
+        disabled: !!disabled,
+    });
+}
+
+function getButtonsWrap($input) {
+    return $input.parent();
+}
+
+function getMinusBtn($wrap) {
+    return $wrap.find('[data-count-btn][data-count-type="minus"]').first();
+}
+
+function getPlusBtn($wrap) {
+    return $wrap.find('[data-count-btn][data-count-type="plus"]').first();
+}
+
+function updateButtons($input, opt) {
+    const $wrap = getButtonsWrap($input);
+    const qty = ensureQty($input.val(), opt.min);
+
+    const $minus = getMinusBtn($wrap);
+
+    if ($minus.length) $minus.prop('disabled', qty <= opt.min);
+}
+
+function setQty($input, opt, qty) {
+    const next = clampMin(qty, opt.min);
+    $input.val(String(next));
+    updateButtons($input, opt);
+
+    if (typeof opt.onChange === 'function') {
+        opt.onChange(next, $input.get(0));
+    }
+}
+
+function ensureButtons($input, opt) {
+    const $parent = getButtonsWrap($input);
+
+    $input.addClass(opt.enhancedInputClass);
+    $parent.addClass(opt.enhancedParentClass);
+
+    const hasMinus = getMinusBtn($parent).length;
+    const hasPlus = getPlusBtn($parent).length;
+
+    if (!hasMinus) {
+        $input.before(buildBtn('minus', true));
+    }
+    if (!hasPlus) {
+        $input.after(buildBtn('plus', false));
+    }
+
+    const initial = ensureQty($input.val(), opt.min);
+    setQty($input, opt, initial);
+}
+
+function getInputs($root, inputSel) {
+    const $scope = $root && $root.length ? $root : $(document);
+    const $self = $scope.is(inputSel) ? $scope : $();
+    const $found = $scope.find(inputSel);
+    return $self.add($found);
+}
+
+// ===== FACTORY =====
+
+export function createCountStepper(options = {}) {
+    const OPT = normalizeOptions(options);
+    if (!OPT.inputSel) throw new Error('[createCountStepper] Missing inputSel');
+
+    const NS = `.cnt_${Math.random().toString(16).slice(2)}`;
+
+    function init($root) {
+        getInputs($root, OPT.inputSel).each(function () {
+            ensureButtons($(this), OPT);
+        });
+    }
+
+    // +/- click
+    $(document)
+        .off(`click${NS}`, '[data-count-btn]')
+        .on(`click${NS}`, '[data-count-btn]', function (e) {
+            const $btn = $(this);
+            const $parent = $btn.parent();
+            const $input = $parent.find(OPT.inputSel).first();
+
+            if (!$input.length) return;
+
+            e.preventDefault();
+
+            const type = ($btn.attr('data-count-type') || '').toLowerCase();
+            const current = ensureQty($input.val(), OPT.min);
+
+            if (type === 'plus') setQty($input, OPT, current + 1);
+            if (type === 'minus') setQty($input, OPT, current - 1);
+        });
+
+    $(document)
+        .off(`input${NS} change${NS}`, OPT.inputSel)
+        .on(`input${NS} change${NS}`, OPT.inputSel, function () {
+            updateButtons($(this), OPT);
+        });
+
+    return { init };
+}

package/src/partials/scripts.hbs

@@ -15,6 +15,7 @@
 {{/ifCond}}
 {{!-- BUNDLES END --}}
 <script src="./js/mini-basket-slider.min.js"></script>
+<script src="./js/pdp-count-stepper.min.js"></script>
 <script src="./js/emulation.min.js"></script>
 <script defer src="https://kit.fontawesome.com/b73abc6840.js" crossorigin="anonymous"></script>
 {{#if pagePdp}}

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

@@ -7,8 +7,9 @@
   position: fixed;
   background-color: $white;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  /* prettier-ignore */
-  transition: transform 0.4s ease, opacity 0.4s ease;
+  transition-property: transform, opacity;
+  transition-duration: 0.4s;
+  transition-timing-function: ease;
   opacity: 0;
   display: flex;
   flex-direction: column;
@@ -291,7 +292,7 @@
         }
 
         &[disabled] {
-          border: none;
+          border: 0;
           opacity: 0.6;
         }
       }
@@ -496,7 +497,7 @@
 
               .icon {
                 margin-left: 10px;
-                color: $polishedPine;
+                color: $polished-pine;
               }
             }
           }

package/src/scss/components/_input-counter.scss

@@ -0,0 +1,65 @@
+.count-stepper {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 6px;
+
+  .quantity-label {
+    padding-right: 9px;
+    margin: 0 !important;
+  }
+
+  &__input {
+    height: 40px;
+    width: 46px;
+    border: 1px solid $gray;
+    border-radius: 3px;
+    margin-right: 0 !important;
+  }
+}
+
+.count-btn {
+  font-size: 1.3rem;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: $blue;
+  outline: none;
+  box-shadow: none;
+  -webkit-tap-highlight-color: transparent;
+
+  i {
+    font-size: 16px;
+    line-height: 1;
+  }
+
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    border-radius: 4px;
+    box-shadow: 0 0 0 3px rgba($blue, 0.35);
+  }
+
+  &:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+}

package/src/scss/components/_quick-filter.scss

@@ -1,3 +1,7 @@
+$page-bullet-color: $gray;
+$page-bullet-active-color: $blue;
+$quick-filter-shadow: rgba(0, 0, 0, 0.12);
+
 .page-header {
   &_border-all:has(~ .quick-filter) {
     padding: 0;
@@ -18,7 +22,11 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+
+    // sass-lint:disable no-misspelled-properties
     gap: 8px;
+    // sass-lint:enable no-misspelled-properties
+
     padding: 12px;
     width: 104px;
     height: auto;
@@ -64,20 +72,24 @@
     svg {
       position: relative;
       z-index: 1;
+
+      // sass-lint:disable no-important
       width: 38px !important;
+      // sass-lint:enable no-important
+
       height: 38px;
       margin-top: -30px;
     }
   }
 
   &__next-btn {
-    right: 0px;
+    right: 0;
 
     &::before {
       content: '';
       position: absolute;
       top: 0;
-      right: 0px;
+      right: 0;
       bottom: 0;
       width: 71px;
       background: linear-gradient(270deg, $white 37%, transparent 100%);
@@ -86,13 +98,13 @@
   }
 
   &__prev-btn {
-    left: 0px;
+    left: 0;
 
     &::before {
       content: '';
       position: absolute;
       top: 0;
-      left: 0px;
+      left: 0;
       bottom: 0;
       width: 71px;
       background: linear-gradient(90deg, $white 37%, transparent 100%);
@@ -118,14 +130,16 @@
 
   .swiper-pagination-bullet {
     border-radius: 5px;
-    background-color: #ccc;
+    background-color: $page-bullet-color;
     height: 6px;
     width: 6px;
-    transition: width .3s ease-in, background-color .3s ease-in;
+    transition-property: width, background-color;
+    transition-duration: 0.3s;
+    transition-timing-function: ease-in;
   }
 
   .swiper-pagination-bullet-active {
-    background-color: #0277bd;
+    background-color: $page-bullet-active-color;
     width: 24px;
   }
 
@@ -140,6 +154,7 @@
       }
 
       &--selected img {
+        // prettier-ignore
         filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1821%) hue-rotate(188deg) brightness(95%) contrast(101%);
       }
     }
@@ -155,6 +170,7 @@
       }
 
       &--selected img {
+        // prettier-ignore
         filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1821%) hue-rotate(188deg) brightness(95%) contrast(101%);
       }
     }
@@ -213,7 +229,10 @@
 
     .swiper-wrapper {
       flex-wrap: wrap;
+
+      // sass-lint:disable no-misspelled-properties
       gap: 4px;
+      // sass-lint:enable no-misspelled-properties
     }
 
     .swiper-pagination {
@@ -267,17 +286,20 @@
 
     .tooltip {
       display: flex;
-      filter: drop-shadow(0 0 8px rgba(0, 0, 0, .12));
+      filter: drop-shadow(0 0 8px $quick-filter-shadow);
       margin-bottom: 4px;
 
       .arrow {
-        &:before {
+        &::before {
           border-top-color: $white;
         }
       }
 
       &-inner {
+        // sass-lint:disable no-important
         padding: 8px 16px !important;
+        // sass-lint:enable no-important
+
         background-color: $white;
         color: $gray-dark;
         font-size: 14px;
@@ -285,4 +307,4 @@
       }
     }
   }
-}
+}

package/src/scss/components/kitchen/_price-tooltip.scss

@@ -9,7 +9,7 @@
     padding: 8px 12px !important;
     border-radius: 4px;
     font-weight: 400;
-    font-size: .75rem;
+    font-size: 0.75rem;
     line-height: 1rem;
   }
 
@@ -17,7 +17,8 @@
     border-top-color: $white;
   }
 
-  p, ul {
+  p,
+  ul {
     margin: 0;
   }
 }

package/src/scss/components/kitchen/_price.scss

@@ -62,8 +62,8 @@
 
   &__additional-text {
     color: $squant;
-    font-size: .75rem;
-    line-height: 1rem; 
+    font-size: 0.75rem;
+    line-height: 1rem;
   }
 
   &--offer {

package/src/scss/helpers/_variables.scss

@@ -4,7 +4,7 @@
 $blue-dark: #0a3055; // Base brand color for background
 $blue: #0277bd; // CTAs
 $green: #67a509; // Tick icons; Buttons in the checkout
-$polishedPine: #67a589;
+$polished-pine: #67a589;
 $green-dark: #487306; // Active state of button-action
 
 // Additional colors

package/src/scss/pdp-main.scss

@@ -80,6 +80,7 @@
 @import 'components/clearpay';
 @import 'components/billie-online-messaging';
 @import 'components/billie-modal';
+@import 'components/input-counter';
 
 // Pages
 @import 'pages/page_ti';