
Друзья, давно не писал - было очень много работы.
Сегодня для пользователей Virtuemart у меня есть нечто особенное :-).
В процессе работы над одним из проектов на Virtuemart мне потребовалось, очень потребовалось, изменить скрипт динамического обновления страницы при выборе дочернего товара. Этот скрипт входит в ядро Virtuemart, а значит хак неизбежен. Или нет? Оказывается, нет!
Я работаю с Virtuemart очень давно, но, должен признаться, только неделю назад узнал про возможность переопределения встроенных скриптов и стилей Virtuemart в шаблон Joomla.
Если вы используете и кастомизируете Virtuemart, и тоже не знали о такой возможности, поверьте, эта статья окажется для вас крайне полезной.
Содержание
Краткое напоминание о том, зачем нужны переопределения
Если вдруг кто-то не знает, или забыл, я хочу быстро напомнить, зачем вообще нужны переопределения.
Virtuemart состоит из набора файлов. Если вы хотите внести какие-либо изменения во внешний вид или функционал Virtuemart, и сделаете это в его файлах, то всё будет работать, но только до первого обновления. Как только вы обновите Virtuemart, все ваши изменения исчезнут, поскольку файлы, в которые вы вносили изменения, будут перезаписаны стандартными из обновленной версии.
Чтобы этого не происходило, нужны переопределения. Если вы скопируете файл с изменениями в ваш шаблон Joomla, разместив его в правильном каталоге, то Virtuemart будет в первую очередь искать этот файл там, а не в своих файлах. Таким образом, при обновлении изменения не будут потеряны. Это и есть переопределение.
Проблема в том, что далеко не все файлы могут быть переопределены. Обычно переопределяются только макеты страниц.
Что именно можно переопределить в шаблон?
Про то, что в шаблон переопределяются макеты Virtuemart, большинство из вас уже давно знает. Если нет, то рекомендую почитать мою статью по настройке шаблона Virtuemart. Так всё очень подробно расписано.
А вот чего многие из вас могут не знать, как не знал, в том числе, и я, так это то, что в шаблон могут быть переопределены любые стили и скрипты из каталога:
/components/com_virtuemart/assets
Что именно там содержится:
- Все CSS-файлы стилей стандартного оформления Virtuemart
- Все JS-файлы стандартного функционала Virtuemart
Если с CSS в принципе и так всё было неплохо, благодаря тому, что его стили можно переопределять в других CSS-файлах, то с JS без переопределений всё было довольно печально.
Вот лишь некоторые вещи, которые можно сделать используя переопределения JS-файлов Virtuemart:
- Обновить Fancybox, скрипт, который используется в Virtuemart для всплывающих окон (большие изображения, добавления в корзину, и др), до последней версии. По умолчанию Virtuemart использует Fancybox версии 1. Вы можете обновить его до версии 3. Разница между этими версиями, как между небом и землей. Используя Fancybox 3, вы получите из коробки отличную адаптивную галерею и множество других плюшек. Поверьте моему опыту - третья версия Fancybox прекрасна.
- Внести изменения в динамическое обновление цен при выборе опций товара. Иногда такой возможности очень не хватало.
- Внести изменения в динамическое обновление карточки товара при выборе дочерних товаров.
- Внести изменения в работу скрипта добавления товаров в корзину и модуля мини-корзины.
- И многое другое. Достаточно покопаться в папке скриптов Virtuemart, чтобы понять, какие возможности вам открываются.
Как переопределить стандартные скрипты и стили Virtuemart в шаблон Joomla
Хватит теории. Перейдем к практике! Файлы скриптов и стилей Virtuemart переопределяются в шаблон Joomla очень просто. Достаточно скопировать нужный файл из папки:
/components/com_virtuemart/assets/css/
в:
/templates/ВАШ_ШАБЛОН/css/
или
/components/com_virtuemart/assets/js/
в:
/templates/ВАШ_ШАБЛОН/js/
Если в исходной папке до файла ведут еще подкаталоги, их структуру тоже нужно перенести в шаблон. Ниже будет приведен реальный пример переопределения fancybox.
Пример обновления Fancybox для Virtuemart с использованием переопределений
Давайте разберем, как обновить старый добрый Fancybox в Virtuemart до последней версии.
1) Копируем файл:
/components/com_virtuemart/assets/js/fancybox/jquery.fancybox-1.3.4.pack.js
в:
/templates/ВАШ_ШАБЛОН/js/fancybox/jquery.fancybox-1.3.4.pack.js
и заменяем содержимое файла содержимым JS-файла Fancybox 3. Заметьте, мы именно ЗАМЕНЯЕМ содержимое, не изменяя название файла. Переопределение требует, чтобы название файла оставалось неизменным.
2) Копируем файл:
/components/com_virtuemart/assets/css/jquery.fancybox-1.3.4.css
в:
/templates/ВАШ_ШАБЛОН/css/jquery.fancybox-1.3.4.css
и заменяем содержимое файла содержимым CSS-файла Fancybox 3.
Переопределения созданы. Но чтобы Virtuemart корректно работал с fancybox 3, нужно внести пару небольших правок в файл vmprices.js. Поскольку он тоже находится в папке assets Virtuemart’а, мы должны переопределить в шаблон Joomla и его.
3) Копируем файл:
/components/com_virtuemart/assets/js/vmprices.js
в:
templates/ВАШ_ШАБЛОН/js/vmprices.js
и вносим в него 2 измениния.
Первое:
Находим и удаляем этот код:
if (usefancy) {
jQuery.fancybox.showActivity();
}
Второе:
Находим этот код:
if (usefancy) {
jQuery.fancybox({
"titlePosition": "inside",
"transitionIn": "fade",
"transitionOut": "fade",
"changeFade": "fast",
"type": "html",
"autoCenter": true,
"closeBtn": false,
"closeClick": false,
"content": txt
}
);
}
и заменяем его на:
if (usefancy) {
jQuery.fancybox.open(txt);
}
4) Еще один шаг - не забудьте проверить, что у вас используется более-менее свежая версия jQuery в шаблоне. Для Fancybox 3 предпочтительна jQuery 3+, но он будет работать и с jQuery 1.9.1+.
Вот и всё!
Теперь любуемся, как всплывающее окно добавления в корзину отображается с помощью Fancybox 3:
Единственное, чего я не знаю, так это с какой версии Virtuemart поддерживаются такие переопределения. Если у вас есть эта информация, буду благодарен, если поделитесь ей в комментариях. По крайней мере в Virtuemart 3.x переопределения скриптов и стилей работают точно.
Тут опечатка?
в: templates/ВАШ_ШАБЛОН/js/fancybox/jquery.fancybox-1.3.4.pack.js
И второй вопрос - после обновления Fancybox перестало работать всплывающее окно при добавлении товара в корзину.
Не знаете, как лечить?
1) Нет, если вы обновляли путем замены содержимого оригинального файла, как описано в статье. Хотя не совсем понятен вопрос. Что такое "правка файлов, которые содержат ссылку на скрипт"? Что такое "ссылка на скрипт"?
2) В статье есть правка для файла vmprices.js. Она помогает. Либо смотрите ошибку JS в консоли браузера (F12)
if ($jtouch > 0)
{
unset($document->_scripts['//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js']);
unset($document->_scripts['//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js']);
unset($document->_scripts['//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js']);
и таких много на сайте
2) Копируем файл:
/components/com_virtuemart/assets/css/jquery.fancybox-1.3.4.css
в:
/templates/ВАШ_ШАБЛОН/js/jquery.fancybox-1.3.4.css
»
Вероятно, опечатка. Возможно, должно быть: /templates/ВАШ_ШАБЛОН/css/...
(не «js», а «css»)
Не знаете, а для модуля можно переопределять JS файлы?
Например: /modules/mod_virtuemart_cart/assets/js/update_cart.js - этот файл хотелось бы переопределить в шаблоне,
чтобы каждый раз после обновления его не переписывать )
Не помогает правка - всплывающее окно при добавлении товара в корзину так и не появляется. к сожалению.
500 (Internal Server Error)
Где копать?
окно fancybox перекрывает весь блок body и элементы на странице становятся не кликабельны.
В VM 4 переопределенный файл должен быть:
/templates/ваш_шаблон/js/fancybox/jquery.fancybox-1.3.4.2.pack.js
Также проверяйте соответствие файла в html-коде страницы.
В остальном все работает хорошо.