Совместное использование Mootools и jQuery в Virtuemart

Недавно работая над версткой сайта интернет-магазина для Joomla, столкнулся с такой проблемой: при добавлении к шаблону jQuery переставал корректно работать Virtuemart. Загвоздка заключалось в том, что Virtuemart использует библиотеку Mootools.

Встала задача подружить эти две библиотеки, чтобы они работали совместно и не конфликтовали.

Для начала, за поиском решения я обратился к форуму поддержки Virtuemart. Подобные вопросы на нем поднимались, и не один раз, но у меня сложилось впечатление, что форум работает исключительно в одностороннем режиме. Много тем и вопросов, а ответов почти нет =(. Я быстро понял, что даже если решение моего вопроса там и присутствует, то найти его будет не просто.

Тогда я решил, подойти к проблемке с другой стороны, и отправился на официальный сайт jQuery. И Bingo!!! решение было найдено в течении нескольких минут.

В разделе документация есть подробнейшее описание как использовать jQuery с другими библиотеками. Проблема одновременного использования jQuery и Mootools заключается в том, что обе библиотеки используют $.Для решения необходимо использовать jQuery.noConflict().

После этого все работает отлично, ни каких багов при работе скриптов мною замечено не было =).

Как подключить jQuery к Virtuemart, инструкция:

1. Заходим по фтп в папку templates, там лежат файлы шаблонов Joomla, заходим в папку текущего шаблона и находим файл index.php, это основной файл шаблона Joomla, открываем его в любом текстовом редакторе.

2. В файле index.php нас интересует то что расположено внутри тега head, первым делом подключаем последнюю версию библиотеки jQuery,
я обычно использую cdn от гугла, выглядить будет примерно так:

1

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"><!--mce:0--></script>

3. Обычно в папке с шаблоном есть папка «js» в ней хранятся скрипты, в ней создаем новый файл, например script.js, в нем мы будем писать необходимый нам jquery код.

4. Подключаем это файл, сразу за местом где мы поключили jQuery, код будет примерно таким:

1

<script src="/templates/название_вашего_шаблона/js/script.js" type="text/javascript"><!--mce:1--></script>

5. В файле script.js добавляем такой код:

1
2
3
4

jQuery.noConflict();
     jQuery(document).ready(function(){
 
   });

6. Все теперь можем писать необходимый js код не боясь что Virtuemart будет ругаться)))
Например:

1

	jQuery("h1").remove();

удалит тег H1 на странице.