Magento templates

Les Templates et le Design Magento

Prototype i jQuery w Magento

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">:

<action method="addJs"><script>jquery/jquery-1.3.2.min.js</script></action>

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:

var $j = jQuery.noConflict();

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>jquery/jquery-1.3.2.min.js</script></action>
<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.

Wykorzystanie domyślnych szablonów w Magento

System szablonów w Magento w prosty sposób umożliwia tworzenie własnego kodu html/css, realizującego założenia projektu graficznego. Jednakże w wielu przypadkach, o ile to możliwe, właściwsze byłoby wykorzystanie domyślnych szablonów Magento. W ten sposób oszczędzić można dużo czasu poświęconego na integrację nowej struktury kodu html z funkcjonalnością sklepu internetowego Magento.

Dla przykładu, rzućmy okiem na następującą lokalizację w standardowej strukturze plików Magento: app\design\frontend\default\default\template\page. W tym miejscu znajdziemy szablony opisujące najbardziej podstawową i ogólną strukturę strony: 1column.phtml, 2colums-left.phtml, 2colums-right.phtml lub 3colums.phtml. Każdy z tych szablonów zawiera niemal ten sam kod html (skupmy się na części znajdującej się wewnątrz sekcji 'body'):

<div class="wrapper">

<!-- start header -->
        <div class="header">
            ...
        </div>
<!-- end header -->

<!-- start middle -->
        <div class="middle-container">
            ...
        </div>
<!-- end middle -->

<!-- start footer -->
        <div class="footer-container">
                <div class="footer">
                    ...
                </div>
        </div>
<!-- end footer -->

</div>

Jedyna różnica pomiędzy tymi szablonami to część wewnątrz <div class=”middle-container”> - w tym miejscu zdefiniowany jest kod html odpowiedni dla konkretnego layoutu strony. Co jest jednak najbardziej istotne, szablony te powielają najczęściej stosowany sposób podziału struktury strony - na nagłówek, główną część i stopkę. Zatem w większości przypadków możemy wykorzystać powyższe domyślne szablony bez żadnych modyfikacji kodu html, wykorzystując jedynie style css, aby dostosować wygląd strony do wymagań projektu graficznego.

Jasną sprawą jest, że im bardziej szczegółowy szablon, tym mniejsza jest szansa wykorzystania go w niezmienionej formie, mimo to wciąż najszybszym sposobem będzie rozpoczęcie od domyślnego szablonu Magento i zmodyfikowania go tylko w takim zakresie, w jakim jest to konieczne.