Вывод настраиваемого поля virtuemart 3 в модальном окне

Опубликовано: 27 Май, 2017
Категория: Настройка VirtueMart
Комментариев: 34

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

Есть несколько типов настраиваемых полей. В качестве примера для статьи возьмем наиболее универсальное поле с типом Редактор. Для полей с другим типом код также будет работать.

Итак, все что нужно - это создать новое настраиваемое поле в Virtuemart > Товары > Настраиваемые поля и в качестве позиции вывода указать modal.

 

Прикрепляем созданное поле к товару и размещаем в нем код для вставки видео, например, с youtube.

Для вывода нового поля в товаре в папку /components/com_virtuemart/sublayouts/ скопируйте файлы ниже.

Скачать

В файле /components/com_virtuemart/views/productdetails/tmpl/default.php (либо в переопределенный /templates/имя_шаблона/html/com_virtuemart/productdetails/default.php) добавьте код для подключения скрипта модального окна.

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

После этого в товаре появится ссылка с заголовком нашего поля.

При клике по ссылке в модальном окне загрузится наш ролик с youtube.

Если ваш шаблон сделан без использования bootstrap, то можно выводить контент поля с помощью стандартного скрипта fancybox. Для этого в папку /components/com_virtuemart/sublayouts/ скопируйте эти файлы.

Скачать

Результат будет почти аналогичен, за исключением заголовка у модального окна.

К одному товару можно прикреплять неограниченное количество полей с позицией modal.

Надеюсь, что статья поможет сэкономить время, которое можно будет потратить на просмотр роликов на youtube 🙂

34 комментария

    7Hogik

    Здравствуйте! Как сделать чтобы отображалось в виде кнопки? После проделанного у меня выводиться в виде текста.

      Vladislav

      Vladislav

      Стили css добавь к нопке и всё

      admin

      admin

      Здравствуйте!
      Если у Вас шаблон, купленный на virtuemart.su, то задайте вопрос на форуме, помогу со стилями.

    Дмитрий

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

      admin

      admin

      Здравствуйте!
      Если нужно только изменить размеры окна, то в скачанном файле custom_modal.php замените

      на

    Дмитрий

    Все, получилось, спасибо огромное...

      admin

      admin

      Хорошо.

    yuri

    Добрый День! У меня над кнопкой КУПИТЬ просто текст ( echo shopFunctionsF::renderVmSubLayout('custom_modal',array('product'=>$this->product));)
    Подскажите как исправить?

      admin

      admin

      Здравствуйте!
      Попробуйте этот код

      Если не поможет, то пришлите файл с кодом.

    Марина

    Добрый день! Большое спасибо за Вашу работу! Подскажите пожалуйста, как кнопку на видео вывести и на странице категорий? Спасибо

      admin

      admin

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

      Если используются модальные окна bootstrap, то замените файлы в папке /components/com_virtuemart/sublayouts/ этими файлами.
      В Virtuemart > Настройки > Внешний вид активируйте опцию Показывать произвольные поля товаров в представлении списков.
      В шаблоне категории товаров /components/com_virtuemart/sublayouts/products.php (либо в переопределенном файле /templates/имя_шаблона/html/com_virtuemart/sublayouts/products.php) добавьте код

        Марина

        Спасибо за помощь! Использую скрипт fancybox. Вывести видео в категориях получилось, но возникла другая проблема, в товарах и категориях, где мало товаров (три товара и два видео), все работает. А в категориях, где больше товаров и больше видео срабатывает не всегда, пишет: The requested content cannot be loaded. Please try again later. Подскажите, пожалуйста, в чем проблема и как ее решить?! Спасибо

          admin

          admin

          Для fancybox попробуйте заменить этими файлами.

            Марина

            Спасибо большое! Все заработало!

            admin

            admin

            Отлично.

    Анри

    Если выбрать тип поля "Изображение", то данный вариант работать не будет.

      admin

      admin

      Уточните задачу, нужно показывать картинку при клике по тексту или показывать полное изображение при клике на миниатюру? Если второе, то задайте вопрос в этой теме.

    Дина

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

      admin

      admin

      Попробуйте добавить эти стили

    Дмитрий

    Добрый день, подскажите, пожалуйста, в чем может быть проблема?
    В карточке товара не загружается фото, только текст, в категории все в порядке...
    Использую fancybox, тип поля редактор.
    Файлы загрузил эти
    Июль 25, 2017 at 20:54
    Для fancybox попробуйте заменить этими файлами.

      admin

      admin

      Здравствуйте!
      Пришлите ссылку на товар с проблемой.

    Дмитрий

    Добрый день, для вывода фото в карточке товара пришлось создать отдельную папку catalog и загрузить в нее фото, поскольку по пути к фото добавлялось
    https://site.ru/catalog/images/... а вот в категории, если товар в разных категориях, в некоторых все нормально к примеру здесь https://siesta.spb.ru/matrasy-aura.html
    а в другой не отображается https://siesta.spb.ru/matrasy-aura/komfort-seriya.html.
    Подскажите пжл как можно исправить? Спасибо...

      admin

      admin

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

      Перед адресом картинки не добавлен / из-за этого возникают проблемы.
      Добавьте для всех картинок в начале пути /

    Дмитрий

    Спасибо огромное, все получилось...

      admin

      admin

      Хорошо.

    Дмитрий

    Добрый день, подскажите, пожалуйста, нужно создать несколько полей с типом "Редактор" с выводом в модальном окне одного названия, при переопределении констант эти поля, именно в позиции "modal" не переопределяются (в других позициях переопределение происходит) возможно-ли это как-то поправить...

      admin

      admin

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

      Нужно смотреть на сайте, пока непонятно в чем проблема. Пришлите доступ к админке, доступ к сайту по ftp и ссылку на страницу с проблемой на admin@virtuemart.su, что-нибудь придумаем.

    big

    big

    Здравствуйте.
    Подскажите правильное решение, заменить текст кнопкой

      admin

      admin

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

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

    big

    big

    Здравствуйте.
    Вызов модального окна вызывается кликом по тексту - Название настраиваемого поля.
    Будет красиво и правильно, вместо текста, соответствующая стилю страницы кнопка.
    http://uchilka.01sh.ru/ru/magazin-ru/sport/sport-kostyum-ru/ks05-ramon-miele-detail#

      admin

      admin

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

      Не совсем понял вопрос. Нужно сделать ссылку в виде кнопки? Если да, то добавьте стили для класса a.custom-modal

    Big

    Спасибо за участие.
    Всё отлично!

    Big

    Подскажи, как правильно сделать:
    В модальном окне разное количество информации. И если информации больше чем
    .modal-body {
    max-height: 400px;
    она просто не вмещается.
    Если увеличить значение max-height тогда на мобильном скролится не модальное окно, а страница под ним.

      admin

      admin

      У Вас скрипт модального окна конфликтует с шаблоном. Не добавляется часть классов при открытии модального окна и есть лишние стили. Попробуйте выводить с помощью fancybox.

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

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

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

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

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

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

×