Bitcar

Unter der Haube

Visuelles Design-System

Das Design-System (Farbpalette, Kartenkomposition, responsive Breakpoints) wurde in enger, iterativer Zusammenarbeit mit dem Kunden entwickelt. Ohne striktes Design-Briefing wurden die Layouts während der Entwicklung kontinuierlich verfeinert.

Katalogarchitektur

Fahrzeuge und Yachten sind als WooCommerce-Produkte implementiert. Dies bietet ein einsatzbereites System aus Taxonomien und Attributen anstelle von benutzerdefinierten Tabellen:

• Kategorien/Unterkategorien: Nutzung der Standard-Taxonomie product_cat (Autos → Neuwagen/Pickup/Hatchback usw., Motorräder, Yachten).
• Standorte: (Hua Hin, Bangkok, Pattaya, Phuket, Koh Samui) werden über product_tag abgebildet, wodurch die Standortfilterung im gesamten Katalog sowie auf Partner-/Transferseiten wiederverwendet werden kann.
• Fahrzeugspezifikationen: Umsetzung durch native WooCommerce-Attribute (pa_brand, pa_transmission, pa_drive-unit, pa_insurance usw.). Yachten verfügen über ein eigenes Set an Attributen (Kapazität, Reisegeschwindigkeit, Anzahl der Kabinen, Länge, Baujahr), das sich nicht mit Autos/Motorrädern überschneidet.
• Für Felder, die WooCommerce nicht von Haus aus unterstützt (Wochen-/Monatspreise, gestaffelte Kautionen, Kilometerbegrenzungen, Frontpage-Feature-Flags), wurden über den Hook woocommerce_product_options_general_product_data benutzerdefinierte Meta-Felder hinzugefügt.

Mehrsprachigkeit

Realisiert mit Polylang: 3 Sprachversionen (RU/EN/TH) für Produkte, Kategorien und statische UI-Texte. Interface-Strings, die nicht an Inhalte gebunden sind (Blocküberschriften, Filter-Labels, Validierungsfehlermeldungen), werden über pll_register_string registriert und zentral im Polylang-Adminbereich übersetzt, ohne sie in den Templates hart zu codieren.

Mehrwährungsunterstützung

Währungsumrechnung in 5 Währungen (THB, USD, EUR, RUB, KZT) über ein WooCommerce-Multi-Currency-Plugin. Da der Umrechnungskurs des Plugins nur für den Hauptpreis greift, wurde eine eigene Logik geschrieben, um benutzerdefinierte Felder (Wochen-/Monatspreise, Kautionen) zum aktuellen Währungskurs des Nutzers umzurechnen – sowohl serverseitig (beim Rendern von Karten und Produktseiten) als auch clientseitig (bei der Echtzeit-Berechnung des Endbetrags).

Katalogfilterung (~13 Parameter)

Für jede Kategorie (Autos, Motorräder, Yachten) gibt es einen eigenen AJAX-Filter-Handler in PHP (WP_Query in Kombination mit tax_query/meta_query), der ohne Neuladen der Seite funktioniert:

• Gemeinsam für Autos/Motorräder: Kategorie, Marke, Getriebe, Antrieb, Versicherung, Abhol-/Rückgabeort, Kapazität (Passagiere/Hubraum), Preisspanne (noUiSlider), Baujahr-Spanne, Standort, Sprache.
• Exklusiv für Yachten: Werft/Hersteller, Kapazität, Reisegeschwindigkeit, Anzahl der Kabinen, Länge, Baujahr, Preis.

Der Filterstatus wird mit der URL und dem localStorage synchronisiert (der gewählte Standort bleibt bei der Navigation erhalten), was redundante Datenbankabfragen signifikant reduziert.

Dynamische Preisgestaltung

Die Mietpreise werden clientseitig basierend auf dem gewählten Zeitraum neu berechnet:

• Bis zu 7 Tage: Tagesrate.
• 7–30 Tage: Wochenrate, anteilig auf die tatsächlichen Tage umgerechnet.
• Ab 30 Tagen: Monatsrate, anteilig auf die tatsächlichen Tage umgerechnet (oder „Preis auf Anfrage“, falls keine Rate definiert ist).

Der Endbetrag wird dynamisch „on the fly“ neu berechnet, sobald Daten im Kalender ausgewählt werden, und aktualisiert sofort sowohl die Produktkarte als auch das Anfrageformular.

Buchungskalender und Datenverfügbarkeit

• Im Backend der Produktbearbeitungsseite ist ein Kalender (FullCalendar) integriert. Der Manager markiert Zeiträume, die via AJAX blockiert werden – der Eintrag wird in einer separaten, mit dem Produkt verknüpften Datenbanktabelle gespeichert.
• Da jedes Produkt über Sprachduplikate verfügt (RU/EN/TH), wird die Buchung bei der Erstellung über pll_get_post_translations über alle Sprachversionen hinweg synchronisiert. So bleiben Daten unabhängig von der betrachteten Produktsprache blockiert.
• Im Frontend werden die Buchungsdaten in einen Date-Picker (AirDatepicker) geladen: Bereits belegte und vergangene Daten sind nicht auswählbar, was dem Nutzer durch visuelle Hinweise klar kommuniziert wird.

Fahrzeugkarte und separate Yacht-Seite

Das Template der Produktkarte verzweigt sich je nach Kategorie. Bei Autos/Motorrädern erscheint ein Block mit Tages-/Wochen-/Monatsraten, Kautionen und Kilometerbegrenzungen. Yachten nutzen ein abweichendes Layout mit erweiterter Galerie, detaillierter Beschreibung und spezifischen Merkmalen (Kapazität, Knoten, Kabinen, Baujahr), zuzüglich eines separaten Anfrageformulars via Contact Form 7 (mit anderen Feldern als bei der Auto-/Motorrad-Buchung).

Wunschzettel-Seite (Favoriten)

Realisiert über YITH WooCommerce Wishlist, nutzbar für Gäste ohne Registrierung (gebunden an die Browser-Sitzung). Auf der Wunschzettel-Seite werden die Preise analog zum Katalog dynamisch in die aktuelle Währung umgerechnet, was die Datenkonsistenz auf der gesamten Website gewährleistet.

Transfer-Landingpage

Ein separates Seiten-Template (page-transfer.php) mit eigenständiger Marketingstruktur: das Alleinstellungsmerkmal (USP) des Dienstes, ein Bereich „Frühbucher = niedrigerer Preis“, eine Tabelle mit Richtpreisen nach Fahrzeugtyp und ein eigenes Anfrageformular.

Frontend und Layout

• Erstellt mit SCSS + Gulp-Build, Ausgabe in minifizierte Bundle-Dateien (app.min.js).
• Produktgalerien nutzen Swiper mit WebP-Unterstützung via <picture>/<source> und Lazy Loading.
• Benutzerdefinierte UI-Komponenten: Preisspannen-Slider (noUiSlider), angepasste Selects (select2 / Custom Select Scripts) sowie ein Sticky-Block für Preise und Formulare auf der Produktseite.
• Integration von Contact Form 7 mit benutzerdefinierter Telefonnummern-Validierung und lokalisierten Fehlermeldungen via Polylang.
• Analytics-Integration (Google Tag / gtag.js, Meta Pixel) zur Verfolgung von Conversion-Ereignissen.