Entsprechend der Button-Lösung, ändert German Setup den letzten Schritt im Checkout so ab, dass die Häckchen für Bestellbedingungen (AGB und Widerrufbelehrung) oberhalb der Tabelle mit Warenkorbwaren angezeigt werden. Neben jeder Bestellbedingung wird dabei der Link [Anzeigen] in eckigen Klammern angezeigt.
Die aktuelle Button-Lösung von German Setup ist in zwei Bereichen verbesserungswürdig:
- Die Bestellbedingungen sollen über den Link [Anzeigen] nicht nur mit Linksklick, sondern mit der mittleren Maustaste oder über das Browser-Kontextmenü gezielt im neuen Tab geöffnet werden können.
- Der Link sollte in die Checkbox-Beschriftung integriert werden:
Absichtliches Öffnen im neuen Tab oder Fenster
Um sicher zu gehen, dass das Shop-Fenster geöffnet bleibt, versuchen einige Kunden die Bestellbedingungen mit der mittleren Maustaste oder über das Browser-Kontextmenü (Rechtsklick) gezielt im neuen Fenster zu öffnen, weil aus der Gestaltung des Links [Anzeigen] nicht zu erkennen ist, dass er bereits ein neues Fenster öffnet.
Mit dem JavaScript-Befehl window.Open wird nach dem Klick ein neues Fenster öffnet (OnClick-Ereignis), in dem die Inhalte der Bestellbedingungen angezeigt werden:
Der href-Parameter des Links ist auf „#“ gesetzt. Der Nachteil dieser Lösung ist, dass wenn ein Nutzer versucht, das Fenster absichtlich in einem neuen Tab zu öffnen, ob über das Browser-Kontextmenü oder durch den Klick mit der mittleren Maustaste bzw. mit dem Mausrad, öffnet sich nicht der Inhalt der Bestellbedingung, sondern (verwirrenderweise) der erste Schritt des Checkouts.
Durch eine einfache Anpassung des Links kann dieses Problem behoben werden: Das target-Attribut des Links wird dem Fensternamen (zweites Parameter von window.Open) gesetzt. Das href-Attribut des a-Tags wird dem URL-Ziel des Fensters gleichgesetzt.
Vereinfacht, ist der Original-Link wie folgt aufgebaut:
<a href="#"
OnClick="window.open(
'{Ziel-URL}',
'',
'{Fensterparameter}')">
[Anzeigen]</a>
Damit das Öffnen im Neuen Tab funktioniert, muss der Link wie folgt umgestaltet werden:
<a href="{Ziel-URL}"
target="{Fenster-ID}"
OnClick="window.open(
'{Ziel-URL}'),
'{Fenster-ID}',
'{Fensterparameter}'">
[Anzeigen]</a>
Beim Auslösen des OnClick-Ereignisses, öffnet das sich wie gewohnt das Fenster. Beim Klick mit der mittleren Maustaste zum Öffnen des Links im neuen Fenster, öffnet sich so tatsächlich ein neues Browser-Tab mit den erwarteten Inhalten der Bestellbedingung.
Zum Realisieren dieser Optimierung, kopieren Sie die folgende Datei unter Beibehaltung der Verzeichnisstruktur in Ihr Theme-Verzeichnis (mehr zum Erstellen und Anpassen von Magento-Themes):
app/design/frontend/base/default/germansetup/checkout/onepage/agreements.phtml
Und ersetzen Sie die Zeile ~52 mit dem modifizierten Link:
<a
href="<?php echo $this->getUrl('germansetup/frontend/agreements', array('id' => $_a->getId())) ?>"
target="agreement-<?php echo $_a->getId()?>"
onclick="window.open(
'<?php echo $this->getUrl('germansetup/frontend/agreements', array('id' => $_a->getId())) ?>',
'agreement-<?php echo $_a->getId()?>',
'width=600,height=600,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes').focus(); return false;">
<?php echo $this->__('[Show]') ?>
</a>
Integration in die Checkbox-Beschriftung
Der Link [Anzeigen] ist zwar eine sichere und einfache Lösung, bringt aber keine schöne Optik mit sich. Als eine optisch schönere Lösung wäre die Integration des Links zur Anzeige von Inhalten einzelner Bestellbedingungen direkt in die Checkbox-Überschrift, sodass beispielsweise „Allgemeine Geschäftsbedingungen“ zum Link wird:
Die zusätzliche Anforderung wäre die weiterhin einfache Pflege des Inhalts der Checkbox-Überschrift ganz ohne HTML-Code: Der zu verlinkende Bereich des Texts wird mit eckigen Klammern markiert:
D. h. aus „Ich habe die Allgemeinen Geschäftsbedingungen gelesen und stimme diesen ausdrücklich zu.“ wird „Ich habe die [Allgemeinen Geschäftsbedingungen] gelesen und stimme diesen ausdrücklich zu.“
Der einfachheit halber wird dazu die gleiche Datei (als Kopie im eigenen Theme-Verzeichnis) wie im vorherigen Optimierungsvorschlag modifiziert:
app/design/frontend/base/default/germansetup/checkout/onepage/agreements.phtml
Die neue Datei sieht wie folgt aus (sie enthält die vorher beschriebene Optimierung ebenfalls):
<?php
$helper = $this->helper('germansetup');
?>
<?php if (!$this->getAgreements()) return; ?>
<form action="" id="checkout-agreements" onsubmit="return false;">
<ol>
<?php foreach ($this->getAgreements() as $_a): ?>
<?php
$checkBoxLabel = $_a->getIsHtml() ? $_a->getCheckboxText() : $this->htmlEscape($_a->getCheckboxText());
$matches = array();
if(preg_match('/\[([^\]]*)\]/i', $checkBoxLabel, $matches)) {
$linkMarkup = $matches[0];
$linkLabel = $matches[1];
$clickableLink = '<a href="'.$this->getUrl('germansetup/frontend/agreements', array('id' => $_a->getId())).'" target="agreement-'.$_a->getId().'" onclick="window.open(\''.$this->getUrl('germansetup/frontend/agreements', array('id' => $_a->getId())).'\', \'agreement-'.$_a->getId().'\', \'width=600,height=600,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes\').focus(); return false;">'.$linkLabel.'</a>';
$checkBoxLabel = str_replace($linkMarkup, $clickableLink, $checkBoxLabel);
}
?>
<li>
<p>
<input type="checkbox" id="agreement-<?php echo $_a->getId()?>" name="agreement[<?php echo $_a->getId()?>]" value="1" title="<?php echo $this->htmlEscape($_a->getCheckboxText()) ?>" />
<label for="agreement-<?php echo $_a->getId()?>"><?php echo $checkBoxLabel; ?></label>
</p>
</li>
<?php endforeach ?>
</ol>
</form>
Der reguläre Ausdruck \[([^\]]*)\] extrahiert den Text in der eckigen Klammer, mit und ohne Klammer verteilt auf zwei Gruppen $matches[0] und $matches[1], und ersetzt ihn durch den a-Tag mit der gleichen sichbaren Bezeichnung, die als zweite Gruppe $matches[1] ohne der eckigen Klammer extrahiert wurde.
- Fork von German Setup auf GitHub: https://github.com/xonu/firegento-germansetup
- Direkt zur modifizierten Template-Datei auf GitHub: agreements.phtml
Weiterlesen: