В данном кейсе я расскажу о том, как просто закрывать всплывающее окно при клике по этой кнопке – без перезагрузок и перенаправлений.
Как в Virtuemart закрыть всплывающее окно «Товар добавлен в корзину» без перезагрузки страницы (Кейс #8).

Есть в 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.

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях.

Другие статьи серии

Комментарии  

0 # RE: Как в Virtuemart закрыть всплывающее окно «Товар добавлен в корзину» без перезагрузки страницы (Кейс #8).Борис 21.11.2016 08:04
Цитирую Wedal:
Борис, это просто метод скрипта всплывающего окна, который вызывает его закрытие.

это интуитивно понятно, но хотелось бы подробностей.
parent - вызывает родительский тег для ссылки "Продолжить покупки"?
часть jquery в этой строке что делает?
fancybox в этой строке ищет тег с классом fancybox или java-объект с именем fancybox?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Как в Virtuemart закрыть всплывающее окно «Товар добавлен в корзину» без перезагрузки страницы (Кейс #8).Wedal 22.11.2016 05:06
Борис, этот метод описан в документации к fancybox:
http://fancybox.net/api
разница только в том, что мы заменяем $ на jquery, но это необходимо только в случае использования jQuery в режиме noConflict, когда у вас на сайте также подключена и Mootools.
Если вы хотите узнать как именно он работает, найдите его в коде скрипта fancybox и посмотрите.
Ответить | Ответить с цитатой | Цитировать
0 # it's works!Arkanum 18.11.2016 10:32
Спасибо, работает :)
Ответить | Ответить с цитатой | Цитировать
0 # RE: Как в Virtuemart закрыть всплывающее окно «Товар добавлен в корзину» без перезагрузки страницы (Кейс #8).Александр 03.11.2016 09:19
После внесения изменений по кейсу #8,
при нажатии кнопки "Продолжить покупки" в конце ссылки в адресной строке браузера добавляется символ #.
Критично ли это и если да, то как это исправить?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Как в Virtuemart закрыть всплывающее окно «Товар добавлен в корзину» без перезагрузки страницы (Кейс #8).Wedal 05.11.2016 06:18
Александр, можете в коде удалить символ "#" из href, а сразу после parent.jQuery.facebox.close(); добавить return false;
Этот вариант даже более правильный, чем вариант с #.
Ответить | Ответить с цитатой | Цитировать
0 # Расшифровка кодаБорис 18.11.2016 10:53
Виталий, спасибо! Хорошо работает. В обучающих целях распишите, пожалуйста, в какой последовательности и что делает java-код parent.jQuery.fancybox.close();
Ответить | Ответить с цитатой | Цитировать
0 # RE: Расшифровка кодаWedal 21.11.2016 05:47
Борис, это просто метод скрипта всплывающего окна, который вызывает его закрытие.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Расшифровка кодаВячеслав 16.01.2017 21:27
Виталий, а не подскажете, как сделать, чтобы это окошко само закрывалось через NNN миллисекунд?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Расшифровка кодаWedal 17.01.2017 05:20
Вячеслав, в начале padded.php нужно добавить примерно такой скрипт:
Код:
jQuery(document).ready(function() {
setTimeout(function() {
jQuery.fancybox.close;
}, 2000);
});


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

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

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Вверх