wickes-css2 2.110.0 → 2.111.0-complete-your-project.2

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

@@ -18,7 +18,8 @@ function normalizeOptions(options) {
 }
 
 function toInt(value) {
-    const n = parseInt(String(value || '').trim(), 10);
+    const n = parseInt(`${value || ''}`.trim(), 10);
+
     return Number.isFinite(n) ? n : NaN;
 }
 
@@ -28,6 +29,7 @@ function clampMin(n, min) {
 
 function ensureQty(value, fallback) {
     const n = toInt(value);
+
     return Number.isFinite(n) ? n : fallback;
 }
 
@@ -58,12 +60,15 @@ function updateButtons($input, opt) {
 
     const $minus = getMinusBtn($wrap);
 
-    if ($minus.length) $minus.prop('disabled', qty <= opt.min);
+    if ($minus.length) {
+        $minus.prop('disabled', qty <= opt.min);
+    }
 }
 
 function setQty($input, opt, qty) {
     const next = clampMin(qty, opt.min);
-    $input.val(String(next));
+
+    $input.val(`${next}`);
     updateButtons($input, opt);
 
     if (typeof opt.onChange === 'function') {
@@ -83,11 +88,13 @@ function ensureButtons($input, opt) {
     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);
 }
 
@@ -95,16 +102,24 @@ 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);
 }
 
+function getNamespace(inputSel) {
+    return `.countStepper_${inputSel.replace(/[^a-zA-Z0-9_-]/g, '')}`;
+}
+
 // ===== 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)}`;
+    if (!OPT.inputSel) {
+        throw new Error('[createCountStepper] Missing inputSel');
+    }
+
+    const NS = getNamespace(OPT.inputSel);
 
     function init($root) {
         getInputs($root, OPT.inputSel).each(function () {
@@ -112,7 +127,6 @@ export function createCountStepper(options = {}) {
         });
     }
 
-    // +/- click
     $(document)
         .off(`click${NS}`, '[data-count-btn]')
         .on(`click${NS}`, '[data-count-btn]', function (e) {
@@ -120,15 +134,22 @@ export function createCountStepper(options = {}) {
             const $parent = $btn.parent();
             const $input = $parent.find(OPT.inputSel).first();
 
-            if (!$input.length) return;
+            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);
+            if (type === 'plus') {
+                setQty($input, OPT, current + 1);
+            }
+
+            if (type === 'minus') {
+                setQty($input, OPT, current - 1);
+            }
         });
 
     $(document)

package/src/js/page/utils/create-loading-button.js

@@ -0,0 +1,37 @@
+export function createLoadingButton(config = {}) {
+    const settings = {
+        text: '.loading-button__text',
+        loader: '.loading-button__loader',
+        loadingClass: 'loading-button--loading',
+        ...config,
+    };
+
+    function setLoading($button, isLoading) {
+        if (!$button.length) {
+            return;
+        }
+
+        $button.toggleClass(settings.loadingClass, isLoading);
+        $button.find(settings.text).toggleClass('d-none', isLoading);
+        $button.find(settings.loader).toggleClass('d-none', !isLoading);
+    }
+
+    function start($button) {
+        setLoading($button, true);
+    }
+
+    function stop($button) {
+        setLoading($button, false);
+    }
+
+    function isLoading($button) {
+        return $button.hasClass(settings.loadingClass);
+    }
+
+    return {
+        setLoading,
+        start,
+        stop,
+        isLoading,
+    };
+}

package/src/js/page/utils/create-toast.js

@@ -0,0 +1,79 @@
+export function createToast(config = {}) {
+    const settings = {
+        containerClass: 'toast-container',
+        toastClass: 'toast',
+        closeSelector: '.notification__close',
+        backdropClass: 'modal-backdrop--toast',
+        duration: 3000,
+        template: null,
+        getData(type, text) {
+            return {
+                text,
+                classModifier: `${settings.toastClass} notification_${type}`,
+                success: type === 'success',
+                warning: type === 'warning',
+                error: type === 'error',
+            };
+        },
+        ...config,
+    };
+
+    let closeTimer = null;
+
+    function clearCloseTimer() {
+        if (closeTimer) {
+            window.clearTimeout(closeTimer);
+            closeTimer = null;
+        }
+    }
+
+    function hide() {
+        clearCloseTimer();
+
+        $(`.${settings.containerClass}`).remove();
+        $(`.${settings.backdropClass}`).removeClass(settings.backdropClass);
+
+        if (window.Wick && Wick.Backdrop) {
+            Wick.Backdrop.hide();
+        }
+
+        $(document).off('click.toast');
+    }
+
+    function show({ type = 'success', text = '' }) {
+        if (!settings.template) {
+            return;
+        }
+
+        hide();
+
+        const toastHtml = settings.template(settings.getData(type, text));
+
+        if (window.Wick && Wick.Backdrop) {
+            Wick.Backdrop.show();
+            $('.modal-backdrop').addClass(settings.backdropClass);
+        }
+
+        $('body').append(`<div class="${settings.containerClass}">${toastHtml}</div>`);
+
+        $(`.${settings.containerClass}`)
+            .off('click.toastClose', settings.closeSelector)
+            .on('click.toastClose', settings.closeSelector, function (event) {
+                event.preventDefault();
+                hide();
+            });
+
+        $(document)
+            .off('click.toast')
+            .on('click.toast', `.${settings.backdropClass}`, function () {
+                hide();
+            });
+
+        closeTimer = window.setTimeout(hide, settings.duration);
+    }
+
+    return {
+        show,
+        hide,
+    };
+}

package/src/js/page/utils/custom-dropdown.js

@@ -0,0 +1,80 @@
+export function createDropdown(config) {
+    const settings = {
+        root: '[data-dropdown]',
+        toggle: '[data-dropdown-toggle]',
+        value: '[data-dropdown-value]',
+        option: '[data-dropdown-option]',
+        openClass: 'dropdown--open',
+        selectedClass: 'dropdown__option--selected',
+        selectedValueData: 'selected-value',
+        ariaExpandedAttr: 'aria-expanded',
+        ariaSelectedAttr: 'aria-selected',
+        namespace: 'customDropdown',
+        onSelect: function () {},
+        ...config,
+    };
+
+    function closeAll() {
+        $(settings.root).each(function () {
+            const $dropdown = $(this);
+            const $toggle = $dropdown.find(settings.toggle);
+
+            $dropdown.removeClass(settings.openClass);
+            $toggle.attr(settings.ariaExpandedAttr, 'false');
+        });
+    }
+
+    function selectOption($dropdown, $option) {
+        const $value = $dropdown.find(settings.value);
+        const $options = $dropdown.find(settings.option);
+        const selectedValue = $option.attr('data-value') || '';
+
+        $options.removeClass(settings.selectedClass).attr(settings.ariaSelectedAttr, 'false');
+        $option.addClass(settings.selectedClass).attr(settings.ariaSelectedAttr, 'true');
+
+        if ($value.length) {
+            $value.text($option.text().trim());
+        }
+
+        $dropdown.data(settings.selectedValueData, selectedValue);
+
+        settings.onSelect($dropdown, $option, selectedValue);
+    }
+
+    function bind() {
+        $(document).off(`click.${settings.namespace}`);
+        $(document).on(`click.${settings.namespace}`, function (event) {
+            const $target = $(event.target);
+            const $toggle = $target.closest(settings.toggle);
+            const $option = $target.closest(settings.option);
+            const $dropdown = $target.closest(settings.root);
+
+            if (!$dropdown.length) {
+                closeAll();
+                return;
+            }
+
+            if ($toggle.length) {
+                const isOpen = $dropdown.hasClass(settings.openClass);
+
+                closeAll();
+
+                $dropdown.toggleClass(settings.openClass, !isOpen);
+                $toggle.attr(settings.ariaExpandedAttr, String(!isOpen));
+
+                return;
+            }
+
+            if ($option.length) {
+                selectOption($dropdown, $option);
+                closeAll();
+            }
+        });
+    }
+
+    return {
+        bind,
+        closeAll,
+        selectOption,
+    };
+}

package/src/page_product-details-banner.html

@@ -63,7 +63,6 @@
                         delivery=true
                         nearest-purchase=true
                         }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 isAdvice=true}}

package/src/page_product-details-big-wins-disabled-delivery.html

@@ -63,7 +63,6 @@
                         nearest-purchase=true
                         more-stores-present=true
                         }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 }}

package/src/page_product-details-big-wins-non-registered.html

@@ -63,7 +63,6 @@
                         nearest-purchase=true
                         more-stores-present=true
                         }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 }}

package/src/page_product-details-big-wins-out-nearest.html

@@ -62,7 +62,6 @@
                         nearest-purchase=true
                         more-stores-present=true
                         }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 }}

package/src/page_product-details-big-wins-unhappy.html

@@ -64,7 +64,6 @@
                         nearest-purchase=true
                         more-stores-present=true
                         }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 }}

package/src/page_product-details-big-wins.html

@@ -63,7 +63,6 @@
                         nearest-purchase=true
                         more-stores-present=true
                         }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 }}

package/src/page_product-details-billie.html

@@ -67,7 +67,6 @@ pagePdp=true
         clearpay-placement=true
         billie-placement=true
         }}
-        {{> fulfilment-accordions }}
       </div>
       <div class="pdp__description">
         {{> product-main-info-v2 isAdvice=true}}

package/src/page_product-details-bloomreach.html

@@ -0,0 +1,130 @@
+{{#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
+globalSearchV2="true"
+switch-vat=true
+}}
+{{#content "head" mode="append" pagePdp=true}}
+<link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
+{{/content}}
+{{#content "body"}}
+<main class="pdp__main">
+  <div class="container">
+    <div class="pdp">
+      <div class="pdp__title">
+        <h1 class="pdp__heading">Bosch PSB 1800 LI-2 18V Li-Ion Cordless Combi Drill Example with long
+          title in two raws
+        </h1>
+        <div class="pdp__reviews_small">
+          <span class="product-code product-code-v2">Product code: <strong id="product-code-val">236334</strong></span>
+          <div class="product-card__reviews review-star">
+            <div class="product-rating product-rating-v2">
+              <div class="rating-bg">
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <div class="rating-overlay"
+                     data-rating="{{#if review-rating}}{{review-rating}}{{else}}0{{/if}}">
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                </div>
+              </div>
+            </div>
+            <span class="review-star-average review-star-average-v2">(4.6)</span>
+          </div>
+          <span class="pdp__reviews-link-wrap"><a href="#" data-link="#pdp-reviews" id="open-review">82 reviews</a></span>
+        </div>
+      </div>
+
+      <div class="pdp__gallery">
+        {{> gallery-pdp-v2 }}
+      </div>
+      <div class="pdp__aside">
+        {{> price-block-v2
+        isProductSaved=false
+        isUserLogedOut=true
+        install=true
+        sample=true
+        cc=true
+        delivery=true
+        }}
+      </div>
+      <div class="pdp__description">
+        {{> product-main-info-v2 isProductSaved=true}}
+      </div>
+      <div
+          class="pdp__widget"
+          data-complete-widget
+          data-context-key="completeYourProject2Recomendations"
+      >
+        {{> bloomreach/complete-your-project title="Complete your project"}}
+      </div>
+      {{> fulfilment-accordions }}
+    </div>
+  </div>
+  <div class="container container-info">
+    <div class="pdp">
+      <div class="pdp__info">
+        {{> pdp-info-v2 }}
+      </div>
+    </div>
+  </div>
+  {{> recently-viewed }}
+
+  {{> similar-products-v2 }}
+
+  {{> seo-widgets title="More products" }}
+  {{> seo-widgets title="Related category" }}
+</main>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script type="text/html" id="mini-basket-popup">
+  {{> popover-mini-basket mod="popover-mini-basket_just-added" products=mini-basket.just-added just-added=true}}
+</script>
+<script defer src="./js/page/pdp.js"></script>
+<script defer src="./js/global-search.min.js"></script>
+{{#extend "modal" id="modal-pdp-feedback" title="Feedback Form" fullWidth=true}}
+{{#content "body"}}
+<iframe class="cboxIframe" name="cbox1538824723052"
+        src="https://docs.google.com/forms/d/1jHV5b8AazYbPmoTXJBxmyns4AcRhtKnnIC4_K_MFOPU/viewform?entry.1452922942=Wickes+Blue+Slate+Chippings+-+Major+Bag&amp;entry.1885983523=Decorative+Uk+sourced+blue+slate+chippings+are+ideal+for+gardens+and+borders.+This+beautiful+stone+changes+colour+when+wet.&amp;entry.935962220=112777&amp;entry.474385230=1000626184"></iframe>
+{{/content}}
+{{/extend}}
+{{> click-and-collect-modal}}
+{{/content}}
+{{/extend}}
+<!--<script defer src="./js/components/badge-cashback.js"></script>-->
+<script>
+  if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
+    $(document).ready(function () {
+      $('.modal').on('scroll', function () {
+        $(':focus').blur();
+      });
+    });
+  }
+
+  $(document).ready(function () {
+
+    $('#info-details').toggleClass('accordion_collapsed');
+    $('#details-content').css('display', 'block');
+
+    $('#open-review').on('click', function () {
+      $('#info-review').toggleClass('accordion_collapsed');
+      $('#review-content').css('display', 'block');
+    })
+  })
+</script>

package/src/page_product-details-calculator.html

@@ -60,7 +60,6 @@
                 cc=true
                 delivery=true
                 }}
-                {{> fulfilment-accordions }}
             </div>
             <div class="pdp__description">
                 {{> product-main-info-v2 isAdvice=true}}

package/src/page_product-details-cashback-v2.html

@@ -59,7 +59,6 @@
                         cc=true
                         delivery=true
                         }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 isAdvice=true}}

package/src/page_product-details-clearpay.html

@@ -67,7 +67,6 @@ pagePdp=true
                 klarna-placement=true
                 clearpay-placement=true
                 }}
-                {{> fulfilment-accordions }}
             </div>
             <div class="pdp__description">
                 {{> product-main-info-v2 isAdvice=true}}

package/src/page_product-details-cnc-error-notification.html

@@ -65,7 +65,6 @@
                         nearest-purchase=true
                         more-stores-present=true
                         }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 }}

package/src/page_product-details-cnc-success-notification-vat.html

@@ -67,7 +67,6 @@
                         nearest-purchase=true
                         more-stores-present=true
                         }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 }}

package/src/page_product-details-cnc-success-notification.html

@@ -65,7 +65,6 @@
                         nearest-purchase=true
                         more-stores-present=true
                         }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 }}

package/src/page_product-details-default-store.html

@@ -67,7 +67,6 @@
                         toBeDefaultName="Borehamwood"
                         nearestName="Borehamwood"
                         }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 }}

package/src/page_product-details-energy-efficiency.html

@@ -81,7 +81,6 @@ pagePdp=true
                 more-stores-present=true
                 isExcludingDelivery=true
                 }}
-                {{> fulfilment-accordions }}
             </div>
             <div class="pdp__description">
                 {{> product-main-info-v2

package/src/page_product-details-flooring-with-pr-placeholder.html

@@ -87,7 +87,6 @@
                     </div>
                     <div class="pdp__aside">
                         {{> price-block-v2 isProductSaved=false isUserLogedOut=false }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 isAdvice=true}}

package/src/page_product-details-flooring.html

@@ -53,7 +53,6 @@
                     </div>
                     <div class="pdp__aside">
                         {{> price-block-v2 isProductSaved=false isUserLogedOut=false }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 isAdvice=true}}

package/src/page_product-details-gallery-actual.html

@@ -306,7 +306,6 @@
                         delivery=true
                         nearest-purchase=true
                         }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 isAdvice=true}}

package/src/page_product-details-mfe-calculator.html

@@ -87,7 +87,6 @@ pagePdp=true
                 klarna-placement=true
                 clearpay-placement=true
                 }}
-                {{> fulfilment-accordions }}
             </div>
             <div class="pdp__description">
                 {{> product-main-info-v2

package/src/page_product-details-minimum-v2.html

@@ -55,7 +55,6 @@
                         cc=true
                         delivery=true
                         }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 isAdvice=true Video=true}}

package/src/page_product-details-mtm-doors.html

@@ -51,7 +51,6 @@
                     </div>
                     <div class="pdp__aside">
                         {{> price-block-order }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 isAdvice=true}}

package/src/page_product-details-only-clearpay.html

@@ -66,7 +66,6 @@ pagePdp=true
                 nearest-purchase=true
                 clearpay-placement=true
                 }}
-                {{> fulfilment-accordions }}
             </div>
             <div class="pdp__description">
                 {{> product-main-info-v2 isAdvice=true}}

package/src/page_product-details-paint-mixing.html

@@ -58,7 +58,6 @@ pagePdp=true
                 paint-mix=true
                 default-store=true
                 }}
-                {{> fulfilment-accordions }}
             </div>
             <div class="pdp__description">
                 {{> product-main-info-v2 }}

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

@@ -62,7 +62,6 @@
                         cc=true
                         delivery=true
                         }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 isProductSaved=true}}

package/src/page_product-details-tile-steps-klarna-widget-with-method-ids.html

@@ -65,7 +65,6 @@
                         klarna-placement=true
                         klarna-method-ids="BathroomsFinance"
                         }}
-                        {{> fulfilment-accordions }}
                     </div>
                     <div class="pdp__description">
                         {{> product-main-info-v2 isAdvice=true}}