wickes-css2 2.106.0-develop.5 → 2.106.0-develop.7

package/src/js/emulation/plp-load-more.js

@@ -1,5 +1,8 @@
 function getHtmlByCurrentPage({currentPage}) {
-  const matchingData = Wick.FEMock.productListPagesData.find(item => item.page === currentPage);
+  const pagesData = Wick.VatToggle.isToggleVatAvailable()
+    ? Wick.FEMock.productListVatPagesData
+    : Wick.FEMock.productListPagesData;
+  const matchingData = pagesData.find(item => item.page === currentPage);
 
   return matchingData.html;
 }

package/src/js/page/filters/plp-filters-mobile.js

@@ -65,6 +65,11 @@ Wick.PLPFiltersMobile = {
         $btn.text(total > 0 ? `View results (${total})` : 'View results');
     },
 
+    hideAccordions() {
+        $(Wick.PLPFiltersMobile.$ACCORDION).addClass(Wick.PLPFiltersMobile.ACCORDION_COLLAPSED);
+        $(Wick.PLPFiltersMobile.$ACCORDION_CONTENT).hide();
+    },
+
     init() {
         // two-way binding for input between desktop and modal
         $(document)
@@ -81,14 +86,13 @@ Wick.PLPFiltersMobile = {
         $(document)
             .off('shown.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL)
             .on('shown.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL, function () {
-                Wick.PLPFilters.setDOMFromState($(this), Wick.PLPFilters.draftState);
+                Wick.PLPFilters.setDOMFromState($(this), Wick.PLPFilters.appliedState);
             });
 
         $(document)
             .off('hide.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL)
             .on('hide.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL, function () {
-                const scope = $(Wick.PLPFiltersMobile.ROOT_WRAPPER).add($(this));
-                Wick.PLPFilters.draftState = Wick.PLPFilters.collectStateFromDOM(scope);
+                Wick.PLPFiltersMobile.hideAccordions();
             });
 
         // mobile "View results" button in modal
@@ -122,7 +126,6 @@ Wick.PLPFiltersMobile = {
 
                 e.preventDefault();
 
-                Wick.PLPFilters.draftState = {};
                 Wick.PLPFilters.appliedState = {};
                 Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, false);
 

package/src/js/page/filters/plp-filters-utils.js

@@ -1,14 +1,6 @@
 var Wick = window.Wick || {};
 
 Wick.PLPUtils = (function () {
-    function cloneState(state) {
-        const out = {};
-        Object.keys(state).forEach((k) => {
-            out[k] = new Set(state[k]);
-        });
-        return out;
-    }
-
     function syncTwinInputsByName(name, checked, source) {
         const all = $('.filter-card__checkbox, .swatch__checkbox, .checkbox__input').filter(
             function () {
@@ -65,7 +57,6 @@ Wick.PLPUtils = (function () {
     }
 
     return {
-        cloneState,
         syncTwinInputsByName,
         getPanelType,
         countItems,

package/src/js/page/filters/plp-filters.js

@@ -6,7 +6,6 @@ Wick.PLPFilters = {
     ROOT: '.plp-filters',
     GROUP: '.plp-filters__group',
     APPLY_BTN: '.plp-filters__apply',
-    draftState: null,
 
     INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
 
@@ -25,7 +24,6 @@ Wick.PLPFilters = {
         }
 
         Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(rootWrapper);
-        Wick.PLPFilters.draftState = Wick.PLPUtils.cloneState(Wick.PLPFilters.appliedState);
         Wick.PLPFilters.setDOMFromState(rootWrapper, Wick.PLPFilters.appliedState);
 
         // 3) chips
@@ -45,11 +43,8 @@ Wick.PLPFilters = {
     handlePageShow() {
         window.addEventListener('pageshow', function () {
             const rootWrapper = $(Wick.PLPFilters.ROOT_WRAPPER);
-            const stateScope = rootWrapper.add($(Wick.PLPFiltersMobile.MODAL_SEL));
-
-            Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(stateScope);
-            Wick.PLPFilters.draftState = Wick.PLPFilters.appliedState;
-            Wick.PLPFilters.setDOMFromState(stateScope, Wick.PLPFilters.appliedState);
+            Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(rootWrapper);
+            Wick.PLPFilters.setDOMFromState(rootWrapper, Wick.PLPFilters.appliedState);
         });
     },
 
@@ -192,10 +187,7 @@ Wick.PLPFilters = {
 
     // ===== APPLY
     applyFromScopes(scopeForCollect, push) {
-        const nextState = Wick.PLPFilters.collectStateFromDOM(scopeForCollect);
-
-        Wick.PLPFilters.draftState = nextState;
-        Wick.PLPFilters.appliedState = nextState;
+        Wick.PLPFilters.appliedState = Wick.PLPFilters.collectStateFromDOM(scopeForCollect);
         Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, !!push);
     },
 

package/src/js/page/plp-img-v2.js

@@ -0,0 +1,25 @@
+$(document).ready(function () {
+    
+    let imgWrap = $('.products-list-v2 .card__img-wrap');
+    let img = $('.products-list-v2 .card__img-v2');
+    
+    square();
+
+    img.height(function () {
+        if (Math.round($(this).height()) > Math.round($(this).width())) {
+            $(this).height('99.9%'); //fix for ie
+        } else if ((Math.round($(this).height()) < Math.round($(this).width()))){
+            $(this).width('99.9%'); // fix for ie
+        } else {
+            $(this).width('99.9%'); // fix for ie
+            $(this).height('99.9%'); // fix for ie
+        }
+    });
+
+    function square() {
+        let width = imgWrap.width();
+        imgWrap.height(width);
+    }
+
+    $(window).on('resize', square);
+});

package/src/page_plp-with-paint.html

@@ -63,7 +63,7 @@
 {{/content}}
 {{#content "foot" mode="append"}}
 <script defer src="./js/page/plp.js"></script>
-
+<script defer src="./js/page/plp-img-v2.js"></script>
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/search-filter.min.js"></script>
 {{/content}}

package/src/page_plp_v2-energy-efficiency.html

@@ -70,7 +70,7 @@
 
 <script defer src="./js/plp.bundle.min.js"></script>
 <script defer src="./js/energy-efficiency.min.js"></script>
-
+<script defer src="./js/page/plp-img-v2.js"></script>
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/search-filter.min.js"></script>
 {{/content}}

package/src/page_plp_v2-favourite-products.html

@@ -69,7 +69,7 @@
     {{/content}}
     {{#content "foot" mode="append"}}
         <script defer src="./js/page/plp.js"></script>
-
+        <script defer src="./js/page/plp-img-v2.js"></script>
         <script defer src="./js/page/plp-cards-v2.js"></script>
         <script defer src="./js/plp-favourite-product.bundle.min.js"></script>
         <script defer src="./js/plp-filters.min.js"></script>

package/src/page_plp_v2-vat.html

@@ -1,19 +1,20 @@
-{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page" title="Products list" pagePlp=true switch-vat=true}}
-    {{#content "head" mode="append" pagePlp=true}}
-        <link type="text/css" rel="stylesheet" href="./css/pages/page_products-list.css">
-    {{/content}}
+{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page retail-media category-seo-config" title="Products list" globalSearchV2="true" pagePlp=true switch-vat=true bundle="plp"}}
+{{#content "head" mode="append" pagePlp=true}}
+<link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
+{{/content}}
+<style></style>
     {{#content "body"}}
         <main>
             <div class="container">
-
                 <div class="page-header page-header_border-all">
                     <h1 class="page-header__title">
                         Fire Doors
                     </h1>
-
                     {{> srp-injected}}
                 </div>
 
+                {{> color-picker-plp }}
+
                 <div class="row">
                     <aside class="left-aside">
                         {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
@@ -21,35 +22,39 @@
 
                     <div class="content">
                         <div class="sort-products-list">
-                            <div class="sort-products-list__section sort-products-list__items-per-page">
-                                {{> form-row dropdown="true" ddn-mod="ddn_small" id="d1-top" label="Products per page" label-hidden="true" placeholder="All products per page"}}
-                            </div>
-                            <div class="sort-products-list__section sort-products-list__pagination">
-                                {{> pagination pagination1="true" }}
-                                {{> pagination pagination2="true" }}
+                            <input id="numberOfPagesPLP" value="3" type="hidden">
+                            <div class="sort-products-list__total">
+                                <span>{{plp_load-more.pagination.totalNumberOfResults}} products</span>
                             </div>
                             <div class="sort-products-list__section sort-products-list__sort-by">
-                                {{> form-row dropdown="true" ddn-mod="ddn_small" id="d2" label="Sort by" label-hidden="true" placeholder="Name (descending)"}}
+                                {{> form-row dropdown="true" ddn-mod="ddn_small" id="#sort_form1" label="Sort by" label-hidden="true" placeholder="Name (descending)"}}
                             </div>
                         </div>
 
                         <div class="products-list products-list-v2">
-                            {{#if search-result_v2.product-banner}}
-                                {{>card_product_banner_v2}}
-                            {{/if}}
                             {{#each search-result_v2.products}}
                                 {{>card_product_v2 switch-vat=true}}
                             {{/each}}
+                            {{#if search-result_v2.product-banner}}
+                                {{#each search-result_v2.product-banner}}
+                                    {{>card_product_banner_v2}}
+                                {{/each}}
+                            {{/if}}
+                            {{#if search-result_v2.sponsor-banner}}
+                                {{#each search-result_v2.sponsor-banner}}
+                                    {{>card_sponsor_banner}}
+                                {{/each}}
+                            {{/if}}
+                            {{#if search-result_v2.sponsor-product}}
+                                {{#each search-result_v2.sponsor-product}}
+                                    {{>card_sponsor_product}}
+                                {{/each}}
+                            {{/if}}
                         </div>
-
-                        <div class="sort-products-list">
-                            <div class="sort-products-list__section sort-products-list__items-per-page is-hidden">
-                                {{> form-row dropdown="true" ddn-mod="ddn_small" id="d1-bottom" label="Products per page" label-hidden="true" placeholder="All products per page"}}
-                            </div>
-                            <div class="sort-products-list__section sort-products-list__pagination">
-                                {{> pagination pagination1="true" }}
-                                {{> pagination pagination2="true" }}
-                            </div>
+                        <div class="load-more-wrap">
+                            <button class="btn btn-primary btn_full btn-load-more">
+                                Load more
+                            </button>
                         </div>
                     </div>
                     <!-- ./content -->
@@ -65,9 +70,9 @@
         </main>
     {{/content}}
     {{#content "foot" mode="append"}}
-        <script defer src="./js/page/plp.js"></script>
-
+        <script defer src="./js/page/plp-img-v2.js"></script>
         <script defer src="./js/page/plp-cards-v2.js"></script>
         <script defer src="./js/search-filter.min.js"></script>
+        <script defer src="./js/plp-filters.min.js"></script>
     {{/content}}
 {{/extend}}

package/src/page_plp_v2.html

@@ -83,7 +83,7 @@
     {{#content "foot" mode="append"}}
     {{> kitchen/filter-modal isKitchenMode=false modalTitle="Filter by" }}
         <script defer src="./js/plp.bundle.min.js"></script>
-
+        <script defer src="./js/page/plp-img-v2.js"></script>
         <script defer src="./js/page/plp-cards-v2.js"></script>
         <script defer src="./js/search-filter.min.js"></script>
         <script defer src="./js/plp-filters.min.js"></script>

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

@@ -1,12 +1,13 @@
 {{#extend "base" pageClass="page-product-details" title="Product details page WisDOM VAT"
           isDiscount=true
           isSQM=true
-          isDescription=false
+          isDescription=true
           isCashback=false
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badge-text='15% off'
+          badge-text='2 for £47'
+          badge-text-exc='2 for £46'
           badge-color='yellow'
           badge-text-color='gray'
           currentlyInStock=true

package/src/page_product_search-vat.html

@@ -60,7 +60,7 @@
 {{/content}}
 {{#content "foot" mode="append"}}
 <script defer src="./js/page/plp.js"></script>
-
+<script defer src="./js/page/plp-img-v2.js"></script>
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/components/badge-cashback.js"></script>
 <script defer src="./js/search-filter.min.js"></script>

package/src/page_product_search.html

@@ -60,7 +60,7 @@
 {{/content}}
 {{#content "foot" mode="append"}}
 <script defer src="./js/page/plp.js"></script>
-
+<script defer src="./js/page/plp-img-v2.js"></script>
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/components/badge-cashback.js"></script>
 <script defer src="./js/search-filter.min.js"></script>

package/src/page_search-results.html

@@ -72,7 +72,7 @@
 {{#content "foot" mode="append"}}
 <script defer src="./js/plp.bundle.min.js"></script>
 <script defer src="./js/energy-efficiency.min.js"></script>
-
+<script defer src="./js/page/plp-img-v2.js"></script>
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/search-filter.min.js"></script>
 {{/content}}

package/src/partials/scripts.hbs

@@ -13,6 +13,9 @@
 {{#ifCond bundle "==" "basket"}}
   <script src="./js/basket.min.js"></script>
 {{/ifCond}}
+{{#ifCond bundle "==" "plp"}}
+  <script src="./js/plp.bundle.min.js"></script>
+{{/ifCond}}
 {{!-- BUNDLES END --}}
 <script src="./js/mini-basket-slider.min.js"></script>
 <script src="./js/pdp-count-stepper.min.js"></script>

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

@@ -337,7 +337,7 @@
     transition: all 0.3s ease;
 
     &.footer-fixed {
-      box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.08);
       position: fixed;
       width: 100%;
       left: 0;
@@ -408,7 +408,7 @@
     }
 
     .custom-slider__footer {
-      box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.08);
       flex-direction: column;
     }
   }

package/src/scss/helpers/_variables.scss

@@ -33,6 +33,7 @@ $error-bg: #fcf2f3; // Error notification background colour
 $positive: #8dc63f; // Positive colour
 $negative: #ed1c24; // Negative colour
 $blue-badge: #019ee3;
+$pacific-depths: #004587;
 $usp-icon-color: #1a77bc; // Usp icon color
 $pacific-depths: #004587;
 $line-through: #242424;
@@ -46,6 +47,10 @@ $footer-gray: #f5f5f5;
 $footer-bullet: #c8c8c8;
 $footer-copyright: #626262;
 
+$footer-gray: #f5f5f5;
+$footer-bullet: #c8c8c8;
+$footer-copyright: #626262;
+
 $white: #fff;
 $black: #000;
 $black-lite: #111;
@@ -62,6 +67,7 @@ $blue-ocean: #003058;
 $blue-ocean-dark: #0a3054;
 $gray-middle: #aaa;
 $light-blue: #e6f1f8;
+
 // Colour block colours
 $moon-shadow: #658089;
 $fawn: #f0ddce;
@@ -105,7 +111,7 @@ $black-transparent75: rgba(0, 0, 0, 0.75);
 $black-transparent80: rgba(0, 0, 0, 0.8);
 $blue-transparent20: rgba(2, 119, 189, 0.2);
 $blue-transparent10: rgba(2, 119, 189, 0.1);
-$blue-transparent3: rgba(2, 119, 189, 0.32);
+$blue-transparent3: #0277bd52;
 $blue-transparent5: rgba(2, 119, 189, 0.05);
 $blue-transparent5-rgb: rgb(242, 248, 251);
 $dark-blue-transparent10: rgba(10, 48, 85, 0.1);
@@ -299,7 +305,7 @@ $btn-line-height-sm: $input-btn-line-height-sm !default;
 
 $btn-padding-y-lg: $input-btn-padding-y-lg !default;
 $btn-padding-x-lg: $input-btn-padding-x-lg !default;
-$btn-line-height-lg: $input-btn-line-height-lg !default;
+$btn-line-height-lg: $input-btn_line-height-lg !default;
 
 $btn-border-radius: $border-radius !default;
 $btn-border-radius-lg: $border-radius-lg !default;
@@ -379,7 +385,8 @@ $zindex-share: 1 !default;
 
 // This variable affects the `.h-*` and `.w-*` classes.
 $sizes: () !default;
-// sass-lint:disable indentation
+
+/* sass-lint:disable indentation */
 $sizes: map-merge(
   (
     25: 25%,
@@ -389,7 +396,8 @@ $sizes: map-merge(
   ),
   $sizes
 );
-// sass-lint:enable indentation
+/* sass-lint:enable indentation */
+
 // Spacing
 //
 // Control the default styling of most Bootstrap elements by modifying these
@@ -399,7 +407,8 @@ $sizes: map-merge(
 // stylelint-disable
 $spacer: 1rem !default;
 $spacers: () !default;
-// sass-lint:disable indentation
+
+/* sass-lint:disable indentation */
 $spacers: map-merge(
   (
     0: 0,
@@ -419,7 +428,7 @@ $spacers: map-merge(
   ),
   $spacers
 );
-// sass-lint:enable indentation
+/* sass-lint:enable indentation */
 
 // Bootstrap Printing checked
 $print-page-size: a3 !default;

package/src/scss/pages/page_products-list-combined.scss

@@ -303,7 +303,6 @@ $color-bar-radius: 3px;
       margin-right: -4px;
       padding-left: 5px;
       padding-right: 5px;
-      width: 50%;
     }
 
     &:nth-of-type(1)::before,
@@ -339,27 +338,6 @@ $color-bar-radius: 3px;
         align-items: center;
         justify-content: center;
         border-bottom: 1px solid $gray;
-        width: 100%;
-
-        @supports (aspect-ratio: 1 / 1) {
-          aspect-ratio: 1 / 1;
-        }
-
-        @supports not (aspect-ratio: 1 / 1) {
-          &:before {
-            content: '';
-            display: block;
-            padding-top: 100%;
-          }
-        }
-
-        .card__img-v2 {
-          position: absolute;
-          inset: 0;
-          width: 100%;
-          height: 100%;
-          object-fit: contain;
-        }
 
         @include media-breakpoint-down(sm) {
           border: 1px solid $gray;
@@ -389,16 +367,6 @@ $color-bar-radius: 3px;
     }
   }
 
-  .card-sponsor-product {
-    @include media-breakpoint-down(sm) {
-      width: 50%;
-
-      .card {
-        width: 100%;
-      }
-    }
-  }
-
   .product-card {
     & .card__inner-v2:hover {
       border: 1px solid $gray-dark;
@@ -618,8 +586,8 @@ $color-bar-radius: 3px;
   .sort-products-list {
     &__section {
       @include make-col(6);
-      color: $black;
-      border: 0;
+      color: black;
+      border: none;
 
       > .form-row {
         margin-bottom: 0;