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

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

Эта статья будет полезна если нужно вывести в карточке товара в модальном окне, например, таблицу размеров, видео или любую другую информацию о товаре. В 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 🙂

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

    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

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

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

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

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