
Есть в 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.
при нажатии кнопки "Продолжить покупки" в конце ссылки в адресной строке браузера добавляется символ #.
Критично ли это и если да, то как это исправить?
Этот вариант даже более правильный, чем вариант с #.
За точность не ручаюсь - сам не пробовал так делать, но суть такая: после загрузки страницы устанавливаем задержку в 2000 мсек, а затем закрываем окно.
это интуитивно понятно, но хотелось бы подробностей.
parent - вызывает родительский тег для ссылки "Продолжить покупки"?
часть jquery в этой строке что делает?
fancybox в этой строке ищет тег с классом fancybox или java-объект с именем fancybox?
http://fancybox.net/api
разница только в том, что мы заменяем $ на jquery, но это необходимо только в случае использования jQuery в режиме noConflict, когда у вас на сайте также подключена и Mootools.
Если вы хотите узнать как именно он работает, найдите его в коде скрипта fancybox и посмотрите.