Вопрос по html
Включаю сайдбар справа: "Читать далее" появляется, выключаю - пропадает, и текст обрезается. Что неправильно в коде?
category.description.html Описание категории
{if $category.description}
<div class="category-text-outer">
{$maxHeight = 55}
{if $theme_settings.max_height_category_desc}
{$maxHeight = $theme_settings.max_height_category_desc}
{/if}
<div class="category-text-wrap{if $theme_settings.is_read_more_description} js-category-text-wrap{/if}"{if $theme_settings.is_read_more_description} data-text-hide="[`Hide`]" data-text-more="[`Read more`]" data-max-height="{$maxHeight}" style="max-height: {$maxHeight}px"{/if} >
<div class="category-desc{if $theme_settings.is_read_more_description} js-category-text{/if}">{$category.description}</div>
</div>
</div>
{/if}
11 ответов
В коде всё правильно. Описание становится уже и соответственно выше, поэтому появляется "читать далее". Увеличить высоту блока описания $maxHeight = 55 надо. Этот параметр у вас задается в настройках вашей темы дизайна как "максимальная высота блока описания категории" или типа того, поэтому в настройках ищите и там он может быть не 55 как по-умолчанию в коде, а каким-то другим числом (около 100 точек, если прикинуть по скриншоту). Согласно коду настройки темы перекрывают дефолтное значение, поэтому приоритетная задача заключается в том, чтобы найти эту настройку.
Нашёл параметр в настройках темы: Высота не скрытого текста, px (значение именно 100, вы угадали).
Меняю на 55, просто обрезается больше текста, кнопка "Читать далее" не появляется. Меняю на 20 - вообще одна строчка остаётся, но без продолжения. При этом как только включаю правый сайдбар - появляется кнопка "Читать далее".
Господи Исусе. Надо сделать больше (выше), чем сейчас, т.к. уже не влезает. Т.е. 120-150 ... да хоть 300, но не меньше 100, т.к. 100 - это уже мало.
Ха!
Спасибо! Но я хотел как раз не увеличивать, так как в описании много текста, а сделать с кнопкой. Есть идеи?
Очевидно же что проблема в js коде, а не html. Ищите по файлам темы "textMore" или "text-more".
Я так подозреваю, оно ↓? что же тут меняем?
По-моему тут вообще никакой проблемы нет. ТС либо натыкается на кеш браузера при изменении параметров "налету", либо ожидает чего-то, что в данный код не заложено вообще.
Так вроде бы у вас уже с кнопкой и сделано, просто вас не устраивает высота 100 точек.
Или надо сделать так, чтобы описание было полностью скрыто и показывать его только по нажатию кнопки?
нужно показывать несколько строк и кнопку читать далее, как сейчас на левом скрине, только без правого сайдбара. Левый скрин показывает как надо, правый — как криво обрезается текст и не горит кнопка, если отключить сайдбар. Последний как бы кустарно решает проблему.
Зы. не, это не кэш, это у всех не появляется "читать далее"
Спасибо, что продолжаете пытаться помочь!)
Если честно, то разбираться с куском чужого JS и возможными конфликтами с правым сайдбаром дистанционно и вслепую неудобно и не очень-то эффективно.
Весь JS+CSS для реализации вашей задачи + само описание умещается вот в такой код (128 символов длина кода js + 4 стиля css, включая полупрозрачный градиент для красоты).
{literal} <script>$(document).ready(function () {$(".dalee").click(function(e) {e.preventDefault(); $(this).prev().toggleClass("desc-open")})});</script> <style> .desc {height: 50px; position: relative; overflow: hidden;} .desc-open {overflow: visible; height: auto;} .desc-open .gradient {display: none;} .gradient {background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%); position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;} </style> {/literal} <div class="desc">Опубликован релиз системы оптического распознавания текста Tesseract 4.0, поддерживающей распознавание символов UTF-8 и текстов на более чем 100 языках, включая русский, казахский, белорусский и украинский. Результат может сохраняться как открытым текстом, так и в форматах HTML (hOCR), PDF и TSV. Исходные тексты проекта распространяются под лицензий Apache 2.0. Изначально система была создана в 1985-1995 годы в лаборатории компании Hewlett Packard, в 2005 году код был открыт под лицензией Apache и в дальнейшем развивается при участии работников компании Google. Система включает в себя консольную утилиту и библиотеку libtesseract для встраивания функций распознавания текста в другие приложения. Из поддерживающих Tesseract сторонних GUI-интерфейсов можно отметить gImageReader, VietOCR и YAGF. <div class="gradient"></div> </div> <a href="" class="dalee">Скрыть / показать описание</a></div>Этот код можно вставить в любую HTML страницу, созданную в приложении Магазин или Сайт, а там уже доделывать под свои задачи.
Строку JS кода можно вставить прямо в шаблон category.html или в основной JS файл скриптов темы, а css разместить в основном файле стилей вашей темы, предварительно аккуратно сопоставив названия стилей с вашими.
Работоспособный пример смотреть по ссылке здесь (можно даже поиграться шириной окна браузера).
var categoryText = { readMore: function (){ var wrapOuter = $(".js-category-text-wrap"), maxHeight = wrapOuter.data("max-height"), wrap = $(".js-category-text"), linkMore = $('.js-category-text-more-wrap'); linkMore.remove(); wrapOuter.removeClass("close"); if (wrapOuter.length && maxHeight){ wrapOuter.css("max-height", maxHeight + "px"); } if(wrapOuter.length && wrap.length && wrapOuter.outerHeight() < wrap.outerHeight()){ var textMore = wrapOuter.data("text-more"), textHide = wrapOuter.data("text-hide"); wrapOuter.addClass("close"); wrapOuter.after("<div class='js-category-text-more-wrap category-text-more-wrap'><span class='js-category-text-more category-text-more sd-color link-half'>"+textMore+"</span></div>"); $('.js-category-text-more').on("click", function(){ var $this = $(this); if($this.hasClass("open")){ $this.removeClass("open"); wrapOuter.addClass("close"); $this.text(textMore); wrapOuter.animate({maxHeight: maxHeight}, 500); }else{ wrapOuter.animate({maxHeight: wrap.outerHeight() + "px"}, 500); $this.addClass("open"); wrapOuter.removeClass("close"); $this.text(textHide); } }); }else{ wrapOuter.removeAttr("style"); } } };