Модификация мультиварианта в Virtuemart

Опубликовано: 15 Апрель, 2019
Обновлено: 16 Апрель, 2019
Категория: Настройка VirtueMart
Комментариев: 6

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

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

Допустим, у нас есть родитель и 3 дочерних товара.

При стандартном выводе в карточке товара мы получим выпадающий список с доступными вариантами.

А что если нужно вывести опции, например, как на aliexpress.

Это можно сделать, причем без использования хаков.

Для начала изменим настройки поля с мультивариантом.

Вид изменится.

Теперь немного магии css и javascript.

В файл стилей шаблона добавим

В шаблон карточки товара внутрь блока с классом productdetails-view добавим

Скрипт нужно добавлять именно в шаблон карточки товара, чтобы он отрабатывал после каждого ajax обновления после выбора опции.

В итоге опции станут выглядеть так

При выборе опции она будет выделена.

Этот код будет также работать если есть связь между опциями.

Для каждого варианта добавим еще цвет.

Стандартный вид будет такой.

До выбора объема памяти в поле с цветом будет пустой список.

Используя код из этой статьи, поля, у которых нет доступных вариантов, не будут показаны.

И только после выбора объема памяти мы увидим доступные цвета.

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

 

6 комментариев

    yaleks77

    Здравствуйте!
    У меня в настройках поля с мультивариантом нет "Использовать ajax при просмотре".
    Его надо как то туда добавить?

      admin

      admin

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

      Какая у Вас версия virtuemart?
      Пришлите скрин настроек.

        yaleks77

        Версия Joomla! 3.6.4 Stable [ Noether ] 21-October-2016 16:33 GM
        VirtueMart 3.0.16
        Скрин настроек: https://prnt.sc/ndt1ve

          admin

          admin

          Это старая версию, видимо эта настройка появилась позднее.
          Чтобы ajax отрабатывал активируйте опцию Использовать ajax для отображения товаров в Virtuemart > Настройки > Шаблоны.

    yaleks77

    Спасибо! Да, там стоит галочка на Use ajax for product content

      admin

      admin

      Хорошо, в итоге на vm 3.0.16 все работает правильно?

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

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

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

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

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

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

×