Extension/Erweiterung: Mxperts - jQuery Base
Viele unserer Tutorials bauen auf dem AJAX-Framework jQuery auf. Um gleich in die Tutorials einsteigen zu können, haben wir die Extension Mxperts - jQuery Base entwickelt.
Die Installation von jQuery erfolgt nun völlig problemlos über Magento-Connect.
http://www.magentocommerce.com/extension/1619/mxperts–jquery-base
Um auf die renomierte JavaScript Bibliothek zuzugreifen, muss keine Datei angefasst werden. Eine FallBack Funktion zum verwenden von älteren Versionen ist bereits integriert.
Die jQuery Updates werden zeitnah von uns via Magento Connect-Manager bereit gestellt.
- Gestartet wird mit der jQuery-Version 1.3.2
Sollten Sie bereits manuell die Bibliothek über app/design/frontend/default/ihr_theme/layout/page.xml die Bibliothek integriert haben, so entfernen Sie diese vor der Installation von Mxperts - jQuery Base!
Nach der Installation finden Sie die Einstellungen zu dieser Erweiterung im Backend unter System->Konfiguration->Mxperts->jQuery (auf der linken Seite in der Menüleiste)
Bisher erschienene Extensions von Mxperts:
- Customer Groups Invoice
- Customer Address
- jQuery Base
38 Kommentare to “Extension/Erweiterung: Mxperts - jQuery Base”
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
- 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
- conImago bei FancyBox als Alternative zur Lightbox (+ IE8 Fix)
- boooo bei Erweiterung: Mxperts Tooltip
- Usability für das bezahlen bei Magento | CodersX Webblog bei Erweiterung: Mxperts - NoRegion
- marc aurel bei Verandkosten nach Kundengruppen (Shipping-Modul Teil 2)
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.
[...] Experts (Mxperts) is the number one Magento related Blog in Germany. Today they released a Magento extension that allows you to easily load jQuery into your Magento store. You [...]
Nette Extension die ihr da gebaut habt… wir berichten auch in unserem Blog drueber: http://blog.velite.de/mxperts-jquery-extension-and-conflicting-overrides/
Kurz als Anregung - wenn Ihr jQuery in Euren Shops nutzen wollt und Mage_Page_Block_Html_Head überschreiben müsst, dann macht dies in Abhängigkeit von Mxperts_Jquery und leitet Eurer Klasse von Mxperts_Jquery_Block_Page_Html_Head ab. Wir werden noch andere Extension erstellen die jQuery nutzen. Dort werden wir es genau so machen.
Viele Grüße
Johannes Teitge
Hallo Johannes,
ich habe ein kleines Problem bei der Installation der Jquery Extension. Ich habe die Extenisons “Fooman Speedster” und “CanonicalURL” installiert. Mit entsprechendem Worgaround, damit beide gehen. Diese überschreiben ja jeweils auch die Klasse Mage_Page_Block_Html_Head. Wie kann ich nun eure Extension nutzen? Ausgehend von
class Fooman_Speedster_Block_Page_Html_Head
extends Mage_Page_Block_Html_Head
class Yoast_CanonicalUrl_Block_Head extends Fooman_Speedster_Block_Page_Html_Head
habe bereits folgendes probiert:
class Fooman_Speedster_Block_Page_Html_Head
extends Mxperts_Jquery_Block_Page_Html_Head
class Yoast_CanonicalUrl_Block_Head extends Mxperts_Jquery_Block_Page_Html_Head
Mxperts_Jquery_Block_Page_Html_Head extends Mage_Page_Block_Html_Head
=> hier geht Jquery, aber “Fooman Speedster” nicht
und
class Fooman_Speedster_Block_Page_Html_Head
extends Mage_Page_Block_Html_Head
class Yoast_CanonicalUrl_Block_Head extends Fooman_Speedster_Block_Page_Html_Head
Mxperts_Jquery_Block_Page_Html_Head extends Fooman_Speedster_Block_Page_Html_Head
=> hier geht Jquery nicht, dafür aber “Fooman Speedster”
Hast du vielleicht nen Tipp?
URL: http://www.gourmeo24.com
Besten Dank für die geleistete Arbeit und Lieben Gruß!
albossum
Ich selbst setzte Fooman_Speedster nicht ein da ich ich mehr auf Hardware-Tuning setzte, aber ich versuche mir demnächst etwas Zeit frei zu schaufeln um das zu testen. Ich kann aber nicht sagen wann das sein wird, da wir zur Zeit völlig überlastet sind.
Viele Grüße
Johannes Teitge
Besten Dank Johannes,
habe erstmal die Version gelassen, bei der jquery geht. Nur gehen jetzt die “Featured Products” nicht mehr, nachdem ich die page.xml zurückgesetzt und die Anleitung für die überarbeitete Version der “Featured Products” befolgt habe. Denke aber, dass bekomm ich noch hin.
Liebe Grüße
albossum
[...] Die Animation erstellen wir mittels jQuery. Installieren Sie dazu zuerst unsere Erweiterung jQuery Base. [...]
[...] einbinden müssen. Damit der jQuery-Code ausgeführt werden kann bitt noch jQuery-Base [...]
Hallo,
nachdem ich bis jetzt den manuellen Weg zum inkludieren von JQuery bevorzugte, habe ich heut mal eure Extension über Connect installiert.
Leider ist mir aufgefallen, dass nach dem Installieren die Verknüpfung zu Prototyp entfernt wurde und mein Menü beispielsweise nicht mehr funktioniert. Auch ist es imo nicht die feine Englische einen Homecall einzubauen (siehe app/code/local/Mxperts/Jquery/etc/system.xml Zeile 29)
Es handelt sich um eine frische Installation, welche einzig die Erweiterung “Market Ready Germany” enthalten hat.
Was meinst Du mit Homecall? Wir überschreiben lediglich die Klasse, im speziellen die Funktion getCssJsHtml. Und dies aus dem Grund, weil jQuery zwingend an erster Stelle stehen muss. Wenn Du weiter schaust, siehst du, dass am Ende die Core-Funktion mit aufgerufen wird - parent::getCssJsHtml().
Aber wenn Du einen bessern Lösungeweg hast - ich bin offen für alles.
Viele Grüße
Johannes Teitge
Hallo,
also es scheint so, als ob das o.g. Problem mit dem Theme zusammenhängt, folgendes konnte ich feststellen:
Standardtheme
Bearbeitetes Blue Theme
Aus welchen Gründen auch immer ist die betreffende Zeile, welche sich um das Einbinden von Prototyp kümmert verändert, wenn man das Blue Theme einbindet. (es wurde auch mit diesem Theme installiert)
Cache usw. wurde schon alles geleert, hat jemand ne Ahnung woran das liegen könnte?
Hier mal die Zeile des Output von jQuery Base.
$html .= parent::getCssJsHtml().$this->getjQueryScript(’1′).$this->getjQueryScript(’2′).$this->getSkinJs().$this->getSkinCSS();
$html beinhaltet bereits den jQuery-Code. Danach folgt der original Core mit parent::getCssJsHtml(). Dieser wird in keinerlei Hinsicht verändert. Danch folgen die eingebunden Javascript und CSS aus den Backend-Einstellungen von jQuery-Base.
Wie sieht es aus wenn du nur das Standard-Theme aktivierst?
Wenn Du uns Deine URL schickst könnten wir evtl. mehr sagen
Viele Grüße
Dscho
Nachdem diese Version ja doch einige Komforts bietet (JavaScript Dateien über das Backend einbinden) wollte ich vo meiner manuellen Installation auf die Von Magento Connect wechseln. Ohne Erfolg. Ich hab alles von jquery gelöscht bevor ich es über Connect installiert hab, aber es erscheint einfach nicht, weder der Test funktioniert, noch der Quelltext sagt etwas über jquery (es war definity aktiviert!). Bin daher wieder zur manuellen Installation gewechselt, weiß nicht warum es nicht wollte…
Du warst zu schnell… hättest Du mir deine URL gesendet, hätten wir das Problem sicherlich beheben können. Entweder war es ein Probelm mit dem Verzeichnisnamen. js/jQuery anstatt js/jquery, oder jquery war deinitv doppelt noch über page.xml eingebunden.
Mittlerweile kennen wir die Fehler
Gruß
Johannes Teitge
Also bei mir ist nichts von Beidem der Fall und jquery will einfach nicht, wenn ich es über Connect installiere. Es ist im Backend antiviert, aber funktioniert einfach nicht.
Wenn ich es mir nicht ansehen kann, ist Hilfe leider in diesem Fall etwas schwierig - sorry.
Ich kann nur soviel sagen, dass wir das bisher in allen Projekten erfolgreich einsetzen. Hast Du mal mit “Web Developer” von Firefox nach Fehlern gesucht?
Grüße
Dscho
Íst es evtl erforderlich, dass mein Theme im default Interface liegt, also frontend/default/xyz statt frontend/xyz/xyz?
Ich werde die Sache mal mit Web Developer unter die Lupe nehmen. Danke schonmal!
Hallo,
eigentlich nicht, da Magento einen Fallback auf default hat. D.h. wenn Daten in xyz nicht gefunden werden, wird default verwendet.
Viele Grüße
Johannes Teitge
[...] jquery.fancybox.css selbst anpassen. Dieses Tutorial setzt die Installation von jQuery-Tools oder jQuery-Base [...]
Hallo,
ich habe mir Euer Modul installiert und bekomme es auch im Backend angezeigt, jedoch wird die Funktion nicht im Frontend eingebunden. Ich habe den “jQuery Funktionstest” eingeschaltet und bekomme nichts in dem Feld “Suche” angezeigt. Aber im Footer (Quelltext) ist der entsprechende Aufruf drin.
Selbst nachschauen könnt ihr bei http://www.shop.schneller-hoeren.de
Ich möchte so gerne die “Fancybox” einbinden aber ohne funktionierendes “jquery” bekomme ich die nicht zum Laufen.
Wär nett, wenn mir jemand sagen kann was ich falsch mache.
Danke
Heiko
Hallo Heiko,
ich glaube, ich habe ein ähnliches Problem. Wie hast Deins lösen können?
Danke
kk3003
Hallo
Habe sowohl jQueryBase als auch Tools installiert. Der jQuery Test funktioniert, und nachdem ich den Canonical URL link geändert habe werden die nötigen Dateien laut Quelltext auch geladen. Der Test (Rahmen+Suchfeld) läuft erfolgreich, aber mehr leider auch nicht
Habe es mit den Featured products und den Breadcrumbs versucht, keine der beiden extensions läuft wie gewollt.
Beispiel hier: http://www.tabletopshoponline.de/testseite mit featured products?
Woran könnte das liegen?
Danke schonmal
Hallo, habe über Magento Connect Mxperts_Jquery-1.3.3 installiert.
Diese Installation hat auch ohne Fehler geklappt.
Wenn ich dann im Magento Admin Bereich unter: System –> Konfiguration –> jQuery - Libraries –> jQuery anklicke erscheint:
Access denied
Wo könnte der Fehler liegen, kann mit der Meldung nichts anfangen.
Danke!
Es gab da meines Wissens mal ein Problem mit der unterscheidlichen Schreibweisen von verzeichnissnamen was inszwischen behoben wurde.
Generell kann man aber den Tipp geben wenn etwas nicht läuft, deinstallieren & dann neu installieren - eure Konfigurationen & ggf. schon zugewiesenen Dateien usw. bleiben in der Datenbank gespeichert & stehen somit nach erneuter Installation von jquery Base + Tools wieder zur Verfügung.
Ich habe die Erfahrung gemacht, dass es viele Probleme gibt wenn weitere Extensions installiert sind die auf skin Ebene nochmals die jQuery Library mit ausliefern (die ja von uns schon in den js Ordner kommen)
Das hat man insbesondere bei gekauften Themes häufig, des Weiteren laufen diese Scripts meistens nicht im “no-conflict” Mode im Sinne der Kompatiblität zu Prototype.
Falls Fooman Speedstar installiert ist, überschreibt diese Extension wie auch canonical URLs den “Block Head”.
Also bei mir auf der Spielwiese läuft es - habe kürzlich alle ehemals gecodeten Tutorials die ich ja auch absolviert habe in die jQuery Base überführt - aktuell sind an Dateien zugewiesen:
SKIN JAVASCRIPT FILES
jquery.rightclick.js
jquery.easing.1.3.js
jquery.easing.compatibility.js
jquery.scroll_to_top.js
jquery.treeview.js
jquery.jBreadCrumb.js
tools.scrollable-1.0.5.js
jquery.mousewheel.js
jquery.demo.js
reflection.js
jquery.pagepeel.js
jquery.cross-slide.js
jquery.language.switch.js
SKIN CSS FILES
scroll_to_top.css
jquery.treeview.css
jquery.jBreadCrumb.css
jquery.featured.css
jquery.demo.css
jquery.pagepeel.css
jquery.language.switch.css
Ich meine dir fehlt die Zuweisung von “easing.js” für die Featured Products - kann das sein?
Auf meiner TRY and ERROR Umgebung sieht es so aus:
http://tutorials.golox.eu/
Liebe Grüße - Daniel
Hallo Daniel
Habe
im Quelltext.
Probiere es mal mit einer Neuinstallation.
Danke erstmal!
Björn
Quelltext geschluckt
jquery.easing.1.3.js
und
jquery.easing.compatibility.js
fehlen im Post oben
Hallo,
gerade habe ich mal den Quelltext Deiner Site angesehen. Da fehlen die jQuery-Tools-Files. Hast Du jQuery-Tools aktiviert und auch die einzelnen Module?
Ja, Tools Vers. 1.1.2 ist installiert und alle Tools sind aktiviert
Kannt Du mal einen Screenshots von Deinen Backen-Einstellungen posten?
http://www.tabletopshoponline.de/media/ad1.jpg
http://www.tabletopshoponline.de/media/ad2.jpg
http://www.tabletopshoponline.de/media/ad3.jpg
http://www.tabletopshoponline.de/media/ad4.jpg
http://www.tabletopshoponline.de/media/ad5.jpg
http://www.tabletopshoponline.de/media/ad6.jpg
OK, das sieht soweit gut aus. Allerdings hast du jquery.mousewheel.js und jquery.easing.1.3.js wohl noch manuell eingebunden. Das sollte raus und über das Backend der jQuery-Tools-Einstellungen integriert werden. Schau Dir auch mal die jQuery-Integrationen auf der Herstellerseite http://www.flowplayer.org an.
Habe jetzt alles zum Laufen bekommen - vielen Dank für die promte Hilfe hier!
Allerdings zeigt mir die WebDev Toolbar noch als Fehler an “jQuery.tools.version is undefined”, das beinträchtigt die Funktion aber scheinbar nicht.
Ja den Fehler hab ich hier auch, auch wenn es anscheinend keine Beeinträchtigungen gibt hätt ich den gern weg
Hat jemand eine Idee, wie ich das lösen kann?
Ansonsten top extension!
Habe das selbe:
Meldung: ‘jQuery.tools.version’ ist Null oder kein Objekt
Zeile: 247
Zeichen: 14800
Code: 0
Wie kann man diesen Fehler beseitigen?
Gruß
Taiwi
Habe Magento 1.4.1 neu installiert. Vor der Installation von jQuery-Base sämtliche jQuery-Einträge in *.xml entfernt. Nach der Installation erhalte ich die Fehlermeldung in Firebugs: $ is not a function / this.form = $(formId); form.js (Zeile 28)
Habe ich bei der Installation was falsch gemacht? Oder wie kann ich diesen Fehler beseitigen?
Gruss Felix
Hi. Ich bin es nochmals. Wenn die jQuery-Daten nach denen von Varien form.js im Header eingefügt werden, würde mein Problem gelöst. Doch wie kann ich das nun beim Extension jQuery Base bewerkstelligen? Ich möchte, dass jQuery nach den Magent *.js und vor *.css im Header eingefügt werden.
Könnt Ihr mir einen Tipp geben?
Danke.
Ich habe Magento 1.4.1 neu installiert und installierte nun Euer Extension jQuery-Base. Vorab habe ich bestehende jQuery-Einträge gelöscht. Danach Cache gelöscht und erneut im Admin angemeldt. Die Installation war erfolgreich. Im Frontend erhalte ich nun im Default-Theme (unverändert) folgende Fehlermeldungen:
1. $ is not a function / this.form = $(form); Datei js.js & form.js
2. $ is not a function / element = $(element); Datei prototype.js
& 4 weitere Fehlermeldungen.
Wenn ich nun jQuery im Backend deaktiviere. Jedoch nun manuell im Header nicht zuoberst, sondern nach den *.js von Varien manuell einknüpfe. Sind sämtliche Fehler gelöst!!
Wie kann nun das Extension angepasst werden, so dass die jQuery-Einbundung im Header nicht an erster Stelle erfolgt, sondern nach den Magento *.js-Dateien?
Falls dies nicht geht muss ich auf Euer Extension verzichten und jQuery manuell einbauen.
Für einen Tipp wäre ich sehr dankbar.
Gruss Felix
Hallo Felix,
sowohl jQuery als auch Prototype verwenden $ als Shortcut. Ersetze einfach $ durch jQuery, dann sollte es klappen:
statt $(”#meineId”) also jQuery(”#meineId”)
Möchtest du einen kürzeren Bezeichner, dann verwende:
var j = jQuery;
j(”#meineId”)
siehe auch:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Gruss,
Stefan
PS: Wenn man die Ersetzung unter Linux mit sed machen möchte, muss man beachten, das BASH das Dollarzeichen als Variable interpretiert. Der reguläre Ausdruck muss deshalb in Hochkomma statt in Anführungszeichen:
sed ’s/$(/jQuery(/g’ -i meinskript.js