Инструкция
По умолчанию товары в блоке ST305N располагаются в несколько рядов. Эта модификация выводит реальные товары из каталога Tilda в одну горизонтальную ленту с прокруткой.
- Добавьте на страницу блок ST305N из категории «Магазин».
- В настройках блока подключите нужные товары или раздел каталога. Используйте именно товары из каталога — не изображения-примеры и не карточки, добавленные вручную.
- Откройте «Настройки» блока и укажите в поле «CSS-класс блока»: onerowproducts
- Добавьте на страницу HTML-блок T123 и вставьте в него код модификации.
- Опубликуйте страницу и проверьте результат на опубликованном сайте.
Дополнительно:
Ширина каждой карточки задаётся в коде значением 200px, а расстояние между карточками — значением 20px. При необходимости эти значения можно изменить.
На мобильных устройствах товары прокручиваются горизонтально пальцем. Названия, цены, изображения и другие данные загружаются из каталога и обновляются вместе с ним.
Если модификация не работает, проверьте, что класс onerowproducts указан именно у блока ST305N, а после внесения изменений страница была опубликована.
На мобильных устройствах товары прокручиваются горизонтально пальцем. Названия, цены, изображения и другие данные загружаются из каталога и обновляются вместе с ним.
Если модификация не работает, проверьте, что класс onerowproducts указан именно у блока ST305N, а после внесения изменений страница была опубликована.
<!-- Скрипт, который делает кликабельными пункты меню первого и второго уровня с выпадающими подпунктами на Tilda. Источник: bulgkate.ru -->
<style>
.uc-onerowproducts .js-store-grid-cont {
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
}
.uc-onerowproducts .js-store-grid-cont > div {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 20px;
}
.uc-onerowproducts .js-store-grid-cont .t-col, .uc-onerowproducts .js-store-grid-cont .t-store__card {
flex: 0 0 auto !important;
width: auto !important;
max-width: 200px; /* Или другой размер */ }
.uc-onerowproducts .js-store-grid-cont > div > .t-col,
.uc-onerowproducts .js-store-grid-cont > div > .t-store__grid-cont__col {
flex: 0 0 auto !important;
}
.uc-onerowproducts .t-store__grid-separator { display: none !important; }
.uc-onerowproducts .t-store__card__textwrapper { height: auto !important; }
.uc-onerowproducts .js-store-prod-sold-out { display: none !important; }
.uc-onerowproducts .t-form__errorbox-wrapper { background-color: #ff37a7 !important; }
.uc-onerowproducts .t-form__errorbox-wrapper .t-text_md { font-size: 16px !important; }
</style>
