Если вы используете и кастомизируете Virtuemart, и не знали о такой возможности, поверьте, эта статья окажется для вас крайне полезной.
Переопределение файлов скриптов и стилей Virtuemart

Друзья, давно не писал - было очень много работы.

Сегодня для пользователей 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/ВАШ_ШАБЛОН/js/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:

vm fancybox3

Единственное, чего я не знаю, так это с какой версии Virtuemart поддерживаются такие переопределения. Если у вас есть эта информация, буду благодарен, если поделитесь ей в комментариях. По крайней мере в Virtuemart 3.x переопределения скриптов и стилей работают точно.

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

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

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

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

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

Комментарии  

0 # Алексей 20.05.2019 02:21
Спасибо! Да, не знал. Полезно.

Тут опечатка?
в: templates/ВАШ_ШАБЛОН/js/fancybox/jquery.fancybox-1.3.4.pack.js
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 30.05.2019 06:32
Алексей, да, была опечатка. Спасибо, поправил.
Ответить | Ответить с цитатой | Цитировать
0 # Евгения 05.07.2019 03:02
Это нечто! Огромное спасибо)
Ответить | Ответить с цитатой | Цитировать
0 # Юрий 10.08.2019 15:02
Спасибо за статью. Очень пригодилось. Пара вопросов возникла. При обновлении версии jQuery 3+ нужно ли вносить правки во все файлы , которые содержат ссылку на скрипт jQuery ?
И второй вопрос - после обновления Fancybox перестало работать всплывающее окно при добавлении товара в корзину.
Не знаете, как лечить?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 11.08.2019 04:09
Юрий, по пунктам:

1) Нет, если вы обновляли путем замены содержимого оригинального файла, как описано в статье. Хотя не совсем понятен вопрос. Что такое "правка файлов, которые содержат ссылку на скрипт"? Что такое "ссылка на скрипт"?

2) В статье есть правка для файла vmprices.js. Она помогает. Либо смотрите ошибку JS в консоли браузера (F12)
Ответить | Ответить с цитатой | Цитировать
0 # Юрий 11.08.2019 09:04
Например в ../components/com_onepage/themes copy/jtouch_mobile в файле include.php
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']);
и таких много на сайте
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 12.08.2019 04:14
Юрий, ну в данном случае этот код как раз-таки отключает подключенные версии jQuery. Причем подключенные с удаленного источника. Здесь так однозначно не скажешь - нужно смотреть код расширения. Если они отключают в нем все библиотеки и подключают свою, то это может дать проблемы. Хотя если речь именно о com_onepage, то он должен работать только в корзине VM, а значит можно просто проверить страницу корзины на подключенные скрипты и наличие ошибок в консоли.
Ответить | Ответить с цитатой | Цитировать