wickes-css2 2.105.0-develop.8 → 2.105.0-develop.9

package/src/page_empty-shared-project-list-bicester-hub.html

@@ -6,5 +6,9 @@
 <main>
     {{> shopping-list-bicester-hub emptyShopList="true" }}
 </main>
+<script defer src="./js/share-project-list.min.js"></script>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/saving-shopping-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_empty-shopping-list_guest.html

@@ -5,5 +5,6 @@
 <main>
     {{> shopping-list emptyShopList=true pagination=false}}
 </main>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_kitchen-plp.html

@@ -11,8 +11,8 @@
         </main>
     {{/content}}
     {{#content "foot" mode="append"}}
-        {{> kitchen/filter-modal }}
-        <script src="./js/page/accordion.js"></script>
+        {{> kitchen/filter-modal isKitchenMode=true modalTitle="Filter by" }}
         <script src="./js/kitchen/kitchen-plp.min.js"></script>
+        <script src="./js/plp-filters.min.js"></script>
     {{/content}}
 {{/extend}}

package/src/page_my-shopping-list-add-notes.html

@@ -18,5 +18,6 @@
     copy-id=true
   }}
 </main>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_my-shopping-list-energy.html

@@ -15,5 +15,6 @@
 {{/content}}
 <script defer src="./js/page/project-list.js"></script>
 <script defer src="./js/energy-efficiency.min.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_my-shopping-list-hide-download.html

@@ -7,6 +7,7 @@
 </main>
 {{/content}}
 {{#content "foot" mode="append"}}
-<script src="./js/project-list-note.min.js"></script>
+<script defer src="./js/project-list.min.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_my-shopping-list-pdf.html

@@ -3,5 +3,7 @@
 {{/content}}
 {{#content "body"}}
   {{> shopping-list-pdf}}
+
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_my-shopping-list-saved-ref.html

@@ -6,5 +6,6 @@
     {{> shopping-list emptyShopList=false isUserRegister=true pagination=true ref-value=true}}
 </main>
 <script defer src="./js/page/project-list.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_my-shopping-list-wisdom-oos-registered.html

@@ -6,6 +6,7 @@
     {{> shopping-list emptyShopList=false isUserRegister=true pagination=true ref=true wisdom=true available=0}}
 </main>
 <script defer src="./js/page/project-list.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{#content "foot" mode="append"}}
     {{> wisdom-modal available=0 current=5}}

package/src/page_my-shopping-list-wisdom-oos.html

@@ -6,6 +6,7 @@
     {{> shopping-list emptyShopList=false isUserRegister=false pagination=true ref=true wisdom=true available=0}}
 </main>
 <script defer src="./js/page/project-list.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{#content "foot" mode="append"}}
     {{> wisdom-modal available=0 current=5}}

package/src/page_my-shopping-list-wisdom-partial-registered.html

@@ -6,6 +6,7 @@
     {{> shopping-list emptyShopList=false isUserRegister=true pagination=true ref=true wisdom=true available=10}}
 </main>
 <script defer src="./js/page/project-list.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{#content "foot" mode="append"}}
     {{> wisdom-modal available=12 current=15}}

package/src/page_my-shopping-list-wisdom-registered.html

@@ -6,6 +6,7 @@
     {{> shopping-list emptyShopList=false isUserRegister=true pagination=true ref=true wisdom=true available=10}}
 </main>
 <script defer src="./js/page/project-list.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{#content "foot" mode="append"}}
     {{> wisdom-modal available=12 current=5}}

package/src/page_my-shopping-list-wisdom.html

@@ -6,6 +6,7 @@
     {{> shopping-list emptyShopList=false isUserRegister=false pagination=true ref=true wisdom=true available=10}}
 </main>
 <script defer src="./js/page/project-list.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{#content "foot" mode="append"}}
     {{> wisdom-modal available=12 current=5}}

package/src/page_my-shopping-list.html

@@ -9,5 +9,6 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.1/html2pdf.bundle.min.js"
         integrity="sha512-1qLXyA3x0VSWeM+8vOotn6+KIRGdcQ8QMzsNeDXmdJsUAnoDGjzlxzqAuUGJGrGkGrtOrq4buDoAHxR89D9PWA=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_my-shopping-list_not-register.html

@@ -5,6 +5,9 @@
 <main>
     {{> shopping-list emptyShopList=false pagination=true}}
 </main>
+{{/content}}
+{{#content "foot" mode="append"}}
 <script defer src="./js/page/project-list.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_plp-with-paint.html

@@ -15,19 +15,13 @@
 
     <div class="row">
       <aside class="left-aside">
-        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
-        {{> search-filter-mobile collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
+        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
       </aside>
 
       <div class="content">
         {{> shop-colour title="Shop by colour"}}
         <div class="sort-products-list">
           <div class="sort-products-list__section sort-products-list__items-per-page">
-            <button class="btn btn-primary open-filters-btn" id="open-overlay">
-               <span class="btn__text">
-                 <span class="icon"><span class="fas fa-filter"></span></span>Filter products
-               </span>
-            </button>
             {{> 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">
@@ -71,5 +65,6 @@
 <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}}
 {{/extend}}

package/src/page_plp.html

@@ -15,8 +15,7 @@
 
     <div class="row">
       <aside class="left-aside">
-        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
-        {{> search-filter-mobile collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
+        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
       </aside>
 
       <div class="content">
@@ -25,11 +24,6 @@
 
         <div class="sort-products-list">
           <div class="sort-products-list__section sort-products-list__items-per-page">
-            <button class="btn btn-primary open-filters-btn" id="open-overlay">
-              <span class="btn__text">
-                <span class="icon"><span class="fas fa-filter"></span></span>Show filters
-              </span>
-            </button>
             {{> 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">
@@ -67,5 +61,6 @@
 {{/content}}
 {{#content "foot" mode="append"}}
 <script defer src="./js/page/plp.js"></script>
+<script defer src="./js/search-filter.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_plp_v2-energy-efficiency.html

@@ -17,17 +17,11 @@
         <div class="row">
             <aside class="left-aside">
                 {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
-                {{> search-filter-mobile collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
             </aside>
 
             <div class="content">
                 <div class="sort-products-list">
                     <div class="sort-products-list__section sort-products-list__items-per-page">
-                        <button class="btn btn-primary open-filters-btn" id="open-overlay">
-                                   <span class="btn__text">
-                                     <span class="icon"><span class="fas fa-filter"></span></span>Filter products
-                                   </span>
-                        </button>
                         {{> 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">
@@ -78,5 +72,6 @@
 <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}}
 {{/extend}}

package/src/page_plp_v2-favourite-products.html

@@ -1,4 +1,4 @@
-{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page" title="Products list" pagePlp=true}}
+{{#extend "base" hybrisClass="hybris-class" pageClass="page-responsiveThematicProductListPage products-list-page" title="Products list" pagePlp=true}}
     {{#content "head" mode="append" pagePlp=true}}
         <link type="text/css" rel="stylesheet" href="./css/components/plp-favourite-product.css">
     {{/content}}
@@ -16,7 +16,7 @@
 
                 <div class="row">
                     <aside class="left-aside">
-                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
+                        {{> search-filter filterTitle="Filter results" collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
                         {{> search-filter-mobile collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
                     </aside>
 
@@ -40,16 +40,13 @@
                         </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 showFavourite="true"}}
                             {{/each}}
                         </div>
 
                         <div class="sort-products-list">
-                            <div class="sort-products-list__section sort-products-list__items-per-page is-hidden">
+                            <div class="sort-products-list__section sort-products-list__items-per-page">
                                 {{> 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">
@@ -75,5 +72,7 @@
         <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>
+        <script defer src="./js/search-filter.min.js"></script>
     {{/content}}
-{{/extend}}
+{{/extend}}

package/src/page_plp_v2-vat.html

@@ -16,18 +16,12 @@
 
                 <div class="row">
                     <aside class="left-aside">
-                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
-                        {{> search-filter-mobile collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
+                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
                     </aside>
 
                     <div class="content">
                         <div class="sort-products-list">
                             <div class="sort-products-list__section sort-products-list__items-per-page">
-                                <button class="btn btn-primary open-filters-btn" id="open-overlay">
-                                   <span class="btn__text">
-                                     <span class="icon"><span class="fas fa-filter"></span></span>Filter products
-                                   </span>
-                                </button>
                                 {{> 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">
@@ -74,5 +68,6 @@
         <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}}
 {{/extend}}

package/src/page_plp_v2.html

@@ -17,20 +17,30 @@
 
                 <div class="row">
                     <aside class="left-aside">
-                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
-                        {{> search-filter-mobile collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
+                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
                     </aside>
 
                     <div class="content">
-                        <div class="sort-products-list">
-                            <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="#sort_form1" label="Sort by" label-hidden="true" placeholder="Name (descending)"}}
+                        <div class="plp-filters" data-component="plp-filters" aria-label="Product filters">
+                            <div class="plp-filters__bar plp-filters__bar-mobile" role="tablist" aria-label="Filters">
+                                {{> kitchen/mobile-nav-item
+                                icon="fas fa-filter"
+                                title="Filter by"
+                                info="1,818 results"
+                                modalId="filterModal"
+                                mod="filter-modal-cta"
+                                }}
+                                {{> kitchen/mobile-nav-item
+                                icon="fas fa-sort-alt"
+                                title="Sort by"
+                                info="Relevance"
+                                dropdown=true
+                                }}
                             </div>
                         </div>
+                        <div class="sort-products-list">
+                            {{> kitchen/sort-by }}
+                        </div>
 
                         <div class="products-list products-list-v2">
                             {{#each search-result_v2.products}}
@@ -71,8 +81,11 @@
         </main>
     {{/content}}
     {{#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>
     {{/content}}
 {{/extend}}

package/src/page_product_search-vat.html

@@ -17,18 +17,12 @@
 
         <div class="row">
             <aside class="left-aside">
-                {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
-                {{> search-filter-mobile collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
+                {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
             </aside>
 
             <div class="content">
                 <div class="sort-products-list">
                     <div class="sort-products-list__section sort-products-list__items-per-page">
-                        <button class="btn btn-primary open-filters-btn" id="open-overlay">
-              <span class="btn__text">
-                <span class="icon"><span class="fas fa-filter"></span></span>Show filters
-              </span>
-                        </button>
                         {{> 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">
@@ -69,5 +63,6 @@
 <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>
 {{/content}}
 {{/extend}}

package/src/page_product_search.html

@@ -17,18 +17,12 @@
 
         <div class="row">
             <aside class="left-aside">
-                {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
-                {{> search-filter-mobile collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
+                {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
             </aside>
 
             <div class="content">
                 <div class="sort-products-list">
                     <div class="sort-products-list__section sort-products-list__items-per-page">
-                        <button class="btn btn-primary open-filters-btn" id="open-overlay">
-              <span class="btn__text">
-                <span class="icon"><span class="fas fa-filter"></span></span>Show filters
-              </span>
-                        </button>
                         {{> 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">
@@ -69,5 +63,6 @@
 <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>
 {{/content}}
 {{/extend}}

package/src/page_project-list-generate-project-list-ID.html

@@ -19,4 +19,7 @@
   }}
 </main>
 {{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/share-project-list.min.js"></script>
+{{/content}}
 {{/extend}}

package/src/page_project-list-vat.html

@@ -21,4 +21,8 @@
   }}
 </main>
 {{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/project-list.min.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
+{{/content}}
 {{/extend}}

package/src/page_project-list-with-new-share-popup-android.html

@@ -8,7 +8,9 @@
 </main>
 {{/content}}
 {{#content "foot" mode="append"}}
-<script src="./js/project-list-note.min.js"></script>
+<script src="./js/project-list.min.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 <script async src="https://static.addtoany.com/menu/page.js"></script>
+<script defer src="./js/saving-shopping-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_project-list-with-new-share-popup-ios.html

@@ -8,7 +8,9 @@
 </main>
 {{/content}}
 {{#content "foot" mode="append"}}
-<script src="./js/project-list-note.min.js"></script>
+<script src="./js/project-list.min.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 <script async src="https://static.addtoany.com/menu/page.js"></script>
+<script defer src="./js/saving-shopping-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_project-list-with-new-share-popup.html

@@ -8,7 +8,8 @@
 </main>
 {{/content}}
 {{#content "foot" mode="append"}}
-<script src="./js/project-list-note.min.js"></script>
+<script defer src="./js/project-list.min.js"></script>
 <script async src="https://static.addtoany.com/menu/page.js"></script>
+<script defer src="./js/saving-shopping-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_search-results.html

@@ -16,8 +16,7 @@
 
     <div class="row">
       <aside class="left-aside">
-        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
-        {{> search-filter-mobile }}
+        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
       </aside>
 
       <div class="content">
@@ -25,11 +24,6 @@
 
         <div class="sort-products-list">
           <div class="sort-products-list__section sort-products-list__items-per-page">
-            <button class="btn btn-primary open-filters-btn" id="open-overlay">
-              <span class="btn__text">
-                <span class="icon"><span class="fas fa-filter"></span></span>Show filters
-              </span>
-            </button>
             {{> 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">
@@ -80,5 +74,6 @@
 <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}}
 {{/extend}}

package/src/page_shared-project-list-bicester-hub.html

@@ -9,7 +9,9 @@
 </main>
 {{/content}}
 {{#content "foot" mode="append"}}
-<script src="./js/project-list-note.min.js"></script>
+<script defer src="./js/project-list.min.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 <script defer src="./js/global-search.min.js"></script>
+<script defer src="./js/saving-shopping-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/scss/common/_common.scss

@@ -180,7 +180,7 @@ main {
   &__text {
     display: inline-block;
     vertical-align: top;
-    font-size: .875rem;
+    font-size: 0.875rem;
   }
 }
 
@@ -207,7 +207,7 @@ main {
   display: inline-block;
   padding: 2px 10px;
   background-color: $gray-bg;
-  font-size: .875rem;
+  font-size: 0.875rem;
   line-height: 1.375rem;
   border-left: 2px solid $gray;
 
@@ -318,7 +318,7 @@ main {
   border-top: 3px solid $blue-dark;
   width: 60px;
   height: 60px;
-  animation: spin .75s linear infinite;
+  animation: spin 0.75s linear infinite;
   position: absolute;
   left: calc(50% - 30px);
   top: calc(50% - 30px);
@@ -410,7 +410,8 @@ main {
 }
 
 @include media-breakpoint-down(xs) {
-  a, p {
+  a,
+  p {
     word-wrap: break-word;
   }
 

package/src/scss/components/_accordion.scss

@@ -46,7 +46,6 @@
         border-radius: 3px;
         word-wrap: break-word;
 
-
         &-icon {
           position: static;
           color: $warm-grey;
@@ -72,7 +71,6 @@
             content: '+';
             font-size: 1.77rem;
           }
-
         }
 
         &:hover {
@@ -89,7 +87,7 @@
         border-radius: 3px;
 
         &-inner {
-          font-size: .875rem;
+          font-size: 0.875rem;
           font-weight: 500;
           line-height: 18px;
         }