Эта статья будет полезна если нужно вывести в карточке товара в модальном окне, например, таблицу размеров, видео или любую другую информацию о товаре. В virtuemart для этих целей используются настраиваемые поля.
Есть несколько типов настраиваемых полей. В качестве примера для статьи возьмем наиболее универсальное поле с типом Редактор. Для полей с другим типом код также будет работать.
Итак, все что нужно - это создать новое настраиваемое поле в Virtuemart > Товары > Настраиваемые поля и в качестве позиции вывода указать modal.
Прикрепляем созданное поле к товару и размещаем в нем код для вставки видео, например, с youtube.
Для вывода нового поля в товаре в папку /components/com_virtuemart/sublayouts/ скопируйте файлы ниже.
В файле /components/com_virtuemart/views/productdetails/tmpl/default.php (либо в переопределенный /templates/имя_шаблона/html/com_virtuemart/productdetails/default.php) добавьте код для подключения скрипта модального окна.
|
1 |
echo shopFunctionsF::renderVmSubLayout('custom_modal',array('product'=>$this->product)); |
Этот код можно вставить в любое место карточки товара. Я, например, добавил его сразу после кода кнопки Купить.
|
1 |
echo shopFunctionsF::renderVmSubLayout('addtocart',array('product'=>$this->product)); |
После этого в товаре появится ссылка с заголовком нашего поля.
При клике по ссылке в модальном окне загрузится наш ролик с youtube.
Если ваш шаблон сделан без использования bootstrap, то можно выводить контент поля с помощью стандартного скрипта fancybox. Для этого в папку /components/com_virtuemart/sublayouts/ скопируйте эти файлы.
Результат будет почти аналогичен, за исключением заголовка у модального окна.
К одному товару можно прикреплять неограниченное количество полей с позицией modal.
Надеюсь, что статья поможет сэкономить время, которое можно будет потратить на просмотр роликов на youtube 🙂
34 комментария
7Hogik
Здравствуйте! Как сделать чтобы отображалось в виде кнопки? После проделанного у меня выводиться в виде текста.
Vladislav
Стили css добавь к нопке и всё
admin
Здравствуйте!
Если у Вас шаблон, купленный на virtuemart.su, то задайте вопрос на форуме, помогу со стилями.
Дмитрий
Добрый день, подскажите, пожалуйста, возможно-ли присвоить свой стиль самому всплывающему модальному окну настраиваемого поля, сейчас оно располагается во весь экран, если изменить стили (fancybox-wrap и fancybox-content), то меняются настройки всех модальных окон (отображение картинки товаров в карточке и товаров при добавлении в корзину), спасибо.
admin
Здравствуйте!
Если нужно только изменить размеры окна, то в скачанном файле custom_modal.php замените
на
Дмитрий
Все, получилось, спасибо огромное...
admin
Хорошо.
yuri
Добрый День! У меня над кнопкой КУПИТЬ просто текст ( echo shopFunctionsF::renderVmSubLayout('custom_modal',array('product'=>$this->product));)
Подскажите как исправить?
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
Для fancybox попробуйте заменить этими файлами.
Марина
Спасибо большое! Все заработало!
admin
Отлично.
Анри
Если выбрать тип поля "Изображение", то данный вариант работать не будет.
admin
Уточните задачу, нужно показывать картинку при клике по тексту или показывать полное изображение при клике на миниатюру? Если второе, то задайте вопрос в этой теме.
Дина
Скажите пожалуйста, а как сделать, чтобы видео было responsive (того же размера, что и экран) - у меня виде во вкладке, на телефоне только половина окошка с видео видна.
admin
Попробуйте добавить эти стили
Дмитрий
Добрый день, подскажите, пожалуйста, в чем может быть проблема?
В карточке товара не загружается фото, только текст, в категории все в порядке...
Использую fancybox, тип поля редактор.
Файлы загрузил эти
Июль 25, 2017 at 20:54
Для fancybox попробуйте заменить этими файлами.
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
Хорошо.
Дмитрий
Добрый день, подскажите, пожалуйста, нужно создать несколько полей с типом "Редактор" с выводом в модальном окне одного названия, при переопределении констант эти поля, именно в позиции "modal" не переопределяются (в других позициях переопределение происходит) возможно-ли это как-то поправить...
admin
Здравствуйте!
Нужно смотреть на сайте, пока непонятно в чем проблема. Пришлите доступ к админке, доступ к сайту по ftp и ссылку на страницу с проблемой на admin@virtuemart.su, что-нибудь придумаем.
big
Здравствуйте.
Подскажите правильное решение, заменить текст кнопкой
admin
Здравствуйте!
Уточните вопрос. Вы имеете ввиду, что для ссылки нужно добавить стили кнопки? Пришлите ссылку на сайт.
big
Здравствуйте.
Вызов модального окна вызывается кликом по тексту - Название настраиваемого поля.
Будет красиво и правильно, вместо текста, соответствующая стилю страницы кнопка.
http://uchilka.01sh.ru/ru/magazin-ru/sport/sport-kostyum-ru/ks05-ramon-miele-detail#
admin
Здравствуйте!
Не совсем понял вопрос. Нужно сделать ссылку в виде кнопки? Если да, то добавьте стили для класса a.custom-modal
Big
Спасибо за участие.
Всё отлично!
Big
Подскажи, как правильно сделать:
В модальном окне разное количество информации. И если информации больше чем
.modal-body {
max-height: 400px;
она просто не вмещается.
Если увеличить значение max-height тогда на мобильном скролится не модальное окно, а страница под ним.
admin
У Вас скрипт модального окна конфликтует с шаблоном. Не добавляется часть классов при открытии модального окна и есть лишние стили. Попробуйте выводить с помощью fancybox.