wpShopGermany bringt von Hause aus keine Fortschrittsanzeige mit, die dem Kunden den aktuellen Stand im Ablauf der Bestellung anzeigt. Das ist typisch für dieses technisch exzellente Plugin. Viel fürs Auge bietet wpShopGermany nicht. Das ist nicht unbedingt eine schlechte Entscheidung. Komplexe grafische Effekte können Konflikte mit WordPress Themes verursachen. Funktion ist hier also wichtiger als Form.
Es ist aber nicht schwer, sich eine Forschrittsanzeige selbst zu bauen. Der größte Aufwand ist dabei die Grafik, sofern man nicht nur CSS verwenden will, wie ich in diesem Artikel beschrieben habe. Diesmal soll es etwas ausgefeilter sein.
Normalerweise legen wir Grafiken in solchen Fällen als Sprite an. Die Bild enthält alle Einzelbilder und muss somit nur einmal vom Server angefordert werden. Das verbessert die Ladezeit der Seite. Für unsere Seite sähe die Grafik so aus.
In einem responisven Design kann das jedoch Probleme bereiten, weil die Postion je nach Größe des Displays angepasst werden müsste. Wir haben uns daher für vier einzelne Grafiken entschieden, die sicher responsiv auf mobilen Geräten dargestellt werden.
In die PHTML Templates (user_views > Warenkorb) fügen wir oben eine Liste ein. Das wäre nicht unbedingt nötig, ist aber ein guter Standard. Schließlich sollte die Information auch erhalten bleiben, wenn Grafiken nicht dargestellt werden.
<div class="wpsg-progress">
<ul>
<li>Schritt 1 - Kundendaten</li>
<li>Schritt 2 - Bezahlung/Versand</li>
<li>Schritt 3 - Übersicht</li>
<li>Schritt 4 - Fertig!</li>
</ul>
</div>Für die andere Seiten fügen wir analog dazu den Code ein und vergeben anderen Klassen für das <div>: wpsg-progress-2 etc. Nun fehlt nur noch ein wenig CSS.
.wpsg-progress {
clear: both;
height: 65px;
width: 100%;
background: url(/wp-content/plugins/wpshopgermany/user_views/gfx/
progresstracker1.gif) no-repeat 0px 0px;
background-size: 100%;
display: block;
}Analog dazu sieht das CSS für die weiteren Seiten aus. Wir müssen einfach nur eine andere Grafik aufrufen. Die Deklaration background-size: 100% sorgt dafür, dass die Grafik skaliert wird.