Вопрос по 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}

2 ответа

  • 1
    replicant 30 октября 2018 11:10 #

    В коде всё правильно. Описание становится уже и соответственно выше, поэтому появляется "читать далее". Увеличить высоту блока описания $maxHeight = 55 надо. Этот параметр у вас задается в настройках вашей темы дизайна как "максимальная высота блока описания категории" или типа того, поэтому в настройках ищите и там он может быть не 55 как по-умолчанию в коде, а каким-то другим числом (около 100 точек, если прикинуть по скриншоту). Согласно коду настройки темы перекрывают дефолтное значение, поэтому приоритетная задача заключается в том, чтобы найти эту настройку.

    • +1
      Иван Аганин Иван Аганин 30 октября 2018 11:41 #

      Нашёл параметр в настройках темы: Высота не скрытого текста, px (значение именно 100, вы угадали).

      Меняю на 55, просто обрезается больше текста, кнопка "Читать далее" не появляется. Меняю на 20 - вообще одна строчка остаётся, но без продолжения. При этом как только включаю правый сайдбар - появляется кнопка "Читать далее".

      • +1
        replicant replicant 30 октября 2018 11:58 #

        Господи Исусе. Надо сделать больше (выше), чем сейчас, т.к. уже не влезает. Т.е. 120-150 ... да хоть 300, но не меньше 100, т.к. 100 - это уже мало.

        • +1
          Иван Аганин Иван Аганин 30 октября 2018 12:14 #

          Ха!

          Спасибо! Но я хотел как раз не увеличивать, так как в описании много текста, а сделать с кнопкой. Есть идеи?

          • +1

            Очевидно же что проблема в js коде, а не html. Ищите по файлам темы "textMore" или "text-more".

            • +1
              Иван Аганин Иван Аганин 31 октября 2018 14:32 #

              Я так подозреваю, оно  ↓? что же тут меняем?

            • +1
              replicant replicant 31 октября 2018 23:35 #

              По-моему тут вообще никакой проблемы нет. ТС либо натыкается на кеш браузера при изменении параметров "налету", либо ожидает чего-то, что в данный код не заложено вообще.

          • +1
            replicant replicant 31 октября 2018 23:28 #

            Так вроде бы у вас уже с кнопкой и сделано, просто вас не устраивает высота 100 точек.

            Или надо сделать так, чтобы описание было полностью скрыто и показывать его только по нажатию кнопки?

            • +1
              Иван Аганин Иван Аганин 1 ноября 2018 01:31 #

              нужно показывать несколько строк и кнопку читать далее, как сейчас на левом скрине, только без правого сайдбара. Левый скрин показывает как надо, правый — как криво обрезается текст и не горит кнопка, если отключить сайдбар. Последний как бы кустарно решает проблему.

              Зы. не, это не кэш, это у всех не появляется "читать далее"

              Спасибо, что продолжаете пытаться помочь!)

              • +1
                replicant replicant 1 ноября 2018 11:58 #

                Если честно, то разбираться с куском чужого 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 разместить в основном файле стилей вашей темы, предварительно аккуратно сопоставив названия стилей с вашими.

                Работоспособный пример смотреть по ссылке здесь (можно даже поиграться шириной окна браузера).

  • 1
    Иван Аганин 31 октября 2018 14:32 #

    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");
            }
        }
    };

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите