WooCommerce Eis-Konfigurator

Eiswerk Brehna stellt in Brehna in Sachsen-Anhalt Speiseeis her und verkauft es in Bechern, online und an Unternehmen. Im Shop sollten Kunden ihren eigenen Becher zusammenstellen: Sorten wählen, die Reihenfolge der Schichten festlegen, ein eigenes Etikett beifügen und so viele Becher bestellen, wie sie brauchen. Als Inspiration brachten sie fertige Produkt-Designer wie Zakeke mit, wollten aber einen eigenen Ablauf.

WooCommerce verkauft Produkte mit festen Varianten. Jede Kombination aus Sorten und Schichtfolge hätte eine eigene Variante gebraucht, und für eine Etikett-Datei ist in einer Variante gar kein Platz. Der Preis musste jeder Auswahl folgen, und wer die Becher abfüllt, musste sehen, was hineinkommt, in welcher Reihenfolge und unter welchem Etikett.

Wir haben ein WooCommerce-Plugin gebaut, das den Konfigurator per Shortcode auf jede beliebige Seite setzt. Der Kunde arbeitet auf einem einzigen Bildschirm. Es gibt eine Größe, den 550-ml-Becher. Der Kunde gibt ihm einen Namen und wählt Sorten aus einem Raster mit Bildern. Eine Zeichnung des Bechers füllt sich von unten, eine Schicht pro Sorte, jede mit dem Bild ihrer Sorte. Mit Pfeilen wandert eine Schicht nach oben oder unten, ein Kreuz entfernt sie. Ein Becher fasst zwei bis vier Sorten. Der Kunde kann ein Etikett-Design als PDF anhängen, legt die Anzahl der Becher fest und sieht den Preis bei jedem Schritt mitlaufen. Der angefangene Becher bleibt in der Browser-Sitzung erhalten, Neuladen der Seite verliert ihn nicht.

Jeder fertige Becher wird zu einem eigenen WooCommerce-Produkt, im Katalog unsichtbar. Sein Name enthält den Becher-Namen, die Anzahl der Becher und die Sorten. Die Beschreibung listet die Schichten der Reihe nach und verlinkt die Etikett-Datei. Im Warenkorb steht er als eine Zeile. Ab da laufen Kasse, Zahlung und Bestell-E-Mails wie bei jedem anderen Produkt, und das Team findet Rezept und Etikett am Produkt, auf das die Bestellung verweist. Den Preis rechnet der Server beim Anlegen des Bechers neu, aus den Einstellungen und den gewählten Sorten: ein Startpreis, ein Aufschlag je unterschiedlicher Sorte und ein Mengenrabatt nach Anzahl der Becher. Der Preis im Browser dient nur der Anzeige.

Sorten sind gewöhnliche WooCommerce-Produkte in einer Kategorie, die das Plugin selbst anlegt. Das erste Galeriebild einer Sorte wird zu ihrer Schicht im Becher, das Produktfoto bleibt, wie es ist. Eine Sorte ohne dieses Bild erscheint im Konfigurator nicht, und das übersieht man leicht, wenn man eine neue anlegt. Ein Button auf der Produktseite jeder Sorte kann Kunden zum Konfigurator weiterschicken.

Die meisten Änderungen nach Januar 2023 betrafen Preise und Steuer. WooCommerce gibt einem per Code angelegten Produkt die Steuerklasse Standard, egal welche die Sorten tragen, deshalb übernahm ab März 2023 jeder Becher die Steuerklasse seiner ersten Sorte. Den Startpreis las das Plugin anfangs aus dem Katalog: Ende Dezember 2022 das günstigste Sorten-Produkt, zwei Tage später nur noch Produkte mit 550 im Namen. Das ersparte eine zweite Stelle für den Preis und band ihn an die Benennung der Produkte. Der Aufschlag je Sorte stand im Code. Im August 2023 haben wir Startpreis, Aufschlag, kleinste und größte Bestellmenge und die Texte rund um den Konfigurator auf eine Einstellungsseite im WordPress-Admin verlegt, neun Felder insgesamt, und den Mengenrabatt ergänzt. Ab da brauchte eine Preisänderung keine neue Plugin-Version mehr.

Für denselben Shop haben wir im November und Dezember 2022 ein zweites Plugin gebaut: Plus- und Minus-Buttons in der Produktliste und einen Warenkorb in der Seitenleiste, der seine Summe ohne Neuladen der Seite aktualisiert.

Das Plugin ist PHP für WordPress und WooCommerce. Es registriert den Shortcode, legt die beiden Produktkategorien an, die es braucht, und gibt dem Konfigurator einen eigenen Endpunkt, der die Sorten liefert, das Becher-Produkt anlegt und es in den Warenkorb legt. Der Konfigurator selbst ist eine Vue-3-App mit Pinia und Tailwind CSS, mit Vite zu einem einzigen Script gebaut, das der Shortcode in die Seite schreibt. Ein Build-Script erhöht die Versionsnummer und packt das Plugin als ZIP zum Hochladen im WordPress-Admin.

Die erste Version vom 3. Dezember 2022 zeigte einen Pappbecher, der sich mit three.js in 3D drehte. Vier Tage später haben wir ihn durch die flache Zeichnung ersetzt. Der 3D-Becher sah gut aus und zeigte nichts von dem, was der Kunde gewählt hatte. Die flache Zeichnung zeigt genau das und läuft ohne WebGL.

Kunden konnten auf einer Seite einen Becher zusammenstellen, ein Etikett anhängen und ihn in Stückzahl bestellen, und bei Eiswerk kam eine gewöhnliche WooCommerce-Bestellung an, mit Rezept und Etikett-Link am bestellten Produkt. Der Shop von Eiswerk läuft heute nicht mehr auf WooCommerce, und der Konfigurator ist nicht mehr online. Personalisierte Becher für Unternehmen beginnen jetzt mit einem Anfrageformular auf ihrer Website.

Zwei Dinge würden wir heute anders machen. Die Etikett-PDFs landeten in einem Ordner im Plugin, und WordPress ersetzt den Plugin-Ordner, wenn eine neue Version installiert wird. Sie gehören in den Uploads-Ordner. Und nur der Browser prüfte, ob eine Datei ein PDF ist. Der Server sollte das ebenfalls prüfen.

Wenn Sie Kunden ein Produkt in Ihrem Shop konfigurieren lassen wollen, lässt sich daraus einiges übernehmen. Machen Sie aus jeder Konfiguration ein normales Produkt oder eine normale Bestellzeile, dann bleiben Kasse, Zahlung und Bestell-E-Mails unberührt. Rechnen Sie den Preis auf dem Server und übernehmen Sie nie einen Preis aus dem Browser. Zeigen Sie Kunden, was sie gewählt haben, statt eines Modells des leeren Produkts. Und legen Sie Preise und Grenzen dorthin, wo Ihr Team sie ohne Entwickler ändern kann.