$(document).ready(function() { var f = $('#rugFinderForm'), fi = $('#facetsInput'), pMin = $('#priceMinInput'), pMax = $('#priceMaxInput'), pD = $('#priceDropdown'), b = f.find('button[type="submit"]'), v = { t: $('#typeInput'), clr: $('#colorInput'), sz: $('#sizeInput') }, d = { t: $('#typeDropdown'), clr: $('#colorDropdown'), sz: $('#sizeDropdown') }; let p = false; function debounce(fn, w) { let t; return function(...a) { clearTimeout(t); t = setTimeout(() => fn.apply(this, a), w); }; } const debouncedApiCall = debounce(apiCall, 300); function fetchData(fcts) { if (p) return; p = true; $.ajax({ url: '/rest/finder/items', type: 'GET', dataType: 'json', data: { facets: fcts.join(','), categoryId: v.t.val() || null, priceMin: pMin.val() || null, priceMax: pMax.val() || null }, beforeSend: () => b.prop('disabled', true), success: r => { updDropdown(d.clr, sortFacets((r.facets[28] || {}).values || []), 'Selecteer kleur'); updDropdown(d.sz, sortFacets((r.facets[29] || {}).values || []), 'Selecteer maat', true); updItemCount(r.count || 0); }, error: () => updItemCount(0), complete: () => { b.prop('disabled', false); p = false; }, }); } function sortFacets(f) { return f.sort((a, b) => a.id - b.id || a.name.localeCompare(b.name)); } function updItemCount(c) { b.find('span').text(c > 0 ? c + ' Artikel gevonden' : 'Tapijten showen'); } function updDropdown(dd, v, dt, sz) { var m = dd.next('.dropdown-menu'); m.empty().append($('', { type: 'button', class: 'dropdown-item text-danger' }).text('Selectie verwijderen').on('click', () => resetDropdown(dd, dt))); $.each(v, (_, i) => { m.append($('', { type: 'button', class: 'dropdown-item', 'data-value': i.id }).html(sz ? fmtSize(i.name) : i.name).on('click', () => sel(dd, i.id, i.name))); if ([201, 205, 212, 220, 224].indexOf(i.id) >= 0) m.append('

---

'); }); } function fmtSize(n) { return n.replace(/(\d+(\s?x\s?\d+)?\s?cm)/g, "$1"); } function resetDropdown(dd, dt) { dd.attr('data-value', ''); dd.closest('.dropdown').find('input[type="hidden"]').val(''); pMin.val(''); pMax.val(''); debouncedApiCall(); } function sel(dd, v, t) { if (t === 'Selectie verwijderen') { t = { priceDropdown: 'Selecteer prijs', colorDropdown: 'Selecteer kleur', sizeDropdown: 'Selecteer maat' }[dd.attr('id')] || t; } if (dd.attr('data-value') !== String(v)) { dd.text(t).attr('data-value', v); dd.closest('.dropdown').find('input[type="hidden"]').val(v); debouncedApiCall(); } } function apiCall() { var fcts = [v.clr.val(), v.sz.val()].filter(x => x && x.trim()); fi.val(fcts.join(',')); fetchData(fcts); } f.on('submit', function(e) { var p = new URLSearchParams(); if (pMin.val()?.trim()) p.append('priceMin', pMin.val()); if (pMax.val()?.trim()) p.append('priceMax', pMax.val()); if (fi.val()?.trim()) p.append('facets', fi.val()); p.append('categoryId', v.t.val() || '73'); f.attr('action', '/tapijten' + '?' + p.toString()); f.off('submit').submit(); }); $(document).on('click', '.price-dropdown .dropdown-item', function() { var min = $(this).data('min'), max = $(this).data('max'); if (min === 0 && max === 0) { resetDropdown(pD, 'Selecteer prijs'); return; } if (pMin.length && pMax.length) { pMin.val(min); pMax.val(max); } else { console.error('Price range inputs missing.'); return; } var lbl = max ? min + ' € - ' + max + ' €' : min + '€ +'; pD.text(lbl); debouncedApiCall(); }); $(document).on('click', '.dropdown-item', function() { const dd = $(this).closest('.dropdown').find('.btn'); sel(dd, $(this).data('value'), $(this).text()); }); d.t.on('click', '.dropdown-item', function() { const val = $(this).data('value'); f.attr('action', val === '76' ? '/moderne-tapijten' : val === '87' ? '/oosterse-tapijten' : '/tapijten'); v.t.val(val); debouncedApiCall(); }); if (!v.clr.val() && !v.sz.val()) fetchData([]); });