Переключение плитка/список для каталога virtuemart 3

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

Большинство магазинов позволяют пользователям выбирать вид каталога товаров на странице категории. Выглядит это примерно так.

view

Цель статьи - добавить данный функционал в virtuemart 3.

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

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

Я постараюсь изложить алгоритм, который поможет сделать то же самое для любого шаблона virtuemart.

Кроме этого, существует несколько способов смены вида каталога:

  1. На странице одновременно выводятся два блока со всеми товарами. В каждом блоке своя разметка(плиткой и списком). При нажатии на кнопки происходит скрытие одного блока и показ другого.
  2. Товары выводятся в одном блоке. При нажатии на кнопки происходит добавление класса родительскому блоку с товарами, который меняет внешний вид.

В статье будет использован второй вариант. Он не утяжеляет страницу, хотя и накладывает некоторые ограничения на верстку.

Так же в статье все правки будут вноситься в стандартные файлы virtuemart, находящиеся в папке /components/com_virtuemart/views/. На вашем сайте данные файлы могут быть переопределены в шаблоне. В этом случае их нужно править в папке /templates/имя_шаблона/html/com_virtuemart/.

Добавление кнопок переключения

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

В файле /components/com_virtuemart/views/category/tmpl/default.php сразу после

Вставим

Для иконок я использовал иконочные шрифты Font Awesome, но можно вставить просто картинки.

Для стилизации добавим немного css

Получим следующее

step1

Настройка разметки каталога

Это самый важный этап. Нужно настроить разметку так, чтобы при добавлении класса родительскому блоку с товарами можно было через css стили легко изменить внешний вид каталога.

Я предлагаю следующую схему

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

Итак, в файле /components/com_virtuemart/sublayouts/products.php заменим все содержимое внутри тега spacer

На

В результате разметка каждого товара станет следующей

step2

Добавление стилей для вывода товаров списком

При нажатии кнопок у родительского блока с классом .row будут переключаться классы .list-view и .grid-view.

Добавим в css файл шаблона стили, изменяющие вид каталога при наличии класса .list-view

В результате при наличии класса .list-view у блока .row каталог будет иметь следующий вид.

step3

По умолчанию родительский блок должен иметь класс .grid-view. Для этого в файле /components/com_virtuemart/sublayouts/products.php заменим

на

Настройка переключения кнопок

Чтобы при нажатии на кнопки переключался вид, в конец файла /components/com_virtuemart/views/category/tmpl/default.php добавим следующий скрипт

Теперь при нажатии кнопок вид каталога должен меняться.

Запоминаем выбранный вид

Финальный этап. Запоминаем выбранный вид каталога, чтобы он автоматически активировался при переходе в другую категорию или при заходе на сайт через несколько дней.

Можно использовать 2 способа:

  • хранить данные в куках
  • использовать локальное хранилище localStorage

Второй вариант более прост, поэтому используем его. Почитать про работу с localStorage можно в этой статье.

Заменим скрипт из предыдущего этапа на

Конечный результат будет выглядеть так

GIF

Пример реализации можно также посмотреть на демо-сайте шаблона AirShop.

Итог

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

Если с самостоятельной реализацией возникли трудности или нет времени разбираться с кодом, то вы можете заказать установку (почта для связи: admin@virtuemart.su)

17 комментариев
    Lagoon

    Lagoon

    Спасибо.
    Сейчас делаю и у появился вопрос.
    у вас в статье не указано в каком файле поменять
    -------По умолчанию родительский блок должен иметь класс .grid-view. Для этого в файле заменим-----

    без этого ничего не получается

      admin

      admin

      Править нужно в файле /components/com_virtuemart/sublayouts/products.php, добавил в статью.

    Staffbsa

    То же Интересно прилепить кнопку

    Это из предыдущего описания

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

    Lagoon

    Lagoon

    В файле таких 2 дива - какой из них менять?

      Lagoon

      Lagoon

      spacer в файле 2 блока

        admin

        admin

        Править нужно второй блок.
        Для шаблона LikeShop вышло обновление, в котором уже реализовано переключение.

    Валерий

    А первый способ вы описывать не будите?=)

      admin

      admin

      Необходимо одновременно вывести на странице товары плиткой и списком. При нажатии на кнопки смены вида вместо смены классов(как реализованно в статье) нужно просто скрывать блоки. Код для этого несложный. Вы можете самостоятельно вывести два вида товаров,а с javascript я помогу.

    Иван

    капец ну как можно писать статьи, с пользой для поисковиков, думаю желающих мульйон посетить эту страницу, а толку 0, или автор надеется что к нему все писать начнут в личку. Где расписаны у вас расписаны классы class="fa fa-th-large" и т.д. он даже кнопки не выводит, как переключатся?

      Иван

      у меня есть шаблон bootstrap, делаю изменения в двух файла (/components/com_virtuemart/views/category/tmpl/default.php и /components/com_virtuemart/sublayouts/products.php и сss) ничего не происходит, даже переключение не работает

        Иван

        ссори у меня в бутрапе ксс файл в котором были правки небыл прописан. всё работает

    Иван

    Работает отлично. Спасибо. Про Font Awesome я не знал. Подключил. Работает отлично.

      admin

      admin

      Рад, что все получилось.

    pasha526

    Вставим

    после этого у меня появилась только надпись Вид:
    файл заготовку скачивал и заменял

      admin

      admin

      В примере для иконок используются иконочный шрифт http://fontawesome.io/icons/
      Установите его на сайт либо замените в

      теги i на картинки

        pasha526

        установил на себе на сайт, появились
        благодарю

          admin

          admin

          Отлично.

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

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

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