globalThis.spotler_search_templates = globalThis.spotler_search_templates || {}; globalThis.spotler_search_templates['0e4cb398-d50a-49a7-9022-ae784d7ff3bc'] = (function (props) { const currencyFormatter = new Intl.NumberFormat("nl-NL", { style: "currency", currency: props.spotler.getConfig("currency") || "EUR", }); function formatCurrency(price) { return currencyFormatter.format(price); } function matchQueryInBold(str) { if (str === undefined) { return ""; } const escapedSearchTerm = props.spotler .getSearchTerm() .replace(/([.?*+^$[\]\\(){}|-])/g, "\\$&"); return str.replace( new RegExp(escapedSearchTerm, "gi"), '$&' ); } function escapeHtml(str) { const entityMap = { "&": "&", "<": "<", ">": ">", '"': """, "'": "'", "/": "/", "`": "`", "=": "=", }; return str.replace(/[&<>"'`=/]/g, (s) => entityMap[s]); } function triggerChangeView(event, view) { event.preventDefault(); props.spotler.triggerViewChange(view); } function revertToPreviousSuccessfulState(event) { props.spotler.revertToPreviousSuccessfulState(); } async function SuggestView(props) { const { items, content } = await props.spotler.fetchResults(); return `
Zoeksuggesties
Makita accu
Makita accuboormachine
Makita bithouder
Itemsuggesties
${items.data ?.map( (item) => `
${matchQueryInBold( item.properties.title )}
★★★★☆53 reviews
€299
${formatCurrency( item.properties.price )}
` ) .join("")}
Meer informatie
${content.data ?.map( (content) => `
${matchQueryInBold( content.properties.title )}
` ) .join("")}
`; } function TabletAndDesktopHeading(props, items) { return `
${items.meta.total !== 0 ? `
`:``}
${items?.meta?.total} ${ items?.meta?.total === 1 ? "resultaat" : "resultaten" } voor '${props.spotler.getSearchTerm()}'
`; } function MobileHeading(props, items) { function toggleResultsFilterMobile(event) { const element = event.target; const view = element.dataset.sptlrMobileViewTrigger; const container = event.target.closest("[data-sptlr-container]"); container.querySelectorAll("[data-sptlr-mobile-view]").forEach((el) => { el.classList.toggle("sqr-hidden", el.dataset.sptlrMobileView !== view); }); container .querySelectorAll("[data-sptlr-mobile-view-trigger]") .forEach((el) => { el.classList.toggle( "sqrActive", el.dataset.sptlrMobileViewTrigger === view ); }); props.state.datasets["items"].mobileView = view; } return `
Resultaten (${items?.meta?.total})
Filteren
`; } async function ItemsView(props) { const { items } = await props.spotler.fetchResults(); props.state.datasets["items"].mobileView = props.state.datasets["items"].mobileView ?? "results"; function toggleResultsFilterMobile(event) { const element = event.target; const view = element.dataset.sptlrMobileViewTrigger; const container = event.target.closest("[data-sptlr-container]"); container.querySelectorAll("[data-sptlr-mobile-view]").forEach((el) => { el.classList.toggle("sqr-hidden", el.dataset.sptlrMobileView !== view); }); container .querySelectorAll("[data-sptlr-mobile-view-trigger]") .forEach((el) => { el.classList.toggle( "sqr-opacity-50", el.dataset.sptlrMobileViewTrigger !== view ); }); props.state.datasets["items"].mobileView = view; } props.state.datasets["items"].filterStates = items.facets.reduce( (obj, f) => { obj[f.id] = { collapsed: f.is_default_collapsed, ...obj[f.id] }; return obj; }, props.state.datasets["items"].filterStates ?? {} ); if (items.meta.total > items.meta.offset + items.meta.limit) { props.spotler.registerInfiniteScroll( "items", "[data-sqr-infinite-scroll-item]:last-child", ({ items }) => Items(items.data) ); } return `
${TabletAndDesktopHeading(props, items)} ${items.meta.total === 0 ? ` `:` ${MobileHeading(props, items)}
${ActiveFilters(props.state.datasets["items"], items?.facets)} ${items.meta.total !== 0 ? ` `:``} ${Filters(items?.facets)}
${SpellcheckMessage(items?.spellcheck, items?.meta?.total)} ${Banners(items?.banners)}
${Items(items?.data)}
`}
`; } function ActiveFilters(dataset, facets) { if (!dataset.filters || dataset.filters.length === 0) { return ""; } const filters = []; for (const filter of dataset.filters) { const facet = facets.find((f) => f.name === filter.field); if (!facet) { continue; } switch (facet.type) { case "dualslider": filters.push({ name: facet.name, label: facet.label, value: `${renderFilterLabel( filter.start, facet.prefix, facet.suffix )} - ${renderFilterLabel(filter.end, facet.prefix, facet.suffix)}`, }); break; case "multiselect": filters.push({ name: facet.name, label: facet.label, value: facet.values .filter((v) => filter.values.includes(v.value)) .map((v) => renderFilterLabel(v.label, facet.prefix, facet.suffix) ) .join(", "), }); break; default: filters.push({ name: facet.name, label: facet.label, value: renderFilterLabel(filter.value, facet.prefix, facet.suffix), }); } } if (filters.length === 0) { return ""; } function clearFilters(event, dataset) { event.preventDefault(); props.spotler.clearAllFilters(dataset); } return `

Gekozen filters

${filters.map(ActiveFilter).join("")}
`; } function ActiveFilter(filter) { function removeFilter(event, dataset, name) { props.spotler.triggerFilterChange(dataset, name); } return ` ${filter.label}: ${filter.value} `; } function Filters(filters) { return filters ?.map((facet) => { switch (facet.type) { case "select": return renderSelectFilter({ ...facet, dataset: "items" }); case "multiselect": return renderMultiSelectFilter({ ...facet, dataset: "items" }); case "radio": return renderRadioFilter({ ...facet, dataset: "items" }); case "slider": return renderSliderFilter({ ...facet, dataset: "items" }); case "dualslider": return renderDualSliderFilter({ ...facet, dataset: "items" }); } }) .join(""); } function SpellcheckMessage(spellcheck, total) { if (!spellcheck) { return ""; } return `
U zocht op ${ spellcheck.old }, maar wij vonden geen resultaten. U zocht op ${ spellcheck.new }, wij vonden ${total} ${ total === 1 ? "resultaat" : "resultaten" }.
`; } function Banners(banners) { if (!Array.isArray(banners) || banners.length === 0) { return ""; } const banner = banners.pop(); const bannerTypes = Object.keys(banner); let bannerHtml = ""; for (let i = 0, l = bannerTypes.length; i < l; i++) { const bannerType = bannerTypes[i]; switch (bannerType) { case "mobile": bannerHtml += Banner( banner, bannerType, "sqr-block tablet:sqr-hidden" ); break; case "tablet": bannerHtml += Banner( banner, bannerType, "sqr-hidden tablet:sqr-block desktop:sqr-hidden" ); break; case "desktop": bannerHtml += Banner( banner, bannerType, "sqr-hidden desktop:sqr-block" ); break; } } return bannerHtml; } function Banner(banner, type, mediaClasses) { if (!(type in banner)) { return ""; } if (banner[type].url) { return ` `; } return ``; } function Items(items) { return items?.map(Item).join(""); } function Item(item) { function getCookie(name) { const value = `; ${document.cookie}`; const parts = value.split(`; ${name}=`); if (parts.length === 2) return parts.pop().split(';').shift(); } // Use it to get the form_key var formKey = getCookie('form_key'); return `
${item.properties.title} ${item.properties.discount ? `
-${Math.floor(item.properties.discount[0])}%
`:`` }
${item.properties['sqr:content_type'] && item.properties['sqr:content_type'][0] === 'product' ? ` `:``}
${item.properties['sqr:content_type'] && item.properties['sqr:content_type'][0] === 'cms' ? `
${item.properties.text_text ? item.properties.text_text : ''}
Lees verder > `:``} ${item.properties['sqr:content_type'] && item.properties['sqr:content_type'][0] === 'category' ? ` Bekijk categorie > `:``} ${item.properties.review_score && item.properties.review_score[0] > 0 ? `
${item.properties.review_score ? item.properties.review_score[0] :''}  ${item.properties.review_count ? ` | ${item.properties.review_count[0] === '1' ? ' 1 review' : ' ' + item.properties.review_count[0] + ' reviews'} `:``}
`:``}
${item.properties.deliverytime && item.properties.deliverytime[0] === '1' ? `
Op voorraad
`:``}
${item.properties.price ? `
Vanaf ${formatCurrency(item.properties.price)} Regular Price ${item.properties.double_normal_price > item.properties.price ? formatCurrency(item.properties.double_normal_price) : ''} ${item.properties.tier_calc ? `
Staffel vanaf ${formatCurrency(item.properties.tier_calc)}
`:``}
`:``}
${item.properties['sqr:content_type'] && item.properties['sqr:content_type'][0] === 'product' ? ` `:``}
`; } function initPriceBox__66dafe1973df8() { return { updatePrice(priceData) { const regularPriceLabel = this.$el.querySelector('.normal-price .price-label'); const regularPriceElement = this.$el.querySelector('.normal-price [data-price-type=finalPrice].price-wrapper .price'); const basePriceElement = this.$el.querySelector('.normal-price [data-price-type=basePrice].price-wrapper .price'); if (priceData.finalPrice.amount < priceData.oldPrice.amount) { regularPriceLabel.classList.add('hidden'); } else { regularPriceLabel.classList.remove('hidden'); } regularPriceElement.innerText = hyva.formatPrice(priceData.finalPrice.amount); basePriceElement && (basePriceElement.innerText = hyva.formatPrice(priceData.basePrice.amount)); } }; } function renderPrice(item) { const price = item.properties.double_normal_price > 0 ? item.properties.double_normal_price : item.properties.price; const discountedPrice = item.properties.price; if (discountedPrice > 0 && price !== discountedPrice) { return `

${formatCurrency(price)}

${formatCurrency(discountedPrice)}

`; } return `

${formatCurrency(price)}

`; } function renderFilter(facet, children) { const filterState = props.state.datasets[facet.dataset].filterStates?.[facet.id]; const collapsed = filterState?.collapsed ?? facet.is_default_collapsed; function collapse(e, dataset, filterId) { e.preventDefault(); const element = e.currentTarget; const filterState = props.state.datasets[dataset].filterStates?.[filterId]; const active = element.classList.contains("sqr-active"); element.classList.toggle("sqr-active", !active); element.nextElementSibling.classList.toggle("sqr-hidden", active); filterState.collapsed = active; } return `
${children}
`; } function renderSelectFilter(facet) { return renderFilter( facet, `
` ); } function showMore(e, dataset, filterId) { e.preventDefault(); const element = e.currentTarget; const parentElement = element.closest("[data-sqr-filter]"); const filterState = props.state.datasets[dataset].filterStates?.[filterId]; filterState.showing_more = !filterState.showing_more; element.textContent = filterState.showing_more ? "Toon minder" : "Toon meer"; parentElement.dataset.sqrFilterShowingMore = filterState.showing_more; parentElement .querySelectorAll("[data-initially-hidden]") .forEach((element) => { element.classList.toggle("sqr-hidden", !filterState.showing_more); }); } function renderMultiSelectFilter(facet) { const hasMoreValues = facet.values.length > facet.result_limit; const filterState = props.state.datasets[facet.dataset].filterStates?.[facet.id]; const showingMore = filterState.showing_more ?? false; return renderFilter( facet, `
${ facet.searchable ? `
` : "" } ${facet.values .map( (filterValue, index) => `
= facet.result_limit ? "data-initially-hidden" : "" } class="sqr-flex sqr-items-center ${ !showingMore && index >= facet.result_limit ? "sqr-hidden" : "" }"> ${filterValue.count}
` ) .join("")} ${ hasMoreValues ? ` ` : "" }
` ); } function renderRadioFilter(facet) { const hasMoreValues = facet.values.length > facet.result_limit; const filterState = props.state.datasets[facet.dataset].filterStates?.[facet.id]; const showingMore = filterState.showing_more ?? false; return renderFilter( facet, `
${facet.values .map( (filterValue) => `
${filterValue.count}
` ) .join("")} ${ hasMoreValues ? ` ` : "" }
` ); } function renderSliderFilter(facet) { return renderFilter( facet, `
` ); } function renderDualSliderFilter(facet) { return renderFilter( facet, `
${ facet.use_input ? `
` : `
${facet.prefix ?? ""} ${ facet.min } ${facet.suffix ?? ""}
${facet.prefix ?? ""} ${ facet.max } ${facet.suffix ?? ""}
` }
` ); } function renderFilterLabel(label, prefix, suffix) { return `${prefix ?? ""} ${label} ${suffix ?? ""}`.trim(); } if (props.state.view === "items") { return ItemsView(props); } return SuggestView(props); });