Ditco Food ist ein Lebensmittellieferant mit Sitz in Izmir, der drei eigenständige Marken führt: Ditco Ingredients für botanische Rohstoffe, Pino Roble für Gourmetprodukte und Ditco Food für Produkte der Profiküche. Gefragt war ein deutsch- und englischsprachiger B2B-Produktkatalog für europäische Einkäufer, der statt Preisen und Warenkorb Angebotsanfragen sammelt. ditcoeu.com ist die Katalog- und Angebotsplattform, die wir dafür von Grund auf entwickelt haben; sämtliche Inhalte kommen aus der Datenbank.

Ausgangslage und Anforderungen

Die bisherige Website lief auf einer Standard-E-Commerce-Plattform, die nicht zum B2B-Vertrieb passte. Warenkorb, Lagerbestand und Preisfelder helfen einem Importeur wenig; entscheidend sind Produktinformationen, Verpackungsoptionen, Zertifikate und eine Anfrage, die bei der richtigen Person ankommt. Zudem lagen die Produkte der drei Marken verteilt in drei verschiedenen Quellen.

Zu Projektbeginn wurden einige Grundsatzentscheidungen festgelegt: Die Website ist ein B2B-Katalog ohne Online-Zahlung, Warenkorb oder Bestellprozess; jede Produktseite trägt statt eines Preises die Schaltfläche Angebot anfragen; Produkte, Kategorien, Banner, Team- und Kontaktdaten stehen nicht im Code, sondern kommen vollständig aus dem Admin-Panel. Eine neue Sprache sollte ohne Schemaänderung hinzugefügt werden können.

Lösung und Umfang

Einstiegsseite für drei Marken

Die Startseite öffnet mit einem dreigeteilten Split-Hero rund um einen zentralen Logokreis. Jedes Panel steht für eine Marke und führt direkt zur Kategorieliste der jeweiligen Produktgruppe. Auf ein klassisches Hauptmenü wurde verzichtet; die Navigation erfolgt über ein fixiertes Off-Canvas-Menü.

Produktkatalog

Der Katalog führt schrittweise von der Produktgruppe über die Kategorie zum Produkt. Die drei Marken wurden aus ihren eigenen Websites zusammengeführt und neu strukturiert; derzeit umfasst der Katalog 170 Produkte. Die Produktseite vereint Bildergalerie, Varianten und Verpackungsoptionen, technische Spezifikationen und Breadcrumbs; Kategoriekarten erscheinen mit Titelbildern.

Angebotsanfrage

Im Anfrageformular wählen Besucher Produkte über eine Auswahlliste aus; wer von einer Produktseite kommt, findet das Produkt bereits vorausgewählt. Das Formular erfasst B2B-Angaben wie Firmenname, Ansprechpartner, E-Mail, Land und gewünschte Menge, setzt die Datenschutzeinwilligung voraus und nutzt ein verstecktes Honeypot-Feld gegen Bots. Pro Anfrage sind bis zu 50 Positionen möglich.

Unternehmensseiten

Über uns, Team, Zertifikate und Kontakt wurden neu gestaltet. Die Zertifikatsseite zeigt FSSC 22000, BRC Global Standard, ISO 22000, ISO 9001, Halal und Koscher mit den echten Logos und einer Dokumentengalerie. Die Kontaktseite bietet die Büroadressen, ein Banner mit Weltkarte und zwei getrennte Formulare. Datenschutz, Nutzungsbedingungen und Cookie-Richtlinie werden ebenfalls im Panel gepflegt.

Admin-Panel

Das Projekt war so geplant, dass Backend und Admin-Panel vor dem Frontend fertig waren. Im Panel verwalten Sie:

• Produktgruppen und Kategorien: Auswahl der Oberkategorie, Filter nach Gruppe und Sortierung; Gruppenbanner werden aus der Medienbibliothek gewählt.
• Produkte: Sprachreiter, Varianten und Verpackungen, mehrere Bilder und technische Spezifikationen, mit einem Hinweis auf Sprachreitern ohne Übersetzung.
• Angebotsanfragen: Statusablauf (neu, in Prüfung, kontaktiert, qualifiziert, abgeschlossen, Spam), Zuweisung, interne Notizen, Schnellaktionen für E-Mail, Telefon und WhatsApp sowie CSV-Export.
• Angebote (Sales Quote): Angebotseditor mit direkt bearbeitbaren Positionen, automatischer Angebotsnummer, Revisions- und Versandprotokoll sowie einem druckbaren Angebotsdokument für den Kunden.
• Kunden: Anlage von Kundendatensätzen aus Angeboten samt Verlauf.
• Team und Büros: mehrsprachige Einträge mit Sortierung.
• Website-Einstellungen und Theme: Farbpalette, Logo, Favicon, Social-Media-Links und Rechtstexte.

Formulare warnen vor ungespeicherten Änderungen, sperren Doppelabsendungen und verlangen vor dem Löschen eine Bestätigung.

Technische Architektur

Das Frontend basiert auf Next.js 16 und React 19, das Admin-Panel ist eine eigene Next.js-Anwendung, die API läuft mit Fastify auf Bun. Die Datenschicht bilden MySQL und Drizzle ORM; für den Katalog gibt es eigene Tabellen für Produkte, Produktübersetzungen, Varianten, Bilder, Spezifikationen, Büros, Teammitglieder und Anfragepositionen. Jede Inhaltstabelle hat eine Übersetzungstabelle; deshalb ließ sich Deutsch später ergänzen, ohne das Schema anzufassen.

Die aktiven Sprachen werden aus einer Datenbankeinstellung gelesen. Standardsprache ist Deutsch, die URLs sind lokalisiert, und beim Sprachwechsel ändert sich auch der Slug. Wird eine nicht unterstützte Sprache angefragt, liefert die API einen klaren Fehler statt stillschweigend auf eine andere Sprache auszuweichen. Öffentliche Katalogantworten werden kurz zwischengespeichert, Admin-Antworten nie.

Für SEO sind strukturierte Organization-Daten, eine dynamische Sitemap, Robots-Regeln, eine llms.txt und ein IndexNow-Schlüssel eingerichtet. Die Farben stammen aus einem zentralen Token-Set; zwei Paletten, Unternehmensgrün und Petrol, lassen sich im Panel umschalten. Geheime Schlüssel sind so konfiguriert, dass die Anwendung ohne sie nicht startet.

Integrationen

Im Admin-Panel stehen Google-Kontoanbindung (Gmail und Kalender), Search Console, GA4 und Google Ads bereit. Angebotsdokumente werden als tokengeschützte Seiten erzeugt, die sich direkt im Browser drucken lassen. Die Website läuft auf einem eigenen VPS mit PM2 und Nginx, hinter Cloudflare mit SSL.

Ergebnis

Ditco Food präsentiert heute alle drei Marken unter einer Domain, auf Deutsch und Englisch, so aufgebaut, wie B2B-Einkäufer es erwarten. Ein Produkt anlegen, ein Zertifikat aktualisieren oder eine Anfrage in ein Angebot umwandeln erfordert keinen Entwickler mehr; all das geschieht im Panel. Angebots-PDFs und automatischer Angebotsversand per E-Mail sind für eine zweite Phase vorgesehen.