Tommy & Co.
Ein Demo-Shop für Katzen, gebaut für Shopify: Produkte, Ausführungen, Warenkorb und Kasse über die Storefront API. Der Star ist Tommy, meine eigene Katze.
Tommy & Co. ist ein Online-Shop, in dem man Katzen kaufen kann. Natürlich nur zum Schein: Es ist ein Demo-Shop, und der Star ist Tommy, meine eigene Katze. Er ist nur einmal auf Lager, hat drei Launen zur Auswahl und storniert jede Bestellung selbst, weil er lieber zu Hause bleibt.
Technisch ist es ein Headless-Shop für Shopify: Produkte, Varianten, Preise, Lagerbestand und Warenkorb kommen über die Shopify Storefront API (GraphQL), die Kasse übernimmt der Shopify-Checkout. Die Seite selbst ist in React gebaut und läuft auf Cloudflare. Dadurch lädt sie schnell und lässt sich frei gestalten, ohne an ein Shopify-Theme gebunden zu sein.
Online läuft der Shop im Demo-Modus mit Beispieldaten, aber nach denselben Regeln wie bei Shopify: Ausverkaufte Varianten lassen sich nicht wählen, die Menge endet beim Lagerbestand, und ab 500 € gibt es einen Gratis-Kratzbaum. Mit zwei Einstellungen hängt er an einem echten Shopify-Store.
Was alles drinsteckt: 26 Tiere mit eigenen Zeichnungen, darunter Pepper, der einzige Hund im Laden. Filter für Kitten und Angebote, Produktseiten mit Ausführungen, Lagerbestand und Streichpreisen, ein Warenkorb mit Gratis-Kratzbaum-Leiste und eine Demo-Kasse. Die Seite lässt sich über Google Translate in 13 Sprachen übersetzen; Google wird erst geladen, wenn man eine Sprache wählt. Dazu ein eigenes Impressum und eine eigene Datenschutzseite im Shop-Design, ein Vorschaubild für jeden geteilten Link, eine strenge Content-Security-Policy, die Google nur auf den Shop-Seiten zulässt, und automatische Tests für Warenkorb, Datenschutz und Sicherheit.
Shopify, Storefront API, GraphQL, React, TypeScript, Cloudflare Workers, Google Translate