jQuery in Magento integrieren
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.
17 Kommentare to “jQuery in Magento integrieren”
Kategorien
Letzte Artikel
- Neuer Version von Mxperts Products-Import
- Fehlersuche mit Mage::Log()
- Achtung: ungewolltes ausspionieren Ihres Onlineshops
- Backend-Navigation mit eigenem Logo (Image)
- Personalisierter Browsertitel
- Produkte importieren für Magento 1.4.x
- Kostenfreie Broschüre für Magento-Interessierte und Agenturen
- Sprachpaket | Lokalisierung für Magento ab Version 1.4
- Erweiterung: Mxperts Tooltip
- Schneegestöber für Ihren Magento-Shop
Letzte Kommentare
- ds_1984 bei Erweiterung: Mxperts - NoRegion
- mister_tt bei Erweiterung: Mxperts - NoRegion
- ds_1984 bei Erweiterung: Mxperts - NoRegion
- mister_tt bei Erweiterung: Mxperts - NoRegion
- eren bei Bewegtes Bild (Slide,Fade,Zoom)
- JoernBernd bei Neue Version Mxperts Invoice 1.0.8
- Tobi bei Erweiterung: Mxperts Tooltip
- Bali4you bei Personalisierter Browsertitel
- itintouch bei Magento-Shop nur als Katalog: Teil 4 - Zubehör, UpSelling, Produktoptionen & Layered Nav
- cbatik bei Eigene Layouts in Magento CMS integrieren
Admin Controler Animation Anleitung Backend Bestellung Bilder Blätterkatalog Block CMS Deutsch E-Mail Erweiterung Erweiterungen Extension Frontend Ausgabe Import iPhone jQuery jQuery-Tools Kategorieren importieren Kontaktformular Kurs Layered Navigation Magento 1.3 Magento Update Menü Navigation Produkt-Import Produkte rechte Spalte Scrolling seo Service Shipping-Modul Sprachfile Sprachpaket Tutorial Versandkosten Versenden Version 1.3.0 Video Vorlagen Währungen YouTube Zoom
WP Cumulus Flash tag cloud by Roy Tanck requires Flash Player 9 or better.
Aja, danke für die Info - dann werde ich mir das jetzt wirklich mal anschauen.
Da ich den Mehrwert sehe, mit den verschiedene Tutorials auch diverse unterschiedliche Einsatzzwecke erproben zu können.
Was empfiehlst du für die Tutorials hier - die “Production” oder die “Development” Version?
Hallo Daniel,
damit Du den Mehrwert 100% erkennen kannst hier noch ein Workshop zur Verbesserung der Layered Navigation.
Akkordeon Menü für Layered Navigation
Um die Tutorials zu testen würde ich persönlich erst einmal in einer Development-Umgebung arbeiten und dann das gemacht in ein Livesystem übertragen. Meistens kommen einem beim Arbeiten noch neue Ideen, da ist man in einer Development-Umgebung nicht so unter Druck und freier beim Testen.
Viele Grüße
Dscho
[...] Für diese Tutorial mit jQuery bereits in Ihren Onlineshop integriert sein! (jQuery in Magento integrieren) [...]
[...] Für dieses Tutorial muss jQuery bereits in Ihren Onlineshop integriert sein! (jQuery in Magento integrieren) [...]
Klasse Einstieg - da diese Einbettung sicherlich auch für Anwender / Entwickler anderer Bibliotheken interessant ist.
[...] kennen. Wie man dies umsetzt möchte ich in in diesem Tutorial zeigen. Ich gege davon aus, dass JQuery bereits eingebunden [...]
[...] Die Dateien werden wie folgt auf den Server kopiert: 1. skin/frontend/default/[ihr_theme]/css/jquery.featured.css 2. skin/frontend/default/[ihr_theme]/js/tools.scrollable-1.0.4.js 3. skin/frontend/default/[ihr_theme]/js/jquery.mousewheel.js Infos zum Einbinden von jQuery in Magento finden Sie in unserem Tutorial jQuery in Magento integrieren. [...]
[...] zu sehen auf unserem Demoshop: http://shop.mxperts.de Dieses Tutorial setzt die Installation von jQuery [...]
moin, gute anleitung…eine frage:
bedeutet
“Anstatt $ müssen wir für unsere Scripte jQuery verwenden. Beispiel: $(’div’).attr(’color’, ‘#ccc’) wird zu jQuery(’div’).attr(’color’, ‘#ccc’)”
dass ich per Suchen & Ersetzen $ gg. jquery tausche?
Danke!
Eggbert
Ja, genau richtig - ein einfaches Beispiel ist in dem Tutorial http://www.mxperts.de/kennzeichnung-fur-demoshop-oder-under-construction/ zu sehen. Bei den meisten jQuery-Plugins, ausser eigenem Code, muss man dies allerdings nicht machen. Die meisten Plugins sind schon für den Kompatibilitätsmodus optimiert. Der Aufbau ist dann in folgender Form:
(function($) {
…
})(jQuery);
Viele Grüße
Johannes Teitge
[...] Bezeichnungen, ist dieses Plugin die richtige Lösung. Dieses Tutorial setzt die Installation von jQuery [...]
[...] Tutorial setzt die Installation von jQuery [...]
Gerade auf Magento Connect endeckt: http://www.magentocommerce.com/extension/1619/mxperts–jquery-base
[...] Installation von jQuery Base oder manuelle Installation von jQuery. Die Umsetzung ist sehr einfach. Wir müssen nur das JQuery-Plugin einbinden, im [...]
[...] Installation von jQuery Base oder manuelle Installation von [...]
[...] Installation von jQuery Base oder manuelle Installation von [...]
[...] Zur Umsetzung verwenden wir jQuery und mit installierter Extension jQuery-Base. [...]