Куда идем?

Есть в Virtuemart мелочи, которые работают не так, как хотелось бы. Ярким примером такой мелочи является кнопка «Продолжить покупки», которая показывается во всплывающем окне при добавлении товара в корзину. В самой кнопке нет ничего плохого, но при клике по ней перезагружается страница и перенаправляет пользователя в категорию товаров. В данном кейсе я расскажу о том, как просто закрывать всплывающее окно при клике по этой кнопке – без перезагрузок и перенаправлений. Хаков нет. Кейс актуален для Virtuemart 2-3+.

На вступительном рисунке показаны окно и ссылка, о которых идет речь. При клике по ссылке «Продолжить покупки» мы попадаем в категорию, которой принадлежит товар. Чтобы при клике окно просто закрывалось, нужно выполнить несколько простых шагов, описанных ниже.

Шаг 1. Определяем тип скрипта всплывающего окна

На данный момент в Virturmart доступно два скрипта, генерирующих всплывающее окно «Товар добавлен в корзину»: Fancybox и Facebox. По умолчанию используется Fancybox. Дальнейшие шаги кейса зависят того, какой скрипт используется у вас.

Для определения типа используемого скрипта идем в Virtuemart –> Настройки –> Вкладка «Шаблоны» и смотрим опцию «Использовать Fancybox (рекомендуется)». Если в ней установлена галочка, то у вас используется Fancybox, если нет, то Facebox.

Шаг 2. Переопределяем макет всплывающего окна в используемый шаблон Joomla

Чтобы вносимые нами изменения не были потеряны при обновлении Virtuemart, макет всплывающего окна нужно переопределить в шаблон Joomla, который используется у вас на сайте.  Для этого копируем файл:

components/com_virtuemart/views/cart/tmpl/padded.php

в папку:

templates/ваш_шаблон/html/com_virtuemart/cart/

Если каких-то каталогов не будет, нужно создать их самостоятельно так, чтобы получился указанный выше путь.

Далее все изменения вносятся в скопированный файл, который находится теперь в папке с шаблоном Joomla.

Шаг 3. Вносим изменения в padded.php

Переопределенный нами файл padded.php – это макет всплывающего окна, которое появляется при добавлении товара в корзину.

Дальнейшие изменения зависят от скрипта, который мы определили на шаге 1.

Для FancyBox

Находим в файле строчку:

 

echo '<a class="continue_link" href="' . $this->continue_link . '" >' . vmText::_('COM_VIRTUEMART_CONTINUE_SHOPPING') . '</a>';

 

и заменяем на:

 

echo '<a class="continue_link" onclick="parent.jQuery.fancybox.close();" href="#"  >' . vmText::_('COM_VIRTUEMART_CONTINUE_SHOPPING') . '</a>';

 

Для Facebox

Находим в файле строчку:

 

echo '<a class="continue_link" href="' . $this->continue_link . '" >' . vmText::_('COM_VIRTUEMART_CONTINUE_SHOPPING') . '</a>';

 

и заменяем на:

 

echo '<a class="continue_link" onclick="parent.jQuery.facebox.close();" href="#"  >' . vmText::_('COM_VIRTUEMART_CONTINUE_SHOPPING') . '</a>';

 

После замены сохраняем изменения и проверяем сайт. Если вы все сделали правильно, то при клике на ссылку «Продолжить покупки» во всплывающем окне, это окно закроется так же, как если бы был нажат крестик в правом верхнем углу. На мой взгляд, это гораздо удобнее и прозрачнее для покупателей, нежели перенаправление в категорию товаров Virtuemart.

Об авторе
Wedal
(Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.
Основной профиль – создание сайтов и расширений на CMS Joomla.
Добавить комментарий

Комментарии  
0
После внесения изменений по кейсу #8,
при нажатии кнопки "Продолжить покупки" в конце ссылки в адресной строке браузера добавляется символ #.
Критично ли это и если да, то как это исправить?
0
Александр, можете в коде удалить символ "#" из href, а сразу после parent.jQuery.facebox.close(); добавить return false;
Этот вариант даже более правильный, чем вариант с #.
0
Виталий, спасибо! Хорошо работает. В обучающих целях распишите, пожалуйста, в какой последовательности и что делает java-код parent.jQuery.fancybox.close();
0
Борис, это просто метод скрипта всплывающего окна, который вызывает его закрытие.
0
Виталий, а не подскажете, как сделать, чтобы это окошко само закрывалось через NNN миллисекунд?
0
Вячеслав, в начале padded.php нужно добавить примерно такой скрипт:

Код:


jQuery(document).ready(function() {
setTimeout(function() {
jQuery.fancybox.close;
}, 2000);
});



За точность не ручаюсь - сам не пробовал так делать, но суть такая: после загрузки страницы устанавливаем задержку в 2000 мсек, а затем закрываем окно.
0
Спасибо, работает :)
0

Цитирую Wedal:

Борис, это просто метод скрипта всплывающего окна, который вызывает его закрытие.


это интуитивно понятно, но хотелось бы подробностей.
parent - вызывает родительский тег для ссылки "Продолжить покупки"?
часть jquery в этой строке что делает?
fancybox в этой строке ищет тег с классом fancybox или java-объект с именем fancybox?
0
Борис, этот метод описан в документации к fancybox:
http://fancybox.net/api
разница только в том, что мы заменяем $ на jquery, но это необходимо только в случае использования jQuery в режиме noConflict, когда у вас на сайте также подключена и Mootools.
Если вы хотите узнать как именно он работает, найдите его в коде скрипта fancybox и посмотрите.
0
По статье и ответам в комментариях все сделал и работает. Но, теперь появилось желание при покупке из карточки товара все же вернутся сразу в исходную категорию (дефолтный вариант), что логично, так как мы с одной стороны упростили процесс покупки, а с другой немного усложнили. Получится такую проверку добавить?