Zielstellung

In diesem Artikel geht es darum, den modalen Meldungdialog von VirtueMart 2, der den Erfolg oder Mißerfolgt des Hinzufügens von Produkten zum Warenkorb anzeigt, zu modifizieren. Die Modifikationen betreffen hauptsächlich das Erscheinungsbild, um diese dem Template-Design anzupassen und die Reihenfolge der Dialogbestandteilinhalte umzustellen. Hiervon betroffen sind jedoch auch Core-Scripte. Das sollten also nur versierte Scripter machen und immer in dem Bewußtsein, dass jedes Upgade von VM diese Änderungen wieder überschreiben könnte. Das widerum ist für die avisierten Ziele unvermeidlich, weil die jeweiligen Scripte nicht über das Template formatiert werden können, so wie für viele anderen Scripte von VM typisch.

 

Grundlagenwissen

Die drei wichtigen Scripte um die FaceBox zu ermöglichen, sind zum einen das jQuery-Script components/com_virtuemart/assets/js/facebox.js und das Server-Gegenstück, welches dieses Script mit Meldungen versorgt und die Cart-Aktion ausführt components/com_virtumart/controllers/cart.php - konkret mit seiner Methode addJS(). Weiterhin gibt es das VirtueMart-Price-JavaScript components/com_virtemart/assets/js/vmprices.js, welches die FaceBox aufruft und dabei den per json gelieferten Content mit den Buttons (datas.msg) und die Produktbezeichnung aus dem Formular-Hiddenfeld pname als Meldungsinhalt zusammenbaut.



 

Das jQuery-Script erzeugt die äußere Hülle für die Meldungsbox bis runter zum Container content. Der Content selbst kommt dann als Meldungsinhalt per json aus dem cart.php-Script und umfasst bei ordnungsgemäßem Verlauf die zwei Buttons "weiter einkaufen" und "Warenkorb anzeigen" sowie die Erfolgsmeldungstexte.

Selbstverständlich gibt es dann noch ein facebox.css über die die Styles für die Dialoghülle und Elemente erzeugt werden.

facebox.css und facebox.js werden übrigens innerhalb des Scriptes components/com_virtuemart/views/cart/tmpl/default.php in das Template gelinkt.
Im Script components/com_virtuemart/views/productdetails/tmpl/default_addtocart.php wird das AddToCart-Formular für die Produktdetailseiten aufgebaut. Hier wird u.a. das Hiddenfeld pname (s.o.) erzeugt.

 

CSS-Styles anpassen

Beginnen wir damit die Optik des Dialoges anzupassen. Dazu könnte man sicher einfach die facebox.css modifizieren, oder aber man nimmt die Änderungen in der eigenen VM-Style- oder Template-Skin-Datei auf. Innerhalb meines Templates habe ich eine vm_grayscrubbed.css in der dann einfach die diversen Styleanweisungen überschrieben werden. Konkret sind es folgende Einfügungen über die die Farben angepasst werden, und die beiden o.g. Links in Buttonoptik gestylt werden.

#facebox .popup {
	border: 3px solid gray;
	border-radius: 8px;
	box-shadow: 5px 10px 10px #000000;
	border-color: gray;
}
#facebox .content {
	background-color: #222;
	border-radius: 6px;
	padding: 20px;
}
#facebox h4 { text-align:center; }
#facebox a.showcart, #facebox a.continue {
	display: inline-block;
	background-image: url("../images/grayscrubbed/button_bkgd.gif");
	border: 1px solid #CAC9C9;
	border-radius: 4px;	
  box-shadow: 2px 3px 3px 0 #000000;
	color: #777777;
	padding: 4px 8px;
}
#facebox a.showcart:hover, #facebox a.continue:hover,
#facebox a.showcart:focus, #facebox a.continue:focus,
#facebox a.showcart:active, #facebox a.continue:active {
	color: #fff;
	text-shadow: 0 0 5px #FFF;
}
#facebox .content div div { clear:both; margin-top:20px; }

 



 

Doppelte Meldungstexte entfernen und die Buttons unter die Meldung bringen

Was mich an der Meldungsbox stört, ist dass die Meldungen in fast identischer Weise doppelt erscheinen. Außerdem stehen die beiden Buttons oberhalb der Meldung statt wie üblich bei Dialogboxen unterhalb. Beide Änderungen erreichen wir leider nur durch Eingriffe in o.g. Core-Scripte cart.php innerhalb der Methode addJS() und vmprice.js in der CartEffect-Methode.

Die doppelte Meldungsausgabe vermeiden wir, in dem im Erfolgsfall die "Fehlermeldung" in addJS() nicht ausgegeben wird, also einfach auskommentiert wird:

if ($cart->add($virtuemart_product_ids, $errorMsg )) {
	$this->json->msg = '<a class="continue" href="' . $continue_link . '" >' . JText::_('COM_VIRTUEMART_CONTINUE_SHOPPING') . '</a>';
	$this->json->msg .= '<a class="showcart floatright" href="' . JRoute::_("index.php?option=com_virtuemart&view=cart") . '">' . JText::_('COM_VIRTUEMART_CART_SHOW_MODAL') . '</a>';
#	if ($errorMsg) $this->json->msg .= '<div>'.$errorMsg.'</div>';
	$this->json->stat = '1';
} else {

Die Button bringen wir im Script vmprice.js unterhalb des Meldungstextes an die Dialog unterseite durch Verschieben von txt und datas.msg innerhalb der JS-Methode CartEffect:

if(datas.stat ==1){
	//var value = form.find('.quantity-input').val() ;
	var txt = form.find(".pname").val()+' '+vmCartText;
	$.facebox.settings.closeImage = closeImage;
	$.facebox.settings.loadingImage = loadingImage;
	$.facebox.settings.faceboxHtml = faceboxHtml;
	$.facebox({ text: "<H4>"+txt+"</H4>"+datas.msg }, 'my-groovy-style');
} else if ...

 

Wenn Ihnen dieser Beitrag geholfen und viel Zeit gespart hat, zeigen Sie sich erkenntlich: Über eine Klick auf Google+1 oder Rückmeldungen freue ich mich, zeigt es mir doch, dass sich die Mühe für die Beitragerstellung gelohnt hat. Schenken Sie auch den Produktwerbungen Ihre Beachtung.