Product Custom Inputs: Storefront
Product Custom Inputs im Sylius-Storefront: Add-to-Cart-Formular, Verhalten bei Pflichtfeldern und erneutem Hinzufügen, Anzeige-Hooks mit Prioritäten und Template-Override.
Product Custom Inputs: Storefront
Diese Dokumentation bezieht sich immer auf die aktuellste veröffentlichte Version.
Add-to-Cart-Formular
Das Plugin erweitert das Add-to-Cart-Formular von Sylius (CartItemType) um ein Feld pro zugeordnetem Custom Input Field, sortiert nach Position. Je Feldtyp wird das passende Formularelement gerendert, die Grenzen aus der Felddefinition gelten als Validierung. Der Platzhalter erscheint nur bei Text, mehrzeiligem Text und Zahl.
- Speichern: Die Eingaben werden beim Absenden gesammelt und erst gespeichert, nachdem Sylius entschieden hat, ob eine neue Warenkorbposition entsteht oder die Menge einer bestehenden Position erhöht wird.
- Erneutes Hinzufügen: Legt ein Kunde dieselbe Variante nochmals in den Warenkorb, landet sie auf derselben Position. Die neuen Eingaben überschreiben dann die bisherigen Werte dieser Position.
- Pflichtfelder: Ein Pflichtfeld wird nur beim echten Hinzufügen geprüft, nicht bei jedem Neurendern der Seite (Variantenwechsel, Änderung eines anderen Feldes). Sonst würde ein Fehler an einem Feld, das der Kunde noch gar nicht erreicht hat, den Button von Sylius sperren.
Anzeige
Eine einzige Twig-Funktion liefert die Werte für alle Stellen, damit die Formatierung an einem Ort liegt:
{% for input in mmd_order_item_custom_input_values(item) %}
{{ input.label }}: {{ input.value }}
{% endfor %}
Sie gibt eine Liste aus label und value zurück. Eine Checkbox erscheint als übersetztes "Ja" oder "Nein", ein Auswahlwert als das konfigurierte Label (ist die Option inzwischen entfernt, der gespeicherte Rohwert). Datum und Uhrzeit erscheinen so, wie sie gespeichert sind, ohne Anpassung an die Locale.
| Ort | Hook | Priorität |
|---|---|---|
| Produktseite (Eingabefelder) | sylius_shop.product.show.content.info.summary.add_to_cart |
50 |
| Warenkorbseite (Kopf, Zeilen) | sylius_shop.cart.index.content.form.sections.general.items.head und .body |
250 |
| Checkout-Seitenleiste | sylius_shop.checkout.common.sidebar.summary.items.item |
150 |
| Bestellübersicht (Checkout-Abschluss und Kundenkonto) | sylius_shop.shared.order.show.summary.table.header und .body |
250 |
| Admin-Bestellansicht | sylius_admin.order.show.content.sections.items.head und .body |
-50 |
Der Hook für die Bestellübersicht wird sowohl vom Checkout-Abschluss als auch von der Bestellhistorie im Kundenkonto verwendet.
Template überschreiben
Alle Templates des Plugins lassen sich in der Anwendung oder im Theme überschreiben. Das wichtigste ist das Eingabe-Template der Produktseite:
templates/shop/product/show/content/info/summary/add_to_cart/custom_inputs.html.twig
Beim Überschreiben die fehlerabhängige
data-model-Behandlung beibehalten. Sie sorgt dafür, dass ein Feld mit Fehler bei jeder Änderung neu rendert und der Button wieder freigegeben wird, sobald die Eingabe korrekt ist. Fehlt sie, bleibt der Button nach einem Validierungsfehler gesperrt.
Ersetzt ein Theme ein Template, an dem einer der Hooks hängt, erscheint die Anzeige dort nur, wenn das Theme-Template den Hook selbst wieder aufruft.