Вход • Регистрация

Выравнить товар в каталоге

  •
  • 06 февраля 2016 г.
  • Как выровнять товар в каталоге, когда заходишь то у меня товар выводится 4 колонки и 3 строчки. Но суть в том что у кого то картинка меньше у кого то описание меньше соответственно все начинает плавать вверх и вниз а это не удобно для глаз. Вот для примера нашел сайт http://www.vseinstrumenti.ru/rashodnie_materialy/dlya_ruchnogo_instrumenta/ вот там все ровненько и аккуратно, как сделать так? Именно все в одну линию.
    •
    • 06 февраля 2016 г.
    • стили надо поправить
      •
      • 06 февраля 2016 г.
      • Я бы с радостью но так и не понял где.
        • 06 февраля 2016 г. , редакция: 06 февраля 2016 г.
        • Цитата
          Денис (XiRuRg) 32 минуты назад
          Я бы с радостью но так и не понял где.
          Вы каким обозревателем пользуетесь?
          •
          • 07 февраля 2016 г.
          • Firefox изредка ие11
            •
            • 11 февраля 2016 г. , редакция: 11 февраля 2016 г.
            • За вывод сетки товаров отвечает шаблон shop.view.rows.php. Вёрстку смотрите там. Если есть трудности с поиском нужных стилей, пользуйтесь инструментами разработчика обозревателя. В Firefox жмёте F12, далее выбираете нужный элемент на странице и смотрите - какой стиль за его оформление отвечает (имя файла, его расположение и номер строки, где стиль находится).



              Делать это нужно с отключённым кэшем.



              Если кэш включён или выключен, но "висит" в обозревателе, ссылки на таблицы стилей будут такого вида.



              Абсолютно одинаковых карточек товара вы добьётесь только в том случае, если будете следить за контентом внутри них, либо используя свойство overflow:hidden На сайте, ссылку на который вы дали, описание товара максимум 3 строчки. Если попробовать его увеличить, текст последней строки будет скрыт за границами блока. Плавность скрытия обеспечивает изображение.



              Также можете задать блокам параметр min-height с каким-либо усреднённым значением. Примерную реализацию на дефолтном шаблоне диафана можете посмотреть тут.
              •
              • 20 февраля 2016 г.
              • В общем руки добрались попробовал как написали. В принципе вариант с min-height реален но нужно смотреть в глаз да глаз за те параметры которые выводятся, название у кого то может быть из 2 строчек а у кого то из 4, отсюда все пускается в пляс. Там где название в 1 строку получается слишком большой пробел.
              • 20 февраля 2016 г.
                1. min-height - для карточки товара, чтобы полупустые не становились короче остальных.
                2. Для блока описания, где может быть и 1 и 4 строки, надо ставить фиксированную высоту и overflow:hidden, чтобы если контента будет больше, чем может вместить блок, он уходил за границы блока, а не растягивал его.
                В диафане есть функция "укорачивания" длинных текстов. Она делает строку заданной длинны и в конец ставит многоточие. Можете вывод в карточке товара в неё обернуть и настроить длинну. На странице общие функции смотрите "short_text".
  •
  • 21 февраля 2016 г.
  • Я с помощью js равняю блоки по высоте. Если интересно могу опубликовать код.
    • 21 февраля 2016 г.
    • Дмитрий, если не сложно, опубликуйте. Информация может быть интересна и полезна не только автору темы, но и всем, кто будет искать ответ на этот вопрос в будущем.
      •
      • 22 февраля 2016 г.
      • Код
        function alignHeight(selector, cols) {
        var $blocks = $(selector);
        var rows = Math.ceil($blocks.length/cols);
        for(var i=0;i<rows;i++) {
        var maxHeight = 0;
        var $row = $blocks.slice(i*cols,i*cols+cols);
        $row.each(function() {
        if ($(this).height() > maxHeight) {
        maxHeight = $(this).height();
        }
        });
        $row.height(maxHeight);
        }
        }

        $(document).ready(function() {
        alignHeight(".class_block", 4);
        });


        Ну во общем то вот код. Вот тут:

        Код
        alignHeight(".class_block", 4);


        Задается класс блока (.class_block) высоту которых надо подгонять под одну высоту, а цифра после класса - это кол-во блоков в строке, таким образом каждая строка с блоками будет подгоняться под высоту наибольшего блока.
  •
  • 22 февраля 2016 г.
  • Я использую jquery matchHeight - (тут глянуть можно) для выравнивания высоты блоков.
    •
    • 22 февраля 2016 г.
    • Что то в упор не соображу
      Инициализация класса происходит в строке $(function() { $('.НАШ_КЛАСС').matchHeight(options); }), т.е. в скрипте должен быть шаблон этой строки? Аль чего не понял?
      •
      • 22 февраля 2016 г.
      • Нужно указать класс блоков, которые нужно по высоте одинаковыми сделать. Приведу пример, как сделать на дефолтном шаблоне Диафан:
        1. Смотрим какой класс у блоков с товарами - класс у них shop-item
        2. В шаблоне страницы пишем следующее:
        Код
        <script type="text/javascript" src="<insert name="path">js/jquery.matchHeight.js" charset="UTF-8"></script>
        <script>
        jQuery(document).ready(function ($) {
        $(function() {$('.shop-item').matchHeight();});
        });
        </script>


        Всё! ГОТОВО!
        На скрине видно что они выровнялись.
      •
      • 22 февраля 2016 г. , редакция: 22 февраля 2016 г.
      • А еще один способ на днях узнал с этим же скриптом:
        1. Подключаем скрипт
        Код
        <script type="text/javascript" src="<insert name="path">js/jquery.matchHeight.js" charset="UTF-8"></script>

        2. Идем во вьюху, в которой нужно выровнять блоки, и в блоке вставляем data-mh="имя_группы_блоков_которые_нужно_выровнять"
        например у товаров - во вьюхе товара ищем строку <div class="js_shop shop-item shop"> и вставляем туда data-mh="shop-item":
        Код
        <div class="js_shop shop-item shop" data-mh="shop-item">


        Мне этот способ больше понравился.
        •
        • 22 февраля 2016 г.
        • Вот второй способ сработал
          • 05 июля 2016 г. , редакция: 04 декабря 2016 г.
          • Сегодня использовал скрипт, рекомендованный выше. Ссылку даю на GitHub, так вернее. По поводу способов: всё работает.

            Второй способ плох тем, что надо помнить - в каких блоках и вьюхах что вставлялось. В первом же случае все блоки перечисляются в одном месте. Поскольку не у всех сработал первый вариант, публикую свой код для подключения:
            Код
            <script src="path_to_/jquery.min.js"></script>
            <script src="path_to_/jquery.matchHeight.js"></script>
            <script>
            $(function() {
            $('.item').matchHeight();
            });
            </script>
        •
        • 26 февраля 2016 г.
        • Попробовал данный способ, закинул скрипт прописал код не чего не меняется. Не первый вариант не второй. Че надо не пойму.
  •
  • 26 февраля 2016 г. , редакция: 26 февраля 2016 г.
  • Смотрите ошибки JS

    • 26 февраля 2016 г.
    • Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.min.js:1:0

      Только такое предупреждение и все.
      •
      • 26 февраля 2016 г.
      • Значит скрипт или не подгружается вообще или не видит с чем работать. Например, неправильно указан класс для блоков, которые нужно выравнивать.

Новости

  • Вышла очередная сборка DIAFAN.CMS 7.2.2
  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
Все новости

Форум

Перейти на форум