Пример скрипта есть в демо-магазине @Dolce_Bot. Этот скрипт добавляет на карточки товаров специальную кнопочку «Подробнее», которая позволяет пользователю перейти на страницу с полным описанием выбранного товара.
Код добавляется таблицу стилей CSS (TGShop)
1. Код для шаблона "Стандартный"
.product__action:after { content: "Подробнее"; border: 2px solid var( --tgs-main-color); --btn-bg: var( --tgs-main-color); border-radius: 10px; --btn-color: var( --tgs-white); color: #000; --btn-control-height: 34px; --btn-control-width: 36px; --btn-font-size: var( --tgs-main-font-size,12px); padding: 6px 9px; width: 100%; margin: auto; margin-top: 5px; } .product__action { display: flex; flex-direction: column; } .add-to-cart.add { width: 100%; } .add-to-cart.done { width: 100%; } .wait { width: 100%; } .products .add-to-cart__counter { flex: 1; }
2. Код для шаблона "Neon Style":
.product__action:after { content: "Подробнее"; border: 2px solid var(--tgs-main-color); --btn-bg: var(-tgs-main-color); --btn-control-height: 34px; --btn-control-width: 36px; --btn-font-size: var( --tgs-main-font-size,12px); padding: 13px 10px; width: 100%; margin: auto; margin-top: 6px; border-radius: var(--tgs-main-radius); height: 47px; color: var( --tgs-main-color); } .product__action { display: flex; flex-direction: column; } .product__action { height: auto!important; } .add-to-cart { width: 100%!important; min-width: 115px; }