Motokay B2B - Motorradteile
Business to Business Händlershop

Beschreibung:

Webshop auf Basis der OpenSource Shopsoftware xt:Commerce.

Kunde:

Motokay aus Tönisvorst / Nordrhein-Westfalen.

Der Shop ist nicht mehr online erreichbar

Business to Business Händler-Webshop für Motorrad Ersatz-, Verschleiß- und Zubehörteile für nahezu alle Motorräder, Roller und Mofas mit über einer halben Million Artikel für mehr als 15.000 Modelle.

Erbrachte Leistung:
  • Shop-Design und Erstellung des Templates
  • 3D-Visualisierung des Motorrads im Header
  • Shopoptimierung um die Artikel-/Kategoriemenge schnell darstellen zu können
  • Neuprogramierung der Kategorienavigation mit Ausgabe als HTML-Liste mit CSS-Klassen
  • Erstellung eines weitgehend tabellenlosen Webshop-Templates (Vorlage).
  • Integration des "jQuery"-Framework auf JavaScript Basis mit Accordion-Effekt im Header-Bereich
  • Integration der Bildergalerie "Colorbox" für Produkt-Detailbilder und Versandkostenlinks
  • Installation / Einrichtung des xt:Commerce - Webshops auf Webserver
  • Administration und technische Betreuung des Webshops

Die Artikel und sonstige Inhalte werden vom Auftraggeber selbst über das Warenwirtschafts-/ERP-System Kontor.NET angelegt und gepflegt.

Besonderheiten / Extras:

- Das Template besteht aus weitgehend tabellenlosen Layout. Dies bietet den Vorteil, das der Quellcode bis zu 50% kleiner ausfällt und damit schneller geladen wird und weniger Traffic auf dem Server erzeugt. Dadurch können bei einem hoch frequentierten Webshop auf Dauer erhebliche Einsparungen bei den Traffic-Kosten erzielt werden.
Ein weiterer für Webshops sehr wichtiger Vorteil von tabellenlosen Layouts ist die leichtere Zugänglichkeit für Suchmaschinen. Die Inhalte des Webshop können von den Suchmaschinen-Bots optimal erfasst und indexiert werden und die Produkte des Webshops werden somit auch in Suchmaschinen einfacher von potenziellen Kunden gefunden.

- eine weitere Besonderheit dieses Webshops ist die Präsentation der Produktdetailbilder. Diese werden nicht einfach in einem neuen Browser- oder Popup-Fenster geöffnet.
Durch das Anklicken der Produktvorschaubilder wird die aktuelle Produktseite von einem dunklen halb transparenten Hintergrund überlagert (der Webshop bleibt aber im Hintergrund sichtbar) und das bzw. die Produktbilder werden in einem separaten Rahmen angezeigt.
Falls von einem Produkt mehrere Bilder existieren, erscheint unterhalb der Produktbeschreibung ein kleines Menü in dem man zu den einzelnen Bilder direkt navigieren kann. Außerdem wird auch die Anzahl der vorhandenen Bilder angezeigt und bei welchem Bild man sich gerade befindet.
Um den Rahmen zu schließen, klickt man entweder auf den "X"-Link oder die "Esc"-Taste. Danach gelangt der Betrachter genau an die Stelle zurück an der dieser sich vorher befand.

Durch diese Technik wird verhindert, das der potenzielle Kunde von der aktuellen Produktseite weggeführt wird und eventuell nicht mehr zurückfindet oder noch schlimmer den Shop verlässt. Der Betrachter weiß immer wo sich gerade befindet.
Ebenfalls werden dadurch die nicht gerade beliebten Popup-Fenster vermieden, die sich bei eingeschaltetem Popup-Blocker erst gar nicht oder mit Fehlermeldung öffnen.

 

- Accordion-Menü statt rechte Spalte.
Da die Kategorie-Navigation durch die vielen Hersteller sehr lang wurde, stellte sich die Frage, wo die Menüpunkte wie z.B. AGB, Datenschutz, Versandkosten, Impressum und der Mini-Warenkorb usw. untergebracht werden soll.
Eine rechte Spalte sollte es aus Platzgründen nicht geben. Da das Platzangebot für eine horizontale Navigation auch sehr begrenzt war, wurde das Problem mit einer sehr platzsparend Definitionsliste mit Accordion-Effekt
der neben dem Headerbild platziert wurde gelöst.

Im Normalzustand werden nur die Überschriften wie z.B. Mehr über..., Informationen, Newsletter und der immer offene Mini-Warenkorb abgezeigt. Klickt man auf eine dieser Überschriften, klappt das Untermenü mit einem kleinen Animationseffekt aus. Ein bereits offenes Untermenü klappt dann wieder zu, sodass immer nur der angeklickte Bereich sichtbar ist.

Durch Einsatz dieser Technik konnte komplett auf eine rechte Spalte verzichtet werden und der gewonnen Platz konnte für den Hauptbereich genutzt werden.