Weitere Marken werden geladen …
Alle Marken geladen.
window.paMarkenSearchIndex = [{"title":"Barilla"},{"title":"Coca Cola"},{"title":"Danone"},{"title":"Dr. Oetker"},{"title":"Fanta"},{"title":"Ferrero"},{"title":"Funny Frisch"},{"title":"Haribo"},{"title":"Iglo"},{"title":"Jacobs"},{"title":"Kellogg"},{"title":"Kinder"},{"title":"Knorr"},{"title":"Landliebe"},{"title":"Langnese"},{"title":"Leibniz"},{"title":"Lenor"},{"title":"Lorenz"},{"title":"Meggle"},{"title":"Milka"},{"title":"Müller"},{"title":"Nestle"},{"title":"Nestlé"},{"title":"Nivea"},{"title":"Ritter Sport"},{"title":"Storck"},{"title":"Volvic"},{"title":"Wagner"},{"title":"Zott"}];
(function(){
const openBtn = document.getElementById('openFilterMenu');
const closeBtn = document.getElementById('closeFilterMenu');
const sidebar = document.getElementById('filterSidebar');
const overlay = document.getElementById('filterOverlay');
if (openBtn && closeBtn && sidebar && overlay) {
let lockedScrollY = 0;
const openSidebar = () => {
lockedScrollY = window.scrollY || window.pageYOffset || 0;
sidebar.hidden = false;
overlay.hidden = false;
sidebar.removeAttribute('inert');
requestAnimationFrame(() => {
sidebar.classList.add('active');
sidebar.setAttribute('aria-hidden', 'false');
overlay.classList.add('active');
openBtn.setAttribute('aria-expanded', 'true');
document.body.style.position = 'fixed';
document.body.style.top = '-' + lockedScrollY + 'px';
document.body.style.left = '0';
document.body.style.right = '0';
document.body.style.width = '100%';
});
};
const closeSidebar = () => {
sidebar.classList.remove('active');
sidebar.setAttribute('aria-hidden', 'true');
sidebar.setAttribute('inert', '');
overlay.classList.remove('active');
openBtn.setAttribute('aria-expanded', 'false');
document.body.style.position = '';
document.body.style.top = '';
document.body.style.left = '';
document.body.style.right = '';
document.body.style.width = '';
window.scrollTo(0, lockedScrollY);
window.setTimeout(() => {
if (!sidebar.classList.contains('active')) {
sidebar.hidden = true;
overlay.hidden = true;
}
}, 280);
};
openBtn.addEventListener('click', openSidebar);
closeBtn.addEventListener('click', closeSidebar);
overlay.addEventListener('click', closeSidebar);
document.addEventListener('keydown', function(ev){
if (ev.key === 'Escape' && sidebar.classList.contains('active')) closeSidebar();
});
}
const gridSel = '#markenGrid';
const pagerSel = '#markenPager';
const loadMoreBtnSel = '#markenLoadMoreBtn';
const sentinelSel = '#markenInfiniteSentinel';
const loaderSel = '#markenInfiniteLoader';
const endNoticeSel = '#markenInfiniteEndNotice';
let loadingNextPage = false;
const getCurrentPageFromLocation = () => {
const url = new URL(window.location.href);
const page = parseInt(url.searchParams.get('seite') || '1', 10) || 1;
return Math.max(page, 1);
};
const buildPageUrl = (page) => {
const url = new URL(window.location.href);
const nextPage = Math.max(parseInt(page || '1', 10) || 1, 1);
if (nextPage <= 1) url.searchParams.delete('seite');
else url.searchParams.set('seite', String(nextPage));
return url.toString();
};
const updateAllLoadedNotice = () => {
const grid = document.querySelector(gridSel);
const pager = document.querySelector(pagerSel);
const sentinel = document.querySelector(sentinelSel);
const notice = document.querySelector(endNoticeSel);
if (!notice) return;
const currentPage = Math.max(parseInt((sentinel && sentinel.dataset.currentPage) || (pager && pager.dataset.currentPage) || (grid && grid.dataset.currentPage) || '1', 10) || 1, 1);
const maxPages = Math.max(parseInt((sentinel && sentinel.dataset.maxPages) || (pager && pager.dataset.maxPages) || (grid && grid.dataset.maxPages) || '1', 10) || 1, 1);
notice.hidden = currentPage < maxPages;
};
const updateLoadMoreButton = () => {
const grid = document.querySelector(gridSel);
const pager = document.querySelector(pagerSel);
const sentinel = document.querySelector(sentinelSel);
const btn = document.querySelector(loadMoreBtnSel);
if (!btn) return;
const currentPage = Math.max(parseInt((sentinel && sentinel.dataset.currentPage) || (pager && pager.dataset.currentPage) || (grid && grid.dataset.currentPage) || '1', 10) || 1, 1);
const maxPages = Math.max(parseInt((sentinel && sentinel.dataset.maxPages) || (pager && pager.dataset.maxPages) || (grid && grid.dataset.maxPages) || '1', 10) || 1, 1);
btn.dataset.currentPage = String(currentPage);
btn.dataset.maxPages = String(maxPages);
if (currentPage >= maxPages) {
btn.hidden = true;
btn.disabled = true;
return;
}
btn.hidden = false;
btn.disabled = false;
btn.textContent = 'Weitere Marken laden';
};
const updatePaginationCurrent = () => {
const pager = document.querySelector(pagerSel);
if (!pager) return;
const currentPage = parseInt(pager.dataset.currentPage || '1', 10) || 1;
const links = pager.querySelectorAll('.page-numbers');
links.forEach((el) => {
if (!el.classList.contains('prev') && !el.classList.contains('next')) {
el.classList.remove('current');
el.removeAttribute('aria-current');
}
const label = (el.textContent || '').trim();
if (!el.classList.contains('prev') && !el.classList.contains('next') && /^\d+$/.test(label) && parseInt(label, 10) === currentPage) {
el.classList.add('current');
el.setAttribute('aria-current', 'page');
}
});
};
const wirePagination = () => {
const pager = document.querySelector(pagerSel);
if (!pager) return;
pager.querySelectorAll('a').forEach((a) => {
a.addEventListener('click', async (ev) => {
const href = a.getAttribute('href');
if (!href) return;
ev.preventDefault();
window.location.href = href;
});
});
};
const loadNextPage = async () => {
if (loadingNextPage) return;
const grid = document.querySelector(gridSel);
const pager = document.querySelector(pagerSel);
const sentinel = document.querySelector(sentinelSel);
const loader = document.querySelector(loaderSel);
if (!grid || !pager || !sentinel) return;
const currentPage = Math.max(parseInt(sentinel.dataset.currentPage || pager.dataset.currentPage || grid.dataset.currentPage || '1', 10) || 1, 1);
const maxPages = Math.max(parseInt(sentinel.dataset.maxPages || pager.dataset.maxPages || grid.dataset.maxPages || '1', 10) || 1, 1);
if (currentPage >= maxPages) {
updateAllLoadedNotice();
updateLoadMoreButton();
return;
}
loadingNextPage = true;
if (loader) loader.hidden = false;
try {
const nextPage = currentPage + 1;
const res = await fetch(buildPageUrl(nextPage), { headers: { 'X-Requested-With': 'fetch' }, credentials: 'same-origin' });
if (!res.ok) throw new Error('HTTP ' + res.status);
const html = await res.text();
const doc = new DOMParser().parseFromString(html, 'text/html');
const nextGrid = doc.querySelector(gridSel);
const nextPager = doc.querySelector(pagerSel);
const nextSentinel = doc.querySelector(sentinelSel);
if (!nextGrid || !nextPager || !nextSentinel) {
window.location.href = buildPageUrl(nextPage);
return;
}
Array.from(nextGrid.children).forEach((child) => grid.appendChild(child));
pager.innerHTML = nextPager.innerHTML;
const newCurrent = Math.max(parseInt(nextSentinel.dataset.currentPage || String(nextPage), 10) || nextPage, nextPage);
const newMax = Math.max(parseInt(nextSentinel.dataset.maxPages || String(maxPages), 10) || maxPages, maxPages);
grid.dataset.currentPage = String(newCurrent);
grid.dataset.maxPages = String(newMax);
pager.dataset.currentPage = String(newCurrent);
pager.dataset.maxPages = String(newMax);
sentinel.dataset.currentPage = String(newCurrent);
sentinel.dataset.maxPages = String(newMax);
history.pushState({ page: newCurrent, url: buildPageUrl(newCurrent) }, '', buildPageUrl(newCurrent));
wirePagination();
updatePaginationCurrent();
updateLoadMoreButton();
updateAllLoadedNotice();
} catch (err) {
console.error(err);
window.location.href = buildPageUrl(currentPage + 1);
} finally {
loadingNextPage = false;
if (loader) loader.hidden = true;
}
};
const initLoadMore = () => {
const grid = document.querySelector(gridSel);
const pager = document.querySelector(pagerSel);
const sentinel = document.querySelector(sentinelSel);
const btn = document.querySelector(loadMoreBtnSel);
if (!grid || !pager || !sentinel || !btn) return;
const currentPage = Math.max(parseInt(sentinel.dataset.currentPage || pager.dataset.currentPage || grid.dataset.currentPage || String(getCurrentPageFromLocation()), 10) || getCurrentPageFromLocation(), 1);
const maxPages = Math.max(parseInt(sentinel.dataset.maxPages || pager.dataset.maxPages || grid.dataset.maxPages || '1', 10) || 1, 1);
grid.dataset.currentPage = String(currentPage);
grid.dataset.maxPages = String(maxPages);
pager.dataset.currentPage = String(currentPage);
pager.dataset.maxPages = String(maxPages);
sentinel.dataset.currentPage = String(currentPage);
sentinel.dataset.maxPages = String(maxPages);
const nextBtn = btn.cloneNode(true);
btn.replaceWith(nextBtn);
nextBtn.addEventListener('click', function(ev){
ev.preventDefault();
loadNextPage();
});
wirePagination();
updatePaginationCurrent();
updateLoadMoreButton();
updateAllLoadedNotice();
};
initLoadMore();
const markenSearchInput = document.getElementById('markenSearch');
const markenSearchSuggest = document.getElementById('markenSearchSuggest');
const markenSearchBox = document.getElementById('markenSearchBox');
const markenIndex = Array.isArray(window.paMarkenSearchIndex) ? window.paMarkenSearchIndex.map((item) => {
const title = ((item && item.title) || '').trim();
return { title, norm: title.toLocaleLowerCase('de-DE') };
}).filter((item) => item.title !== '') : [];
let activeSuggestIndex = 0;
const normalizeSuggestValue = (value) => (value || '').toLocaleLowerCase('de-DE').normalize('NFD').replace(/[\u0300-\u036f]/g, '').trim();
const hideMarkenSuggest = () => {
if (!markenSearchSuggest) return;
markenSearchSuggest.hidden = true;
markenSearchSuggest.innerHTML = '';
activeSuggestIndex = 0;
};
const getSuggestButtons = () => Array.from((markenSearchSuggest || document.createElement('ul')).querySelectorAll('[data-marken-search-pick]'));
const setActiveSuggestIndex = (nextIndex) => {
const buttons = getSuggestButtons();
if (!buttons.length) return;
activeSuggestIndex = Math.max(0, Math.min(nextIndex, buttons.length - 1));
buttons.forEach((btn, index) => btn.classList.toggle('is-active', index === activeSuggestIndex));
const activeBtn = buttons[activeSuggestIndex];
if (activeBtn && typeof activeBtn.scrollIntoView === 'function') {
activeBtn.scrollIntoView({ block: 'nearest' });
}
};
const renderMarkenSuggest = () => {
if (!markenSearchInput || !markenSearchSuggest) return;
const rawValue = markenSearchInput.value || '';
const term = normalizeSuggestValue(rawValue);
if (term.length < 2) {
hideMarkenSuggest();
return;
}
const matches = markenIndex.filter((item) => item.norm.includes(term));
matches.sort((a, b) => {
const aStarts = a.norm.startsWith(term) ? 0 : 1;
const bStarts = b.norm.startsWith(term) ? 0 : 1;
if (aStarts !== bStarts) return aStarts - bStarts;
return a.title.localeCompare(b.title, 'de');
});
markenSearchSuggest.innerHTML = '';
if (!matches.length) {
const empty = document.createElement('li');
empty.className = 'pa-tax-empty';
empty.textContent = PA_MARKEN_I18N.no_suggestion;
markenSearchSuggest.appendChild(empty);
markenSearchSuggest.hidden = false;
activeSuggestIndex = 0;
return;
}
matches.slice(0, 8).forEach((item, index) => {
const li = document.createElement('li');
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'pa-filter-search-option' + (index === 0 ? ' is-active' : '');
btn.setAttribute('data-marken-search-pick', item.title);
const label = document.createElement('span');
label.className = 'label';
label.textContent = item.title;
btn.appendChild(label);
li.appendChild(btn);
markenSearchSuggest.appendChild(li);
});
markenSearchSuggest.hidden = false;
activeSuggestIndex = 0;
};
if (markenSearchInput && markenSearchSuggest && markenSearchBox) {
const filterForm = document.getElementById('markenFilterForm');
let lastSubmittedValue = (markenSearchInput.value || '').trim();
const submitSearchFilter = () => {
if (!filterForm) return;
const currentValue = (markenSearchInput.value || '').trim();
if (currentValue === lastSubmittedValue) return;
lastSubmittedValue = currentValue;
filterForm.requestSubmit ? filterForm.requestSubmit() : filterForm.submit();
};
markenSearchInput.addEventListener('input', function(){
renderMarkenSuggest();
});
markenSearchInput.addEventListener('focus', renderMarkenSuggest);
markenSearchInput.addEventListener('search', function(){
renderMarkenSuggest();
});
markenSearchInput.addEventListener('keydown', function(e){
const buttons = getSuggestButtons();
if (e.key === 'ArrowDown' && buttons.length && !markenSearchSuggest.hidden) {
e.preventDefault();
setActiveSuggestIndex(activeSuggestIndex + 1);
return;
} else if (e.key === 'ArrowUp' && buttons.length && !markenSearchSuggest.hidden) {
e.preventDefault();
setActiveSuggestIndex(activeSuggestIndex - 1);
return;
} else if (e.key === 'Enter') {
if (buttons.length && !markenSearchSuggest.hidden) {
const activeBtn = buttons[activeSuggestIndex];
if (activeBtn) {
e.preventDefault();
markenSearchInput.value = activeBtn.getAttribute('data-marken-search-pick') || markenSearchInput.value;
hideMarkenSuggest();
submitSearchFilter();
return;
}
}
e.preventDefault();
return;
} else if (e.key === 'Escape') {
hideMarkenSuggest();
}
});
document.addEventListener('click', function(e){
const pickBtn = e.target.closest('[data-marken-search-pick]');
if (pickBtn) {
e.preventDefault();
markenSearchInput.value = pickBtn.getAttribute('data-marken-search-pick') || '';
hideMarkenSuggest();
submitSearchFilter();
return;
}
if (!e.target.closest('#markenSearchBox')) hideMarkenSuggest();
});
}
})();
