Erstellung eines Konfigurators mit dem Shopware 6 Framework und dessen API

Das Projekt

Dieses Projekt wurde für eine Website durchgeführt, die Geschenkkörbe online verkauft. Bisher wurden dort nur vorgefertigte Geschenkkörbe verkauft, bei denen die Produkte bereits ausgewählt waren. Um die Website attraktiver und anpassbarer zu machen, wurden wir gebeten, ein Tool zu entwickeln, mit dem die Kunden ihren eigenen Geschenkkorb zusammenstellen können, einen Konfigurator. Wir definierten mit dem Kunden die verschiedenen Merkmale des Konfigurators und fanden diese Punkte:

• Der Konfigurator wird 4 Schritte umfassen.
  • Die Auswahl der Box.
  • Die Produktauswahl.
  • Die Auswahl eines möglichen Geschenkpapiers.
  • Und schliesslich die mögliche Auswahl einer Wunschkarte mit einem Text.
• Einige Schritte sind nur unter bestimmten Bedingungen zugänglich.
• Der Konfigurator sollte die Füllmenge des Geschenkkorbs entsprechend der ausgewählten Produkte anzeigen.
• Sobald der Geschenkkorb dem Warenkorb hinzugefügt wurde, sollte es möglich sein, ihn erneut zu öffnen, um ihn zu bearbeiten und das Produkt im Warenkorb zu aktualisieren.
• Die angezeigten Produkte sollten wie auf einer klassischen Kategorieseite filterbar sein.
• Jeder Schritt des Konfigurators entspricht einer eigens dafür angelegten Kategorie in der Shopware-Verwaltung. Der Kunde wird in der Lage sein, Produkte dynamisch diesen Kategorien zuzuordnen, um Zeit zu sparen.

Umsetzung

Da wir noch nie mit dem Shopware 6 Framework gearbeitet haben, dachten wir zunächst, dass wir den Konfigurator durch Erweiterung und Wiederverwendung der Kategorievorlagen implementieren würden. Diese Option erwies sich jedoch schnell als zu kompliziert in der Umsetzung und entsprach nicht unseren Anforderungen. Nach einigen Recherchen fanden wir heraus, dass Shopware 6 eine sehr vollständige API bietet, die es uns ermöglichte, Abfragen auf allen Entitäten des Frameworks durchzuführen. Die Implementierung des Konfigurators mit dieser API schien die beste Lösung zu sein, da wir die Seite nicht zwischen jedem Schritt der Geschenkkorberstellung aktualisieren wollten. Also haben wir den Konfigurator fast vollständig auf der Client-Seite in Javascript erstellt. Nur das anfängliche Laden der Seite, das Hinzufügen zum Warenkorb und die Wiederherstellung des Warenkorbs im Falle eines Zahlungsausfalls wurden serverseitig implementiert. Wir begannen also mit der Implementierung des Designs des Konfigurators und entwarfen dann den gesamten Teil der Produktwiederherstellung, Produktfilter und Paginierung in JS. Schliesslich haben wir die vom Kunden definierten Einschränkungen implementiert, um zu verhindern, dass die Kunden der Website z.B. Geschenkkörbe ohne Produkt oder Produkte ohne ein entsprechendes Feld kaufen können. Wir fügten auch einige Informationen hinzu, wie z. B. die Anzeige der Produktbeschreibung in einem Pop-up, wenn man auf das Produkt klickt, oder die Eingabe des Textes der Grusskarte.

Die Herausforderungen

Bei diesem Projekt hatten wir viele Herausforderungen zu bewältigen.

• Zu Beginn mussten wir unsere Anfragen an die Shopware-API so weit wie möglich optimieren, um so wenig JS-Code wie möglich zu schreiben und ihn flexibler zu gestalten. Insgesamt sind nur drei Anfragen implementiert. Eine zum Abrufen von Produkten, eine zum Abrufen des aktuellen Kontexts, um die richtige Währung anzuzeigen, und eine zum Hinzufügen der Konfiguration zum Warenkorb.
• Die zweite Herausforderung bestand darin, die Funktion “In den Warenkorb legen” zu realisieren. Dazu mussten wir einen neuen Produkttyp in Shopware erstellen und alle notwendigen Klassen implementieren, um den Preis zu berechnen und die Produkte im Warenkorb “anzureichern”.
• Eine weitere Herausforderung war die Wiederherstellung des Warenkorbs im Falle eines Zahlungsausfalls. Wir verwenden einen externen Zahlungsdienstleister, um den Zahlungsteil der Bestellungen zu verwalten. Das Hauptproblem bestand darin, dass Shopware keine Funktion zur Wiederherstellung des Warenkorbs bei einem Zahlungsausfall integriert hat. Die einzige Möglichkeit ist, dass das Plugin unseres Zahlungsdienstleisters diese Funktion implementiert, um zur Warenkorbseite zurückzukehren und die Zahlung auf andere Weise erneut auszuführen. Dieses Abrufen von Produkten aus dem Warenkorb funktioniert nach Produkttyp, so dass wir unser Plugin implementieren mussten, um einen Warenkorb mit Geschenkkörben nach einem fehlgeschlagenen Checkout abrufen zu können. Dies war nicht einfach, da das Plugin des Zahlungsdienstleisters nicht sehr stabil war. Nach einigen Diskussionen mit den Entwicklern des Plugins konnten wir Lösungen für die Probleme des Plugins finden und unsere Funktionalität für unseren neuen Produkttyp zum Laufen bringen.

Schlussfolgerung

Die Erstellung eines Konfigurators mit der von Shopware 6 angebotenen API war eine sehr interessante Erfahrung. Als Backend-Entwickler konnten wir unsere Fähigkeiten in der Frontend-Entwicklung mit Javascript bereichern. Die Flexibilität der Anfragen, die wir an die Shopware-API senden können, ist wirklich sehr praktisch und ermöglichte es uns, unseren Konfigurator auf einer einzigen Seite zu erstellen. Ausserdem waren die verschiedenen Herausforderungen, denen wir uns während der Realisierung dieses Projekts stellen mussten, sehr bereichernd für unsere Softwareentwicklungsfähigkeiten.