Кнопка «Подробнее» для длинного текста

Тильда постоянно что-то меняет, поэтому модификация может работать некорректно. Она поставляется как есть. Если будут вопросы, пишите в чат, а если появится необходимость в платной доработке, то оставьте заявку.

Хотите скрыть огромный текст на странице в кнопку «Подробнее»? С помощью этого скрипта, такое сделать будет очень легко. Пример работы скрипта в стандартном блоке можно посмотреть ниже, а как ведёт себя Zero-блок с раскрывающимся внутри текстом, видно тут.

Здесь будет много текста, чтобы после второй строки появилась кнопка «Подробнее». И не забывайте, что в Тильде можно сделать практически всё, что угодно! Для этого вы можете использовать сторонние скрипты, например с нашего сайта necodim.ru. Желаем успехов в веб-разработке, пусть ваши проекты, сделанные с помощью Tilda Publishing выглядят превосходно.

Чтобы воспользоваться скриптом, вставьте ID блока, class элемента. Как их найти читайте тут.

Помимо этого укажите, сколько строк должно быть видно (если в вашем тексте их больше, то кнопка появится, если столько же или меньше, то кнопки не будет), пропишите, что должно быть написано в кнопках «Подробнее» и «Скрыть», а также укажите скорость раскрытия блока.

Если вы используете Zero-блок, то не забудьте самостоятельно добавить класс текстовому элементу и указать его в настройках ниже. Внимание! Высота Zero-блока меняется вместе с высотой текстового элемента, поэтому другие элементы, находящиеся рядом с текстом, могут также скрыться. Если вам это не нужно, удалите из кода строки: 14−20, 26−36.

Если вы хотите таким образом скрывать текст описания в товарах, то необходимо воспользоваться этим скриптом (настройки делаются в одной и той же форме ниже, только вам не нужно будет настраивать первые 3 параметра — их можно оставить любыми). Его нужно разместить в футере всего сайта, скопировать ID блока, создать страницу футера для товара, вставить туда Alias блок, прописать в нем скопированный ID и в каталоге прикрепить футер к товарам (галочка «Открывать товар на отдельной странице» не обязательна). После этого опубликуйте все страницы.

Не забудьте самое главное правило: блок T123 со скриптом необходимо размещать под задействованными элементами или в самом конце страницы.

Пример работы модификации в Zero-блоке в самом низу страницы.

<!-- Кнопка «Подробнее» для длинного текста | https://necodim.ru/tilda/collapsed-text -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.2.1/readmore.js"></script>
<script>
$(document).ready(function() {
    let block = $('#rec123456789'),
        longText = block.find($('.t-text')),
        rowHeight = Math.round(parseInt(longText.css('line-height'),10)),
        collapsedHeight = rowHeight * 3,
        longTextClasses = longText.attr('class');
    
    longText.readmore({
        speed: 200,
        collapsedHeight: collapsedHeight,
        moreLink: '<a href="#read-more" class="' + longTextClasses + ' t-name read-more">Подробнее</a>',
        lessLink: '<a href="#read-less" class="' + longTextClasses + ' t-name read-less">Скрыть</a>'
    });
});
</script>

Скопировать код

Если по какой-то причине в Zero-блоке у вас кнопка «Подробнее» не скрывает текст, а помещается под него, проверьте настройки текстового блока. У него должен быть задан параметр line-height (высота строки). В Zero-блоке за это отвечает Spacing (первое значение).

Код для товаров

<!-- Кнопка «Подробнее» для длинного текста | https://necodim.ru/tilda/collapsed-text -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.2.1/readmore.js"></script>
<script>
const makeReadmore = (target) => {
    const rowHeight = Math.round(parseFloat(target.css('line-height').split('px')[0], 10));
        collapsedHeight = rowHeight * 3,
        longTextClasses = target.attr('class');
    target.readmore({
        speed: 200,
        collapsedHeight: collapsedHeight,
        moreLink: '<a href="#read-more" class="' + longTextClasses + ' t-name read-more">Подробнее</a>',
        lessLink: '<a href="#read-less" class="' + longTextClasses + ' t-name read-less">Скрыть</a>'
    });
}
$('.js-store-prod-btn').click(function() {
    if ($(this).attr('href').indexOf('tproduct') !== -1) {
        setTimeout(() => {
            let block = $('.t-store__product-popup'),
                longText = block.find($('.js-store-prod-all-text'));
            makeReadmore(longText);
        }, 500);
    }
});

if (window.location.href.indexOf('tproduct') !== -1) {
    setTimeout(() => {
        let block = $('.t-store__product-snippet'),
            longText = block.find($('.js-store-prod-all-text'));
        makeReadmore(longText);
    }, 500);
}
</script>

Скопировать код

Если вам необходимо добавить кнопку «Подробнее» к нескольким блокам с разными классами, вы всегда можете обратиться за помощью. Если хочется поэкспериментировать самостоятельно, то попробуйте продублировать блок T123 и заменить в нём ID и class элемента.

Пример работы модификации

Жмакни кнопку «Подробнее»

Для чего нужен NoCode? Вроде бы лёгкий вопрос, но на самом деле он таит в себе множество ответов. И все они будут правильные.
К примеру, взять Tilda. В 2017 году, когда тильдой пользовались единицы, никто даже и не думал называть это ноукодом. А всё потому, что такого слова в то время почти никто не знал. Но на самом же деле Тильда – это самый яркий образец ноукод-сервиса. Для тех, кто используют здесь блок T123, поправочка, для вас Тильда – это low-code :)
«Хорошо, с этим разобрались. Но не сайтами же едиными?» – спросит любознательный читатель. Верно! С помощью no-code (или low-code) можно собирать чат-ботов, приложения, базы данных, автоматизации и многое другое.
Если обобщить всё вышесказанное, то nocode-сервисы позволяют без знаний кода (в случае с low-code с базовыми знаниями) собрать работающий продукт, будь то сайт, приложение, чат-бот или что-то другое.

Это Zero-блок

Тут работает код, позволяющий скрывать огромное полотно текста, добавляя к нему кнопку «Подробнее». Но ключевая фишка в другом! При нажатии на кнопку, сам блок меняет высоту.