Builder-Seiten, Code-Seiten, Runtime-API und Built-in-Komponenten.
Seiten bilden die öffentlichen URLs einer Website. Komponenten sind wiederverwendbare Bausteine, aus denen Seiten aufgebaut werden. Eine Website kann einfache Inhaltsseiten, Landingpages, Shop- oder Checkout-Bereiche und eigene React-Komponenten kombinieren.
Die Pflege erfolgt im simplebis-manager über Webseiten. Dort eine Website öffnen und die Bereiche Seiten oder Komponenten verwenden. Seiten erhalten einen Titel und einen URL-Pfad. Komponenten erhalten einen Namen, einen Typ und die benötigten Eigenschaften.
Der URL-Pfad einer Seite muss innerhalb der Website eindeutig sein. Dynamische Pfade können über Parameter wie :slug oder [slug] abgebildet werden, zum Beispiel /blog/:slug. Zusätzlich können Metainformationen wie Seitentitel, Beschreibung und Meta-Tags gepflegt werden.
Der Builder-Modus eignet sich für Seiten, die aus vorhandenen Komponenten zusammengesetzt werden. Im Builder werden Komponenten ausgewählt, sortiert und über ihre Eigenschaften konfiguriert. Dieser Modus ist sinnvoll, wenn Inhalte und Layout ohne Codepflege angepasst werden sollen.
Der Code-Modus eignet sich für individuelle Seitenlogik. Eine Code-Seite erwartet einen React-Component-Export als Standardexport. Diese Variante wird verwendet, wenn Layout, Datenlogik oder Interaktion über Code abgebildet werden müssen.
Komponenten können als Server- oder Client-Komponenten angelegt werden. Über Eigenschaften wird festgelegt, welche Werte im Builder gepflegbar sind, zum Beispiel Text, Zahl, Checkbox, Datei, Formular, Menü oder andere Website-Bausteine. Komponenten können zusätzlich eigene SCSS-Dateien verwenden.
Server-Code-Seiten und Server-Komponenten erhalten zur Laufzeit ein Objekt mit props, data, children, _, renderComponent, getMenu, menus, mcp, pluginConfig und api. Im api-Objekt stehen unter anderem api.website, api.page, api.props, api.params, api.routeParams, api.searchParams, api.path, api.language, api.translations, api.customer, api.menus, api.getMenu(key), api.pluginConfig(...), api.mcp.call(...), api.abort, api.buildUrl(path) und api.renderComponent(...) zur Verfügung.
api.buildUrl('/pfad') erzeugt eine URL mit passendem Website-Basispfad. api.renderComponent(...) rendert eine registrierte Website-Komponente. api.getMenu(key) lädt ein im Manager gepflegtes Menü. api.mcp.call(...) ist serverseitig nutzbar, wenn die benötigten MCP-Scopes an der Seite oder Komponente freigegeben sind.
Client-Komponenten erhalten nur serialisierbare Laufzeitdaten. Dort stehen insbesondere api.website, api.page, api.props, api.data, api.params, api.routeParams, api.searchParams, api.path, api.language, api.translations, api.pluginConfig(...), api.buildUrl(path), api.navigate(to), api.replace(to), api.refresh(), api.refreshContext() und api.cookies zur Verfügung. Server-only Funktionen wie mcp.call werden in Client-Komponenten nicht direkt genutzt.
api.functions.call(...) steht in Website-Contexts zur Verfügung. Ein Website-Context läuft serverseitig vor dem Rendering und schreibt sein Ergebnis über den konfigurierten target_key in data. Seiten und Komponenten lesen diese Daten anschließend aus data[target_key]. Dadurch bleiben Datenzugriffe zentral konfiguriert und können im Manager über plugin_contexts an Seiten oder Komponenten aktiviert werden.
Aktuell sind für Website-Contexts diese ApiFunction-Keys vorgesehen:
articles.list: Artikelliste laden.articles.categories.list: Artikelkategorien laden.events.list: Veranstaltungen laden.posts.list: Beiträge laden.posts.categories.list: Beitragskategorien laden.cart: aktuellen Shop-Warenkorb-Kontext laden.Beispiel für einen Website-Context:
exports.default = async function articlesContext({ api, params }) {
return await api.functions.call("articles.list", {
categories: params.categories,
limit: params.limit || 12,
offset: params.offset || 0,
});
}
In der Seite oder Komponente steht das Ergebnis anschließend über den im Context gesetzten target_key in data zur Verfügung.
simplebis stellt mehrere Built-in-Komponenten bereit, die im Builder genutzt oder in Code-Komponenten über renderComponent(...) beziehungsweise api.renderComponent(...) gerendert werden können.
builtin:add_to_cart_button / AddToCartButton: Client-Komponente für Warenkorb-Aktionen. Wichtige Props sind mode, shopId, articleId, eventId, ticketGroupId, quantity, label, cartLabel, disabled, hideCartLink, currentQuantity, cartData, refreshPage, refreshMode und className.builtin:redirect / Redirect: Client-Komponente für Weiterleitungen. Props sind to, replace und external.builtin:form / Formular: Server-Komponente für Website-Formulare. Props sind formId, submitLabel, successTitle, successText und className.builtin:menu / Menu: Server-Komponente für Website-Menüs. Props sind menu, menuKey, className und ariaLabel.Beispiel für die Verwendung in einer Server-Code-Komponente:
const React = require("react");
exports.default = async function LandingPage({ api }) {
return React.createElement(
"main",
{ className: "landing-page" },
await api.renderComponent("builtin:menu", {
menuKey: "main",
className: "landing-page__nav",
ariaLabel: "Hauptnavigation",
}),
React.createElement("h1", null, "Angebote"),
await api.renderComponent("builtin:add_to_cart_button", {
shopId: "SHOP_ID",
articleId: "ARTICLE_ID",
quantity: 1,
label: "In den Warenkorb",
cartLabel: "Zum Warenkorb",
}),
);
};
Für interne Links in eigenem Code sollte Link aus @webtypen/webframez-react/navigation verwendet werden. Für URL-Strings ist api.buildUrl('/pfad') vorgesehen.
Nach Änderungen an Seiten, Komponenten, Website-Contexts oder Built-in-Komponenten sollten öffentliche URL, Desktop- und Mobilansicht, verknüpfte Medien, Formulare, Menüs, Warenkorb, Checkout und betroffene Daten aus Besuchersicht geprüft werden.