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

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

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

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

    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

            Отлично.

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

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

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