<!--SH11 - Модификация для Тильды. Фильтры в виде табов для каталога товаров https://mod.tistols.com/filters -->
<div id="search">
<div id="search-input-btns">
</div>
</div>
<style>
.js-store-grid-cont {
display: flex; /* Делаем элементы в строку */
flex-wrap: wrap; /* Разрешаем перенос элементов */
}
/*Добавляем фильтры для каталога модификаций + ниже делаем ссылки на фильтры*/
button.filter-button {
color: #000000; /* Цвет текста */
font-size: 14px; /* размер шрифта */
font-family: 'HelveticaNeue', Arial, sans-serif;
line-height: normal;
font-weight: 400;
letter-spacing: -0.5px;
border-width: 1px;
border-radius: 10px;
background-position: center center;
background-color: #F3F3F3; /* Цвет фона */
border-color: #F3F3F3;
border-style: solid;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
padding: 7px 15px;
margin: 0 10px 10px 0;
cursor:pointer;
display: flex;
align-items: center;
justify-content: center;
}
/* Стилизация счетчика внутри кнопки */
button.filter-button .val {
font-size: 12px;
line-height: normal;
text-align: center;
color: #fff; /* Цвет текста */
width: 25px;
height: 25px;
margin-left: 10px;
margin-right: -8px;
background: #000; /* Цвет фона */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/* Стилизация счетчика при наведении */
button.filter-button:hover .val {
color: #000;
background: #E9FF71; /* Светло-зеленый фон */
}
/*Настраиваем состояния для кнопки Избранное в фильтрах*/
.filter-button.active .heartpic {
filter:invert(1);
}
.filter-button:hover .heartpic {
filter:invert(1);
}
#search {max-width:98%;margin:0 auto;}
#search-input-btns {display: flex; flex-wrap: wrap;}
#search-input-block {
display: flex;
align-items: center;
background-color: #eee;
border-radius: 50px;
}
#search-input-block input {
background: transparent;
outline: none;
border: none;
color: #000;
font-family: 'Helvetica';
font-size: 10px;
font-weight: 400;
width: 100%;
padding: 14px 10px;
}
#searchButton {
transition: 0.3s;
cursor: pointer;
height: 100%;
color: #000;
border: none;
font-family: 'Helvetica';
background: #e5e5e5;
font-size: 11px;
padding: 14px 20px;
border-radius: 0 50px 50px 0;
}
/* Стили активных и наведенных кнопок фильтра */
button.filter-button:hover,
button.filter-button.active {
background-color: #000;
color: #fff;
}
button.filter-button.active .val {
color:#000;
background: #E9FF71;
}
</style>
<script>
// Делаем ссылки на фильтры
$(function () {
var timer = setInterval(function () {
if (window.tStoreXHR && Object.keys(window.tStoreXHR).length > 0) {
var jsonData = JSON.parse(window.tStoreXHR[Object.keys(window.tStoreXHR)[0]].response);
if (jsonData && jsonData.filters && jsonData.filters.filters && Array.isArray(jsonData.filters.filters)) {
clearInterval(timer);
const searchInputBtns = document.getElementById('search-input-btns');
const urlParams = new URLSearchParams(window.location.search);
const selectedFilter = urlParams.get('filter');
function translit(str) {
const ruToEn = {
'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'yo', 'ж': 'zh',
'з': 'z', 'и': 'i', 'й': 'y', 'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n', 'о': 'o', 'п': 'p',
'р': 'r', 'с': 's', 'т': 't', 'у': 'u', 'ф': 'f', 'х': 'kh', 'ц': 'ts', 'ч': 'ch', 'ш': 'sh',
'щ': 'sch', 'ъ': '', 'ы': 'y', 'ь': '', 'э': 'e', 'ю': 'yu', 'я': 'ya',
' ': '-', ',': '', '.': '', '/': '-', '(': '', ')': ''
};
return str.toLowerCase().split('').map(char => ruToEn[char] || char).join('');
}
function filterProducts(filterId) {
document.querySelectorAll('.js-product').forEach(product => {
const productPartUids = product.getAttribute('data-product-part-uid');
if (productPartUids) {
const productPartsArray = productPartUids.split(',');
product.style.display = productPartsArray.includes(filterId) ? 'block' : 'none';
} else {
product.style.display = 'none';
}
});
}
jsonData.filters.filters.forEach(filter => {
if (filter.values && Array.isArray(filter.values)) {
filter.values.forEach(valueObj => {
const button = document.createElement('button');
const textSpan = document.createElement('span');
textSpan.textContent = valueObj.value;
const countSpan = document.createElement('span');
countSpan.classList.add('val');
countSpan.textContent = ` ${valueObj.count}`;
button.appendChild(textSpan);
button.appendChild(countSpan);
button.setAttribute('data-filter', valueObj.id);
button.setAttribute('data-name', valueObj.value);
button.classList.add('filter-button');
const filterSlug = translit(valueObj.value);
if (selectedFilter === filterSlug) {
button.classList.add('active');
filterProducts(valueObj.id);
}
button.addEventListener('click', function () {
document.querySelectorAll('.filter-button').forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
const filterName = this.getAttribute('data-name');
const filterSlug = translit(filterName);
urlParams.set('filter', filterSlug);
window.history.pushState({}, '', '?' + urlParams.toString());
filterProducts(valueObj.id);
});
searchInputBtns.appendChild(button);
});
}
});
// МЕСТО ДЛЯ КОДА С ИЗБРАННЫМ
// Обновление кнопки при клике на .t1002__addBtn
$('.t1002__addBtn').on('click', function () {
console.log('123')
updateWishlistButton();
});
// Делаем кнопку "All" функциональной
const allButton = document.querySelector('[data-filter="718547608741"]');
if (allButton) {
if (!selectedFilter) {
allButton.classList.add('active'); // Выделяем кнопку "All", если нет фильтра в URL
}
allButton.addEventListener('click', function () {
document.querySelectorAll('.filter-button').forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
urlParams.delete('filter');
window.history.pushState({}, '', window.location.pathname);
document.querySelectorAll('.js-product').forEach(product => product.style.display = 'block');
});
if (!selectedFilter) {
document.querySelectorAll('.js-product').forEach(product => product.style.display = 'block'); // Показываем все продукты при первом запуске
}
}
// Удаляем `?filter=...` из URL при загрузке страницы
if (selectedFilter) {
window.history.replaceState({}, '', window.location.pathname);
}
}
}
}, 1000);
});
</script>