Размещение блока TX16N в карточку товара
Мощная модификация для расширения функционала карточек товаров в Tilda, позволяющая добавить подробные характеристики, инструкции или дополнительные материалы через удобный блок акардеон.
Инструкция по установке
Создайте и настройте блок магазина ST205
Создайте и настройте блок TX16N
Вставьте в код rec ID блока TX16N
1.
2.
3.
Сохраните и переопубликуйте страницу
5.
В коде в переменной fontsSize впишите размер шрифта для заголовка и для текста в блоке TX16N
4.
<!-- meloddy.design - Размещение блока TX16N в карточку товара -->
<script>
    // Объявляем переменные для размеров шрифтов и отступов
    const sizeTitle = '16px'; // Впишите размер заголовка для блока TX16N
    const sizeText = '14px'; // Впишите размер текста для блока TX16N
    const gapValue = '40px'; // Впишите размер отступа блока TX16N от текста
    const sourceContainer = document.querySelector('#rec1418124391'); // Замените #rec на айди вашего блока TX16N
    
    function moveAndStyleContent() {
        if (document.querySelector('.moved-content')) return;
    
        const targetContainer = document.querySelector('.t762__textwrapper');
    
        if (!sourceContainer || !targetContainer) return;
    
        const newContainer = document.createElement('div');
        newContainer.classList.add('moved-content');
    
        while (sourceContainer.firstChild) {
            newContainer.appendChild(sourceContainer.firstChild);
        }
    
        targetContainer.parentNode.appendChild(newContainer);
    
        const style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = `
        .t585__title {
            font-size: ${sizeTitle};
        }
        .t585__text {
            font-size: ${sizeText};
        }
        .t762__info {
            gap: ${gapValue}; // Используем переменную gapValue
        }
        .t-col {
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        .t-col_7 {
            max-width: 100% !important;
        }
        `;
        document.head.appendChild(style);
        
        const t762Info = document.querySelector('.t762__info');
        if (t762Info) {
            t762Info.style.display = 'flex';
            t762Info.style.flexDirection = 'column';
        }
    }
    
    document.addEventListener('DOMContentLoaded', moveAndStyleContent);
    window.addEventListener('tilda:ready', moveAndStyleContent);
    setTimeout(moveAndStyleContent, 1000);
    setInterval(() => {
        if (!document.querySelector('.moved-content')) {
            moveAndStyleContent();
        }
    }, 2000);
</script>
Копировать код
  
// Объявляем переменные для размеров шрифтов и отступов
const sizeTitle = '16px'; // Впишите размер заголовка для блока TX16N
const sizeText = '14px'; // Впишите размер текста для блока TX16N
const gapValue = '40px'; // Впишите размер отступа блока TX16N от текста
const sourceContainer = document.querySelector('#rec1418124391'); // Замените #rec на айди вашего блока TX16N
function moveAndStyleContent() {
if (document.querySelector('.moved-content')) return;
const targetContainer = document.querySelector('.t762__textwrapper');
if (!sourceContainer || !targetContainer) return;
const newContainer = document.createElement('div');
newContainer.classList.add('moved-content');
while (sourceContainer.firstChild) {
newContainer.appendChild(sourceContainer.firstChild);
}
targetContainer.parentNode.appendChild(newContainer);
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
.t585__title {
font-size: ${sizeTitle};
}
.t585__text {
font-size: ${sizeText};
}
.t762__info {
gap: ${gapValue}; // Используем переменную gapValue
}
.t-col {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.t-col_7 {
max-width: 100% !important;
}
`;
document.head.appendChild(style);
const t762Info = document.querySelector('.t762__info');
if (t762Info) {
t762Info.style.display = 'flex';
t762Info.style.flexDirection = 'column';
}
}
document.addEventListener('DOMContentLoaded', moveAndStyleContent);
window.addEventListener('tilda:ready', moveAndStyleContent);
setTimeout(moveAndStyleContent, 1000);
setInterval(() => {
if (!document.querySelector('.moved-content')) {
moveAndStyleContent();
}
}, 2000);
 
Код модификации
Код модификации
Копировать код
<!-- meloddy.design - Размещение блока TX16N в карточку товара -->
<script>
    // Объявляем переменные для размеров шрифтов и отступов
    const sizeTitle = '16px'; // Впишите размер заголовка для блока TX16N
    const sizeText = '14px'; // Впишите размер текста для блока TX16N
    const gapValue = '40px'; // Впишите размер отступа блока TX16N от текста
    const sourceContainer = document.querySelector('#rec1418124391'); // Замените #rec на айди вашего блока TX16N
    
    function moveAndStyleContent() {
        if (document.querySelector('.moved-content')) return;
    
        const targetContainer = document.querySelector('.t762__textwrapper');
    
        if (!sourceContainer || !targetContainer) return;
    
        const newContainer = document.createElement('div');
        newContainer.classList.add('moved-content');
    
        while (sourceContainer.firstChild) {
            newContainer.appendChild(sourceContainer.firstChild);
        }
    
        targetContainer.parentNode.appendChild(newContainer);
    
        const style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = `
        .t585__title {
            font-size: ${sizeTitle};
        }
        .t585__text {
            font-size: ${sizeText};
        }
        .t762__info {
            gap: ${gapValue}; // Используем переменную gapValue
        }
        .t-col {
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        .t-col_7 {
            max-width: 100% !important;
        }
        `;
        document.head.appendChild(style);
        
        const t762Info = document.querySelector('.t762__info');
        if (t762Info) {
            t762Info.style.display = 'flex';
            t762Info.style.flexDirection = 'column';
        }
    }
    
    document.addEventListener('DOMContentLoaded', moveAndStyleContent);
    window.addEventListener('tilda:ready', moveAndStyleContent);
    setTimeout(moveAndStyleContent, 1000);
    setInterval(() => {
        if (!document.querySelector('.moved-content')) {
            moveAndStyleContent();
        }
    }, 2000);
</script>
Пример работы модификации
Made on
Tilda