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

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

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

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)

40 комментариев
    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

          Отлично.

    Алексей

    Спасибо за статью! Всё очень доходчиво объяснил.

    Но есть один момент...
    Если на странице используется AJAX (например фильтр товаров), то выбранный вид не запоминается.

    Ещё надо добавить обработчик событию:

    вместо:

    что-то типа этого:

    vskuchmak

    добрый день, файл с изменениями не выкладывали? (в начале статьи это с bs?)

      admin

      admin

      Здравствуйте!

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

    Алексей

    Здравствуйте. Все замечательно, отлично работает, спасибо. Но вот я бы хотел сделать так, чтобы начальное было list, а не grid. Если я меняю все так, как я считаю должно работать, то у меня не сохраняется в при перелистывании страниц))) Подскажите, пожалуйста, как надо сделать и что изменить, чтобы работало, сохранялось в памяти при переходе на страницы, но изначально было list?

      admin

      admin

      Здравствуйте!

      Код вывода кнопок замените на

      скрипт замените на

      в файле /components/com_virtuemart/sublayouts/products.php замените

      на

        Алексей

        Спасибо большое. Помогло. И отдельное спасибо за оперативность 😉

          admin

          admin

          Рад, что проблема решилась.

    Mdmax

    Добрый день. Подскажите, пожалуйста, как прописать класс, что бы при отображении плиткой краткое описание не выводилось, а только в списке?

      admin

      admin

      Здравствуйте!

      Нужно скрывать с помощью css. Чтобы точно ответить пришлите ссылку на сайт.

          admin

          admin

          Попробуйте эти стили

    Mdmax

    Прошу прощения, что немного наспамил. Просто при отправке у вас на сайте система антиспама мои сообщения с ссылкой воспринимала как спам.

    vladimirwk

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

      admin

      admin

      Нужно усложнять скрипт, добавляя дополнительную переменную, которая будет запоминать и изменять вид на главной странице. Пошагово не смогу сказать, нужно пробовать непосредственно на сайте. Обратитесь на фриланс или напишите на admin@virtuemart.su

    vladimirwk

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

    vladimirwk

    Проблема решилась, просто создал отдельные шаблоны (макет и подмакет) для главной страницы и выбрал их в настройках меню главной страницы.

      admin

      admin

      Хорошо.

    Алексей

    Спасибо за статью! Есть примечание:
    При таком подходе (при посещении следующих страниц с сохранением режима list) сначала страница загружается с режимом "grid" и только спустя некоторое время режим меняется средствами jQuery на "list". Происходит кратковременное "мигание", "дёргание" страницы.
    Может быть, всё-таки использовать cookie и сразу в PHP проверять куку и дописывать диву класс, Ваше мнение?
    Значение localStorage, насколько я понимаю, использовать в PHP не получится.

      admin

      admin

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

        Алексей

        Да, сделал. Делюсь.
        Основываясь на предложенный Вами принцип сделал даже не 2, а 3 варианта вывода: плитка, список, таблица.
        CSS приводить не буду, т.к. это довольно индивидуально, html-разметку тоже. Наверняка, большинство при желании с этим разберутся.

        Что касается PHP, в шаблоне категории где начинается :

        добавил

        (если есть кука product_view, то дописываем этому диву ещё один класс с названием режима, например, "list-view")

        В этом же файле ниже, где хотим вывести кнопки переключения режимов
        (я сделал внутри блока с выбором кол-ва товаров на странице):

        (добавил это прямо между vmPagination->getResultsCounter ();?> И vmPagination->getLimitBox ($this->category->limit_list_step); ?>)

        Java скрипт сделал смешанным: jQuery и нативный, чтобы не подключать дополнительную библиотеку для использования cookie через jQuery.
        И прописал скрипт не прямо в коде страницы, как предложено выше, а в своём кастомном файлике, подключаемом перед body:

        Работает чётко, никаких мерцаний, получилось, на мой взгляд, классно. Правда 3 вариант (табличный) ещё не до конца оформил, ну это мелочь, завтра доделаю.

          admin

          admin

          Спасибо, что поделились решением!

    Алексей

    Минут 20 писал комментарий со своим решением. В итоге нажал Отправить, но Ваш сайт счёт, что это "похоже на спам" и, судя по всему, комментарий не отправлен... Жаль. Писать тоже самое сначала пока что желания нет, может как-нибудь потом 🙂

      admin

      admin

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

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

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

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

С 15-18 июня admin в отпуске.

Ответы на все вопросы и ссылки на товары будут присланы 19 июня.

Спасибо за понимание и хороших выходных.

×