Для реализации изменения заголовка, URL и описания динамически в зависимости от выбранного фильтра товаров на сайте Tilda, можно воспользоваться JavaScript. Ниже приведен пример кода, который выполняет данную задачу:
1. Вставьте следующий код в HTML-разметку вашей страницы:
```html
<div class="menu">
<ul>
<li data-filter="filter1">Категория 1</li>
<li data-filter="filter2">Категория 2</li>
<li data-filter="filter3">Категория 3</li>
</ul>
</div>
<div class="products">
<!-- здесь размещаются карточки товаров -->
</div>
```
2. Добавьте следующий скрипт на страницу:
```javascript
document.addEventListener('DOMContentLoaded', function() {
const menuItems = document.querySelectorAll('.menu li');
menuItems.forEach(item => {
item.addEventListener('click', function() {
const filter = this.getAttribute('data-filter');
// изменение заголовка
document.title = `Категория ${filter}`;
// изменение URL (если необходимо)
window.history.pushState({}, '', `/${filter}`);
// изменение описания
const description = `Это страница с товарами из категории ${filter}`;
document.querySelector('meta[name="description"]').setAttribute('content', description);
// выполнение фильтрации товаров
filterProducts(filter);
});
});
function filterProducts(filter) {
// здесь необходимо реализовать логику фильтрации товаров и их вывод на страницу
// например, с помощью AJAX запроса к серверу или скрытием/показом соответствующих элементов
}
});
```
3. В функции `filterProducts` необходимо добавить логику фильтрации товаров в зависимости от выбранной категории. Например, можно скрывать/показывать соответствующие карточки товаров.
Этот подход позволит обновлять заголовок, URL и описание страницы в зависимости от выбранного фильтра товаров без обновления всей страницы. Кроме того, пользователи смогут переходить по прямым ссылкам на определенные категории товаров.
Чтобы ограничить выбор только одного пункта в левом меню, можно добавить скрипт, который будет снимать выделение с других пунктов при выборе нового. Например, можно добавить следующий код в начало функции обработки клика на элементе меню:
```javascript
menuItems.forEach(item => {
item.addEventListener('click', function() {
// убираем выделение со всех пунктов меню
menuItems.forEach(item => item.classList.remove('active'));
// выделяем только выбранный пункт
this.classList.add('active');
const filter = this.getAttribute('data-filter');
// изменение заголовка
document.title = `Категория ${filter}`;
// изменение URL (если необходимо)
window.history.pushState({}, '', `/category/${filter}`);
// изменение описания
const description = `Это страница с товарами из категории ${filter}`;
document.querySelector('meta[name="description"]').setAttribute('content', description);
// выполнение фильтрации товаров
filterProducts(filter);
});
});
```
Добавление класса `active` и его удаление со всех других пунктов меню поможет сохранить целостность логики фильтрации.