Jak wiemy, standardowa instalacja Magento dostarczana jest z javascriptową biblioteką Prototype. Razem z odpowiedzialną za efekty script.aculo.us składa się na potężne narzędzie ułatwiające tworzenie różnego rodzaju funkcjonalności działających po stronie przeglądarki. Na tym jednak nie koniec - Prototype dostarcza również framework do obsługi modnej i przydatnej technologii Ajax, dzięki czemu tworzenie ajaxowych zapytań staje się niebywale proste. Funkcjonalność Prototype'a wykorzystywana jest w wielu szablonach Magento, między innymi do pokazywania/ukrywania bloków zależnie od wyboru użytkownika, tudzież do wyświetlania komunikatów o błędzie z eleganckim efektem "fade".
Jednakże nie jest to jedyna javascriptowa biblioteka oferująca tak przydatny zestaw funkcji. Wśród innych popularnych bibliotek wyróżnić można jQuery - niewielką objętościowo (skompresowana zajmuje 19KB), prostą w użyciu i do tego, przyznaję, moją ulubioną. Stworzona w 2006, błyskawicznie zyskała sobie grono użytkowników, którzy opracowali do niej mnóstwo rozszerzających jej funkcjonalność wtyczek.
Zastanówmy się jednak, czy to dobry pomysł by wykorzystywać obie te biblioteki jednocześnie w jednym projekcie Magento? Moim zdaniem nie, przynajmniej w większości przypadków. Dlaczego? Jest kilka głównych powodów:
- Obydwie dostarczają podobną funkcjonalność, w związku z czym praktycznie nie ma rzeczy, którą da się osiągnąć w jednej, a w drugiej byłoby to niemożliwe
- Więcej dołączonych plików .js oznacza wolniejsze ładowanie się stron i słabszą wydajność
- Biblioteki te używają czasem tej samej notacji, co może prowadzić do konfliktów
Niemniej jednak w pewnych przypadkach dołączenie jQuery do funkcjonalności sklepu w Magento może być konieczne. Na przykład w sytuacji gdy potrzebujemy biblioteki dostarczającej nam konkretnej funkcjonalności, a biblioteka ta jest stworzona jako wtyczka do jQuery. Jak więc sprawić by Prototype i jQuery działały razem bez żadnych konfliktów?
Po pierwsze, należy ściągnąć najnowszą wersję jQuery (póki co ostatnia wersja to 1.3.2) i zapisać ją w folderze /js/jquery. Następnie trzeba dołączyć ją do wszystkich stron Magento - najbardziej logicznym sposobem, by tego dokonać, jest wstawienie poniższego kodu w pliku /app/design/frontend/.../.../layout/page.xml, w sekcji <block type="page/html_head">:
Nadeszła pora na poradzenie sobie z konfliktami z Prototype - obie biblioteki używają notacji $ (w jQuery jest to skrót do jQuery, podczas gdy w Prototype służy ona za alias do funkcji getElementById. Na szczęście twórcy jQuery wpadli na to, by stworzyć mechanizm do przeciążania funkcji $: jQuery.noConflict(). Można zatem umieścić poniższą linijkę na końcu pliku jquery-1.3.2.min.js:
Od tej chwili należy używać funkcji $j wszędzie tam, gdzie do tej pory używana była $ (cały czas można również stosować jQuery). Pamiętajcie więc o zastąpieniu wszystkich wystąpień funkcji $ we wtyczkach do jQuery (o ile nie zostało to już domyślnie zaimplementowane przez autorów wtyczki).
W tym miejscu normalnie zakończylibyśmy nasze rozważania, gdyby nie jedna przeglądarka, która wciąż, mimo wprowadzonych przez nas rozwiązań, ma problemy ze wspólnym działaniem Prototype i jQuery. I nie, nie jest to Internet Explorer ;) Co zaskakujące, to Firefox 2. Przeglądarka ta wyrzuca mało zrozumiałe błędy, po których przestaje wykonywać załączony JavaScript. Oczywiście, od dawna są już dostępne nowsze wersje Firefoxa, w których po tym problemie nie ma już śladu, ale ciągle jest przecież jakaś drobna część internautów, którzy używają Firefoxa 2 i być może koniecznie chcą wydać pieniądze w Waszym sklepie ;)
Istnieje na szczęście prosty sposób na rozwiązanie tego problemu: trzeba umieścić instrukcję dołączającą jQuery przed dołączeniem Prototype. A zatem należy postąpić następująco w pliku page.xml:
<action method="addJs"><script>prototype/prototype.js</script></action>
Od tej chwili o wszelkich konfliktach możecie zapomnieć, a owe dwie wspaniałe biblioteki będą ze sobą idealnie współpracowały.





