wickes-css2 2.105.0-develop.2 → 2.105.0-develop.4
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.
- package/Readme.md +3 -2
- package/build/css/category-main.css +1 -1
- package/build/css/homepage-main.css +1 -1
- package/build/css/kitchen-plp-main.css +1 -1
- package/build/css/main.css +1 -1
- package/build/css/my-account-main-v2.css +1 -1
- package/build/css/my-account-main.css +1 -1
- package/build/css/pages/page_product_search.css +1 -1
- package/build/css/pages/page_products-list-combined.css +1 -1
- package/build/css/pages/page_products-list.css +1 -1
- package/build/css/pdp-main-before-combine.css +1 -1
- package/build/css/pdp-main-non-critical.css +1 -1
- package/build/css/pdp-main.css +1 -1
- package/build/css/plp-main.css +1 -1
- package/build/css/store-locator-main.css +1 -1
- package/build/js/account-members.min.js +1 -1
- package/build/js/basket.min.js +2 -2
- package/build/js/bundle.min.js +1 -1
- package/build/js/checkout.min.js +2 -2
- package/build/js/emulation.min.js +12122 -11594
- package/build/js/general.bundle.min.js +1 -1
- package/build/js/kitchen/kitchen-plp.min.js +1 -9
- package/build/js/merged-checkout.min.js +2 -2
- package/build/js/mini-basket-slider.min.js +1 -1
- package/build/js/page/basket/basket-update-cart-action.js +59 -56
- package/build/js/page/basket/basket-update-cart.js +27 -27
- package/build/js/page/basket/basket-utils.js +40 -33
- package/build/js/page/basket/mini-basket-total.js +70 -66
- package/build/js/page/basket/quantity-change-handler.js +73 -55
- package/build/js/page/basket/update-quantity-operation.js +39 -30
- package/build/js/page/basket/update-quantity.js +62 -62
- package/build/js/page/basket-v2.js +362 -229
- package/build/js/page/billie-business-type.js +27 -27
- package/build/js/page/checkout-payment-details.js +301 -299
- package/build/js/page/components/discounts.js +39 -36
- package/build/js/page/components/mini-basket-slider.js +604 -545
- package/build/js/page/filters/desktop-nav.js +64 -0
- package/build/js/page/filters/mobile-nav.js +93 -0
- package/build/js/page/filters/plp-filters-chips.js +92 -0
- package/build/js/page/filters/plp-filters-mobile.js +150 -0
- package/build/js/page/filters/plp-filters-panel.js +123 -0
- package/build/js/page/filters/plp-filters-utils.js +66 -0
- package/build/js/page/filters/plp-filters.js +256 -0
- package/build/js/page/filters/sort-by.js +172 -0
- package/build/js/page/klarna-modal-scroll-disable.js +4 -4
- package/build/js/page/online-exclusive.js +28 -30
- package/build/js/page/search-filter.js +62 -0
- package/build/js/page/utils/helpers.js +14 -9
- package/build/js/page/utils/show-more-less.js +273 -0
- package/build/js/pdp.bundle.min.js +1 -1
- package/build/js/plp-filters.min.js +9 -0
- package/build/js/plp.bundle.min.js +1 -1
- package/build/js/project-list.min.js +1 -1
- package/build/js/search-filter.min.js +1 -0
- package/package.json +5 -3
- package/src/components/accordion.hbs +2 -2
- package/src/components/generate-project-id.hbs +1 -1
- package/src/components/kitchen/dropdown.hbs +6 -3
- package/src/components/kitchen/filter-modal-content-kitchen.hbs +10 -0
- package/src/components/kitchen/filter-modal.hbs +10 -13
- package/src/components/kitchen/plp-filters.hbs +3 -1
- package/src/components/kitchen/sort-by.hbs +1 -1
- package/src/components/search-filter-modal-content.hbs +102 -0
- package/src/components/search-filter.hbs +121 -112
- package/src/components/shopping-list-with-share-list-v2.hbs +28 -10
- package/src/components/shopping-list.hbs +5 -5
- package/src/data/data_plp_load-more.json +1 -1
- package/src/elements/btn.hbs +7 -0
- package/src/js/components/general/accordion.js +38 -29
- package/src/js/components/general/cart-slider.js +19 -16
- package/src/js/components/general/create-popup-slider.js +168 -173
- package/src/js/emulation/big-wins.js +1081 -904
- package/src/js/emulation/billie-modal.js +23 -19
- package/src/js/emulation/checkout-payment-details.js +47 -38
- package/src/js/emulation/custom-slider-emulation.js +17 -13
- package/src/js/emulation/filters-emulation.js +164 -0
- package/src/js/emulation/forms.js +360 -323
- package/src/js/emulation/mini-basket-data.js +1051 -923
- package/src/js/emulation/paymentLoader.js +17 -17
- package/src/js/emulation/pdf-file-loader.js +89 -91
- package/src/js/emulation/popover-mini-basket.js +246 -239
- package/src/js/emulation/product-counter.js +50 -0
- package/src/js/emulation/project-list-pdp.js +321 -316
- package/src/js/emulation/repayment-toggle.js +23 -24
- package/src/js/emulation/reset-filter-desktop.js +5 -0
- package/src/js/emulation/selectable.js +22 -18
- package/src/js/emulation/wismo-details.js +23 -31
- package/src/js/page/basket/basket-update-cart-action.js +59 -56
- package/src/js/page/basket/basket-update-cart.js +27 -27
- package/src/js/page/basket/basket-utils.js +40 -33
- package/src/js/page/basket/mini-basket-total.js +70 -66
- package/src/js/page/basket/quantity-change-handler.js +73 -55
- package/src/js/page/basket/update-quantity-operation.js +39 -30
- package/src/js/page/basket/update-quantity.js +62 -62
- package/src/js/page/basket-v2.js +362 -229
- package/src/js/page/billie-business-type.js +27 -27
- package/src/js/page/checkout-payment-details.js +301 -299
- package/src/js/page/components/discounts.js +39 -36
- package/src/js/page/components/mini-basket-slider.js +604 -545
- package/src/js/page/filters/desktop-nav.js +64 -0
- package/src/js/page/filters/mobile-nav.js +93 -0
- package/src/js/page/filters/plp-filters-chips.js +92 -0
- package/src/js/page/filters/plp-filters-mobile.js +150 -0
- package/src/js/page/filters/plp-filters-panel.js +123 -0
- package/src/js/page/filters/plp-filters-utils.js +66 -0
- package/src/js/page/filters/plp-filters.js +256 -0
- package/src/js/page/filters/sort-by.js +172 -0
- package/src/js/page/klarna-modal-scroll-disable.js +4 -4
- package/src/js/page/online-exclusive.js +28 -30
- package/src/js/page/search-filter.js +62 -0
- package/src/js/page/utils/helpers.js +14 -9
- package/src/js/page/utils/show-more-less.js +273 -0
- package/src/page_empty-shared-project-list-bicester-hub.html +3 -0
- package/src/page_kitchen-plp.html +2 -2
- package/src/page_my-shopping-list-hide-download.html +1 -1
- package/src/page_plp-with-paint.html +2 -7
- package/src/page_plp.html +2 -7
- package/src/page_plp_v2-energy-efficiency.html +1 -6
- package/src/page_plp_v2-favourite-products.html +6 -7
- package/src/page_plp_v2-vat.html +2 -7
- package/src/page_plp_v2.html +22 -9
- package/src/page_product_search-vat.html +2 -7
- package/src/page_product_search.html +2 -7
- package/src/page_project-list-with-new-share-popup-android.html +15 -0
- package/src/page_project-list-with-new-share-popup-ios.html +15 -0
- package/src/page_project-list-with-new-share-popup.html +1 -0
- package/src/page_search-results.html +2 -7
- package/src/page_shared-project-list-bicester-hub.html +1 -0
- package/src/scss/common/_common.scss +5 -4
- package/src/scss/components/_accordion.scss +1 -3
- package/src/scss/components/_custom-slider.scss +15 -14
- package/src/scss/components/_date-selection-add-new-styles.scss +6 -7
- package/src/scss/components/_date-selection.scss +1 -1
- package/src/scss/components/{kitchen/_filter-modal.scss → _filter-modal.scss} +55 -4
- package/src/scss/components/{kitchen/_plp-filters.scss → _plp-filters.scss} +31 -13
- package/src/scss/components/_popover-mini-basket.scss +3 -3
- package/src/scss/components/_search-filter.scss +95 -15
- package/src/scss/components/_shared-shopping-list.scss +22 -0
- package/src/scss/components/_shopping-list.scss +18 -8
- package/src/scss/components/_sort-by.scss +190 -0
- package/src/scss/components/checkout-chip.scss +2 -2
- package/src/scss/components/checkout-payment-repayment-terms.scss +1 -1
- package/src/scss/globals/_global-components.scss +3 -0
- package/src/scss/helpers/_colors-semantic.scss +68 -68
- package/src/scss/helpers/_variables.scss +242 -196
- package/src/scss/kitchen-plp-main.scss +0 -3
- package/src/scss/main.scss +65 -65
- package/src/scss/pages/page_product-details-v2.scss +1 -4
- package/src/scss/pages/page_product_search.scss +9 -1
- package/src/scss/pages/page_products-list-combined.scss +28 -24
- package/src/scss/pages/page_products-list.scss +8 -0
- package/src/scss/pages/tradePro-rewards.scss +2 -3
- package/src/sitemap.html +9 -1
- package/build/js/page/accordion.js +0 -35
- package/build/js/page/kitchen/plp-filters-chips.js +0 -90
- package/build/js/page/kitchen/plp-filters-mobile.js +0 -72
- package/build/js/page/kitchen/plp-filters-panel.js +0 -119
- package/build/js/page/kitchen/plp-filters-utils.js +0 -65
- package/build/js/page/kitchen/plp-filters.js +0 -205
- package/build/js/page/kitchen/sort-by.js +0 -157
- package/src/js/components/general/search-filter.js +0 -21
- package/src/js/page/accordion.js +0 -35
- package/src/js/page/kitchen/plp-filters-chips.js +0 -90
- package/src/js/page/kitchen/plp-filters-mobile.js +0 -72
- package/src/js/page/kitchen/plp-filters-panel.js +0 -119
- package/src/js/page/kitchen/plp-filters-utils.js +0 -65
- package/src/js/page/kitchen/plp-filters.js +0 -205
- package/src/js/page/kitchen/sort-by.js +0 -157
|
@@ -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
|
-
});
|
|
@@ -1,157 +0,0 @@
|
|
|
1
|
-
var Wick = window.Wick || {};
|
|
2
|
-
|
|
3
|
-
Wick.Sort = {
|
|
4
|
-
ROOT: '.page-KitchenPLPPage',
|
|
5
|
-
WRAP: '.sort',
|
|
6
|
-
DROPDOWN: '.sort-dd',
|
|
7
|
-
OPTION: '.sort-opt',
|
|
8
|
-
INFO: '.js-sort-info',
|
|
9
|
-
CHEVRON: '.sort__chevron',
|
|
10
|
-
|
|
11
|
-
TRIGGER_MOBILE: '.sort--mobile',
|
|
12
|
-
TRIGGER_DESKTOP_BTN: '.sort--desktop .sort-button',
|
|
13
|
-
|
|
14
|
-
MAP_VALUE_TO_LABEL: {
|
|
15
|
-
'relevance': 'Relevance',
|
|
16
|
-
'priceLow': 'Price (lowest first)',
|
|
17
|
-
'priceHigh': 'Price (highest first)'
|
|
18
|
-
},
|
|
19
|
-
|
|
20
|
-
init: function () {
|
|
21
|
-
const root = $(Wick.Sort.ROOT);
|
|
22
|
-
if (!root.length) {
|
|
23
|
-
return;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
root.on('click', Wick.Sort.TRIGGER_MOBILE, (e) => {
|
|
27
|
-
if ($(e.target).closest(Wick.Sort.DROPDOWN).length) {
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
e.preventDefault();
|
|
31
|
-
Wick.Sort.toggle($(e.currentTarget));
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
root.on('click', Wick.Sort.TRIGGER_DESKTOP_BTN, (e) => {
|
|
35
|
-
e.preventDefault();
|
|
36
|
-
Wick.Sort.toggle($(e.currentTarget).closest(Wick.Sort.WRAP));
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
root.on('keydown', `${Wick.Sort.TRIGGER_MOBILE}, ${Wick.Sort.TRIGGER_DESKTOP_BTN}`, (e) => {
|
|
40
|
-
if (e.key === 'Enter' || e.key === ' ') {
|
|
41
|
-
e.preventDefault();
|
|
42
|
-
Wick.Sort.toggle($(e.currentTarget).closest(Wick.Sort.WRAP));
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
root.on('click', Wick.Sort.OPTION, (e) => {
|
|
47
|
-
e.preventDefault();
|
|
48
|
-
e.stopPropagation();
|
|
49
|
-
|
|
50
|
-
const opt = $(e.currentTarget);
|
|
51
|
-
const value = opt.data('value');
|
|
52
|
-
Wick.Sort.updateSortParamInURL(value);
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
$(document).on('click', (e) => {
|
|
56
|
-
const open = $(`${Wick.Sort.WRAP}.is-open`);
|
|
57
|
-
if (!open.length) {
|
|
58
|
-
return;
|
|
59
|
-
}
|
|
60
|
-
if (!open.is(e.target) && open.has(e.target).length === 0) {
|
|
61
|
-
Wick.Sort.closeAll();
|
|
62
|
-
}
|
|
63
|
-
});
|
|
64
|
-
|
|
65
|
-
$(document).on('keydown', (e) => {
|
|
66
|
-
if (e.key === 'Escape') {
|
|
67
|
-
Wick.Sort.closeAll();
|
|
68
|
-
}
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
Wick.Sort.bootstrap();
|
|
72
|
-
},
|
|
73
|
-
|
|
74
|
-
updateSortParamInURL: function (value) {
|
|
75
|
-
const url = new URL(window.location.href);
|
|
76
|
-
const params = url.searchParams;
|
|
77
|
-
|
|
78
|
-
if (value === 'relevance') {
|
|
79
|
-
params.delete('sortBy');
|
|
80
|
-
} else {
|
|
81
|
-
params.set('sortBy', value);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
url.search = params.toString();
|
|
85
|
-
|
|
86
|
-
window.location.href = url.toString();
|
|
87
|
-
},
|
|
88
|
-
|
|
89
|
-
toggle: function (wrap) {
|
|
90
|
-
const isOpen = wrap.hasClass('is-open');
|
|
91
|
-
Wick.Sort.closeAll();
|
|
92
|
-
if (!isOpen) {
|
|
93
|
-
wrap.addClass('is-open');
|
|
94
|
-
wrap.find(Wick.Sort.DROPDOWN).removeAttr('hidden');
|
|
95
|
-
Wick.Sort.setExpanded(wrap, true);
|
|
96
|
-
|
|
97
|
-
if (window.Wick && Wick.PLPFilters && typeof Wick.PLPFilters.closeAll === 'function') {
|
|
98
|
-
Wick.PLPFilters.closeAll();
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
},
|
|
102
|
-
|
|
103
|
-
close: function (wrap) {
|
|
104
|
-
wrap.removeClass('is-open');
|
|
105
|
-
wrap.find(Wick.Sort.DROPDOWN).attr('hidden', true);
|
|
106
|
-
Wick.Sort.setExpanded(wrap, false);
|
|
107
|
-
},
|
|
108
|
-
|
|
109
|
-
closeAll: function () {
|
|
110
|
-
const all = $(Wick.Sort.WRAP);
|
|
111
|
-
all.removeClass('is-open');
|
|
112
|
-
all.find(Wick.Sort.DROPDOWN).attr('hidden', true);
|
|
113
|
-
all.each((_, el) => Wick.Sort.setExpanded($(el), false));
|
|
114
|
-
},
|
|
115
|
-
|
|
116
|
-
bootstrap: function () {
|
|
117
|
-
const urlParams = new URLSearchParams(window.location.search);
|
|
118
|
-
const value = urlParams.get('sortBy') || 'relevance';
|
|
119
|
-
const label = Wick.Sort.valueToLabel(value);
|
|
120
|
-
|
|
121
|
-
$(Wick.Sort.WRAP).each((_, el) => {
|
|
122
|
-
const w = $(el);
|
|
123
|
-
w.find(Wick.Sort.OPTION)
|
|
124
|
-
.removeClass('is-active')
|
|
125
|
-
.filter(`[data-value="${value}"]`)
|
|
126
|
-
.addClass('is-active');
|
|
127
|
-
});
|
|
128
|
-
|
|
129
|
-
$(document).trigger('sort:change', { value, label });
|
|
130
|
-
|
|
131
|
-
$(Wick.Sort.INFO).text(label);
|
|
132
|
-
},
|
|
133
|
-
|
|
134
|
-
setExpanded: function (wrap, expanded) {
|
|
135
|
-
const btn = wrap.is('.sort--mobile') ? wrap : wrap.find('.sort-button').first();
|
|
136
|
-
if (btn.length) {
|
|
137
|
-
btn.attr('aria-expanded', expanded ? 'true' : 'false');
|
|
138
|
-
}
|
|
139
|
-
},
|
|
140
|
-
|
|
141
|
-
valueToLabel: function (value) {
|
|
142
|
-
return Wick.Sort.MAP_VALUE_TO_LABEL[value] || 'Relevance';
|
|
143
|
-
},
|
|
144
|
-
labelToValue: function (label) {
|
|
145
|
-
const entries = Object.entries(Wick.Sort.MAP_VALUE_TO_LABEL);
|
|
146
|
-
for (const [val, lab] of entries) {
|
|
147
|
-
if (lab.toLowerCase() === label.toString().toLowerCase()) {
|
|
148
|
-
return val;
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
return 'relevance';
|
|
152
|
-
}
|
|
153
|
-
};
|
|
154
|
-
|
|
155
|
-
$(function () {
|
|
156
|
-
Wick.Sort.init();
|
|
157
|
-
});
|