wickes-css2 2.105.0-develop.3 → 2.105.0-develop.4

package/build/js/search-filter.min.js

@@ -0,0 +1 @@
+!function o(i,n,s){function l(t,e){if(!n[t]){if(!i[t]){var r="function"==typeof require&&require;if(!e&&r)return r(t,!0);if(c)return c(t,!0);throw(e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}r=n[t]={exports:{}},i[t][0].call(r.exports,function(e){return l(i[t][1][e]||e)},r,r.exports,o,i,n,s)}return n[t].exports}for(var c="function"==typeof require&&require,e=0;e<s.length;e++)l(s[e]);return l}({1:[function(e,t,r){"use strict";var o,i,n;o=$(".filter-results_mobile"),$("#open-overlay").click(function(e){e.preventDefault(),$("body").addClass("is-filters-visible"),o.toggleClass("show")}),$("#close-overlay, .filter-results__btn-close").click(function(e){e.preventDefault(),o.hasClass("show")&&($("body").removeClass("is-filters-visible"),o.removeClass("show"))}),$('.filter-results_desktop .filter__item input[type="checkbox"]').click(function(){$(this).closest("form").submit()}),i=".close",n='.filter-results_desktop .filter__item input[type="checkbox"]',$(".filter-modal-cta").on("click",function(e){e.preventDefault()}),$(document).on("click",i,function(e){e.preventDefault()}),$(document).on("click",n,function(){$(this).closest("form").submit()})},{}]},{},[1]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.105.0-develop.3",
+  "version": "2.105.0-develop.4",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
     "src/scss/**/*.{scss,css}": [
       "sass-lint-auto-fix",
       "prettier --write",
-      "sass-lint -c .sasslintrc"
+      "sass-lint -c .sasslintrc --"
     ]
   },
   "keywords": [
@@ -125,7 +125,7 @@
     "branches": [
       "alt-master",
       {
-        "name": "develop",
+        "name": "custom-tag/0.5.0-icons",
         "prerelease": "${name.replace(/^custom-tag\\//g, '')}"
       }
     ],

package/src/components/accordion.hbs

@@ -1,7 +1,7 @@
-<div class="accordion {{mod}} {{collapsed}}">
+<div class="accordion {{mod}} {{collapsed}}" {{#if facetStep}}data-facet-step="{{facetStep}}"{{/if}}>
   <h5 class="accordion__header">
     {{#unless hide-chevron}}
-    <span class="icon accordion__header-icon">
+      <span class="icon accordion__header-icon">
       <i class="fas fa-angle-up"></i>
     </span>
     {{/unless}}

package/src/components/kitchen/dropdown.hbs

@@ -1,13 +1,16 @@
 <div class="sort-dd" role="menu" aria-label="Sort options" hidden>
-  <button class="sort-opt" type="button" data-value="relevance">
+  <button class="sort-opt" type="button" data-value="relevance"
+          {{#unless isKitchenMode}}data-is-plp-srp="true"{{/unless}}>
     <i class="fa fa-check sort-opt__check" aria-hidden="true"></i>
     <span>Relevance</span>
   </button>
-  <button class="sort-opt" type="button" data-value="priceLow">
+  <button class="sort-opt" type="button" data-value="priceLow"
+          {{#unless isKitchenMode}}data-is-plp-srp="true"{{/unless}}>
     <i class="fa fa-check sort-opt__check" aria-hidden="true"></i>
     <span>Price (lowest first)</span>
   </button>
-  <button class="sort-opt" type="button" data-value="priceHigh">
+  <button class="sort-opt" type="button" data-value="priceHigh"
+          {{#unless isKitchenMode}}data-is-plp-srp="true"{{/unless}}>
     <i class="fa fa-check sort-opt__check" aria-hidden="true"></i>
     <span>Price (highest first)</span>
   </button>

package/src/components/kitchen/filter-modal-content-kitchen.hbs

@@ -0,0 +1,10 @@
+{{#with kitchen-plp}}
+  {{> kitchen/chips mod="mobile"}}
+  {{#each filters}}
+    {{#extend "accordion" header=name collapsed="accordion_collapsed" hidden="hidden-state"}}
+      {{#content "content"}}
+        {{> kitchen/filter-option }}
+      {{/content}}
+    {{/extend}}
+  {{/each}}
+{{/with}}

package/src/components/kitchen/filter-modal.hbs

@@ -1,29 +1,26 @@
 {{#extend "modal" id="filterModal" classMod="filter-modal modal-scroll-observer" title="" showCloseBtn=true centered=true backdrop=true fullWidth=true}}
   {{#content "header"}}
     <h4 class="filter-modal__title">
-      Filter kitchens
+      {{ modalTitle }}
     </h4>
   {{/content}}
   {{#content "body"}}
     <div class="filter-modal__content">
-    {{#with kitchen-plp}}
-      {{> kitchen/chips mod="mobile"}}
-      {{#each filters}}
-        {{#extend "accordion" header=name collapsed="accordion_collapsed" hidden="hidden-state"}}
-          {{#content "content"}}
-            {{> kitchen/filter-option }}
-          {{/content}}
-        {{/extend}}
-      {{/each}}
-    {{/with}}
+      {{#if isKitchenMode}}
+        {{> kitchen/filter-modal-content-kitchen }}
+      {{else}}
+        {{> search-filter-modal-content }}
+      {{/if}}
     </div>
   {{/content}}
 
   {{#content "footer"}}
     <div class="modal-box__inner-row justify-content-center modal-box__footer-row">
       <div class="modal-box__inner-columns">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Clear all</button>
-        <button type="button" class="btn btn-primary" data-dismiss="modal">View results</button>
+        <button type="button" class="btn btn-secondary" data-dismiss="modal"
+                {{#unless isKitchenMode}}data-is-plp-srp="true"{{/unless}} >Clear all</button>
+        <button type="button" class="btn btn-primary" data-dismiss="modal"
+                {{#unless isKitchenMode}}data-is-plp-srp="true"{{/unless}}>View results</button>
       </div>
     </div>
   {{/content}}

package/src/components/kitchen/plp-filters.hbs

@@ -3,13 +3,15 @@
     <div class="plp-filters__bar plp-filters__bar-mobile" role="tablist" aria-label="Filters">
       {{> kitchen/mobile-nav-item
               icon="fas fa-filter"
-              title="Filter"
+              title="Filter by"
               modalId="filterModal"
       }}
       {{> kitchen/mobile-nav-item
               icon="fas fa-sort-alt"
               title="Sort by"
+              info="Relevance"
               dropdown=true
+              isKitchenMode=true
       }}
     </div>
     <div class="container">

package/src/components/kitchen/sort-by.hbs

@@ -2,7 +2,7 @@
   <label class="sort__label">Sort by</label>
 
   <button class="sort-button" type="button" aria-haspopup="menu" aria-expanded="false">
-    <span class="js-sort-info"></span>
+    <span class="js-sort-info">Relevance</span>
     <i class="sort__chevron fa fa-chevron-down" aria-hidden="true"></i>
   </button>
 

package/src/components/search-filter-modal-content.hbs

@@ -0,0 +1,102 @@
+<form class="filter-results filter-results_mobile">
+    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Color Family" mod="filter" facetStep="5" }}
+      {{#content "content"}}
+        {{#each filters.colors}}
+          <div class="filter__item">
+            <label for="m-{{id}}" class="chb chb-color">
+              <input type="checkbox" value="{{label}}" id="m-{{id}}" name="{{id}}-filter">
+              <ins><i class="fas fa-check"></i></ins>
+              <span>{{label}}</span>
+            </label>
+          </div>
+        {{/each}}
+      {{/content}}
+    {{/extend}}
+    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by category" mod="filter category-filter" fixed-height=""}}
+        {{#content "content"}}
+            {{>category-tree filters}}
+        {{/content}}
+    {{/extend}}
+    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by pack quantity" mod="filter" facetStep="5"}}
+        {{#content "content"}}
+        {{/content}}
+    {{/extend}}
+    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by type" mod="filter" facetStep="5"}}
+        {{#content "content"}}
+            {{#each filters.type-list}}
+                <div class="filter__item">
+                    <label for="m-{{id}}" class="chb chb-{{classForGtm}}">
+                        <input type="checkbox" value="{{value}}" id="m-{{id}}"
+                               name="m-{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
+                        <ins><i class="fas fa-check"></i></ins>
+                        <span>{{label}}</span>
+                        <span class="filter-quantity">({{quantity}})</span>
+                    </label>
+                </div>
+            {{/each}}
+        {{/content}}
+    {{/extend}}
+    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Customer Rating" mod="filter" facetStep="5"}}
+        {{#content "content"}}
+            {{#each filters.rated}}
+            <div class="filter__item">
+                {{#ifvalue quantity value='0'}}
+                {{else}}
+                <label class="chb chb-{{classForGtm}}">
+                    <input type="checkbox" value="{{value}}" id="{{id}}" name="{{id}}" {{#if checked}}checked{{/if}} {{#if
+                        disabled}}disabled{{/if}}>
+                    <ins><i class="fas fa-check"></i></ins>
+                    <div class="filter__reviews">
+                        <div class="product-rating">
+                            <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 rating}}{{rating}}{{else}}0{{/if}}">
+                                    <span class="star-overlay">
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                    </span>
+                                    <span class="star-overlay">
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                    </span>
+                                    <span class="star-overlay">
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                    </span>
+                                    <span class="star-overlay">
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                    </span>
+                                    <span class="star-overlay">
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                    </span>
+                                </div>
+                            </div>
+                            ({{quantity}})
+                        </div>
+                    </div>
+                </label>
+                {{/ifvalue}}
+            </div>
+            {{/each}}
+        {{/content}}
+    {{/extend}}
+    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by bulb shape" mod="filter" facetStep="5"}}
+        {{#content "content"}}
+        {{/content}}
+    {{/extend}}
+    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by number of gangs" mod="filter" facetStep="5"}}
+        {{#content "content"}}
+        {{/content}}
+    {{/extend}}
+    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by bulb fitting" mod="filter" facetStep="5"}}
+        {{#content "content"}}
+        {{/content}}
+    {{/extend}}
+    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by wattage" mod="filter" facetStep="5"}}
+        {{#content "content"}}
+        {{/content}}
+    {{/extend}}
+
+
+</form>

package/src/components/search-filter.hbs

@@ -1,134 +1,143 @@
 <form class="filter-results filter-results_desktop">
   <div class="filter-results__heading">
-    <span class="heading-4">Filter results</span>
-    <button type="reset" class="filter-results__clear" value="Clear all">Clear all</button>
+    <div class="flex">
+      <span class="heading-4">{{#unless filterTitle}}Filter by{{/unless}}{{filterTitle}}</span>
+      <button type="reset" class="filter-results__clear" value="Clear all">Clear all</button>
+    </div>
+    {{#unless filterTitle}}
+      <div class="sort-products-list__total">
+        <span class="product-count">{{plp_load-more.pagination.totalNumberOfResults}}</span> <span>results</span>
+      </div>
+    {{/unless}}
   </div>
-  {{#extend "accordion" header="Color Family" mod="filter"}}
-    {{#content "content"}}
-      {{#each filters.colors}}
-        <div class="filter__item">
-          <label for="{{id}}" class="chb chb-color">
-            <input type="checkbox" value="{{label}}" id="{{id}}" name="{{id}}-filter">
-            <ins><i class="fas fa-check"></i></ins>
-            <span>{{label}}</span>
-          </label>
-        </div>
-      {{/each}}
-    {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Shop by category" mod="filter category-filter" fixed-height=""}}
-    {{#content "content"}}
-      {{>category-tree filters}}
-    {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Shop by pack quantity" mod="filter"}}
-    {{#content "content"}}
-    {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Shop by type" mod="filter"}}
-    {{#content "content"}}
-      {{#each filters.type-list}}
-        <div class="filter__item">
-          <label for="{{id}}" class="chb chb-{{classForGtm}}">
-            <input type="checkbox" value="{{value}}" id="{{id}}"
-                    name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
-            <ins><i class="fas fa-check"></i></ins>
-            <span>{{label}}</span>
-            <span class="filter-quantity">({{quantity}})</span>
-          </label>
-        </div>
-      {{/each}}
-    {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Shop by type 2" mod="filter"}}
+  <div class="accordions">
+    {{#extend "accordion" header="Color Family" mod="filter" facetStep="5"}}
       {{#content "content"}}
-          {{#each filters.type-list2}}
-              <div class="filter__item">
-                  <label for="{{id}}" class="chb chb-{{classForGtm}}">
-                      <input type="checkbox" value="{{value}}" id="{{id}}"
-                             name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
-                      <ins><i class="fas fa-check"></i></ins>
-                      <span>{{label}}</span>
-                      <span class="filter-quantity">({{quantity}})</span>
-                  </label>
-              </div>
-          {{/each}}
+        {{#each filters.colors}}
+          <div class="filter__item">
+            <label for="{{id}}" class="chb chb-color">
+              <input type="checkbox" value="{{label}}" id="{{id}}" name="{{id}}-filter">
+              <ins><i class="fas fa-check"></i></ins>
+              <span>{{label}}</span>
+            </label>
+          </div>
+        {{/each}}
       {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Shop by type 3" mod="filter"}}
+    {{/extend}}
+    {{#extend "accordion" header="Shop by category" mod="filter category-filter" fixed-height=""}}
       {{#content "content"}}
-          {{#each filters.type-list3}}
-              <div class="filter__item">
-                  <label for="{{id}}" class="chb chb-{{classForGtm}}">
-                      <input type="checkbox" value="{{value}}" id="{{id}}"
-                             name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
-                      <ins><i class="fas fa-check"></i></ins>
-                      <span>{{label}}</span>
-                      <span class="filter-quantity">({{quantity}})</span>
-                  </label>
-              </div>
-          {{/each}}
+        {{>category-tree filters}}
       {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Customer Rating" mod="filter"}}
+    {{/extend}}
+    {{#extend "accordion" header="Shop by pack quantity" mod="filter" facetStep="5"}}
       {{#content "content"}}
-          {{#each filters.rated}}
-              <div class="filter__item">
-                {{#ifvalue quantity value='0'}}
-                {{else}}
-                  <label for="{{id}}" class="chb chb-{{classForGtm}}">
-                      <input type="checkbox" value="{{value}}" id="{{id}}"
-                             name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
-                      <ins><i class="fas fa-check"></i></ins>
-                      <div class="filter__reviews">
-                        <div class="product-rating">
-                          <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 rating}}{{rating}}{{else}}0{{/if}}">
+      {{/content}}
+    {{/extend}}
+    {{#extend "accordion" header="Shop by type" mod="filter" facetStep="5"}}
+      {{#content "content"}}
+        {{#each filters.type-list}}
+          <div class="filter__item">
+            <label for="{{id}}" class="chb chb-{{classForGtm}}">
+              <input type="checkbox" value="{{value}}" id="{{id}}"
+                     name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
+              <ins><i class="fas fa-check"></i></ins>
+              <span>{{label}}</span>
+              <span class="filter-quantity">({{quantity}})</span>
+            </label>
+          </div>
+        {{/each}}
+      {{/content}}
+    {{/extend}}
+    {{#extend "accordion" header="Shop by type 2" mod="filter" facetStep="5"}}
+      {{#content "content"}}
+        {{#each filters.type-list2}}
+          <div class="filter__item">
+            <label for="{{id}}" class="chb chb-{{classForGtm}}">
+              <input type="checkbox" value="{{value}}" id="{{id}}"
+                     name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
+              <ins><i class="fas fa-check"></i></ins>
+              <span>{{label}}</span>
+              <span class="filter-quantity">({{quantity}})</span>
+            </label>
+          </div>
+        {{/each}}
+      {{/content}}
+    {{/extend}}
+    {{#extend "accordion" header="Shop by type 3" mod="filter" facetStep="5"}}
+      {{#content "content"}}
+        {{#each filters.type-list3}}
+          <div class="filter__item">
+            <label for="{{id}}" class="chb chb-{{classForGtm}}">
+              <input type="checkbox" value="{{value}}" id="{{id}}"
+                     name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
+              <ins><i class="fas fa-check"></i></ins>
+              <span>{{label}}</span>
+              <span class="filter-quantity">({{quantity}})</span>
+            </label>
+          </div>
+        {{/each}}
+      {{/content}}
+    {{/extend}}
+    {{#extend "accordion" header="Customer Rating" mod="filter" facetStep="5"}}
+      {{#content "content"}}
+        {{#each filters.rated}}
+          <div class="filter__item">
+            {{#ifvalue quantity value='0'}}
+            {{else}}
+              <label for="{{id}}" class="chb chb-{{classForGtm}}">
+                <input type="checkbox" value="{{value}}" id="{{id}}"
+                       name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
+                <ins><i class="fas fa-check"></i></ins>
+                <div class="filter__reviews">
+                  <div class="product-rating">
+                    <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 rating}}{{rating}}{{else}}0{{/if}}">
                               <span class="star-overlay">
                                 <i class="fa fa-star" aria-hidden="true"></i>
                               </span>
-                              <span class="star-overlay">
+                        <span class="star-overlay">
                                 <i class="fa fa-star" aria-hidden="true"></i>
                               </span>
-                              <span class="star-overlay">
+                        <span class="star-overlay">
                                 <i class="fa fa-star" aria-hidden="true"></i>
                               </span>
-                              <span class="star-overlay">
+                        <span class="star-overlay">
                                 <i class="fa fa-star" aria-hidden="true"></i>
                               </span>
-                              <span class="star-overlay">
+                        <span class="star-overlay">
                                 <i class="fa fa-star" aria-hidden="true"></i>
                               </span>
-                            </div>
-                          </div>
-                          ({{quantity}})
-                        </div>
                       </div>
-                  </label>
-                {{/ifvalue}}
-              </div>
-          {{/each}}
+                    </div>
+                    ({{quantity}})
+                  </div>
+                </div>
+              </label>
+            {{/ifvalue}}
+          </div>
+        {{/each}}
+      {{/content}}
+    {{/extend}}
+    {{#extend "accordion" header="Shop by bulb shape" mod="filter" facetStep="5"}}
+      {{#content "content"}}
+      {{/content}}
+    {{/extend}}
+    {{#extend "accordion" header="Shop by number of gangs" mod="filter" facetStep="5"}}
+      {{#content "content"}}
       {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Shop by bulb shape" mod="filter"}}
-    {{#content "content"}}
-    {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Shop by number of gangs" mod="filter"}}
-    {{#content "content"}}
-    {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Shop by bulb fitting" mod="filter"}}
-    {{#content "content"}}
-    {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Shop by wattage" mod="filter"}}
-    {{#content "content"}}
-    {{/content}}
-  {{/extend}}
+    {{/extend}}
+    {{#extend "accordion" header="Shop by bulb fitting" mod="filter" facetStep="5"}}
+      {{#content "content"}}
+      {{/content}}
+    {{/extend}}
+    {{#extend "accordion" header="Shop by wattage" mod="filter" facetStep="5"}}
+      {{#content "content"}}
+      {{/content}}
+    {{/extend}}
+  </div>
 </form>

package/src/data/data_plp_load-more.json

@@ -381,7 +381,7 @@
       "currentPage": 0,
       "sort": null,
       "numberOfPages": 3,
-      "totalNumberOfResults": 65,
+      "totalNumberOfResults": 1818,
       "startPageItem": 1,
       "endPageItem": 0,
       "offset": 0,

package/src/elements/btn.hbs

@@ -0,0 +1,7 @@
+<button
+    class="{{class}}"
+    data-action="{{action}}"
+    {{#if ariaControls}}aria-controls="{{ariaControls}}"{{/if}}
+>
+  {{text}}
+</button>

package/src/js/components/general/accordion.js

@@ -1,35 +1,44 @@
 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);
+Wick.Accordion = (function () {
+    var accordionRoot = '.accordion',
+        accordionToggler = '.accordion__header',
+        accordionIcon = '.accordion__action',
+        accordionContent = '.accordion__content',
+        collapsed = 'accordion_collapsed',
+        $asideAccordion = $('.aside-accordion .js-toggle-aside-accordion');
 
-    var accordionTrigger = $acc.attr('data-action-element') === 'icon' ? accordionIcon : accordionToggler
-    $acc.find(accordionTrigger).on('click', function(){
-      $acc.toggleClass(collapsed);
-      $acc.children(accordionContent).slideToggle(200);
-    });
-  };
+    function getTriggerSelector($acc) {
+        return $acc.attr('data-action-element') === 'icon' ? accordionIcon : accordionToggler;
+    }
 
-  var init = function () {
-    $accordion.each(bindEvents);
+    function onAccordionClick(e) {
+        var $acc = $(e.target).closest(accordionRoot);
+        if (!$acc.length) return;
 
-    $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);
-          }
-      }
-    });
-  }
+        var trigger = getTriggerSelector($acc);
+        if (!$(e.target).closest(trigger).length) return;
 
-  init();
+        $acc.toggleClass(collapsed);
+        $acc.children(accordionContent).stop(true, true).slideToggle(200);
+    }
+
+    function init() {
+        $(document)
+            .off('click.wickAccordion', accordionToggler + ',' + accordionIcon)
+            .on('click.wickAccordion', accordionToggler + ',' + accordionIcon, onAccordionClick);
+
+        $asideAccordion.off('click.wickAsideAccordion').on('click.wickAsideAccordion', 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/src/js/components/general/cart-slider.js

@@ -1,20 +1,23 @@
 const cartSliderHTML = '<div class="custom-slider just-added d-none"></div>';
 
 createPopupSlider({
-  type: 'cart',
-  sliderSelector: '.custom-slider.just-added',
-  onAppendEvent: 'productAddedToCart',
-  onAppend: function (event, { showSlider, handleScroll, el }) {
-    if (!$('.custom-slider.just-added').length) {
-      $('body').append(cartSliderHTML);
-    }
-    const htmlContent = event.detail.html;
-    $(el.slider).append(htmlContent);
-    showSlider();
-    Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
-    $(el.sliderWrap).on('scroll', _.debounce(() => handleScroll(el.sliderWrap), 100));
-  },
-  onClose: function () {
-    Wick.MiniBasketSliderFE.cartEntries = [];
-  }
+    type: 'cart',
+    sliderSelector: '.custom-slider.just-added',
+    onAppendEvent: 'productAddedToCart',
+    onAppend: function (event, { showSlider, handleScroll, el }) {
+        if (!$('.custom-slider.just-added').length) {
+            $('body').append(cartSliderHTML);
+        }
+        const htmlContent = event.detail.html;
+        $(el.slider).append(htmlContent);
+        showSlider();
+        Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
+        $(el.sliderWrap).on(
+            'scroll',
+            _.debounce(() => handleScroll(el.sliderWrap), 100)
+        );
+    },
+    onClose: function () {
+        Wick.MiniBasketSliderFE.cartEntries = [];
+    },
 });