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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (259) hide show
  1. package/Readme.md +4 -3
  2. package/build/css/category-main.css +1 -1
  3. package/build/css/homepage-main.css +1 -1
  4. package/build/css/kitchen-plp-main.css +1 -1
  5. package/build/css/main.css +1 -1
  6. package/build/css/my-account-main-v2.css +1 -1
  7. package/build/css/my-account-main.css +1 -1
  8. package/build/css/pages/checkout-new.css +1 -1
  9. package/build/css/pages/checkout.css +1 -1
  10. package/build/css/pages/my-account-v2.css +1 -1
  11. package/build/css/pages/page_checkout_delivery-new.css +1 -1
  12. package/build/css/pages/page_discount.css +1 -1
  13. package/build/css/pages/page_product_search.css +1 -1
  14. package/build/css/pages/page_products-list-combined.css +1 -1
  15. package/build/css/pages/page_products-list.css +1 -1
  16. package/build/css/pages/tradePro-rewards.css +1 -1
  17. package/build/css/pdp-main-before-combine.css +1 -1
  18. package/build/css/pdp-main-critical.css +1 -1
  19. package/build/css/pdp-main-non-critical.css +1 -1
  20. package/build/css/pdp-main.css +1 -1
  21. package/build/css/plp-main.css +1 -1
  22. package/build/css/store-locator-main.css +1 -1
  23. package/build/img/quick-filters/bath1.svg +10 -0
  24. package/build/img/quick-filters/bath3.svg +3 -0
  25. package/build/img/quick-filters/bath4.svg +10 -0
  26. package/build/img/quick-filters/bath5.svg +10 -0
  27. package/build/img/quick-filters/image1.jpg +0 -0
  28. package/build/img/quick-filters/image2.jpg +0 -0
  29. package/build/img/quick-filters/image3.jpg +0 -0
  30. package/build/js/account-members.min.js +1 -1
  31. package/build/js/basket.min.js +2 -2
  32. package/build/js/bundle.min.js +1 -1
  33. package/build/js/checkout.min.js +2 -2
  34. package/build/js/emulation.min.js +12125 -11596
  35. package/build/js/general.bundle.min.js +1 -1
  36. package/build/js/kitchen/kitchen-plp.min.js +1 -9
  37. package/build/js/merged-checkout.min.js +2 -2
  38. package/build/js/mini-basket-slider.min.js +1 -1
  39. package/build/js/my-account.min.js +1 -1
  40. package/build/js/page/basket/basket-update-cart-action.js +59 -56
  41. package/build/js/page/basket/basket-update-cart.js +27 -27
  42. package/build/js/page/basket/basket-utils.js +40 -33
  43. package/build/js/page/basket/mini-basket-total.js +70 -66
  44. package/build/js/page/basket/quantity-change-handler.js +73 -55
  45. package/build/js/page/basket/update-quantity-operation.js +39 -30
  46. package/build/js/page/basket/update-quantity.js +62 -62
  47. package/build/js/page/basket-v2.js +362 -229
  48. package/build/js/page/billie-business-type.js +27 -27
  49. package/build/js/page/checkout-payment-details.js +301 -299
  50. package/build/js/page/components/discounts.js +39 -36
  51. package/build/js/page/components/mini-basket-slider.js +604 -545
  52. package/build/js/page/filters/desktop-nav.js +64 -0
  53. package/build/js/page/filters/mobile-nav.js +93 -0
  54. package/build/js/page/filters/plp-filters-chips.js +92 -0
  55. package/build/js/page/filters/plp-filters-mobile.js +150 -0
  56. package/build/js/page/filters/plp-filters-panel.js +123 -0
  57. package/build/js/page/filters/plp-filters-utils.js +66 -0
  58. package/build/js/page/filters/plp-filters.js +268 -0
  59. package/build/js/page/filters/sort-by.js +172 -0
  60. package/build/js/page/kitchen/colour-swatches.js +5 -2
  61. package/build/js/page/klarna-modal-scroll-disable.js +4 -4
  62. package/build/js/page/my-account.js +32 -47
  63. package/build/js/page/online-exclusive.js +28 -31
  64. package/build/js/page/quick-filter.js +108 -0
  65. package/build/js/page/search-filter.js +62 -0
  66. package/build/js/page/share-project-list.js +57 -0
  67. package/build/js/page/tradePro-rewards.js +69 -39
  68. package/build/js/page/utils/copy-to-clipboard.js +79 -47
  69. package/build/js/page/utils/helpers.js +14 -9
  70. package/build/js/page/utils/show-more-less.js +273 -0
  71. package/build/js/pdp.bundle.min.js +1 -1
  72. package/build/js/plp-filters.min.js +9 -0
  73. package/build/js/plp.bundle.min.js +1 -1
  74. package/build/js/project-list.min.js +143 -85
  75. package/build/js/search-filter.min.js +1 -0
  76. package/build/js/share-project-list.min.js +1 -0
  77. package/build/js/tradePro-rewards.min.js +1 -1
  78. package/package.json +4 -2
  79. package/src/components/.DS_Store +0 -0
  80. package/src/components/accordion.hbs +2 -2
  81. package/src/components/date-selection.hbs +25 -6
  82. package/src/components/generate-project-id.hbs +1 -1
  83. package/src/components/kitchen/dropdown.hbs +6 -3
  84. package/src/components/kitchen/filter-modal-content-kitchen.hbs +10 -0
  85. package/src/components/kitchen/filter-modal.hbs +10 -13
  86. package/src/components/kitchen/kitchen-card.hbs +1 -1
  87. package/src/components/kitchen/plp-filters.hbs +3 -1
  88. package/src/components/kitchen/sort-by.hbs +1 -1
  89. package/src/components/my-account/barcode.hbs +1 -3
  90. package/src/components/my-account/cards-swap.hbs +10 -0
  91. package/src/components/my-account/clipboard-code-card.hbs +3 -3
  92. package/src/components/my-account/discount.hbs +1 -1
  93. package/src/components/my-account/greetings.hbs +1 -1
  94. package/src/components/quick-filter.hbs +56 -0
  95. package/src/components/search-filter-modal-content.hbs +102 -0
  96. package/src/components/search-filter.hbs +121 -112
  97. package/src/components/shopping-list-with-share-list-v2.hbs +28 -10
  98. package/src/components/shopping-list.hbs +5 -5
  99. package/src/data/data_plp_load-more.json +1 -1
  100. package/src/data/data_quick-filter.json +508 -0
  101. package/src/data/my-account/data_my-account.json +9 -0
  102. package/src/elements/btn.hbs +7 -0
  103. package/src/img/quick-filters/bath1.svg +10 -0
  104. package/src/img/quick-filters/bath3.svg +3 -0
  105. package/src/img/quick-filters/bath4.svg +10 -0
  106. package/src/img/quick-filters/bath5.svg +10 -0
  107. package/src/img/quick-filters/image1.jpg +0 -0
  108. package/src/img/quick-filters/image2.jpg +0 -0
  109. package/src/img/quick-filters/image3.jpg +0 -0
  110. package/src/js/components/cards-swap.js +74 -0
  111. package/src/js/components/general/accordion.js +44 -33
  112. package/src/js/components/general/cart-slider.js +19 -16
  113. package/src/js/components/general/create-popup-slider.js +168 -173
  114. package/src/js/components/share-project-list.js +8 -5
  115. package/src/js/emulation/big-wins.js +1081 -904
  116. package/src/js/emulation/billie-modal.js +23 -19
  117. package/src/js/emulation/checkout-payment-details.js +47 -38
  118. package/src/js/emulation/custom-slider-emulation.js +17 -13
  119. package/src/js/emulation/filters-emulation.js +164 -0
  120. package/src/js/emulation/forms.js +360 -323
  121. package/src/js/emulation/mini-basket-data.js +1051 -923
  122. package/src/js/emulation/paymentLoader.js +17 -17
  123. package/src/js/emulation/pdf-file-loader.js +89 -91
  124. package/src/js/emulation/popover-mini-basket.js +246 -239
  125. package/src/js/emulation/product-counter.js +50 -0
  126. package/src/js/emulation/project-list-pdp.js +320 -316
  127. package/src/js/emulation/repayment-toggle.js +23 -24
  128. package/src/js/emulation/reset-filter-desktop.js +5 -0
  129. package/src/js/emulation/selectable.js +22 -18
  130. package/src/js/emulation/wismo-details.js +23 -31
  131. package/src/js/page/basket/basket-update-cart-action.js +59 -56
  132. package/src/js/page/basket/basket-update-cart.js +27 -27
  133. package/src/js/page/basket/basket-utils.js +40 -33
  134. package/src/js/page/basket/mini-basket-total.js +70 -66
  135. package/src/js/page/basket/quantity-change-handler.js +73 -55
  136. package/src/js/page/basket/update-quantity-operation.js +39 -30
  137. package/src/js/page/basket/update-quantity.js +62 -62
  138. package/src/js/page/basket-v2.js +362 -229
  139. package/src/js/page/billie-business-type.js +27 -27
  140. package/src/js/page/checkout-payment-details.js +301 -299
  141. package/src/js/page/components/discounts.js +39 -36
  142. package/src/js/page/components/mini-basket-slider.js +604 -545
  143. package/src/js/page/filters/desktop-nav.js +64 -0
  144. package/src/js/page/filters/mobile-nav.js +93 -0
  145. package/src/js/page/filters/plp-filters-chips.js +92 -0
  146. package/src/js/page/filters/plp-filters-mobile.js +150 -0
  147. package/src/js/page/filters/plp-filters-panel.js +123 -0
  148. package/src/js/page/filters/plp-filters-utils.js +66 -0
  149. package/src/js/page/filters/plp-filters.js +268 -0
  150. package/src/js/page/filters/sort-by.js +172 -0
  151. package/src/js/page/kitchen/colour-swatches.js +5 -2
  152. package/src/js/page/klarna-modal-scroll-disable.js +4 -4
  153. package/src/js/page/my-account.js +32 -47
  154. package/src/js/page/online-exclusive.js +28 -31
  155. package/src/js/page/quick-filter.js +108 -0
  156. package/src/js/page/search-filter.js +62 -0
  157. package/src/js/page/share-project-list.js +57 -0
  158. package/src/js/page/tradePro-rewards.js +69 -39
  159. package/src/js/page/utils/copy-to-clipboard.js +79 -47
  160. package/src/js/page/utils/helpers.js +14 -9
  161. package/src/js/page/utils/show-more-less.js +273 -0
  162. package/src/page_empty-shared-project-list-bicester-hub.html +4 -0
  163. package/src/page_empty-shopping-list_guest.html +1 -0
  164. package/src/page_kitchen-plp.html +2 -2
  165. package/src/page_my-account-installer.html +1 -1
  166. package/src/page_my-account-trade-pro-carousel-double.html +127 -0
  167. package/src/page_my-account-trade-pro-carousel.html +134 -0
  168. package/src/page_my-account-trade-pro.html +1 -1
  169. package/src/page_my-shopping-list-add-notes.html +1 -0
  170. package/src/page_my-shopping-list-energy.html +1 -0
  171. package/src/page_my-shopping-list-hide-download.html +3 -2
  172. package/src/page_my-shopping-list-pdf.html +2 -0
  173. package/src/page_my-shopping-list-saved-ref.html +1 -0
  174. package/src/page_my-shopping-list-wisdom-oos-registered.html +1 -0
  175. package/src/page_my-shopping-list-wisdom-oos.html +1 -0
  176. package/src/page_my-shopping-list-wisdom-partial-registered.html +1 -0
  177. package/src/page_my-shopping-list-wisdom-registered.html +1 -0
  178. package/src/page_my-shopping-list-wisdom.html +1 -0
  179. package/src/page_my-shopping-list.html +1 -0
  180. package/src/page_my-shopping-list_not-register.html +3 -0
  181. package/src/page_plp-with-paint.html +2 -7
  182. package/src/page_plp.html +2 -7
  183. package/src/page_plp_v2-energy-efficiency.html +1 -6
  184. package/src/page_plp_v2-favourite-products.html +6 -7
  185. package/src/page_plp_v2-quick-filter_colourSwatches_11.html +79 -0
  186. package/src/page_plp_v2-quick-filter_colourSwatches_5.html +79 -0
  187. package/src/page_plp_v2-quick-filter_iconAndText_5.html +79 -0
  188. package/src/page_plp_v2-quick-filter_iconAndText_9.html +79 -0
  189. package/src/page_plp_v2-quick-filter_iconOnly_11.html +79 -0
  190. package/src/page_plp_v2-quick-filter_iconOnly_5.html +79 -0
  191. package/src/page_plp_v2-quick-filter_imageAndText_5.html +79 -0
  192. package/src/page_plp_v2-quick-filter_imageAndText_9.html +79 -0
  193. package/src/page_plp_v2-quick-filter_textOnly_5.html +79 -0
  194. package/src/page_plp_v2-quick-filter_textOnly_9.html +79 -0
  195. package/src/page_plp_v2-vat.html +2 -7
  196. package/src/page_plp_v2.html +22 -9
  197. package/src/page_product_search-vat.html +2 -7
  198. package/src/page_product_search.html +2 -7
  199. package/src/page_project-list-generate-project-list-ID.html +3 -0
  200. package/src/page_project-list-vat.html +4 -0
  201. package/src/page_project-list-with-new-share-popup-android.html +16 -0
  202. package/src/page_project-list-with-new-share-popup-ios.html +16 -0
  203. package/src/page_project-list-with-new-share-popup.html +2 -1
  204. package/src/page_search-results.html +2 -7
  205. package/src/page_shared-project-list-bicester-hub.html +3 -1
  206. package/src/page_tradepro-discount-app.html +1 -1
  207. package/src/page_tradepro-discount-double.html +109 -0
  208. package/src/page_tradepro-discount.html +36 -2
  209. package/src/partials/head.hbs +1 -0
  210. package/src/scss/common/_common.scss +10 -4
  211. package/src/scss/components/_accordion.scss +1 -3
  212. package/src/scss/components/_custom-slider.scss +17 -16
  213. package/src/scss/components/_date-selection-add-new-styles.scss +48 -7
  214. package/src/scss/components/_date-selection.scss +80 -1
  215. package/src/scss/components/{kitchen/_filter-modal.scss → _filter-modal.scss} +55 -4
  216. package/src/scss/components/{kitchen/_plp-filters.scss → _plp-filters.scss} +31 -13
  217. package/src/scss/components/_popover-mini-basket.scss +3 -3
  218. package/src/scss/components/_quick-filter.scss +288 -0
  219. package/src/scss/components/_search-filter.scss +95 -15
  220. package/src/scss/components/_shared-shopping-list.scss +22 -0
  221. package/src/scss/components/_shopping-list.scss +18 -8
  222. package/src/scss/components/_sort-by.scss +190 -0
  223. package/src/scss/components/checkout-chip.scss +2 -2
  224. package/src/scss/components/checkout-payment-repayment-terms.scss +1 -1
  225. package/src/scss/components/kitchen/_price-tooltip.scss +1 -1
  226. package/src/scss/components/kitchen/_price.scss +1 -1
  227. package/src/scss/components/my-account/_barcode.scss +9 -1
  228. package/src/scss/components/my-account/_cards-swap.scss +60 -0
  229. package/src/scss/components/my-account/_clipboard-code.scss +11 -3
  230. package/src/scss/components/my-account/_discount.scss +12 -2
  231. package/src/scss/globals/_global-components.scss +3 -0
  232. package/src/scss/helpers/_colors-semantic.scss +68 -68
  233. package/src/scss/helpers/_variables.scss +244 -196
  234. package/src/scss/kitchen-plp-main.scss +0 -4
  235. package/src/scss/main.scss +65 -65
  236. package/src/scss/pages/my-account-v2.scss +42 -5
  237. package/src/scss/pages/page_discount.scss +8 -4
  238. package/src/scss/pages/page_product-details-v2.scss +1 -4
  239. package/src/scss/pages/page_product_search.scss +9 -1
  240. package/src/scss/pages/page_products-list-combined.scss +28 -24
  241. package/src/scss/pages/page_products-list.scss +8 -0
  242. package/src/scss/pages/tradePro-rewards.scss +3 -4
  243. package/src/scss/plp-main.scss +1 -0
  244. package/src/sitemap.html +25 -1
  245. package/build/js/page/accordion.js +0 -35
  246. package/build/js/page/kitchen/plp-filters-chips.js +0 -90
  247. package/build/js/page/kitchen/plp-filters-mobile.js +0 -72
  248. package/build/js/page/kitchen/plp-filters-panel.js +0 -119
  249. package/build/js/page/kitchen/plp-filters-utils.js +0 -65
  250. package/build/js/page/kitchen/plp-filters.js +0 -205
  251. package/build/js/page/kitchen/sort-by.js +0 -157
  252. package/src/js/components/general/search-filter.js +0 -21
  253. package/src/js/page/accordion.js +0 -35
  254. package/src/js/page/kitchen/plp-filters-chips.js +0 -90
  255. package/src/js/page/kitchen/plp-filters-mobile.js +0 -72
  256. package/src/js/page/kitchen/plp-filters-panel.js +0 -119
  257. package/src/js/page/kitchen/plp-filters-utils.js +0 -65
  258. package/src/js/page/kitchen/plp-filters.js +0 -205
  259. package/src/js/page/kitchen/sort-by.js +0 -157
package/src/sitemap.html CHANGED
@@ -528,6 +528,8 @@
528
528
  <li><span class="page-id">5.15</span><a href="page_my-account.html" target="_blank">My Account DIY</a></li>
529
529
  <li><a href="page_my-account-installer.html" target="_blank">My Account Installer</a></li>
530
530
  <li><a href="page_my-account-trade-pro.html" target="_blank">My Account TradePro</a></li>
531
+ <li><a href="page_my-account-trade-pro-carousel.html" target="_blank">My Account TradePro Carousel</a></li>
532
+ <li><a href="page_my-account-trade-pro-carousel-double.html" target="_blank">My Account TradePro Carousel Double</a></li>
531
533
  <li><a href="page_my-account-trade-pro-components.html" target="_blank">My Account TradePro Components</a></li>
532
534
  <li><a href="page_personal-details.html" target="_blank">My Account Personal Details</a></li>
533
535
  <li><a href="page_personal-details-installer.html" target="_blank">My Account Personal Details Installer</a></li>
@@ -543,6 +545,7 @@
543
545
  <li><a href="page_my-account_address-book_tradePro.html" target="_blank">Address Book Trade Pro</a></li>
544
546
  <li><a href="page_my-account_address-book-form.html" target="_blank">Address Book Form</a></li>
545
547
  <li><a href="page_tradepro-discount.html" target="_blank">Trade Pro Discount</a></li>
548
+ <li><a href="page_tradepro-discount-double.html" target="_blank">Trade Pro Discount (Double)</a></li>
546
549
  <li><a href="page_tradepro-discount-app.html" target="_blank">Trade Pro Discount App</a></li>
547
550
  </ul>
548
551
  <h3>Project list</h3>
@@ -629,10 +632,18 @@
629
632
  </li>
630
633
  <li>
631
634
  <span class="page-id">6.24</span>
632
- <a href="page_project-list-generate-project-list-ID.html" target="_blank">Project list - Generate Project list ID</a>
635
+ <a href="page_project-list-with-new-share-popup-ios.html" target="_blank">My Project list Multiple - iOS share button</a>
633
636
  </li>
634
637
  <li>
635
638
  <span class="page-id">6.25</span>
639
+ <a href="page_project-list-with-new-share-popup-android.html" target="_blank">My Project list Multiple - Android share button</a>
640
+ </li>
641
+ <li>
642
+ <span class="page-id">6.26</span>
643
+ <a href="page_project-list-generate-project-list-ID.html" target="_blank">Project list - Generate Project list ID</a>
644
+ </li>
645
+ <li>
646
+ <span class="page-id">6.27</span>
636
647
  <a href="page_project-list-vat.html" target="_blank">Project list - Vat</a>
637
648
  </li>
638
649
  </ul>
@@ -1229,6 +1240,19 @@
1229
1240
  <ul>
1230
1241
  <li><span class="page-id">1</span><a href="page_kitchen-plp.html" target="_blank">Whisk Kitchen - PLP Page</a></li>
1231
1242
  </ul>
1243
+ <h3>Quick Filter</h3>
1244
+ <ul>
1245
+ <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>
1246
+ <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>
1247
+ <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>
1248
+ <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>
1249
+ <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>
1250
+ <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>
1251
+ <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>
1252
+ <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>
1253
+ <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>
1254
+ <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>
1255
+ </ul>
1232
1256
  </div>
1233
1257
  </div>
1234
1258
  </div>
@@ -1,35 +0,0 @@
1
- var Wick = Wick || {};
2
- Wick.Accordion = (function(){
3
- var $accordion = $('.accordion'),
4
- accordionToggler = '.accordion__header',
5
- accordionIcon = '.accordion__action',
6
- accordionContent = '.accordion__content',
7
- collapsed = 'accordion_collapsed',
8
- $asideAccordion = $('.aside-accordion .js-toggle-aside-accordion');
9
- var bindEvents = function (index, element) {
10
- var $acc = $(element);
11
-
12
- var accordionTrigger = $acc.attr('data-action-element') === 'icon' ? accordionIcon : accordionToggler
13
- $acc.find(accordionTrigger).on('click', function(){
14
- $acc.toggleClass(collapsed);
15
- $acc.children(accordionContent).slideToggle(200);
16
- });
17
- };
18
-
19
- var init = function () {
20
- $accordion.each(bindEvents);
21
-
22
- $asideAccordion.click(function() {
23
- if (window.matchMedia("(min-width: 992px)").matches) {
24
- if ($(this).text().toLowerCase() != 'useful links') {
25
- $(this).closest('.aside-nav2__holder')
26
- .toggleClass('is-active')
27
- .find('.aside-nav2__list')
28
- .slideToggle(250);
29
- }
30
- }
31
- });
32
- }
33
-
34
- init();
35
- })();
@@ -1,90 +0,0 @@
1
- var Wick = window.Wick || {}
2
-
3
- Wick.PLPChips = {
4
- GROUP: '.plp-filters__group',
5
- TOGGLE: '.plp-filters__toggle',
6
- INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
7
- CHIPS_WRAP_SEL: '.plp-selected',
8
- BADGE_CLASS: 'plp-filters__badge',
9
-
10
- renderGroupCounters (rootWrapper) {
11
- rootWrapper.find(Wick.PLPChips.GROUP).each((_, el) => {
12
- const group = $(el)
13
- const name = group.attr('data-filter') || ''
14
- const count = Wick.PLPFilters.appliedState[name] ? Wick.PLPFilters.appliedState[name].size : 0
15
- const btn = group.find(Wick.PLPChips.TOGGLE)
16
- const badgeSpan = btn.find(`.${Wick.PLPChips.BADGE_CLASS} span`)
17
- if (count > 0) {
18
- badgeSpan.text(count).css('display', 'flex')
19
- } else {
20
- badgeSpan.text('').hide()
21
- }
22
- })
23
- },
24
-
25
- renderChips (rootWrapper) {
26
- const wrap = rootWrapper.find(Wick.PLPChips.CHIPS_WRAP_SEL)
27
- if (!wrap.length) {
28
- return
29
- }
30
-
31
- const list = wrap.find('.plp-selected__list');
32
- let clearAllBtn = wrap.find('.plp-selected__clear-all');
33
-
34
- list.empty();
35
-
36
- const total = Wick.PLPFilters.totalApplied()
37
- wrap.find('.plp-selected__clear-all').prop('hidden', total === 0)
38
-
39
- if (total === 0) {
40
- wrap.hide();
41
- if (clearAllBtn.length) {
42
- clearAllBtn.remove();
43
- }
44
- return;
45
- }
46
-
47
- Object.keys(Wick.PLPFilters.appliedState).forEach((group) => {
48
- Wick.PLPFilters.appliedState[group].forEach((value) => {
49
- list.append(
50
- `<button type="button" class="pf-chip" data-group="${group}" data-value="${value}">
51
- <span class="pf-chip__text">${value}</span>
52
- <i class="fa fa-times pf-chip__close" aria-hidden="true"></i>
53
- <span class="sr-only">Remove ${value} from ${group}</span>
54
- </button>`
55
- );
56
- });
57
- });
58
-
59
- if (clearAllBtn.length) {
60
- clearAllBtn.prop('hidden', false);
61
- clearAllBtn.appendTo(list);
62
- } else {
63
- clearAllBtn = $(`
64
- <button type="button" class="plp-selected__clear-all btn btn-secondary">
65
- <i class="fa fa-times" aria-hidden="true"></i><span>Clear all</span>
66
- </button>
67
- `);
68
- list.append(clearAllBtn);
69
- }
70
- },
71
-
72
- bindChipActions (rootWrapper) {
73
- // remove one chip
74
- rootWrapper.on('click', '.pf-chip', (e) => {
75
- e.preventDefault()
76
- const chip = $(e.target).closest('.pf-chip')
77
- const groupDomName = chip.data('group')
78
- const valueOriginal = chip.data('value')
79
-
80
- Wick.PLPFilters.removeFromApplied(groupDomName, valueOriginal)
81
- Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, false)
82
- })
83
-
84
- // clear all
85
- rootWrapper.on('click', '.plp-selected__clear-all', (e) => {
86
- e.preventDefault()
87
- Wick.PLPFilters.writeStateToURL({}, false)
88
- })
89
- }
90
- }
@@ -1,72 +0,0 @@
1
- var Wick = window.Wick || {};
2
-
3
- Wick.PLPFiltersMobile = {
4
- ROOT_WRAPPER: ".page-KitchenPLPPage",
5
- INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
6
-
7
- MODAL_SEL: '#filterModal',
8
- MODAL_VIEW_BTN: '#filterModal .btn.btn-primary',
9
- MODAL_CLEAR_BTN: '#filterModal .btn.btn-secondary',
10
- $ACCORDION: '.accordion',
11
- $ACCORDION_CONTENT: '.accordion__content',
12
- ACCORDION_COLLAPSED: 'accordion_collapsed',
13
-
14
- // update mobile counter
15
- updateMobileFilterInfo() {
16
- const info = $('.mobile-nav__item[data-target="#filterModal"] .mobile-nav__info');
17
- if (!info.length) {
18
- return;
19
- }
20
-
21
- const total = Wick.PLPFilters.totalApplied();
22
- if (total > 0) {
23
- const label = total === 1 ? 'filter' : 'filters';
24
- info.text(`${total} ${label} applied`);
25
- } else {
26
- info.text('No filters applied');
27
- }
28
- },
29
-
30
- hideAccordions() {
31
- $(Wick.PLPFiltersMobile.$ACCORDION).addClass(Wick.PLPFiltersMobile.ACCORDION_COLLAPSED);
32
- $(Wick.PLPFiltersMobile.$ACCORDION_CONTENT).hide();
33
- },
34
-
35
- init() {
36
- // two-way binding for input between desktop and modal
37
- $(document).on('change', Wick.PLPFiltersMobile.INPUTS, function () {
38
- const inp = $(this);
39
- const name = inp.attr('name');
40
- if (!name) {
41
- return;
42
- }
43
- Wick.PLPUtils.syncTwinInputsByName(name, inp.prop('checked'), inp);
44
- });
45
-
46
- // when the modal is opened — synchronize its checkboxes with state
47
- $(document).on('shown.bs.modal', Wick.PLPFiltersMobile.MODAL_SEL, function () {
48
- Wick.PLPFilters.setDOMFromState($(this), Wick.PLPFilters.appliedState);
49
- });
50
-
51
- $(document).on('hide.bs.modal', Wick.PLPFiltersMobile.MODAL_SEL, function () {
52
- Wick.PLPFiltersMobile.hideAccordions()
53
- });
54
-
55
- // mobile "View results" button in modal
56
- $(document).on('click', Wick.PLPFiltersMobile.MODAL_VIEW_BTN, function (e) {
57
- e.preventDefault();
58
- const scope = $(Wick.PLPFiltersMobile.ROOT_WRAPPER).add($(Wick.PLPFiltersMobile.MODAL_SEL));
59
- Wick.PLPFilters.applyFromScopes(scope, true);
60
- });
61
-
62
- // mobile "Clear all" button in modal
63
- $(document).on('click', Wick.PLPFiltersMobile.MODAL_CLEAR_BTN, function (e) {
64
- e.preventDefault();
65
- Wick.PLPFilters.appliedState = {};
66
- Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, false);
67
- $(document).find(Wick.PLPFiltersMobile.INPUTS + ':checked').prop('checked', false);
68
- Wick.PLPFilters.updateSelectedUI($(Wick.PLPFiltersMobile.ROOT_WRAPPER));
69
- $(document).trigger('filters:cleared', {state: Wick.PLPFilters.exportState()});
70
- });
71
- }
72
- }
@@ -1,119 +0,0 @@
1
- var Wick = window.Wick || {};
2
-
3
- Wick.PLPFiltersPanel = {
4
-
5
- ROOT: ".plp-filters",
6
- BAR: ".plp-filters__bar",
7
- GROUP: ".plp-filters__group",
8
- TOGGLE: ".plp-filters__toggle",
9
- PANEL: ".plp-filters__panel",
10
-
11
- init() {
12
- // toggle
13
- $(document).on("click", Wick.PLPFiltersPanel.TOGGLE, Wick.PLPFiltersPanel.togglePanel);
14
-
15
- // close outside filters / ESC
16
- $(document).on("click", (e) => {
17
- const root = $(Wick.PLPFiltersPanel.ROOT);
18
- if (!root.is(e.target) && root.has(e.target).length === 0) {
19
- Wick.PLPFiltersPanel.closeAll();
20
- }
21
- });
22
-
23
- $(document).on("keydown", (e) => {
24
- if (e.key === "Escape") {
25
- Wick.PLPFiltersPanel.closeAll();
26
- }
27
- });
28
-
29
- // responsive (position of the opened panel)
30
- $(window).on("resize", _.debounce(() => {
31
- const open = $(Wick.PLPFiltersPanel.GROUP + ".is-open").first();
32
- if (open.length) {
33
- const btn = open.find(Wick.PLPFiltersPanel.TOGGLE).first();
34
- Wick.PLPFiltersPanel.layoutPanel(btn);
35
- }
36
- }, 120));
37
- },
38
-
39
- togglePanel(e) {
40
- e.preventDefault();
41
- const btn = $(this);
42
- const group = btn.closest(Wick.PLPFiltersPanel.GROUP);
43
- const panel = group.children(Wick.PLPFiltersPanel.PANEL).first();
44
- const willOpen = !group.hasClass("is-open");
45
-
46
- Wick.PLPFiltersPanel.closeAll();
47
- if (willOpen) {
48
- group.addClass("is-open");
49
- btn.attr("aria-expanded", "true");
50
- panel.attr("aria-hidden", "false");
51
- requestAnimationFrame(() => Wick.PLPFiltersPanel.layoutPanel(btn));
52
- }
53
- },
54
-
55
- closeAll() {
56
- $(Wick.PLPFiltersPanel.GROUP).removeClass("is-open");
57
- $(Wick.PLPFiltersPanel.TOGGLE).attr("aria-expanded", "false");
58
- $(Wick.PLPFiltersPanel.PANEL)
59
- .attr("aria-hidden", "true")
60
- .removeClass("plp-filters__panel--wide plp-filters__panel--auto")
61
- .css({left: "", right: ""});
62
- },
63
-
64
- layoutPanel(btn) {
65
- const root = $(Wick.PLPFiltersPanel.ROOT);
66
- const group = btn.closest(Wick.PLPFiltersPanel.GROUP);
67
- const panel = group.children(Wick.PLPFiltersPanel.PANEL).first();
68
-
69
- let bar = group.closest(Wick.PLPFiltersPanel.BAR);
70
- if (!bar.length) {
71
- bar = root.find('.plp-filters__bar-desktop:visible').first()
72
- || root.find('.plp-filters__bar-desktop').first()
73
- || root.find(Wick.PLPFiltersPanel.BAR).filter(':visible').first()
74
- || root.find(Wick.PLPFiltersPanel.BAR).first();
75
- }
76
- if (!bar.length || !panel.length) {
77
- return;
78
- }
79
-
80
- panel.removeClass("plp-filters__panel--wide plp-filters__panel--auto")
81
- .css({left: "", right: "", width: ""});
82
-
83
- const barOff = bar.offset();
84
- const groupOff = group.offset();
85
- const barW = Math.round(bar.outerWidth());
86
- const groupLeftWithinBar = Math.round(groupOff.left - barOff.left);
87
-
88
- const type = Wick.PLPUtils.getPanelType(panel);
89
- const items = Math.max(1, Wick.PLPUtils.countItems(panel));
90
-
91
- if (type === "cards") {
92
- Wick.PLPUtils.setCardsColumns(panel, Math.min(items, 4));
93
- let leftWithinBar = groupLeftWithinBar;
94
- const panelW = panel.outerWidth();
95
- if (leftWithinBar + panelW > barW) {
96
- leftWithinBar = barW - panelW;
97
- }
98
- if (leftWithinBar < 0) {
99
- leftWithinBar = 0;
100
- }
101
- panel.css({left: leftWithinBar - groupLeftWithinBar});
102
- return;
103
- }
104
- if (type === "swatches") {
105
- const panelW = panel.outerWidth();
106
- let leftWithinBar = groupLeftWithinBar;
107
- if (leftWithinBar + panelW > barW) {
108
- leftWithinBar = barW - panelW;
109
- if (leftWithinBar < 0) {
110
- leftWithinBar = 0;
111
- }
112
- }
113
- panel.css({left: leftWithinBar - groupLeftWithinBar});
114
- return;
115
- }
116
- // text → fix to the right edge
117
- panel.css({right: 0});
118
- }
119
- }
@@ -1,65 +0,0 @@
1
- var Wick = window.Wick || {};
2
-
3
- Wick.PLPUtils = (function () {
4
- function syncTwinInputsByName(name, checked, source) {
5
- const all = $('.filter-card__checkbox, .swatch__checkbox, .checkbox__input')
6
- .filter(function () {
7
- return $(this).attr('name') === name;
8
- });
9
- all.each(function () {
10
- if (source && this === source[0]) {
11
- return;
12
- }
13
- $(this).prop('checked', checked);
14
- });
15
- }
16
-
17
- function getPanelType(panel) {
18
- if (panel.find(".plp-filters__options--cards").length) {
19
- return "cards";
20
- }
21
- if (panel.find(".swatch-list").length) {
22
- return "swatches";
23
- }
24
- return "text";
25
- }
26
-
27
- function countItems(panel) {
28
- const t = getPanelType(panel);
29
- if (t === "cards") {
30
- return panel.find(".filter-card").length || 0;
31
- }
32
- if (t === "swatches") {
33
- return panel.find(".swatch").length || 0;
34
- }
35
- return panel.find(".checkbox").length || 0;
36
- }
37
-
38
- function setCardsColumns(panel, cols) {
39
- const wrap = panel.find(".plp-filters__options--cards");
40
- if (wrap.length) {
41
- wrap.css("grid-template-columns", `repeat(${cols}, minmax(0,1fr))`);
42
- }
43
- }
44
-
45
- function getGroupsMeta(rootWrapper, selGroup) {
46
- const out = [];
47
- rootWrapper.find(selGroup).each((_, el) => {
48
- const group = $(el);
49
- const domName = group.attr("data-filter") || "";
50
- if (!domName) {
51
- return;
52
- }
53
- out.push({domName, paramKey: domName, group});
54
- });
55
- return out;
56
- }
57
-
58
- return {
59
- syncTwinInputsByName,
60
- getPanelType,
61
- countItems,
62
- setCardsColumns,
63
- getGroupsMeta
64
- };
65
- })();
@@ -1,205 +0,0 @@
1
- var Wick = window.Wick || {};
2
-
3
- Wick.PLPFilters = {
4
-
5
- ROOT_WRAPPER: ".page-KitchenPLPPage",
6
- ROOT: ".plp-filters",
7
- GROUP: ".plp-filters__group",
8
- APPLY_BTN: ".plp-filters__apply",
9
-
10
- INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
11
-
12
- appliedState: {},
13
-
14
- init() {
15
- // 1) initialize submodules
16
- Wick.PLPFiltersPanel.init();
17
- Wick.PLPFiltersMobile.init();
18
-
19
- // 2) initial state with URL
20
- const root = $(Wick.PLPFilters.ROOT);
21
- const rootWrapper = $(Wick.PLPFilters.ROOT_WRAPPER);
22
- if (!root.length) {
23
- return;
24
- }
25
-
26
- Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(rootWrapper);
27
- Wick.PLPFilters.setDOMFromState(rootWrapper, Wick.PLPFilters.appliedState);
28
-
29
- // 3) chips
30
- Wick.PLPChips.bindChipActions(rootWrapper);
31
-
32
- // 4) apply (desktop "View results")
33
- $(document).on("click", Wick.PLPFilters.APPLY_BTN, Wick.PLPFilters.applyFilters);
34
-
35
- // 5) primary render
36
- Wick.PLPFilters.updateSelectedUI(rootWrapper);
37
- },
38
-
39
- // ===== URL <-> STATE
40
- readStateFromURL(rootWrapper) {
41
- const url = new URL(window.location.href);
42
- const params = url.searchParams;
43
- const state = {};
44
-
45
- const groupsMeta = Wick.PLPUtils.getGroupsMeta(rootWrapper, Wick.PLPFilters.GROUP);
46
- if (!groupsMeta.length) {
47
- return state;
48
- }
49
-
50
- const byDomName = {};
51
- groupsMeta.forEach(m => {
52
- byDomName[m.domName] = m;
53
- });
54
-
55
- for (const [key, val] of params.entries()) {
56
- const meta = byDomName[key];
57
- if (!meta) {
58
- continue;
59
- }
60
-
61
- const values = val.split(',').map(v => v.trim()).filter(Boolean);
62
- if (!values.length) {
63
- continue;
64
- }
65
-
66
- values.forEach(want => {
67
- const inp = meta.group.find(Wick.PLPFilters.INPUTS).filter(function () {
68
- return $(this).val() === want;
69
- }).first();
70
-
71
- if (!inp.length) {
72
- return;
73
- }
74
-
75
- const originalValue = inp.val();
76
- if (!state[meta.domName]) {
77
- state[meta.domName] = new Set();
78
- }
79
- state[meta.domName].add(originalValue);
80
- });
81
- }
82
-
83
- return state;
84
- },
85
-
86
- writeStateToURL(state, push) {
87
- const url = new URL(window.location.href);
88
-
89
- const groupsMeta = Wick.PLPUtils.getGroupsMeta($(Wick.PLPFilters.ROOT_WRAPPER), Wick.PLPFilters.GROUP);
90
- const groupKeysDecoded = new Set(groupsMeta.map(m => m.domName)); // як видно в DOM (з пробілами/регістром)
91
-
92
- const pairs = [];
93
- for (const [k, v] of url.searchParams.entries()) {
94
- if (!groupKeysDecoded.has(k)) {
95
- pairs.push(`${encodeURIComponent(k)}=${encodeURIComponent(v)}`);
96
- }
97
- }
98
-
99
- groupsMeta.forEach(meta => {
100
- const set = state[meta.domName];
101
- if (!set || !set.size) return;
102
-
103
- const keyEnc = encodeURIComponent(meta.domName);
104
- const valueEnc = Array.from(set).map(v => encodeURIComponent(v)).join(',');
105
- pairs.push(`${keyEnc}=${valueEnc}`);
106
- });
107
-
108
- url.search = pairs.join('&');
109
-
110
- window.location.href = url.origin + url.pathname + url.search;
111
- },
112
-
113
- // set checkboxes according to state (both for desktop and modal)
114
- setDOMFromState(rootWrapper, state) {
115
- rootWrapper.find(Wick.PLPFilters.INPUTS).prop('checked', false);
116
-
117
- Object.keys(state).forEach(groupDomName => {
118
- state[groupDomName].forEach(originalValue => {
119
- const want = originalValue;
120
-
121
- const cand = rootWrapper.find(Wick.PLPFilters.INPUTS).filter(function () {
122
- const i = $(this);
123
- const valMatch = i.val() === want;
124
- const g = i.closest(Wick.PLPFilters.GROUP);
125
- const groupMatch = g.length ? (g.attr('data-filter') === groupDomName) : true;
126
- return valMatch && groupMatch;
127
- }).first();
128
-
129
- if (cand.length) {
130
- cand.prop('checked', true);
131
- }
132
- });
133
- });
134
- },
135
-
136
- collectStateFromDOM(rootWrapper) {
137
- const state = {};
138
- rootWrapper.find(Wick.PLPFilters.INPUTS).filter(':checked').each((_, el) => {
139
- const input = $(el);
140
- const group = input.closest(Wick.PLPFilters.GROUP);
141
- const groupDomName = group.attr('data-filter') || '';
142
- if (!groupDomName) {
143
- return;
144
- }
145
-
146
- const val = (input.val() || '').trim();
147
- if (!val) {
148
- return;
149
- }
150
-
151
- if (!state[groupDomName]) {
152
- state[groupDomName] = new Set();
153
- }
154
- state[groupDomName].add(val);
155
- });
156
- return state;
157
- },
158
-
159
- // ===== APPLY
160
- applyFromScopes(scopeForCollect, push) {
161
- Wick.PLPFilters.appliedState = Wick.PLPFilters.collectStateFromDOM(scopeForCollect);
162
- Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, !!push);
163
- },
164
-
165
- applyFilters(e) {
166
- e.preventDefault();
167
- const scope = $(Wick.PLPFilters.ROOT_WRAPPER).add($(Wick.PLPFiltersMobile.MODAL_SEL));
168
- Wick.PLPFilters.applyFromScopes(scope, true);
169
- },
170
-
171
- // ===== RENDER
172
- updateSelectedUI(rootWrapper) {
173
- Wick.PLPChips.renderGroupCounters(rootWrapper);
174
- Wick.PLPChips.renderChips(rootWrapper);
175
- Wick.PLPFiltersMobile.updateMobileFilterInfo();
176
- },
177
-
178
- totalApplied() {
179
- return Object.values(Wick.PLPFilters.appliedState).reduce((n, set) => n + set.size, 0);
180
- },
181
-
182
- // Wick.PLPUtils for appliedState
183
- removeFromApplied(groupDomName, valOriginal) {
184
- const st = Wick.PLPFilters.appliedState[groupDomName];
185
- if (!st) {
186
- return;
187
- }
188
- st.delete(valOriginal);
189
- if (st.size === 0) {
190
- delete Wick.PLPFilters.appliedState[groupDomName];
191
- }
192
- },
193
-
194
- exportState() {
195
- const out = {};
196
- Object.keys(Wick.PLPFilters.appliedState).forEach((g) => {
197
- out[g] = Array.from(Wick.PLPFilters.appliedState[g]);
198
- });
199
- return out;
200
- }
201
- }
202
-
203
- $(function () {
204
- Wick.PLPFilters.init();
205
- });