WP-prog

Как скрыть часть текста в PrestaShop

В этой статье описывается один из простых способов скрытия текста (добавления так называемого ReadMore).

Итак, допустим у нас на странице есть большой текст и нам нужно, чтобы показывался первый абзац, а остальное содержимое открывалось при нажатии кнопки и также пряталось.

Для того, чтобы разместить такой текст на главной странице, нам понадобится 2 файла: readmore.js и еще 1 файл с js-скриптом, код которого приведен ниже:

JQuery-код
				
					$(function() {
    $('#demo').readmore({
        moreLink: '<a href="#" id="demo" style="color: red;">Read More</a>',
        lessLink: '<a href="#"id="demo" style="color: red;">Less</a>',
        collapsedHeight: 70,
        speed: 200,
        afterToggle: function(trigger, element, expanded) {
            if (!expanded) { // The "Close" link was clicked
                $('html, body').animate({ scrollTop: $(element).offset().top }, { duration: 100 });
            }
        }
    });
});
				
			

Копируем оба файла в вашу тему: /httpdocs/themes/ваша_тема/assets/js.

Затем весь ваш текст помещаем в такую конструкцию:

				
					<div class="demo">
<section id="demo">
    Ваш текст
</section>
</div>
				
			
Если у Вас есть какие-либо вопросы, оставьте свой комментарий:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *