Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как блок ST305 представить в виде таблицы с товарами из каталога в Tilda

Как блок ST305 представить в виде таблицы с товарами из каталога в Tilda

1
Создали блок ST305 и подгрузили товары из каталога
2
Включили отображение кнопок количества
3
У первой кнопки удалили надпись, а действие оставили - Подробнее о товаре
4
У второй кнопки действие - Добавить в корзину
5
Добавляем код в блок Другое - Т123
Библиотека для примера

<style>
.t-store__card__imgwrapper {display: none}
.t-store__card__sku {
    display: block !important;
    font-size: 12px;
}
.js-product.t-store__card {
    border-left: 1px solid #c9c9c9;
    border-right: 1px solid #c9c9c9;
    border-top: 1px solid #c9c9c9;
    box-sizing: border-box;
    position: relative;
    min-height: 70px;
    padding: 15px 10px 10px 20px;
}
.t-store__card__btns-wrapper.js-store-buttons-wrapper {
    position: absolute;
    right: 0;
}
a.t-store__card__btn_second {  margin: 0 !important}
a.js-store-prod-btn.t-store__card__btn.t-btn {  margin: 0 10px 0 0}
.js-store-grid-cont.t-store__grid-cont.t-container>div:last-child {border-bottom: 1px solid #c9c9c9}
.t-store__prod__quantity {margin: 0}
.t-store__card__btns-wrapper { flex-wrap: nowrap}
.t-store__card__btns-wrapper.js-store-buttons-wrapper.t-store__card__btns-wrapper--quantity {display: flex}
.t-store__prod__quantity {  margin-right: 7px}
.t-store__card::after {
    content: "Остаток: " attr(data-product-inv) " шт";
    font-family: 'Roboto',Arial,sans-serif;
    font-size: 12px;
    color: #000000;
    position: absolute;
    margin-top: 4px;
    width: 250px;
    top: 3px;
    right: 35px;
    text-align: right;
}
.js-store-grid-cont .t-store__card {
    display: flex !important;
    align-items: center;
    width: inherit !important;
    max-width: none;
    flex-direction: row !important;
    max-width: 1160px;
    margin-bottom: 0 !important;
}
.js-store-grid-cont .t-store__card__textwrapper {  height: auto !important}
.js-store-grid-cont .js-product.t-store__card a {
    display: flex;
    width: 100%;
}
.js-store-grid-cont  .t-store__card__imgwrapper {
    width: 70px;
    height: 70px;
    padding-bottom: 0px !important;
    margin-right: 40px;
}
.js-store-grid-cont .t-store__card__textwrapper {
    padding-top: 0px;
    width: 450px;
    position:relative;
    margin-top: 0;
}
.js-store-grid-cont .t-store__card__btns-wrapper {
    margin-right: 35px;
    margin-top: 0;
}
.js-store-grid-cont .js-store-price-wrapper {
    position: absolute;
    right: -380px;
    width: 200px;
    margin: 0;
    top:50%;
    transform: translateY(-50%);
}
.js-store-grid-cont .t-store__grid-separator {display: none}
.js-store-grid-cont .js-product.t-store__card:hover {
    background: #f9f9f9;
}
@media screen and (max-width:1200px){
.js-store-grid-cont .t-store__card__textwrapper { width: 340px}
}
@media screen and (max-width:980px){
.js-store-grid-cont .t-store__card__textwrapper {width: 70%}
.js-store-grid-cont .js-store-price-wrapper {
    position: static;
    margin-top: 16px;
}
.js-store-grid-cont .t-store__card__imgwrapper {margin-right: 25px}
.js-store-grid-cont .t-store__card__btns-wrapper {margin-right: 10px}
.t-store__card::after { right: 10px}
}
@media screen and (max-width:640px){
.t-store__card__btns-wrapper.js-store-buttons-wrapper.t-store__card__btns-wrapper--quantity {
    flex-direction: column;
}
.t-store__card__btns-wrapper--quantity .t-store__prod__quantity {
    margin-right: 0px!important;
    margin-bottom:10px;
}
.js-product.t-store__card {  min-height: 150px}
.js-store-grid-cont .t-store__card__textwrapper {  width: 240px}
}

@media screen and (max-width:400px){
.js-store-grid-cont .t-store__card__textwrapper {  width: 160px}
}
</style>
Made on
Tilda