Куда идем?

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

Сегодня для пользователей 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:

vm fancybox3

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

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

Комментарии  
0
Спасибо! Да, не знал. Полезно.

Тут опечатка?
в: templates/ВАШ_ШАБЛОН/js/fancybox/jquery.fancybox-1.3.4.pack.js
2
Алексей, да, была опечатка. Спасибо, поправил.
1
Это нечто! Огромное спасибо)
0
Спасибо за статью. Очень пригодилось. Пара вопросов возникла. При обновлении версии jQuery 3+ нужно ли вносить правки во все файлы , которые содержат ссылку на скрипт jQuery ?
И второй вопрос - после обновления Fancybox перестало работать всплывающее окно при добавлении товара в корзину.
Не знаете, как лечить?
1
Юрий, по пунктам:

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

2) В статье есть правка для файла vmprices.js. Она помогает. Либо смотрите ошибку JS в консоли браузера (F12)
1
Например в ../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']);
и таких много на сайте
1
Юрий, ну в данном случае этот код как раз-таки отключает подключенные версии jQuery. Причем подключенные с удаленного источника. Здесь так однозначно не скажешь - нужно смотреть код расширения. Если они отключают в нем все библиотеки и подключают свою, то это может дать проблемы. Хотя если речь именно о com_onepage, то он должен работать только в корзине VM, а значит можно просто проверить страницу корзины на подключенные скрипты и наличие ошибок в консоли.
0
«
2) Копируем файл:
/components/com_virtuemart/assets/css/jquery.fancybox-1.3.4.css
в:
/templates/ВАШ_ШАБЛОН/js/jquery.fancybox-1.3.4.css
»

Вероятно, опечатка. Возможно, должно быть: /templates/ВАШ_ШАБЛОН/css/...
(не «js», а «css»)
1
Алексей, да, спасибо. Поправил.
1
Добрый день!
Не знаете, а для модуля можно переопределять JS файлы?
Например: /modules/mod_virtuemart_cart/assets/js/update_cart.js - этот файл хотелось бы переопределить в шаблоне,
чтобы каждый раз после обновления его не переписывать )
1
Алексей, по умолчанию для модуля можно переопределять файлы JS и CSS только если они находятся в папке media. Т.е. модуль изначально должен быть построен правильно в плане структуры. Но с другой стороны, мне кажется, что переопределение JS - не очень хорошая идея, т.к. модуль может измениться при обновлении, в том числе и логика, а это значил, что переопределенный JS-файл может автоматически создать ошибки в таком случае.
1

Цитирую Юрий:

Спасибо за статью. Очень пригодилось. Пара вопросов возникла. При обновлении версии jQuery 3+ нужно ли вносить правки во все файлы , которые содержат ссылку на скрипт jQuery ?
И второй вопрос - после обновления Fancybox перестало работать всплывающее окно при добавлении товара в корзину.
Не знаете, как лечить?


Не помогает правка - всплывающее окно при добавлении товара в корзину так и не появляется. к сожалению.
0
Подключил новый jquery 3.4.1 и сделал, как вы написали про подмену файлов, но получаю в итоге /index.php?option=com_virtuemart&nosef=1&view=cart&task=addJS&format=json&lang=ru&Itemid=141
500 (Internal Server Error)
Где копать?
1
Алексей, ошибка 500 - это ошибка, которую возвращает сервер по данному запросу. Т.е. вы можете просто скопировать этот URL и, добавив домен, ввести его в адресной строке. Вы, вероятно, получите такую же ошибку. Чтобы увидеть, в чем она заключается, нужно включить отображение ошибок PHP на сервере и/или в общих настройках Joomla.
0
В 4 версии VM не прокатила замена. Переопределения сработали, но, видимо из-за стандартного шаблона всплывающее окно не появляется, возможно вызов другой написан. Сейчас покопаю, может решу.
0
В общем, что то не так с шаблоном. При замене CSS на //cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css
окно fancybox перекрывает весь блок body и элементы на странице становятся не кликабельны.
0
Семен, я уже применял этот трюк на VM4. Там разница только в том, что изменился файл скрипта fancybox, который должен переопределяться в шаблон (в VM подгружается обновленная версия старой библиотеки, сюр, конечно...).

В VM 4 переопределенный файл должен быть:
/templates/ваш_шаблон/js/fancybox/jquery.fancybox-1.3.4.2.pack.js

Также проверяйте соответствие файла в html-коде страницы.

В остальном все работает хорошо.