Сегодня я хочу рассказать Вам, как показывать страницу товара Virtuemart2 во всплывающем окне. Вдумайтесь, это очень удобно для пользователя. Удобнее, чем вновь и вновь заходить в карточку товара, а потом снова возвращаться к списку товаров. А так же мы снижаем нагрузку на сервер, экономим трафик. Интересно? Тогда рассказываю.
Просмотр товаров Virtuemart во всплывающем окне. Постановка задачи.
Перед тем, как что-то писать, мы должны определиться с задачей, которую мы должны решить.
Суть задачи:
Отображать карточку Virtuemart2 товара в fancybox. Карточка товара должна отображать только данные о товаре. Здесь мы не будем отображать шапку, футер и другие сайтбары.
Задача поставлена, теперь начнем ее воплащать в жизнь.
Прежде всего точно определимся с задачей, которую хотим решить. Она такова:
Шаг 1. Проверка подключения скриптов.
Перед тем, как приступим к основной задачи, мы должны подключить скрипт, похожий на lightbox, каким и является fancybox.
Обычно Virtuemart2 уже в сборе поставляется данных плагин, перед началом работ, проверьте, что он подключен
<script src=»/components/com_virtuemart/assets/js/fancybox/jquery.fancybox-1.3.4.pack.js» type=»text/javascript»></script> перед тегом
</head>
Шаг 2. Простановка ссылок.
Чтобы карточку товара открывать во всплывающем окне, мы должны добавить к ссылкам, которые ведут на карточку, атрибут class=»modal», а также добавим iframe Чтобы это сделать перейдем в папку components/com_virtuemart/views/category/tmpl, выбираем в ней наш шаблон default.php, который используется в магазине(посмотреть можно в настройках Virtuemart2). В шаблоне default находим строчку которая выводит ссылку на страницу товара и добавляем к ссылке атрибут class=»modal» и iframe. Вот как будет выглядеть на примере:
Кроме этого мы можем добавить такой же атрибут и к картинкам товаров на странице default, но все же советую показывать их просто в lightbox — окне. На страницу товара будет вести только заголовок.
После всех этих действий страница товара будет карточка товара открываться во всплывающем окне Обратите внимание, что после ссылки я добавил приписку &tmpl=component. Это означает, что будет показана не вся страница целиком, а только текущий компонент. На этом всё. Можно проверять. У меня это выглядит так:
Вот таким методом можно улучшить Ваш интернет-магазин на Virtuemart2
