In diesen Artikel wird Ihnen erklärt, wie Sie Javascript Funktionen überschreiben können und wie Sie Objekte erweitern.

Bitte schauen Sie sich auch unsere Demo an um die Funktionsweise in Aktion zu sehen.

Demo ansehen

Das Überladen von Funktionen in Javascript gestaltet sich im Grunde relativ einfach und umkompliziert. Sie müssen nur eine Javascript-Datei anlegen und hier die Methode oder Funktion erneut anlegen um Sie zu überschreiben.

Ein Beispiel - Warenkorb beim Aufruf der Funktion "$.changeDetails() ausblenden:

 
$.changeDetails = function (ordernumber) {
 
//... Pruefung ob eine E-Mail Benachrichtung ausgegeben werden soll
 
if (!ordernumber) {
	// Hide Pseudoprice
	$('.PseudoPrice').hide();
 
	// Hide all other thumbnails
    if (isVariant) {
        var thumbs = $('.thumb_box').children('a:[id]');
        thumbs.each(function (i, el) {
            if ($(el).attr('id') != 'thumb' + $.ordernumber) { $(el).hide(); }
        });
    }
    // Hide basket
    $('#basketButton').css('opacity', '0.4');
} else {
	// Show Pseudo price
	$('#'+ordernumber).find('.PseudoPrice').show();
 
	// Change informations
    $('#article_details').html($('#' + ordernumber).html());
 
    //Set basket button to active
    $('#basketButton').css('opacity', '1.0');
 
    // Change main image
    $('a#zoom1 img').attr('src', $('#img' + ordernumber).find('img').attr('src'));
 
    //Wenn eine andere Variante ausgewaehlt ist
    if(ordernumber != $.ordernumber) {
 
    	//Wenn ZoomViewer ist aktiv
    	useZoom = parseInt(useZoom);
    	if(useZoom) {
    		$('a#zoom1 img').attr('src', $('#img' + ordernumber).find('img').attr('src')).attr('title', $('#img' + ordernumber).children('a').attr('title'));
    		$('#img' + ordernumber).find('a').trigger('click');
    	} else {
    		 //Lightboxlink wechseln
        	$('a#zoom1').attr('href', $('#img' + ordernumber).children('a').attr('href'));
    	}
 
    	//Thumbnails wechseln
    	$('#thumb' + $.ordernumber).hide();
        $('#thumb' + ordernumber).show();
 
 
        //neue Ordernumber in die globale Variable schreiben
        $.ordernumber = ordernumber;
    	try {
    		$('#variantOrdernumber').val(ordernumber);
    	}catch (err){
 
    	}
    	// try to active liveshopping
    	try {
    		$('#article_details').liveshopping();
    	} catch(err) {}
    }
}
};
 

Im Standard von Shopware 3.5.x ist es so, dass der Warenkorbbutton ausgegraut wird, wenn keine Variante gewählt ist. Dies wurde mit folgender Zeile realisiert:

 
// Hide basket
$('#basketButton').css('opacity', '0.4');
 

Falls Sie jetzt aber den Warenkorbbutton komplett ausblenden möchten, statt nur seine Deckkraft zu verringern, müssen wir kleinere Templateänderungen vornehmen.

Um eine neue Javascriptdatei im Template zu laden, sind Templateanpassungen vonnöten, die wir im Verzeichnis "templates/_local" durchführen werden.

Zuerst schaffen wir uns die benötigte Ordnerstruktur. Legen Sie hierzu unterhalb von "_local" folgende Ordner an:

 
_local/frontend/_resources/javascript
_local/frontend/index
 

Als Nächstes erstellen Sie im Ordner "_local/frontend/_resources/javascript" eine neue Javascriptdatei. In diesen Fall nennen wir die Datei "jquery.overload.js". In dieser Datei werden wir in einen späteren Schritt unsere Javascript-Anpassungen durchführen.

Vorher müssen wir aber erst diese Datei laden.

Hierzu legen wir im Verzeichnis "_local/frontend/index" eine Datei mit dem Namen "header.tpl" an und fügen hier folgenden Inhalt ein:

 
{extends file="../_default/frontend/index/header.tpl"}
 
{* Unsere Javascriptdatei nach der jquery.shopware.js laden *}
{block name="frontend_index_header_javascript_jquery" append}
	<script type="text/javascript" src="{link file='frontend/_resources/javascript/jquery.overload.js'}"></script>
{/block}
 

Da wir jetzt alle nötigen Templateanpassungen durchgeführt haben und jetzt unsere Javascript-Datei "jquery.overload.js" erfolgreich nach der "jquery.shopware.js" geladen wird, können wir jetzt die Funktion "$.changeDetails()" überladen.

Hierzu wechseln wir in unsere "jquery.overload.js und erstellen zu aller erst eine anonyme Funktion:

 
(function($) {
 
	//... Unser Code
 
})(jQuery);
 

In dieser anonymen Funktion weißen wir "$" den jQuery Namespace zu. Dies ist aus Kompatibilitätsgründen zu anderen Javascript-Bibliotheken und -Frameworks nötig, welche "$" für Ihren Namespace nutzen.

Als Nächstes fügen wir in diese anonyme Funktion die komplette $.changeDetails()-Funktion aus der "jquery.shopware.js" ein.

Dies hat zur Folge, dass alle Aufrufe dieser Funktion erhalten bleiben, Sie die "jquery.shopware.js" nicht bearbeiten müssen und so das Standardtemplate weiterhin updatefähig halten.

Nachdem Sie die $.changeDetails()-Funktion eingefügt haben, können wir mit dem Javascript-Anpassungen beginnen.

Unser Ziel ist es jetzt den Warenkorbbutton komplett auszublenden, wenn keine Variante verfügbar ist. Um dies zu realisieren müssen wir die Code-Zeile finden, wo der Warenkorb von der Deckkraft verringert wird. Suchen Sie dazu in der "jquery.overload.js" nach folgender Zeile:

 
$('#basketButton').css('opacity', '0.4');
 

In dieser Zeile wird den jQuery Objekt, hier "$", mitgeteilt, dass wir das HTML-Element mit der ID basketButton haben möchten und weisen diesen Element dann die CSS-Eigenschaft opacity mit einen Wert von 0.4 (40%) zu.

Um den Warenkorbbutton jetzt komplett auszublenden müssen Sie diese Zeile durch folgende ersetzen:

 
$('#basketButton').hide();
 

In dieser Codezeile fragen wir wieder über das jQuery-Objekt das HTML-Element mit der ID basketButton ab, aber diesmal nutzen wir jQuery's hide()-Funktion. Diese Funktion setzt die CSS-Eigenschaft display auf none, so dass der Button nicht mehr sichtbar ist.

Wenn wir uns jetzt einen Variantenartikel anschauen, dann sehen wir dass der Warenkorbbutton nicht mehr sichtbar ist. Wenn wir jetzt eine Variante auswählen, dann bleibt der Warenkorbbutton aber weiterhin unsichtbar. Dies werden wir jetzt ändern.

Suchen Sie dazu in der jquery.overload.js nach folgender Zeile:

 
//Set basket button to active
$('#basketButton').css('opacity', '1.0');
 

In dieser Zeile wird die Deckkraft des Warenkorbbuttons über die CSS-Eigenschaft opacity auf den Wert 1.0 (100%) gesetzt. Diese Eigenschaft hat aber keinerlei Auswirkungen auf den Warenkorbbutton, da dieser nicht sichtbar ist.

Um den Button bei einer gewählten Variante wieder einzublenden überschreiben Sie die gerade gesuchte Zeile mit folgender:

 
$('#basketButton').show();
 

In dieser Codezeile fragen wir wieder über das jQuery-Objekt das HTML-Element mit der ID basketButton ab, aber diesmal nutzen wir die jQuery-Funktion show(). Diese Funktion setzt die CSS-Eigenschaft display wieder auf block bzw. inline (je nachdem welches Element übergeben wurde), damit das Element wieder sichtbar wird.

Das Überladen von Javascript-Funktionen funktioniert im Prinzip genauso wie das Überschreiben einer Templatedatei. Sie müssen hier nur darauf achten, dass Ihre Javascript-Datei nach der "jquery.shopware.js" einladen wird um Funktionen zu überladen.

• Erstellen und laden der Javascriptdatei im Template
• Anlegen einer anonymen Funktion um die Kompabilität mit anderen Bibliotheken und Frameworks zu erhalten
• Kopieren der zu bearbeitenden Funktion
• Änderungen in Ihrer Javascript-Datei durchführen

So erreichen Sie dass Sie bestehende Funktionen von Shopware überschreiben können und Ihr Standardtemplate ungerührt und somit updatesicher bleibt.