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

Оформить доступ с промокодом
100
Как представить характеристики товара в виде таблицы в Tilda
Looking For Construction Equipments On Rent?
Get the best rental service that is more cost effective, efficient and Safest

Как представить характеристики товара в виде таблицы в Tilda

1
Создали товары в каталоге и заполнили их характеристики
2
Добавили код в блок Другое - Т123 на страницу с товарным блоком и в footer для продуктов
Библиотека для примера
<script>
document.addEventListener("DOMContentLoaded", function(){
function createTable(){

    if(document.querySelectorAll('.js-store-prod-all-charcs').length){
        let pElem = document.querySelectorAll('.js-store-prod-all-charcs p');
        for (let i = 0; i < pElem.length; i++) {
            let row = pElem[i].innerText
            row = row.split(':');
            let newRow = `<div class="chr-title">${row[0]}</div><div class="chr-descr">${ $.trim(row[1]) }</div>`;
            pElem[i].innerHTML = newRow;
        };
        document.querySelector('.js-store-prod-all-charcs').classList.add('show-chrs');
    };
}; 
    

setTimeout(function () {
    if(document.querySelectorAll('.t-store__product-snippet').length)  createTable();
}, 1500);


document.addEventListener('click', function(e){
    let prodElem = e.target.closest('a[href*="/tproduct/"]');
    if (prodElem != null) { 
        setTimeout(function () {  createTable() }, 1000);
    };
});

});
</script>

<style>
.js-store-prod-all-charcs p {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0px;
}

.js-store-prod-all-charcs p div {
    border: 1px solid #cdcdcd;
    margin-top: -1px;
    padding: 5px;
}

.chr-descr {
    margin-left: -1px;
}    

.js-store-prod-all-charcs {
    display: none;
}

.js-store-prod-all-charcs.show-chrs {
    display: block;
}
.js-store-product[data-product-pack-m="0"] p.js-store-prod-weight  {
    display: none;
}
.js-store-product[data-product-pack-x="0"] p.js-store-prod-dimensions {
    display: none;
}
</style>
Made on
Tilda