Решил реализовать эту фитчу в V 2.3.5
В products.tpl блок вывода описания оформил следующим способом:
Код: Выделить всё
<div class="boxed boxed--big">
<div class="">
<div class="fn_readmore">
<div class="block__description">
{$category->description}
</div>
</div>
</div>
</div>
В style.css добавил следующие стили:
Код: Выделить всё
.fn_readmore + [data-readmore-toggle],
.fn_readmore[data-readmore] {
display: inline-block;
width: auto;
position: relative;
}
.fn_readmore[aria-expanded="false"]::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 4em;
background: -moz-linear-gradient(top,#fff0 0,#fff 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,0)),color-stop(100%,#fff));
background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);
background: -o-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);
background: -ms-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);
background: linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);
}
.fn_readmore[data-readmore] {
transition: height 500ms;
overflow: hidden;
max-height: 215px;
display: block;
width: 100%;
}
.fn_readmore + [data-readmore-toggle]{
margin-top: 13px;
text-decoration: none;
transition: all 0.3s;
}
.fn_readmore + [data-readmore-toggle]:hover,
.fn_readmore + [data-readmore-toggle]:focus{
color: var(--okay-button-text);
text-decoration: none;
}
.fn_readmore + [data-readmore-toggle] span{
color: var(--okay-button-color);
background: transparent;
border-color: var(--okay-button-color);
border: 1px solid;
border-radius: 3px;
padding: 1px 30px;
font-size: 18px;
line-height: 1;
display: inline-block;
transition: all .3s;
font-weight: 500;
}
.fn_readmore + [data-readmore-toggle]:hover span{
color: #c5530c;
background:#c5530c;
Также в 4-й версии нашел такой кусок кода, но пока не понял как его подключить.
Код: Выделить всё
if($('.fn_readmore').length){$('.fn_readmore').readmore({collapsedHeight:215,lessLink:'<a href="#"><span>-</span></a>',moreLink:'<a href="#"><span>+</span></a>',afterToggle:function(trigger,element,expanded){if(!expanded){$('html, body').animate({scrollTop:element.offset().top-100},{duration:300})}}})}
Подскажите пожалуйста куда и как его вставить в версии 2,3,5