Nach der Anpassung werden die Artikel, ohne die Seite zu verlassen, in den Warenkorb gelegt. Dies geschieht über ein Ajax-Request, der den Befehl zum "In den Warenkorb legen", an die Warenkorb-Funktion schickt. Nach dem Klick auf "in den Warenkorb" erscheint automatisch unter dem Button eine Erfolgsnachricht. Zusätzlich wird die Artikelanzahl im Warenkorb aktualisiert ohne Seitenreload.

Am Ende des Templates unter articles/article_details_middle.tpl folgende Zeilen hinzufügen:

 
<script language="JavaScript" type="text/javascript">
var sStart = '{$sStart}';
var sIndexArticle = " {$sConfig.sSnippets.sIndexarticle|escape}";
{literal}
window.addEvent('domready', function() {
 
 var sAddToBasket = $(document.forms.sAddToBasket);
 var sAddBasketMessage = new Element('div', {'id':'sAddBasketMessage', 'class': 'bg_cross', 'style': 'height:1px;overflow:hidden;padding:0px'}).setStyle('opacity', 0).injectInside(sAddToBasket);
 var sAddBasketMessageText = new Element('h1', {'style': 'padding:5px'}).setHTML('Artikel wurde in den Warenkorb gelegt!').injectInside(sAddBasketMessage);
 
 if($('basketButton'))
 sAddToBasket.addEvent('submit', function(event) {
  var sAdd = sAddToBasket.getElement('select[name=sAdd]');
  var sQuantity = sAddToBasket.getElement('select[name=sQuantity]');
  if(!sAdd||!sQuantity) return;
  new Event(event).stop();
  var height = 60;
  var data = 'sViewport=basket&sAjax=1&sAdd='+encodeURIComponent(sAdd.getValue())+'&sQuantity='+encodeURIComponent(sQuantity.getValue());
  var request = new Ajax(sStart,{
    data: data,
    method: 'get',
    headers: {'X-Request': 'JSON'},
    onComplete: function(result){
     result = Json.evaluate(result);
     $(document.body).getElement('.mybasket_ul .basket_active').setHTML(result.sBasketQuantity+sIndexArticle);
     $(document.body).getElement('.mybasket_ul li').removeClass('mybasket').addClass('mybasket_full');
     if(result.sBasketInfo)
     {
     	sAddBasketMessageText.setHTML(result.sBasketInfo).setStyle('height', '100%');
     	height = sAddBasketMessageText.getStyle('height');
     }
     new Fx.Style(sAddBasketMessage, 'opacity', {duration:1000}).start(0,1);
     var nextEffect = function(){
      new Fx.Style(sAddBasketMessage, 'height', {duration:1000, onComplete: function(){
      	sAddBasketMessage.setStyle('opacity', 0);
      }}).start(height,0);
     };
     new Fx.Style(sAddBasketMessage, 'height', {duration:1000, onComplete: nextEffect.create({delay: 1000})}).start(0,height);
    }
  }).request();
 }); 
}); 
{/literal}
</script>
 

Im Viewport unter engine/core/class/viewports/s_basket.php vor dieser Zeile:

 
return array("templates"=>$templates,"variables"=>$variables);
 

diese Zeilen hinzufügen:

 
if(!empty($this->sSYSTEM->_GET["sAjax"]))
{
	if(empty($variables['sBasketInfo']))
	{
		$variables['sBasketInfo'] = $variables['sArticleName'].' '.$this->sSYSTEM->sCONFIG['sSnippets']['sBasketaddedtothebasket'];
	}
	echo json_encode(array(
		"sAmount"=>$variables["sAmount"],
		"sBasketQuantity"=>$variables["sBasket"]["Quantity"],
		"sArticleName"=>utf8_encode($variables["sArticleName"]),
		"sBasketInfo"=>utf8_encode($variables['sBasketInfo'])
	));
	exit();
}