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

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

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

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

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

package/src/js/page/kitchen/plp-filters-panel.js

@@ -0,0 +1,119 @@
+var Wick = window.Wick || {};
+
+Wick.PLPFiltersPanel = {
+
+  ROOT: ".plp-filters",
+  BAR: ".plp-filters__bar",
+  GROUP: ".plp-filters__group",
+  TOGGLE: ".plp-filters__toggle",
+  PANEL: ".plp-filters__panel",
+
+  init() {
+    // toggle
+    $(document).on("click", Wick.PLPFiltersPanel.TOGGLE, Wick.PLPFiltersPanel.togglePanel);
+
+    // close outside filters / ESC
+    $(document).on("click", (e) => {
+      const root = $(Wick.PLPFiltersPanel.ROOT);
+      if (!root.is(e.target) && root.has(e.target).length === 0) {
+        Wick.PLPFiltersPanel.closeAll();
+      }
+    });
+
+    $(document).on("keydown", (e) => {
+      if (e.key === "Escape") {
+        Wick.PLPFiltersPanel.closeAll();
+      }
+    });
+
+    // responsive (position of the opened panel)
+    $(window).on("resize", _.debounce(() => {
+      const open = $(Wick.PLPFiltersPanel.GROUP + ".is-open").first();
+      if (open.length) {
+        const btn = open.find(Wick.PLPFiltersPanel.TOGGLE).first();
+        Wick.PLPFiltersPanel.layoutPanel(btn);
+      }
+    }, 120));
+  },
+
+  togglePanel(e) {
+    e.preventDefault();
+    const btn = $(this);
+    const group = btn.closest(Wick.PLPFiltersPanel.GROUP);
+    const panel = group.children(Wick.PLPFiltersPanel.PANEL).first();
+    const willOpen = !group.hasClass("is-open");
+
+    Wick.PLPFiltersPanel.closeAll();
+    if (willOpen) {
+      group.addClass("is-open");
+      btn.attr("aria-expanded", "true");
+      panel.attr("aria-hidden", "false");
+      requestAnimationFrame(() => Wick.PLPFiltersPanel.layoutPanel(btn));
+    }
+  },
+
+  closeAll() {
+    $(Wick.PLPFiltersPanel.GROUP).removeClass("is-open");
+    $(Wick.PLPFiltersPanel.TOGGLE).attr("aria-expanded", "false");
+    $(Wick.PLPFiltersPanel.PANEL)
+      .attr("aria-hidden", "true")
+      .removeClass("plp-filters__panel--wide plp-filters__panel--auto")
+      .css({left: "", right: ""});
+  },
+
+  layoutPanel(btn) {
+    const root = $(Wick.PLPFiltersPanel.ROOT);
+    const group = btn.closest(Wick.PLPFiltersPanel.GROUP);
+    const panel = group.children(Wick.PLPFiltersPanel.PANEL).first();
+
+    let bar = group.closest(Wick.PLPFiltersPanel.BAR);
+    if (!bar.length) {
+      bar = root.find('.plp-filters__bar-desktop:visible').first()
+        || root.find('.plp-filters__bar-desktop').first()
+        || root.find(Wick.PLPFiltersPanel.BAR).filter(':visible').first()
+        || root.find(Wick.PLPFiltersPanel.BAR).first();
+    }
+    if (!bar.length || !panel.length) {
+      return;
+    }
+
+    panel.removeClass("plp-filters__panel--wide plp-filters__panel--auto")
+      .css({left: "", right: "", width: ""});
+
+    const barOff = bar.offset();
+    const groupOff = group.offset();
+    const barW = Math.round(bar.outerWidth());
+    const groupLeftWithinBar = Math.round(groupOff.left - barOff.left);
+
+    const type = Wick.PLPUtils.getPanelType(panel);
+    const items = Math.max(1, Wick.PLPUtils.countItems(panel));
+
+    if (type === "cards") {
+      Wick.PLPUtils.setCardsColumns(panel, Math.min(items, 4));
+      let leftWithinBar = groupLeftWithinBar;
+      const panelW = panel.outerWidth();
+      if (leftWithinBar + panelW > barW) {
+        leftWithinBar = barW - panelW;
+      }
+      if (leftWithinBar < 0) {
+        leftWithinBar = 0;
+      }
+      panel.css({left: leftWithinBar - groupLeftWithinBar});
+      return;
+    }
+    if (type === "swatches") {
+      const panelW = panel.outerWidth();
+      let leftWithinBar = groupLeftWithinBar;
+      if (leftWithinBar + panelW > barW) {
+        leftWithinBar = barW - panelW;
+        if (leftWithinBar < 0) {
+          leftWithinBar = 0;
+        }
+      }
+      panel.css({left: leftWithinBar - groupLeftWithinBar});
+      return;
+    }
+    // text → fix to the right edge
+    panel.css({right: 0});
+  }
+}

package/src/js/page/kitchen/plp-filters-utils.js

@@ -0,0 +1,65 @@
+var Wick = window.Wick || {};
+
+Wick.PLPUtils = (function () {
+  function syncTwinInputsByName(name, checked, source) {
+    const all = $('.filter-card__checkbox, .swatch__checkbox, .checkbox__input')
+      .filter(function () {
+        return $(this).attr('name') === name;
+      });
+    all.each(function () {
+      if (source && this === source[0]) {
+        return;
+      }
+      $(this).prop('checked', checked);
+    });
+  }
+
+  function getPanelType(panel) {
+    if (panel.find(".plp-filters__options--cards").length) {
+      return "cards";
+    }
+    if (panel.find(".swatch-list").length) {
+      return "swatches";
+    }
+    return "text";
+  }
+
+  function countItems(panel) {
+    const t = getPanelType(panel);
+    if (t === "cards") {
+      return panel.find(".filter-card").length || 0;
+    }
+    if (t === "swatches") {
+      return panel.find(".swatch").length || 0;
+    }
+    return panel.find(".checkbox").length || 0;
+  }
+
+  function setCardsColumns(panel, cols) {
+    const wrap = panel.find(".plp-filters__options--cards");
+    if (wrap.length) {
+      wrap.css("grid-template-columns", `repeat(${cols}, minmax(0,1fr))`);
+    }
+  }
+
+  function getGroupsMeta(rootWrapper, selGroup) {
+    const out = [];
+    rootWrapper.find(selGroup).each((_, el) => {
+      const group = $(el);
+      const domName = group.attr("data-filter") || "";
+      if (!domName) {
+        return;
+      }
+      out.push({domName, paramKey: domName, group});
+    });
+    return out;
+  }
+
+  return {
+    syncTwinInputsByName,
+    getPanelType,
+    countItems,
+    setCardsColumns,
+    getGroupsMeta
+  };
+})();

package/src/js/page/kitchen/plp-filters.js

@@ -0,0 +1,205 @@
+var Wick = window.Wick || {};
+
+Wick.PLPFilters = {
+
+  ROOT_WRAPPER: ".page-KitchenPLPPage",
+  ROOT: ".plp-filters",
+  GROUP: ".plp-filters__group",
+  APPLY_BTN: ".plp-filters__apply",
+
+  INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
+
+  appliedState: {},
+
+  init() {
+    // 1) initialize submodules
+    Wick.PLPFiltersPanel.init();
+    Wick.PLPFiltersMobile.init();
+
+    // 2) initial state with URL
+    const root = $(Wick.PLPFilters.ROOT);
+    const rootWrapper = $(Wick.PLPFilters.ROOT_WRAPPER);
+    if (!root.length) {
+      return;
+    }
+
+    Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(rootWrapper);
+    Wick.PLPFilters.setDOMFromState(rootWrapper, Wick.PLPFilters.appliedState);
+
+    // 3) chips
+    Wick.PLPChips.bindChipActions(rootWrapper);
+
+    // 4) apply (desktop "View results")
+    $(document).on("click", Wick.PLPFilters.APPLY_BTN, Wick.PLPFilters.applyFilters);
+
+    // 5) primary render
+    Wick.PLPFilters.updateSelectedUI(rootWrapper);
+  },
+
+  // ===== URL <-> STATE
+  readStateFromURL(rootWrapper) {
+    const url = new URL(window.location.href);
+    const params = url.searchParams;
+    const state = {};
+
+    const groupsMeta = Wick.PLPUtils.getGroupsMeta(rootWrapper, Wick.PLPFilters.GROUP);
+    if (!groupsMeta.length) {
+      return state;
+    }
+
+    const byDomName = {};
+    groupsMeta.forEach(m => {
+      byDomName[m.domName] = m;
+    });
+
+    for (const [key, val] of params.entries()) {
+      const meta = byDomName[key];
+      if (!meta) {
+        continue;
+      }
+
+      const values = val.split(',').map(v => v.trim()).filter(Boolean);
+      if (!values.length) {
+        continue;
+      }
+
+      values.forEach(want => {
+        const inp = meta.group.find(Wick.PLPFilters.INPUTS).filter(function () {
+          return $(this).val() === want;
+        }).first();
+
+        if (!inp.length) {
+          return;
+        }
+
+        const originalValue = inp.val();
+        if (!state[meta.domName]) {
+          state[meta.domName] = new Set();
+        }
+        state[meta.domName].add(originalValue);
+      });
+    }
+
+    return state;
+  },
+
+  writeStateToURL(state, push) {
+    const url = new URL(window.location.href);
+
+    const groupsMeta = Wick.PLPUtils.getGroupsMeta($(Wick.PLPFilters.ROOT_WRAPPER), Wick.PLPFilters.GROUP);
+    const groupKeysDecoded = new Set(groupsMeta.map(m => m.domName)); // як видно в DOM (з пробілами/регістром)
+
+    const pairs = [];
+    for (const [k, v] of url.searchParams.entries()) {
+      if (!groupKeysDecoded.has(k)) {
+        pairs.push(`${encodeURIComponent(k)}=${encodeURIComponent(v)}`);
+      }
+    }
+
+    groupsMeta.forEach(meta => {
+      const set = state[meta.domName];
+      if (!set || !set.size) return;
+
+      const keyEnc = encodeURIComponent(meta.domName);
+      const valueEnc = Array.from(set).map(v => encodeURIComponent(v)).join(',');
+      pairs.push(`${keyEnc}=${valueEnc}`);
+    });
+
+    url.search = pairs.join('&');
+
+    window.location.href = url.origin + url.pathname + url.search;
+  },
+
+  // set checkboxes according to state (both for desktop and modal)
+  setDOMFromState(rootWrapper, state) {
+    rootWrapper.find(Wick.PLPFilters.INPUTS).prop('checked', false);
+
+    Object.keys(state).forEach(groupDomName => {
+      state[groupDomName].forEach(originalValue => {
+        const want = originalValue;
+
+        const cand = rootWrapper.find(Wick.PLPFilters.INPUTS).filter(function () {
+          const i = $(this);
+          const valMatch = i.val() === want;
+          const g = i.closest(Wick.PLPFilters.GROUP);
+          const groupMatch = g.length ? (g.attr('data-filter') === groupDomName) : true;
+          return valMatch && groupMatch;
+        }).first();
+
+        if (cand.length) {
+          cand.prop('checked', true);
+        }
+      });
+    });
+  },
+
+  collectStateFromDOM(rootWrapper) {
+    const state = {};
+    rootWrapper.find(Wick.PLPFilters.INPUTS).filter(':checked').each((_, el) => {
+      const input = $(el);
+      const group = input.closest(Wick.PLPFilters.GROUP);
+      const groupDomName = group.attr('data-filter') || '';
+      if (!groupDomName) {
+        return;
+      }
+
+      const val = (input.val() || '').trim();
+      if (!val) {
+        return;
+      }
+
+      if (!state[groupDomName]) {
+        state[groupDomName] = new Set();
+      }
+      state[groupDomName].add(val);
+    });
+    return state;
+  },
+
+  // ===== APPLY
+  applyFromScopes(scopeForCollect, push) {
+    Wick.PLPFilters.appliedState = Wick.PLPFilters.collectStateFromDOM(scopeForCollect);
+    Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, !!push);
+  },
+
+  applyFilters(e) {
+    e.preventDefault();
+    const scope = $(Wick.PLPFilters.ROOT_WRAPPER).add($(Wick.PLPFiltersMobile.MODAL_SEL));
+    Wick.PLPFilters.applyFromScopes(scope, true);
+  },
+
+  // ===== RENDER
+  updateSelectedUI(rootWrapper) {
+    Wick.PLPChips.renderGroupCounters(rootWrapper);
+    Wick.PLPChips.renderChips(rootWrapper);
+    Wick.PLPFiltersMobile.updateMobileFilterInfo();
+  },
+
+  totalApplied() {
+    return Object.values(Wick.PLPFilters.appliedState).reduce((n, set) => n + set.size, 0);
+  },
+
+  // Wick.PLPUtils for appliedState
+  removeFromApplied(groupDomName, valOriginal) {
+    const st = Wick.PLPFilters.appliedState[groupDomName];
+    if (!st) {
+      return;
+    }
+    st.delete(valOriginal);
+    if (st.size === 0) {
+      delete Wick.PLPFilters.appliedState[groupDomName];
+    }
+  },
+
+  exportState() {
+    const out = {};
+    Object.keys(Wick.PLPFilters.appliedState).forEach((g) => {
+      out[g] = Array.from(Wick.PLPFilters.appliedState[g]);
+    });
+    return out;
+  }
+}
+
+$(function () {
+  Wick.PLPFilters.init();
+});

package/src/js/page/kitchen/sort-by.js

@@ -0,0 +1,157 @@
+var Wick = window.Wick || {};
+
+Wick.Sort = {
+  ROOT: '.page-KitchenPLPPage',
+  WRAP: '.sort',
+  DROPDOWN: '.sort-dd',
+  OPTION: '.sort-opt',
+  INFO: '.js-sort-info',
+  CHEVRON: '.sort__chevron',
+
+  TRIGGER_MOBILE: '.sort--mobile',
+  TRIGGER_DESKTOP_BTN: '.sort--desktop .sort-button',
+
+  MAP_VALUE_TO_LABEL: {
+    'relevance': 'Relevance',
+    'priceLow': 'Price (lowest first)',
+    'priceHigh': 'Price (highest first)'
+  },
+
+  init: function () {
+    const root = $(Wick.Sort.ROOT);
+    if (!root.length) {
+      return;
+    }
+
+    root.on('click', Wick.Sort.TRIGGER_MOBILE, (e) => {
+      if ($(e.target).closest(Wick.Sort.DROPDOWN).length) {
+        return;
+      }
+      e.preventDefault();
+      Wick.Sort.toggle($(e.currentTarget));
+    });
+
+    root.on('click', Wick.Sort.TRIGGER_DESKTOP_BTN, (e) => {
+      e.preventDefault();
+      Wick.Sort.toggle($(e.currentTarget).closest(Wick.Sort.WRAP));
+    });
+
+    root.on('keydown', `${Wick.Sort.TRIGGER_MOBILE}, ${Wick.Sort.TRIGGER_DESKTOP_BTN}`, (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        Wick.Sort.toggle($(e.currentTarget).closest(Wick.Sort.WRAP));
+      }
+    });
+
+    root.on('click', Wick.Sort.OPTION, (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const opt = $(e.currentTarget);
+      const value = opt.data('value');
+      Wick.Sort.updateSortParamInURL(value);
+    });
+
+    $(document).on('click', (e) => {
+      const open = $(`${Wick.Sort.WRAP}.is-open`);
+      if (!open.length) {
+        return;
+      }
+      if (!open.is(e.target) && open.has(e.target).length === 0) {
+        Wick.Sort.closeAll();
+      }
+    });
+
+    $(document).on('keydown', (e) => {
+      if (e.key === 'Escape') {
+        Wick.Sort.closeAll();
+      }
+    });
+
+    Wick.Sort.bootstrap();
+  },
+
+  updateSortParamInURL: function (value) {
+    const url = new URL(window.location.href);
+    const params = url.searchParams;
+
+    if (value === 'relevance') {
+      params.delete('sortBy');
+    } else {
+      params.set('sortBy', value);
+    }
+
+    url.search = params.toString();
+
+    window.location.href = url.toString();
+  },
+
+  toggle: function (wrap) {
+    const isOpen = wrap.hasClass('is-open');
+    Wick.Sort.closeAll();
+    if (!isOpen) {
+      wrap.addClass('is-open');
+      wrap.find(Wick.Sort.DROPDOWN).removeAttr('hidden');
+      Wick.Sort.setExpanded(wrap, true);
+
+      if (window.Wick && Wick.PLPFilters && typeof Wick.PLPFilters.closeAll === 'function') {
+        Wick.PLPFilters.closeAll();
+      }
+    }
+  },
+
+  close: function (wrap) {
+    wrap.removeClass('is-open');
+    wrap.find(Wick.Sort.DROPDOWN).attr('hidden', true);
+    Wick.Sort.setExpanded(wrap, false);
+  },
+
+  closeAll: function () {
+    const all = $(Wick.Sort.WRAP);
+    all.removeClass('is-open');
+    all.find(Wick.Sort.DROPDOWN).attr('hidden', true);
+    all.each((_, el) => Wick.Sort.setExpanded($(el), false));
+  },
+
+  bootstrap: function () {
+    const urlParams = new URLSearchParams(window.location.search);
+    const value = urlParams.get('sortBy') || 'relevance';
+    const label = Wick.Sort.valueToLabel(value);
+
+    $(Wick.Sort.WRAP).each((_, el) => {
+      const w = $(el);
+      w.find(Wick.Sort.OPTION)
+        .removeClass('is-active')
+        .filter(`[data-value="${value}"]`)
+        .addClass('is-active');
+    });
+
+    $(document).trigger('sort:change', { value, label });
+
+    $(Wick.Sort.INFO).text(label);
+  },
+
+  setExpanded: function (wrap, expanded) {
+    const btn = wrap.is('.sort--mobile') ? wrap : wrap.find('.sort-button').first();
+    if (btn.length) {
+      btn.attr('aria-expanded', expanded ? 'true' : 'false');
+    }
+  },
+
+  valueToLabel: function (value) {
+    return Wick.Sort.MAP_VALUE_TO_LABEL[value] || 'Relevance';
+  },
+  labelToValue: function (label) {
+    const entries = Object.entries(Wick.Sort.MAP_VALUE_TO_LABEL);
+    for (const [val, lab] of entries) {
+      if (lab.toLowerCase() === label.toString().toLowerCase()) {
+        return val;
+      }
+    }
+    return 'relevance';
+  }
+};
+
+$(function () {
+  Wick.Sort.init();
+});