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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

    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 все работает правильно?

    Андрей

    Вроде все сделал как в статье, кнопки стали прямоугольные с выделением, "выбрать" скрыто, однако остались кружки от радио-кнопок и сами кнопки по прежнему стоят в одну колонку по вертикале
    В чем может быть проблема?

      admin

      admin

      Нужно еще немного дополнительно поправить стили.
      Пришлите ссылку на страницу с проблемой.

    Good-year

    а со "строка" так можно сделать?

      admin

      admin

      Не получится, только с мультивариантом.

    levasik

    подскажите пожалуйста в каких файлах то менять не могу понять

      admin

      admin

      Шаблон карточки товара находится в файле /components/com_virtuemart/views/productdetails/tmpl/default.php.
      После внесения правок нужно переопределить его в папке /templates/имя_шаблона/html/com_virtuemart/productdetails/, чтобы все правки сохранились при обновлении.

    artemiy

    Добрый день,

    Вопрос такого характера: у меня некоторые товары имеют по 3 опции. К примеру футболки одной модели есть:
    1. Мужские/женские
    2. Синие/красные
    3. Размеры (36, 38, 40...) - вариаций размеров достаточно длинный список

    Есть ли возможность первые две опции выводить в таком виде как указано в статье, а длинный список сделать selectом?

    И конечно же не у всех товаров по 3 опции. То есть, хотелось бы найти вариант при котором скрипт сам определял нужен на этой странице select или нет.

    Реализуемо?

      admin

      admin

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

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

    vskuchmak

    здравствуйте, не придумали еще, как цвет превратить в картинку? 🙂

      admin

      admin

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

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

    Good-year

    А как быть с мобильной версией, у меня радио-кнопки отображаются.

      admin

      admin

      Скорее всего, проблема в кеше браузера на смартфоне.
      Пришлите ссылку на страницу с проблемой.

    Good-year

    https://hippo-shop.ru/komplekt/40928-kostyum-tolstovka-bryuki-zheltyy-detail
    В одном браузере вообще не видно кнопок, в другом радио кнопки поверх названия ярлыка

      admin

      admin

      У меня виден один размер - 92.
      Попробуйте очистить кеш браузера на смартфоне или зайти с другого устройства.

      vskuchmak

      В хроме и ми браузере все корректно выглядит

    Владимир

    Здравствуйте. Запихнул скрипт в макет категории. Что бы можно было со страницы категории в корзину запихивать. С виду все получилось красиво.
    Но !!! при выборе свойств не у первого товара переключаются свойства у первого и цена у него меняется.

    Может подскажете. А то жалко отказываться от такой реализации. очень уж красиво получилось.

      admin

      admin

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

      У каждого блока с товаром должен быть класс product-container, у Вас он есть?

        Владимир

        Да. Вот ссылка - выкинул на пару дней на тестовый сервер
        http://quarzzby.vh113.hosterby.com/katalog

          admin

          admin

          Проверьте еще активирована ли опция Использовать ajax при просмотре в настройках настраиваемого поля Мультиварианта.

    Владимир

    Активирована. Если она не активирована то при выборе варианта происходит переход на страницу товара.

      admin

      admin

      Попробуйте в файле /templates/имя_шаблона/html/com_virtuemart/sublayouts/products.php после
      $currency = $viewData['currency'];

      нужно добавить
      $dynamic = false;
      if (vRequest::getInt('dynamic',false) and vRequest::getInt('virtuemart_product_id',false)) {
      $dynamic = true;
      }

      и после вывода блока с корзиной
      < ?php echo shopFunctionsF::renderVmSubLayout('addtocart',array('product'=>$product,'rowHeights'=>$rowsHeight[$row])); ?>

      добавить
      < ?php if($dynamic){ echo vmJsApi::writeJS(); } ?>

        Владимир

        К сожалению не помогло...

          admin

          admin

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

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

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

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

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

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

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

×