Obecnie pracujemy nad nowym sklepem internetowym dla firmy G&A Aranżacja Okien. Sklep oparty jest na systemie Magento. Na (nie)szczęście to nasz pierwszy kontakt z tym system, przewiduję więc kilka orzechów do “zmiażdżenia”. Jednym z pierwszych okazała się integracja biblioteki jQuery.
Magento domyślnie wykorzystuje Prototype, która jest mnie osobiście kompletnie obcą biblioteką. A że nie ja pierwszy mam z tym problem, z pomocą przychodzi internet i niezastąpione narzędzie do rozwiązywania problemów o swojsko brzmiącej nazwie Google. Poniżej to co udało się odszukać, sprawdzić i wykorzystać.

Plik z biblioteką jQuery umieszczamy w katalogu:

    magentoroot/js/nazwa_szablonu/

W przypadku indywidualnego szablonu `nazwa_szablonu` to nazwa Twojej templatki. Możesz też utworzyć nowy folder i w nim umieszczać pliki JavaScript

Dodajemy jQuery do części head szablonu.

Możemy to zrobić edytując plik page.xml lub dodając jQuery bezpośrednio do kodu szablonu, np. w pliku head.phtml.
Otwieramy plik:

magentoroot/app/design/frontend/default/nazwa_szablonu/layout/page.xml

lub jeżeli korzystasz z domyślnego szablonu Magento, będzie to:

magentoroot/app/design/frontend/base/default/layout/page.xml

W sekcji dodajemy tag z plikiem jQuery:

<block type="page/html_head" name="head" as="page/2columns-left.phtml">
  <!--cała masa wpisów dotyczących plików prototype i scriptaculous, na CSS kończąc -->
  <!-- i na końcu dodajemy naszą ulubioną bibliotekę jQuery -->
  <action method="addJs"><script>nazwa_szablonu/jquery.js</script></action>
  <!-- i kończymy sekcję head naszego szablonu --><br />
</block>

`nazwa_szablonu` zastąp nazwą folderu, jeżeli taki utworzyłeś w katalogu magentoroot/js/
Jeżeli korzystasz z osobnych plików z kodem JavaScript, a mam nadzieję że tak, poniżej dodaj tag:

  <action method="addJs"><script>nazwa_folderu/twoj_plik.js</script></action>

Ważne aby zarówno jQuery jak i Twój kod JavaScript umieszczony był poniżej sekcji Prototype, w przeciwnym razie, będzie dochodzić do konfliktu. W naszym przypadku był to "błąd" w pliku prototype.js wynikający ze znajdującego się w nim znaku $, który jak wiadomo jest domyślnie używany w jQuery i tu pojawia się kolejny krok

Zastosowanie funkcji noConflict()

Domyślnie większość kodu dla jQuery zaczyna się od:

$(document).ready(function(){
  // tu znajdują się operacje jQuery wywołane po załadowaniu się strony
}

ale… tak jak już wspomniałem znak $ jest wykorzystywany także przez Prototype, i tu z pomocą przychodzi nam wspomniana funkcja noConflict(), która pozwala na użycie jQuery z innymi bibliotekami JavaScript. Obecnie nasz kod będzie wyglądał następująco:

var $j = jQuery.noConflict();
$j(document).ready(function(){
  // właściwy kod jQuery, gdzie zamiast $ stosujemy naszą zdefiniowaną "bezkonfliktową" zmienną $j
}

Więcej na temat jQuery noConflict() można dowiedzieć się z dokumentacji 

Czyścimy cache

Jeżeli korzystasz z cache Magento, które domyślnie jest włączoną funkcją (do budowy systemu na serwerze lokalnym cache został przez nas wyłączony), należy wyczyścić całą pamięć podręczną.

Możemy to zrobić albo z poziomu CMS Magento: z menu wybieramy System -> Zarządzaj pamięcią podręczną (Cache Manage).
Drugą opcją (dla mnie osobiście wygodniejszą) jest usunięcie wszystkiego z folderu: magentoroot/var/cache/

Ostatni krok

Odświeżamy stronę, w kodzie sprawdzamy czy dodane zostały nasze pliki jQuery.

Operacja przeprowadzona na Magento w wersji 1.4.0.1, przy wcześniejszych wersjach niezbędna może okazać się aktualizacja biblioteki Prototype, szczegółowe informacje dostępne są na tej stronie , która to też była jednym ze źródeł pomocy.

REALIZACJA: Blog, jQuery, Magento, Prototype