Настройка bootstrap сетки для каталога товаров virtuemart 3

Опубликовано: 30 Май, 2016
Обновлено: 14 Июнь, 2016
Категория: Внешний вид, дизайн
Комментариев: 24

Цель статьи - показать, как можно заменить стандартную сетку virtuemart для каталога товаров адаптивной сеткой bootstrap. Это поможет гибко управлять количеством товара  в строке в зависимости от ширины экрана устройства.

Проблемы стандартной сетки virtuemart

В virtuemart 3, в отличие от второй версии, добавлена некоторая адаптивность для страницы каталога, но она еще далека от идеала.

Доступно 2 шаблона страницы категории: вывод товаров плиткой и списком. За внешний вид отвечают файлы /components/com_virtuemart/sublayouts/products.php и /components/com_virtuemart/sublayouts/products_horizon.php соответственно.

Выбрать шаблон можно в Virtuemart > Настройки > Шаблоны, опция Дополнительные макеты для товаров в категории. Там же можно настроить количество товаров в строке для вывода плиткой.

default

Если выбран стандартный шаблон, то товары выводятся плиткой.

plitka

При выборе шаблона product_horizon товары выводятся списком по одному в строке.

list

На первый взгляд все хорошо, но есть 2 проблемы, из-за которых стандартное решение лучше не использовать.

Однако, если товары на любых устройствах должны выводится в строку, то вполне можно использовать стандартный шаблон product_horizon, подкорректировав его под свой дизайн.

Главная проблема - при выводе товаров плиткой нарушается дизайн при изменении ширины экрана. Например, при просмотре сайта на планшете товары будут выводиться неравномерно.

planshet

Причина в том, что блоки с товарами выводятся не в одном родительском блоке, а дискретно в зависимости от настроек.

Например, в нашем примере верстка будет выглядеть так.

Т.е. в каждом родительском блоке выводится по 3 блока с товаром. Из-за этого возникают проблемы, когда на некоторых устройствах нужно выводить не по 3 или 1 товару, а по 2 товара в строке. Эта проблема влечет за собой множество других, из-за которых проще и надежнее полностью переделать всю сетку вывода товаров, чем править сетку, которая идет по умолчанию.

Вторая важная проблема - смена шаблона вывода товаров. В большинстве хороших магазинов покупатель может выбрать, как выводить товар в категории: плиткой или списком. При использовании стандартных шаблонов добавить кнопки смены шаблона проблематично. Этот функционал можно реализовать гораздо проще. При этом смена раскладки товаров будет происходить моментально без перезагрузки страницы. Подробнее про реализацию данного функционала в следующей статье.

О сетке bootstrap

Прежде чем переходить к правкам, несколько слов про bootstrap и его адаптивную сетку.

Bootstrap - самый популярный фреймворк для web-разработки. Он уже включен по умолчанию в joomla 3 и используется в большом количество шаблонов от сторонних разработчиков.

Чтобы понять подключен ли он в вашем шаблоне, откройте исходный код сайта и найдите файлы bootstrap.css и bootstrap.js (либо сжатые версии тех же файлов bootstrap.min.css и bootstrap.min.js)

Путь к файлам может отличаться.

Подробно про подключение bootstrap к любому шаблону, а также про работу с самим фреймворком можно прочитать в этой статье.

Нас в первую очередь интересует сетка (подробная статья).

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

Поскольку в bootstrap используется 12-ти колоночная сетка, ширину для блока с товаром нужно выбирать кратную 12 (12, 6, 4, 3, 2, 1). По 5 товаров в строке вывести не получится.

Подробнее про сетку на оф. сайте.

Интеграция сетки bootstrap в каталог virtuemart

Итак, задача состоит в том, чтобы привести разметку от такого вида

К такому

Т.е. все блоки с товарами должны выводиться в одном блоке с классом .row и им должны быть присвоены bootstrap классы, которые будут изменять их ширину в зависимости от ширины экрана устройства.

В приведенном примере код

означает, что на компьютерах(ширина >= 1200px и средних мониторах с шириной >=992px) будет выводиться по 4 товара в строке, на планшетах (ширина >=768px) по 3 товара, а на смартфонах (ширина <768px) по 1 товару в строке.

Кроме этого, необходимо сделать так, чтобы bootstap классы блоков менялись в зависимости от настроек количества товаров в строке в админ панели.

Все дальнейшие правки будут вноситься в файл /components/com_virtuemart/sublayouts/products.php, который отвечает за вид товаров в категории. Чтобы при обновлении все изменения сохранились, скопируйте данный файл в папку /templates/имя_шаблона/html/com_virtuemart/sublayouts/(если такой папки нет в вашем шаблоне, то создайте ее).

Для подстановки bootstrap классов замените

на

Переменная $cellwidth будет содержать различные классы, в зависимости от настроек количества товаров в строке в админ панели.

Для присвоения классов замените

на

Для вывода всех блоков с товарами в одном родительском блоке row замените

на

Если у вас уже измененный шаблон, то велика вероятность, что код будет выглядеть по другому. В этом случае можно скачать готовый файл.

После всех внесенных правок каталог  будет выглядеть так.

catalog

Чтобы добавить отступы между блоками с товаром, в css файл шаблона добавьте

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

finish

В следующей статье для данного шаблона добавим кнопки переключения вида каталога плитка/список.

P.S.

Если на сайте используется сторонний шаблон, то он может очень сильно отличаться от стандартного. В этом случае  проще всего в готовый файл  добавить код блока с классом spacer из старого шаблона.

24 комментария

    Алексей

    Спасибо большое!

      admin

      admin

      Рад, что статья оказалась полезной!

    Ivan

    После изменения шаблона как описано в статье, у меня стало стандартно 3 товара в строке не зависимо от того сколько задано товаров в админке, почему так получилось и как это исправить подскажите?

      admin

      admin

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

        IVAN

        https://megakontent(точка)ru/category/apple-store ссылка на сайт,
        Скачивал готовый шаблон вывода категорий со статьи

          admin

          admin

          Проверил еще раз готовый шаблон.
          На vm3 последней версии все работает. Настройка Товаров в строке (блок Настройки внешнего вида в Virtuemart > Настройки > Шаблоны).
          Какая версия vm у Вас?

            Ivan

            VirtueMart 3.0.12, изменяю поле "товаров в строке". Какая переменная получается отвечает за кол-во товаров в строке?

    IVAN

    Спасибо проблему решил, все оказалось банальней не куда. Было прописано кол-во товаров в категориях, что и перебивало основные настройки Virtuemart. Сейчас все работает. Я правильно понимаю что если я хочу чтобы к примеру выводилось 10 товаров в строке, то должен в коде создать дополнительно case?

      admin

      admin

      Да, можно создать дополнительное поле case, но нужно учитывать особенности сетки bootstrap. Она позволяет выводить только по 2, 3, 4, 6, 12 блоков в строке.

    Юлия

    Спасибо огромное, это как раз то, что я искала! Очень была удивлена, узнав что в Virtuemart допущена такая оплошность, теперь, благодаря вашей статье все красиво)

      admin

      admin

      Рад, что статья оказалась полезной.

    Вячеслав

    Спасибо за полезную статью.
    От "висящих" товаров действительно помогло избавиться!
    Но возникли другие проблемы:
    1. Заголовок некоторых товаров длиннее других и блок товара растягивается вытесняя другие. Получается где-то 4 товара в строке, где-то 3, где-то 2, а местами и один.
    Подскажите как это можно исправить? Мне приходит в голову только ограничить мах ширину блока товара, но как это сделать я не знаю - не силён в CSS.
    2. Товары в строке выравниваются по левому краю, можно как-то их распределить равномерно или хотя бы выровнять по центру?

      admin

      admin

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

    pasha526

    Добавил готовый файл себе
    все работает, одно но, у меня пропали обводки каждого товара []
    где и что проверить?

      admin

      admin

      Обводка, видимо, была привязана к какому-то классу из старой верстки. Добавьте ее заново в css. Если не получится, то пришлите ссылку на сайт.

        pasha526

        Добавил код
        [php].category-view .row .category .spacer, .featured-view .spacer, .latest-view .spacer, .topten-view .spacer, .related-products-view .spacer, .browse-view .row .product .spacer {
        border: 1px solid #EEEEEE;
        border-radius: 5px 5px 5px 5px;
        margin: 3px;
        min-height: 200px;
        padding-bottom: 10px;
        background: #f3f3f3;
        }
        [php]

    n73vi

    nikitinvi

    Скажите нужно ли эти настройки делать в шаблоне LikeShop или в нем уже все настроено?

      admin

      admin

      В LikeShop все уже настроено.

    Rt

    в обычной версии товары в 3 ряда да
    а в мобильной в один и почему?
    как сделать в мобильной в два или три ряда

      admin

      admin

      Замените

      для вывода в 2 ряда на

      для вывода в 3 ряда на

    Сергей

    Благодарю Вас за статью , но есть вопросик. После внесения изменений товары отображаются по одному в строку, при этом в настройках вирта и категории стоит 3 ... Пробовал ваш файл- результат тот же. Может подскажете куда копать? VirtueMart 3.0.12 / Заранее благодарю.

      admin

      admin

      Пришлите ссылку на сайт с файлом из статьи.

        Сергей

        Вот здесь тестовая версия сайта - http://drp.pp.ua/

          admin

          admin

          Посмотрел сайт, у Вас нужно править файл в папке с шаблоном /templates/имя_шаблона/html/com_virtuemart/.
          Также попробуйте в Virtuemart > Настройки > Шаблоны опцию Использовать VirtueMart CSS.

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

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

*
Для вставки кода заключите его в теги [php] [/php]
*