Слайдер из товаров
Превращает товары стандартного каталога в горизонтальный слайдер со стрелками на компьютере и свайпом на телефоне.
Что делает модификация
Превращает товары стандартного каталога в горизонтальный слайдер со стрелками на компьютере и свайпом на телефоне.
Требования
Требуется стандартная структура .t-store__card-list и .t-store__card. На мобильных работает штатная горизонтальная прокрутка. После фильтрации вновь загруженные товары также обрабатываются.
Настройте под свой сайт
| Настройка | Назначение |
|---|---|
| ID каталога, rec… | Выберите значение в интерфейсе личного кабинета. |
| HTTPS-иконка левой стрелки | Выберите значение в интерфейсе личного кабинета. |
| HTTPS-иконка правой стрелки | Выберите значение в интерфейсе личного кабинета. |
| Ширина стрелки, px | Параметр 16–100 |
| Высота стрелки, px | Параметр 16–100 |
| Ширина карточки, px | Параметр 150–700 |
Пошаговая установка
- Подготовьте каталогДобавьте блок серии ST300 с товарами из каталога. Убедитесь, что товары отображаются, затем скопируйте ID блока.
- Настройте слайдерУкажите ID, ширину карточек и размеры стрелок. Для своих стрелок вставьте прямые HTTPS-ссылки на изображения; без ссылок используются векторные стрелки.
- Установите кодДобавьте T123 ниже каталога и вставьте сгенерированный код. Не подключайте другой слайдер к тому же списку товаров.
- Получите код и проверьтеВ личном кабинете нажмите «Сгенерировать код». Скопируйте весь результат, вставьте по инструкции, опубликуйте страницу и проверьте публичный адрес на компьютере и телефоне.
Требуется стандартная структура .t-store__card-list и .t-store__card. На мобильных работает штатная горизонтальная прокрутка. После фильтрации вновь загруженные товары также обрабатываются.
Частые вопросы
Где менять параметры?
После покупки откройте модификацию в личном кабинете. Измените настройки и сгенерируйте код заново: ручное редактирование не требуется.
Почему в редакторе нет эффекта?
Проверяйте опубликованную страницу. Убедитесь, что нужные блоки, классы и ID соответствуют инструкции и на странице установлена только одна копия кода.
Что показывает живой пример?
Пример воспроизводит механику на демонстрационных элементах. На вашем сайте модификация работает с подготовленными элементами Tilda.