Developer
Mit @shopvento/ui baust Du Buchungen und Verkauf in Deine React-Website ein. Die Komponenten nutzen die Shopvento-API. Du gestaltest die Website.
Komponenten für Deine Website
Veranstaltungen und Termine
Zeige verfügbare Termine und freie Plätze. Gäste wählen einen Termin und buchen Plätze. Dabei können sie Gutscheine einlösen.
Gutscheine
Verkaufe Wert- und Veranstaltungsgutscheine. Das Backoffice berücksichtigt die steuerliche Behandlung auch bei Mehrzweckgutscheinen und ihrer Einlösung.
Warenkorb und Checkout
Verbinde Angebote mit einem gemeinsamen Warenkorb. Preise, Verfügbarkeit und Zahlungen prüft die API.
Kundenkonto
Gib Deinen Gästen Zugang zu Anmeldung, Registrierung und ihren Buchungen und Bestellungen auf Deiner Website.
Shopvento-API
Die Komponenten laden Angebote und Termine über die öffentliche Shopvento-API. Buchungen und Bestellungen gehen an Dein Backoffice. Dort verwaltet Dein Team auch Gutscheine und die Kassenanbindung.
Du hinterlegst die Adresse Deiner Shopvento-Installation. Deine Website muss für den Zugriff als erlaubte Adresse eingerichtet sein. Im Kundenkonto meldet sich jeder Gast mit seinem eigenen Zugang an.
Verfügbare Plätze, Gutscheinwerte und Buchungsregeln kommen aus dem Backend. Für Deine Website und den fertigen Shop gelten dieselben Regeln.
EventBooking einbauen
EventBooking zeigt die Termin- und Platzwahl für eine Veranstaltung. Trage die Adresse Deiner Installation ein. Ersetze auch die Veranstaltungs- und Standortnummer durch Deine Werte. Für Gastbuchungen hinterlegst Du Deinen öffentlichen Turnstile-Schlüssel.
"use client";
import { EventBooking } from "@shopvento/ui";
import "@shopvento/ui/styles.css";
export default function EventBooking() {
return (
<EventBooking
baseUrl="https://deinbetrieb.shopvento.app"
eventId={123}
locationId={3}
turnstileSiteKey="DEIN_OEFFENTLICHER_TURNSTILE_SCHLUESSEL"
termsUrl="/agb"
privacyUrl="/datenschutz"
/>
);
}In Next.js lädst Du die CSS-Datei einmal im Layout und setzt die Buchung in eine Client-Komponente. Die Adressen für AGB und Datenschutz führen zu Deinen eigenen rechtlichen Seiten.
Gestaltung mit CSS
Über CSS-Variablen legst Du Farben, Schrift, Abstände und Rundungen fest. Übernimm ganze Abläufe oder füge einzelne Komponenten in Dein Layout ein. Deine Website behält ihre Navigation und ihre Seitenstruktur.
Dokumentation
Die vollständige Dokumentation ist auf Englisch: Einstieg, Theming, alle Komponenten mit ihren Props und die Shop-API.
Open Source
@shopvento/ui steht unter der MIT-Lizenz. Du installierst es mit:
npm install @shopvento/uiWas möchtest Du in Deine Website einbauen?
Zeig uns, welche Abläufe Du auf Deiner Website anbieten möchtest.