Seit dem 16. Juli 2009 stellen wir die Extension jQuery Base zur Verfügung. Diese ist über Magento Connect ferfügbar und über das Backend zu installieren. Die manuelle Installation entfällt mit jQuery Base.
http://www.magentocommerce.com/extension/1619/mxperts–jquery-base

Die Intergation kann natürlich auch ohne jQuery Base manuell wie folgt gemacht werden.

Als erstes benötigen wir das jQuery-Script, welches auf der Herstellerwebsite www.jquery.com verfügbar ist. Zur Zeit mit der Version 1.3.2.

Umsetzung:

1. Öffnen Sie die mit einem Texteditor die Javascript-Datei jquery-1.3.2.js und fügen Sie folgende Zeile am Ende ein.

  jQuery.noConflict();

Dies verhindert Komplikationen mit anderen Ajax-Libraries die von Magento verwendet werden.
Anstatt $ müssen wir für unsere Scripte jQuery verwenden.
Beispiel: $(‘div’).attr(‘color’, ‘#ccc’) wird zu jQuery(‘div’).attr(‘color’, ‘#ccc’)

2. Erstellen Sie das Verzeichnis js/jquery auf Ihrem Webserver.

3. Kopieren Sie die Datei jquery-1.3.2.js in das erstelle Verzeichnis /js/jquery/

4. Öffnen Sie die Datei /subdomains/shop/httpdocs/app/design/frontend/default/[Ihr Theme]/layout/page.xml

5. Fügen Sie folgende Zeile vor die Zeile <action method=”addJs”><script>prototype/prototype.js</script></action> ein.

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

6.  Aktualisieren im Backend den Cache und öffnen Sie Ihren Shop. Im Quelltext sollten Sie den Text js/jquery-1.3.2.js,prototype/ vorfinden.

 

Nun testen wir noch ob unsere Integration auch funktioniert. Dazu bearbeiten wir in unserem Template die Datei app/design/frontend/default/[Ihr Theme]/template/page/html/footer.phtml. Fügen Sie folgen Code ein und laden Sie Ihre Seite neu.

<script type="Text/javascript">
  jQuery(document).ready(function(){
    jQuery('#search').attr('value', 'jQuery installiert!');
  })
</script>

Danach sollte im Eingabefeld der Suche der Text jQuery installiert! stehen.
Hier in unserem Demoshop 1.3.2 http://shop.mxperts.de/1.3.2/

Das war’s und nun können Sie mit jQuery-Scripten in Ihrem Magento-Shop arbeiten. In weiteren Workshop (wie z.B. http://www.mxperts.de/to-top-link-einfuhrung/) werden wir noch einiges mit jQuery machen.