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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

    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;
      }

      и после вывода блока с корзиной
      $product,'rowHeights'=>$rowsHeight[$row])); ?>

      добавить

        Владимир

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

          admin

          admin

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

    Виталий

    Здравствуйте, уважаемый администратор!
    Очень полезная статья, кратко и содержательно. Частенько вас читаю и учусь.
    Подскажите пожалуйста если по вашей методите в категорию выносить кнопки заказа дочерних товаров, то где править код и какие правки нужно внести?
    Хотелось что бы покупатели могли заказать из категории.

    kirill.psl

    Добрый день, появилась задача сделать вывод мультиварианта в категории, вот так - https://yadi.sk/i/JJbXvTmqBydEhw

    Работает на сайте - https://www.bethowen.ru/catalogue/dogs/korma/syxoi/

    как это сделать на virtuemart не могу придумать, если зайти в товар поменять вес то картинка и количество товара в наличии меняется (т.е. это разные товары, а не опции одного товара...)

      admin

      admin

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

        kirill.psl

        не понял, не дочерние товары?
        Как то можно сделать на дочерних товарах чтото подобное?

        kirill.psl

        тут еще момент, когда меняешь "вес", меняется цена + меняется описание (наличие товара в магазине, картинка) - это все же наверное дочерние товары.. хотя ссылка не меняется

          admin

          admin

          Посмотрел на сайт http://www.bethowen.ru повнимательнее, он не на virtuemart, а на битрикс.
          В virtuemart примерно тоже самое можно сделать как с дочерними, так и с настраиваемыми полями. Можно использовать настраиваемое поле с типом строка.

            kirill.psl

            "В virtuemart примерно тоже самое можно сделать как с дочерними"

            как это сделать именно с дочерними?
            Сделал как прописано в этой статье, в карточке товаров теперь есть 3 цены (родительский и 2 дочерних) и цены меняются аяксом, все классно, а вот как сделать тоже самое в категориях ?

            сделал в категории позицию,

            отправил туда мультивариант, в этом случае у меня вывелся вес в категориях на карточке, но при нажатии цена не меняется.. хотя аякс видно что отрабатывает (при нажатии загрузка появляется) - https://yadi.sk/i/RAS4zTzIxgGsNw

            сейчас пока сделал вывод 3х цен под каждым товаром- https://virtuemart.su/vyvod-dochernix-tovarov-v-kategorii-virtuemart/
            красоту не наводил вообще, пока согласовываю функционал -
            https://yadi.sk/i/s-4ps1qSHuFIWQ

            admin

            admin

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

            kirill.psl

            можете еще подсказать, как сделать так чтобы в категории показывались только родительские товары, без дочерних

            admin

            admin

            В Virtuemart > Настройки > Внешний вид отключите опцию Показывать дочерние товары без категорий в результатах поиска и модулях.

    kirill.psl

    возникла проблема, если у товара нет дочерних, цена вообще не показывается... как сделать так чтоб если дочерних нет, тогда показывалась цена?

    само условие проверки есть или нет дочерние товары не знаю как написать...
    вывод цены по умолчанию

      kirill.psl

      вопрос относится больше к теме - https://virtuemart.su/vyvod-dochernix-tovarov-v-kategorii-virtuemart/

      admin

      admin

      Не совсем понимаю вопрос. Если дочерних нет, то должна просто показываться цена самого товара.
      В модели продукта /administrator/components/com_virtuemart/models/product.php есть метод checkChildProducts.

    Мария

    Здравствуйте! У меня такая же проблема, как писали выше: выбрать надпись исчезла, а вот кнопки остались круглые и располагаются также вертикально.
    https://www.mineralic.ru/prajmer-dlya-kogi-lica/primer-sheer-cover-for-oily-skin-1-detail.html

      admin

      admin

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

      Судя по сайту, Вы не вносили не каких правок в шаблон, это поведение по умолчанию?
      Что нужно изменить?

    kirill.psl

    Подскажите, где настраивается количество знаков после запятой в цене и в весах? у меня при добавление веса к нему прилипает 4 нуля на конце... т.е. например 2.000 кг

    и также не могу понять, где русифицировать типы веса? КГ, Л и тп... у меня пишется kg...

      admin

      admin

      Посмотрите в этой статье.

    kirill.psl

    как сделать чтоб выводился вес, т.е. мера веса (КГ, Г..)
    почему то выводится только цифра...

      kirill.psl

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

      Поэтому хочется чтоб автоматом ставилось так, если у товара вес 2.5000 выводилось не 2.5000 а 2.5 кг.

        kirill.psl

        Чтобы убрать лишние 0000 в весе по умолчанию, нужно в базе на таблице _virtuemart_products поправить на строке product_weight тип - decimal(10,2) где 10 - символы до запятой, 2 после запятой.

        А вот как сделать чтобы в мультиварианте сохранялись выбранные значения так и не понял, после того как карточку товара пересохраняешь, значения веса становятся стандартными. Например добавлял 2 товара у одного указал вес "2 кг" у другого "10 кг" после того как пересохраняю карточку товара (допусти цена поменялась, веса в мультиварианте становятся "2.00" и "10.00"

        Может кто знает решение?

          admin

          admin

          Посмотрите в этойэтой статье.

            kirill.psl

            По видео - https://yadi.sk/i/nduGK45X0NG3Wg, на товаре в мультивариенте выбираю свои значение (05 кг, 1.5 кг и 12 кг) затем сохраню товар, потом делаю какое то изменение в карточке (допустим цену), жму сохранить, значения в мультиварианте (и на сайте соответственно меняются на 0.50 1.50 и 12.00) как сделать чтоб они сохранялись в мультиварианте такими какие я добавил изначально?

            После сохранения на сайте выглядит так : https://yadi.sk/i/_zfUvaSRrMdv_Q
            Либо возможен вариант дописать на сайте к 0.50 1.50 и 12.00 меру веса, как мне добавить к 0.50 - единицу веса чтоб получить например "0.50 кг"? Где это в коде прописать? в каком файле?

            admin

            admin

            Так происходит из-за того, что в таблице #_virtuemart_products для product_weight указан тип decimal.
            Можно заменить его на текстовый, но при обновлении все опять слетит и придется вносить правки заново для каждого товара.
            Думаю, что проще вместо веса использовать произвольный ярлык при настройке мутиварината.

            kirill.psl

            Под нижним сообщением нет кнопки "ответить".

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

            Как мне безболезненно перенести все данные из одного мультиварианта в другой?) у меня порядка 500 товаров уже) руками это сделать не быстро...

            admin

            admin

            Данные должны быть в таблице _virtuemart_product_customfields
            Думаю, что после создания нового поля с мультивариантом, достаточно будет заменить id в столбце virtuemart_custom_id,но нужно тестировать.

    kirill.psl

    И еще есть момент дурацкий, когда у товара не указан вес, почему-то пишется 0 кг...
    помогите плиз добавить проверку о том что у товара не указан вес :

      admin

      admin

      Добавьте в код проверку

        kirill.psl

        спасибо, помогло :

          admin

          admin

          Хорошо.

    Дмитрий

    Добрый день супер статья, сделал выбор как на алиекспрес квадратиками, подскажите как сделать так что бы когда товара нет а наличие квадратик был перечеркнутый, спасибо за статю еще раз) подскажите как это можно реализовать

      admin

      admin

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

      Готового решения у меня нет, но нужно править код в /components/com_virtuemart/sublayouts/customfield.php внутри

      Там получается вся информация по дочерним из базы и формируется список для вывода. Можно добавить дополнительный класс для тех, которых нет в наличии.

    Дмитрий

    Добрый день, подскажите как сделать так что бы при заходе на товар не было выбрано товара по умолчанию (сейчас при заходе автоматически выделяет первый мультивыбор длины и толщины и подсвечивает выбор) цель сделать что бы при входе на товар человек сам делал выбор параметров

      admin

      admin

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

      Вы делали как описано в статье?
      Пришлите скрин настроек настраиваемого поля с дочерними товарами.

        Дима

        Добрый вечер, спасибо большое разобрался, все сделал заново как у Вас и нашел ошибку. Спасибо

          admin

          admin

          Хорошо.

    Олег

    Здравствуйте, подскажите пожалуйста как сделать так что бы даже поля у которых нет допустимых вариантов показывались сразу, как на одном Китайском сайте)

      admin

      admin

      Здравствуйте!
      Готового решения, к сожалению, предложить не могу.
      Если найдете, пожалуйста, поделитесь.

    Юрий

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

      admin

      admin

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

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

        Юрий

        Use canonical link of the parent - эту ? Она активирована. И так пробовал и эдак.
        Не помогает.

        Юрий

        Мучал-мучал пробный сайт...
        Установил чистый VM, что только не перепробовал, и шаблон по умолчанию менял - ничего не помогает.
        Потом попробовал альяс изменить у товара. И пропали --выберите-- !!!
        Получается, что товар где-то кешируется чтоль?
        Кеш чистил вообще-то, даже кеширование отключил.
        Блин, чо делать то? Как на основном сайте сделать, чтоб все заработало ((

          admin

          admin

          Возможно кеширование было на стороне браузера.

            Юрий

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

    Aleksander

    Большое спасибо за Ваши статьи. Мультивариант уже сделал по предыдущей статье. Вообще супер. Вот теперь задался вопросом сделать дизайн типа как в статье. Вот только цвета хотелось бы выводит всё таки цветными квадратиками. А в идеале миниатюрами товара соответствующего цвета. Я не спец, но в голове крутиться типа Залить поле Бекграундом(само собой бекграундом будет являться картинка)...
    Выше Вы советовали сторонний плагин. Но тот не годится. Там не меняется цвет товара при выборе в карточке. Вот здесь всё отлично, кроме картинок цветом.
    Подумайте над обновлением. Думаю многие будут Вам безусловно благодарны.

      admin

      admin

      Возможно, будет полезна этаэта статья.

    Aleksander

    Немного запутался вот с этим - ""В шаблон карточки товара внутрь блока с классом productdetails-view добавим"".
    Добавил в файл - /templates/my_templates/html/com_virtuemart/productdetails/default.php
    Либо не в то место добавил, либо ещё что. Но после сохранения при переходе в карточку товара ошибка - 0 - syntax error, unexpected '<', expecting end of file.

      Aleksander

      Уже есть прогресс. Добавил сразу после строчки -
      ошибка пропала. Но вид ужасный. Единтсвенное что изменил, так это класс. В первой строчке Вашего кода стилей - .product-field-type-C .controls label.radio{... перед - label.radio добавил точку - .label.radio Тогда вид мультиварианта изменился как по умолчанию, без добавлений этих стилей и скрипта...

        Aleksander

        Долго мучался, но к сожалению ничего не получилось. Не сочтите за наглость, вы ведь помогаете людям разобраться. Можно я пришлю файл вывода карточки товара? Терзают меня смутные сомнения, что может у меня какие-то классы прописаны.

          admin

          admin

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

            Aleksander

            https://yadi.sk/d/FdKRF035l-y7Rg
            Как и было сказано редактировал этот файл
            \templates\my_template\html\com_virtuemart\productdetails\default.php
            Спасибо.
            Сайт редактирую на локалке. С этим тоже нюансы. То Опен Сервер, то пробую Центос+Веста. Но то уже другая тема...

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

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

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

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

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

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

×