Problembeschreibung

Wer an sein Joomla-Site-Template bestimmte Ansprüche hegt, kommt mitunter nicht drum herum über z-index die Layerinhalte nach Notwendigkeiten zu schichten. Damit bekommt VM aber Probleme, denn die Meldungsbox, das ein Produkt in den Warenkorb hinzugefügt wurde, kann dann mitunter von anderen Seitenelement teilweise oder gar vollständig überdeckt sein. Dieser Workaround zeigt, wie man das Problem beseitigt.

 

Grundlagen und prinzipielle Fehlerbehebung

Zunächst sollte man wissen, das die von VM erzeugte Meldung in einem modalen DIV-Bereich eingeblendet wird. Virtuemart verwendet dazu die mootools.js-Bibliothek welche eingebunden wird durch moopromt.js. In Virtuemart muss das overlaying in der Administration eingeschalten sein, damit das moopromt-Script hierfür verwendet wird. Diese Verfahrensweise mit dem modalen Meldungsdialog ist benutzerfreundlicher, weil dann nicht mit jedem hinzugefügten Artikel die Warenkorbseite aufgerufen wird. Statt dessen erfolgt die Befüllung per Ajax, der user erhält die Meldung und bleibt aber auf der Seite, die er vorher aufgerufen hatte.



Diese modale Meldungsbox wird umschlossen von zwei DIVs Zum einen den cbContainer und zum anderen den cbOverlay. Für beide müssen wir, um oben beschriebenem Problem zu begegnen einen z-index zuweisen, der hoch genug ist um sich über alle anderen Seitenelement zu legen.

 

Umsetzung im Detail

Hier gäbe es zwei Möglichkeiten.

Die erste wäre zwar sehr direkt, hat aber den Nachteil, dass man die moopromt.js eingreifen müsste. Bei künftigen Updates wärer diese Modifikaitonen evtl. durch Überschreiben wieder futsch und müssten nachgepflegt werden. Ca. Zeile 28 ff. werden die beiden o.g. DIV erzeugt und über setStyles diverse Attribute gesetzt. Hier können wir zusätzlich einen z-index einfügen und hätten das Problem schon gelöst.

moopromt.js
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
if (this.options.overlay) {
 this.overlay = new Element('div').setProperty('class', 'cbOverlay');
 this.overlay.setStyles({
 'position': 'absolute', 'top': 0, 'left': 0, 'width': '100%', 
 'visibility': 'hidden', 'z-index': '1000'
 }).injectInside(document.body);
}
this.container = new Element('div').setProperty('class', 'cbContainer');
this.container.setStyles({
 'position': 'absolute', 'visibility': 'hidden', 'z-index': '1001'
}).injectInside(document.body);

if (this.options.overlay) {
 this.fx1 = new Fx.Style(this.overlay, 'opacity', 
 {duration:100}).custom(0, .6);
}
 

 

Besser jedoch wäre es dieses Script nicht anzufassen und statt dessen eine Modifikation in der theme.css vorzunehmen, die immerhin dafür gedacht ist, projektspezifische Modifikationen aufzunehmen. Hier fügen wir einfach folgende zwei Zeilen ein, und hätten dann das gleiche Ziel erreicht:

theme.css
1
2
.cbOverlay { z-index:1000; }
.cbContainer { z-index:1001; }