wickes-css2 2.105.0-develop.1 → 2.105.0-develop.11

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

@@ -66,8 +66,8 @@ $color-bar-radius: 3px;
 }
 
 .sort-products-list {
-  @include make-row;
-  justify-content: space-between;
+  display: flex;
+  justify-content: flex-end;
   align-items: center;
 
   .open-filters-btn {
@@ -95,7 +95,8 @@ $color-bar-radius: 3px;
 
   &__total {
     font-weight: 700;
-    padding-left: 15px;
+    font-size: 0.875rem;
+    line-height: 22px;
   }
 }
 
@@ -251,7 +252,6 @@ $color-bar-radius: 3px;
 }
 
 .products-list-v2 {
-
   @include media-breakpoint-down(sm) {
     margin-right: -5px;
     margin-left: -5px;
@@ -266,7 +266,7 @@ $color-bar-radius: 3px;
     font-size: 1rem;
 
     @include media-breakpoint-down(sm) {
-      font-size: .875rem;
+      font-size: 0.875rem;
     }
   }
 
@@ -357,7 +357,6 @@ $color-bar-radius: 3px;
         @include media-breakpoint-down(sm) {
           padding-left: 0;
           padding-right: 0;
-
         }
       }
 
@@ -403,7 +402,7 @@ $color-bar-radius: 3px;
       & .product-card__title.product-card__title-v2 {
         @include clamp-text(3);
         margin-top: 5px;
-        font-size: .875rem;
+        font-size: 0.875rem;
         font-weight: 700;
         line-height: 18px;
 
@@ -439,7 +438,6 @@ $color-bar-radius: 3px;
     &__price-value.product-card__price-value.product-card__price-value {
       font-size: 1.5rem;
 
-
       @media screen and (max-width: 321px) {
         font-size: 1.125rem;
       }
@@ -453,7 +451,7 @@ $color-bar-radius: 3px;
     }
 
     .product-rating.product-rating-v2 {
-      font-size: .875rem;
+      font-size: 0.875rem;
 
       .fa-star {
         margin-right: 0;
@@ -483,7 +481,6 @@ $color-bar-radius: 3px;
           &-sqm {
             color: $red;
           }
-
         }
       }
 
@@ -503,7 +500,7 @@ $color-bar-radius: 3px;
         text-align: left;
         width: 100%;
         margin-right: 0;
-        font-size: .875rem;
+        font-size: 0.875rem;
         font-weight: 500;
         line-height: 14px;
         color: $blue-dark;
@@ -589,9 +586,17 @@ $color-bar-radius: 3px;
   .sort-products-list {
     &__section {
       @include make-col(6);
+      color: black;
+      border: none;
+
+      > .form-row {
+        margin-bottom: 0;
+      }
     }
 
     &__pagination {
+      margin-top: 20px;
+
       .pagination {
         &:not(.pagination_tablet) {
           display: none;
@@ -696,7 +701,7 @@ $color-bar-radius: 3px;
 
         &-active {
           transform: rotateX(180deg) scale(1.25);
-          transition: .4s;
+          transition: 0.4s;
           transform-style: preserve-3d;
           box-shadow: -1px 0 5px -1px $black;
         }
@@ -773,12 +778,11 @@ $color-bar-radius: 3px;
 
   .srp-injected {
     &__content {
-      padding: 1.25em .75em;
+      padding: 1.25em 0.75em;
     }
   }
 }
 
-
 //minified notification component styles start
 .notification {
   padding: 8px 40px;
@@ -797,7 +801,7 @@ $color-bar-radius: 3px;
     position: absolute;
     right: 8px;
     top: 8px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     color: $warm-grey;
     cursor: pointer;
 
@@ -810,7 +814,7 @@ $color-bar-radius: 3px;
     position: absolute;
     right: 8px;
     top: 8px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     color: $warm-grey;
     cursor: pointer;
   }
@@ -889,6 +893,7 @@ $color-bar-radius: 3px;
     }
   }
 }
+
 //minified notification component styles end
 
 //minified autocomplete component styles start
@@ -973,6 +978,7 @@ $color-bar-radius: 3px;
     }
   }
 }
+
 //minified autocomplete component styles end
 
 //minified card component styles start
@@ -1043,7 +1049,6 @@ $color-bar-radius: 3px;
     }
 
     .card__img {
-
       @include media-breakpoint-down(sm) {
         padding-top: 15px;
         padding-bottom: 10px;
@@ -1086,7 +1091,7 @@ $color-bar-radius: 3px;
 
     &_ends {
       background-color: $gray-dark-transparent75;
-      font-size: .75rem;
+      font-size: 0.75rem;
       font-weight: 500;
       line-height: 14px;
     }
@@ -1133,6 +1138,7 @@ $color-bar-radius: 3px;
   max-width: 100%;
   width: 100%;
 }
+
 //minified card component styles end
 
 //minified product-card component styles start
@@ -1187,7 +1193,7 @@ $color-bar-radius: 3px;
 .product-card__reviews,
 .filter__reviews {
   color: $warm-grey;
-  font-size: .75rem;
+  font-size: 0.75rem;
   line-height: 16px;
   margin-top: 10px;
 
@@ -1226,11 +1232,10 @@ $color-bar-radius: 3px;
       }
     }
   }
-
 }
 
 .filter__reviews {
-  font-size: .875rem;
+  font-size: 0.875rem;
   margin: 0;
   transform: translateY(3px);
 
@@ -1255,9 +1260,7 @@ $color-bar-radius: 3px;
 
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .product-card__reviews {
-
     .product-rating {
-
       .rating-bg {
         display: block;
       }
@@ -1296,7 +1299,7 @@ $color-bar-radius: 3px;
   line-height: 36px;
 
   .product-card__price-from {
-    font-size: .7em;
+    font-size: 0.7em;
     margin-right: 4px;
   }
 
@@ -1325,6 +1328,7 @@ $color-bar-radius: 3px;
     text-decoration-color: $line-through;
   }
 }
+
 //minified product-card component styles end
 
 @include media-breakpoint-down(sm) {

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

@@ -235,9 +235,17 @@
   .sort-products-list {
     &__section {
       @include make-col(6);
+      color: black;
+      border: none;
+
+      > .form-row {
+        margin-bottom: 0;
+      }
     }
 
     &__pagination {
+      margin-top: 20px;
+
       .pagination {
         &:not(.pagination_tablet) {
           display: none;

package/src/scss/pages/tradePro-rewards.scss

@@ -7,7 +7,7 @@ $voucher-cell-height-lg: 246px;
 $voucher-cell-height-xl: 296px;
 
 .text-start {
-  text-align: left;
+  text-align: left !important;
 }
 
 .page_tradePro-rewards {
@@ -131,7 +131,7 @@ $voucher-cell-height-xl: 296px;
       color: $white;
       display: block;
       padding: 4px;
-      font-size: .75rem;
+      font-size: 0.75rem;
       font-weight: 500;
     }
 
@@ -168,7 +168,7 @@ $voucher-cell-height-xl: 296px;
 
       &-text {
         font-weight: 400;
-        font-size: .875rem;
+        font-size: 0.875rem;
       }
 
       &-button {
@@ -191,7 +191,6 @@ $voucher-cell-height-xl: 296px;
   }
 }
 
-
 @include media-breakpoint-up(md) {
   .page_tradePro-rewards {
     .voucher {

package/src/scss/plp-main.scss

@@ -27,6 +27,7 @@
 @import 'components/clamp-content';
 @import 'components/card-product-banner';
 @import 'components/shop-colour';
+@import 'components/quick-filter';
 
 // Pages
 @import 'pages/page_products-list-combined';

package/src/sitemap.html

@@ -528,6 +528,8 @@
                         <li><span class="page-id">5.15</span><a href="page_my-account.html" target="_blank">My Account DIY</a></li>
                         <li><a href="page_my-account-installer.html" target="_blank">My Account Installer</a></li>
                         <li><a href="page_my-account-trade-pro.html" target="_blank">My Account TradePro</a></li>
+                        <li><a href="page_my-account-trade-pro-carousel.html" target="_blank">My Account TradePro Carousel</a></li>
+                        <li><a href="page_my-account-trade-pro-carousel-double.html" target="_blank">My Account TradePro Carousel Double</a></li>
                         <li><a href="page_my-account-trade-pro-components.html" target="_blank">My Account TradePro Components</a></li>
                         <li><a href="page_personal-details.html" target="_blank">My Account Personal Details</a></li>
                         <li><a href="page_personal-details-installer.html" target="_blank">My Account Personal Details Installer</a></li>
@@ -543,6 +545,7 @@
                         <li><a href="page_my-account_address-book_tradePro.html" target="_blank">Address Book Trade Pro</a></li>
                         <li><a href="page_my-account_address-book-form.html" target="_blank">Address Book Form</a></li>
                         <li><a href="page_tradepro-discount.html" target="_blank">Trade Pro Discount</a></li>
+                        <li><a href="page_tradepro-discount-double.html" target="_blank">Trade Pro Discount (Double)</a></li>
                         <li><a href="page_tradepro-discount-app.html" target="_blank">Trade Pro Discount App</a></li>
                     </ul>
                     <h3>Project list</h3>
@@ -629,10 +632,18 @@
                         </li>
                         <li>
                             <span class="page-id">6.24</span>
-                            <a href="page_project-list-generate-project-list-ID.html" target="_blank">Project list - Generate Project list ID</a>
+                            <a href="page_project-list-with-new-share-popup-ios.html" target="_blank">My Project list Multiple - iOS share button</a>
                         </li>
                         <li>
                             <span class="page-id">6.25</span>
+                            <a href="page_project-list-with-new-share-popup-android.html" target="_blank">My Project list Multiple - Android share button</a>
+                        </li>
+                        <li>
+                            <span class="page-id">6.26</span>
+                            <a href="page_project-list-generate-project-list-ID.html" target="_blank">Project list - Generate Project list ID</a>
+                        </li>
+                        <li>
+                            <span class="page-id">6.27</span>
                             <a href="page_project-list-vat.html" target="_blank">Project list - Vat</a>
                         </li>
                     </ul>
@@ -787,24 +798,30 @@
                         </li>
                         <li>
                             <span class="page-id">2</span>
+                            <a href="page_product-details-tile-steps-klarna-widget-with-method-ids.html" target="_blank">
+                                Klarna PDP Tile Installation Steps with attribute payment method ids on klarna widget
+                            </a>
+                        </li>
+                        <li>
+                            <span class="page-id">3</span>
                             <a href="page_wismo-details-klarna.html" target="_blank">
                                 Klarna Order details page
                             </a>
                         </li>
                         <li>
-                            <span class="page-id">3</span>
+                            <span class="page-id">4</span>
                             <a href="page_my-account_order-details-klarna.html" target="_blank">
                                 Klarna Order details
                             </a>
                         </li>
                         <li>
-                            <span class="page-id">4</span>
+                            <span class="page-id">5</span>
                             <a href="page_tradePro-checkout-summary-klarna.html" target="_blank">
                                 Klarna TradePro Checkout Summary
                             </a>
                         </li>
                         <li>
-                            <span class="page-id">5</span>
+                            <span class="page-id">6</span>
                             <a href="page_tradePro_payment-details-other-methods.html" target="_blank">
                                 Klarna TradePro Payment Details
                             </a>
@@ -839,6 +856,12 @@
                                 Klarna Basket
                             </a>
                         </li>
+                        <li>
+                            <span class="page-id">12</span>
+                            <a href="page_shopping-cart-v2-klarna-with-method-ids.html" target="_blank">
+                                Klarna Basket with payment method ids on klarna widget
+                            </a>
+                        </li>
                     </ul>
                     <h3>
                         Pages with Apple payment
@@ -1229,6 +1252,19 @@
                     <ul>
                         <li><span class="page-id">1</span><a href="page_kitchen-plp.html" target="_blank">Whisk Kitchen - PLP Page</a></li>
                     </ul>
+                    <h3>Quick Filter</h3>
+                    <ul>
+                        <li><span class="page-id">1</span><a href="page_plp_v2-quick-filter_iconOnly_5.html" target="_blank">PLP Quick filter - Icon Only (5 variants)</a></li>
+                        <li><span class="page-id">2</span><a href="page_plp_v2-quick-filter_iconOnly_11.html" target="_blank">PLP Quick filter - Icon Only (11 variants)</a></li>
+                        <li><span class="page-id">3</span><a href="page_plp_v2-quick-filter_colourSwatches_5.html" target="_blank">PLP Quick filter - Colour Swatches (5 variants)</a></li>
+                        <li><span class="page-id">4</span><a href="page_plp_v2-quick-filter_colourSwatches_11.html" target="_blank">PLP Quick filter - Colour Swatches (11 variants)</a></li>
+                        <li><span class="page-id">5</span><a href="page_plp_v2-quick-filter_iconAndText_5.html" target="_blank">PLP Quick filter - Icon And Text (5 variants)</a></li>
+                        <li><span class="page-id">6</span><a href="page_plp_v2-quick-filter_iconAndText_9.html" target="_blank">PLP Quick filter - Icon And Text (9 variants)</a></li>
+                        <li><span class="page-id">7</span><a href="page_plp_v2-quick-filter_imageAndText_5.html" target="_blank">PLP Quick filter - Image And Text (5 variants)</a></li>
+                        <li><span class="page-id">8</span><a href="page_plp_v2-quick-filter_imageAndText_9.html" target="_blank">PLP Quick filter - Image And Text (9 variants)</a></li>
+                        <li><span class="page-id">9</span><a href="page_plp_v2-quick-filter_textOnly_5.html" target="_blank">PLP Quick filter - Text Only (5 variants)</a></li>
+                        <li><span class="page-id">10</span><a href="page_plp_v2-quick-filter_textOnly_9.html" target="_blank">PLP Quick filter - Text Only (9 variants)</a></li>
+                    </ul>
                 </div>
             </div>
         </div>

package/build/js/page/accordion.js

@@ -1,35 +0,0 @@
-var Wick = Wick || {};
-Wick.Accordion = (function(){
-  var $accordion = $('.accordion'),
-    accordionToggler = '.accordion__header',
-    accordionIcon = '.accordion__action',
-    accordionContent = '.accordion__content',
-    collapsed = 'accordion_collapsed',
-    $asideAccordion = $('.aside-accordion .js-toggle-aside-accordion');
-  var bindEvents = function (index, element) {
-    var $acc = $(element);
-
-    var accordionTrigger = $acc.attr('data-action-element') === 'icon' ? accordionIcon : accordionToggler
-    $acc.find(accordionTrigger).on('click', function(){
-      $acc.toggleClass(collapsed);
-      $acc.children(accordionContent).slideToggle(200);
-    });
-  };
-
-  var init = function () {
-    $accordion.each(bindEvents);
-
-    $asideAccordion.click(function() {
-      if (window.matchMedia("(min-width: 992px)").matches) {
-        if ($(this).text().toLowerCase() != 'useful links') {
-          $(this).closest('.aside-nav2__holder')
-            .toggleClass('is-active')
-            .find('.aside-nav2__list')
-            .slideToggle(250);
-        }
-      }
-    });
-  }
-
-  init();
-})();

package/build/js/page/kitchen/plp-filters-chips.js

@@ -1,90 +0,0 @@
-var Wick = window.Wick || {}
-
-Wick.PLPChips = {
-  GROUP: '.plp-filters__group',
-  TOGGLE: '.plp-filters__toggle',
-  INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
-  CHIPS_WRAP_SEL: '.plp-selected',
-  BADGE_CLASS: 'plp-filters__badge',
-
-  renderGroupCounters (rootWrapper) {
-    rootWrapper.find(Wick.PLPChips.GROUP).each((_, el) => {
-      const group = $(el)
-      const name = group.attr('data-filter') || ''
-      const count = Wick.PLPFilters.appliedState[name] ? Wick.PLPFilters.appliedState[name].size : 0
-      const btn = group.find(Wick.PLPChips.TOGGLE)
-      const badgeSpan = btn.find(`.${Wick.PLPChips.BADGE_CLASS} span`)
-      if (count > 0) {
-        badgeSpan.text(count).css('display', 'flex')
-      } else {
-        badgeSpan.text('').hide()
-      }
-    })
-  },
-
-  renderChips (rootWrapper) {
-    const wrap = rootWrapper.find(Wick.PLPChips.CHIPS_WRAP_SEL)
-    if (!wrap.length) {
-      return
-    }
-
-    const list = wrap.find('.plp-selected__list');
-    let clearAllBtn = wrap.find('.plp-selected__clear-all');
-
-    list.empty();
-
-    const total = Wick.PLPFilters.totalApplied()
-    wrap.find('.plp-selected__clear-all').prop('hidden', total === 0)
-
-    if (total === 0) {
-      wrap.hide();
-      if (clearAllBtn.length) {
-        clearAllBtn.remove();
-      }
-      return;
-    }
-
-    Object.keys(Wick.PLPFilters.appliedState).forEach((group) => {
-      Wick.PLPFilters.appliedState[group].forEach((value) => {
-        list.append(
-          `<button type="button" class="pf-chip" data-group="${group}" data-value="${value}">
-            <span class="pf-chip__text">${value}</span>
-            <i class="fa fa-times pf-chip__close" aria-hidden="true"></i>
-            <span class="sr-only">Remove ${value} from ${group}</span>
-        </button>`
-        );
-      });
-    });
-
-    if (clearAllBtn.length) {
-      clearAllBtn.prop('hidden', false);
-      clearAllBtn.appendTo(list);
-    } else {
-      clearAllBtn = $(`
-      <button type="button" class="plp-selected__clear-all btn btn-secondary">
-        <i class="fa fa-times" aria-hidden="true"></i><span>Clear all</span>
-      </button>
-    `);
-      list.append(clearAllBtn);
-    }
-  },
-
-  bindChipActions (rootWrapper) {
-    // remove one chip
-    rootWrapper.on('click', '.pf-chip', (e) => {
-      e.preventDefault()
-      const chip = $(e.target).closest('.pf-chip')
-      const groupDomName = chip.data('group')
-      const valueOriginal = chip.data('value')
-      
-      Wick.PLPFilters.removeFromApplied(groupDomName, valueOriginal)
-      Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, false)
-    })
-
-    // clear all
-    rootWrapper.on('click', '.plp-selected__clear-all', (e) => {
-      e.preventDefault()
-      Wick.PLPFilters.writeStateToURL({}, false)
-    })
-  }
-}

package/build/js/page/kitchen/plp-filters-mobile.js

@@ -1,72 +0,0 @@
-var Wick = window.Wick || {};
-
-Wick.PLPFiltersMobile = {
-  ROOT_WRAPPER: ".page-KitchenPLPPage",
-  INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
-
-  MODAL_SEL: '#filterModal',
-  MODAL_VIEW_BTN: '#filterModal .btn.btn-primary',
-  MODAL_CLEAR_BTN: '#filterModal .btn.btn-secondary',
-  $ACCORDION: '.accordion',
-  $ACCORDION_CONTENT: '.accordion__content',
-  ACCORDION_COLLAPSED: 'accordion_collapsed',
-
-  // update mobile counter
-  updateMobileFilterInfo() {
-    const info = $('.mobile-nav__item[data-target="#filterModal"] .mobile-nav__info');
-    if (!info.length) {
-      return;
-    }
-
-    const total = Wick.PLPFilters.totalApplied();
-    if (total > 0) {
-      const label = total === 1 ? 'filter' : 'filters';
-      info.text(`${total} ${label} applied`);
-    } else {
-      info.text('No filters applied');
-    }
-  },
-
-  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).on('change', Wick.PLPFiltersMobile.INPUTS, function () {
-      const inp = $(this);
-      const name = inp.attr('name');
-      if (!name) {
-        return;
-      }
-      Wick.PLPUtils.syncTwinInputsByName(name, inp.prop('checked'), inp);
-    });
-
-    // when the modal is opened — synchronize its checkboxes with state
-    $(document).on('shown.bs.modal', Wick.PLPFiltersMobile.MODAL_SEL, function () {
-      Wick.PLPFilters.setDOMFromState($(this), Wick.PLPFilters.appliedState);
-    });
-
-    $(document).on('hide.bs.modal', Wick.PLPFiltersMobile.MODAL_SEL, function () {
-      Wick.PLPFiltersMobile.hideAccordions()
-    });
-
-    // mobile "View results" button in modal
-    $(document).on('click', Wick.PLPFiltersMobile.MODAL_VIEW_BTN, function (e) {
-      e.preventDefault();
-      const scope = $(Wick.PLPFiltersMobile.ROOT_WRAPPER).add($(Wick.PLPFiltersMobile.MODAL_SEL));
-      Wick.PLPFilters.applyFromScopes(scope, true);
-    });
-
-    // mobile "Clear all" button in modal
-    $(document).on('click', Wick.PLPFiltersMobile.MODAL_CLEAR_BTN, function (e) {
-      e.preventDefault();
-      Wick.PLPFilters.appliedState = {};
-      Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, false);
-      $(document).find(Wick.PLPFiltersMobile.INPUTS + ':checked').prop('checked', false);
-      Wick.PLPFilters.updateSelectedUI($(Wick.PLPFiltersMobile.ROOT_WRAPPER));
-      $(document).trigger('filters:cleared', {state: Wick.PLPFilters.exportState()});
-    });
-  }
-}