Im Checkout einen Schritt weniger anzeigen

Viele Schritte im Checkout könnten den Kunden abschrecken und dazu verleiten, z. B. das gleiche Produkt auf einer anderen Plattform zu kaufen, wo er bereits ein Kundenkonto besitzt. Deshalb ist es ratsam, den Checkout zu optimieren. Eine der Strategien besteht in der Reduktion der Schritte, die der Kunde angezeigt bekommt.

Davon ausgehend, dass die Rechnungsanschrift mit der Lieferanschrift übereinstimmt, wird bei den meisten Kunden der Schritt „Versandinformation“ übersprungen. Mit einer einfachen Modifikation ist es möglich, diesen Schritt auszublenden und erst anzuzeigen, wenn der Kunde sich für die Option „An andere Adresse verschicken“ entscheidet.

Um dies zu erzielen, wird in die Datei template\checkout\onepage.phtml ganz unten im Code das folgende Skript eingefügt:

<script type="text/javascript">

    document.body.onload = displayShipping;

    document.getElementById('billing:use_for_shipping_no').onchange = displayShipping;
    document.getElementById('billing:use_for_shipping_yes').onchange = displayShipping; 

    function displayShipping()
    {
        if(document.getElementById('billing:use_for_shipping_no').checked)
        document.getElementById('opc-shipping').style.display = '';
        else
        document.getElementById('opc-shipping').style.display = 'none';
    }
</script>

Wenn Sie diese Datei in Ihrem Theme-Verzeichnis nicht finden, kopieren sie Sie inklusive der Verzeichnisstruktur aus dem Base-Theme (Tipp: Magento-Themes einfacher erstellen und modifizieren).

Der Schritt „Versandinformation“ ist ausgeblendet:

Erst wenn der Kunde sich für die Option „An andere Adresse verschicken“ entscheidet, wird der Zusatzschritt angezeigt:

Eine dynamische Anpassung der Nummerierung wäre aufwändig. Mit CSS können die Nummern einfach ausgeblendet werden. Der nachfolgende Code kann direkt nach dem JavaScript in onepage.phtml eingefügt werden:

<style type="text/css">
  .number { display: none }
</style>

Der Link „Ändern“ im Seitenblock „Versandadresse“ wird nach dieser Anpassung nicht mehr erwartungsgemäß funktionieren, sofern der zugehörige Schritt ausgeblendet ist:

Um dieses Problem zu beheben, kann das JavaScript in der Datei js\varien\accordion.js angepasst werden, welches für das Einblenden einzelner Checkout-Schritte zuständig ist. In der Funktion openSection ist in dem If-Block, nach Zeile 55 der folgende Code einzufügen:

$(this.currentSection).style.display = '';

Nach dieser Modifikation sieht die Funktion openSection wie folgt aus (neue Zeile markiert):

openSection: function(section) {
    var section = $(section);

    // Check allow
    if (this.checkAllow && !Element.hasClassName(section, 'allow')){
        return;
    }

    if(section.id != this.currentSection) {
        this.closeExistingSection();
        this.currentSection = section.id;
        $(this.currentSection).addClassName('active');
        $(this.currentSection).style.display = '';
        var contents = Element.select(section, '.a-item');
        contents[0].show();
        //Effect.SlideDown(contents[0], {duration:.2});

        if (this.disallowAccessToNextSections) {
            var pastCurrentSection = false;
            for (var i=0; i<this.sections.length; i++) {
                if (pastCurrentSection) {
                    Element.removeClassName(this.sections[i], 'allow')
                }
                if (this.sections[i].id==section.id) {
                    pastCurrentSection = true;
                }
            }
        }
    }
},

Ordnungshalber sollte das modifizierte JavaScript im eigenen Skin-Verzeichnis gespeichert werden, beispielsweise in skin\frontend\default\my_theme\js\accordion.js. Der Verweis in onepage.phtml müsste entsprechend angepasst werden:

<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/accordion.js') ?>"></script>