...
Der Konfigurator bietet die Möglichkeit eine Ansicht anhand einer Konfiguration darzustellen, die dazu dient, eine Entity über verschiedene UI-Elemente zu konfigurieren.
Beispiele:
shopSessionArticle dem die Menge, die Variante, das Editor-Dokument, etc. konfiguriert wird, bevor er in den Warenkorb gelegt wird.
Paketartikel
weitere
Ein Implementations- und Pflegebeispiel findet sich hier.
...
Beispiel (Artikelkonfigurator auf Basis des shopSessionArticle):
Konfigurator-Datensatz "Standard"
Bereich "Intro"
Varianten: xs-12
Inhalte: Artikelüberschrift, Artikelbeschreibung
Bereich "Stage"
Varianten: xs-12, md-6
Inhalte: Artikelgallerie
Bereich "Konfiguration"
Varianten: xs-12, md-6
Inhalte: Bestellprozess, Variantenauswahl
Erweiterbarkeit
Eigene Elemente registrieren
...
Um eine Änderung oder Aktion im Konfigurator auszuführen, sollte die Change-Methode verwendet werden. Dabei sollte die payload entsprechend angepasst werden und eine action hinzugefügt werden und this.configurator.change aufgerufen werden. Danach wird in PHP das Event Shop\Configurator\Lib\Event\OnExecuteChange ausgeführt und man kann auf seine action und die geänderte payload reagieren. Um Feedback oder Änderungen der Payload zurück in die Ui zu liefern, sollten StackActions (Http\Response\AdvancedResponseStackElementAbstract) verwendet werden.
...
Hinweis: Falls eigene Daten für in der Payload mitgeschickt werden sollen, sollten diese auch in OnPopulatePayload hinzugefügt werden. Nicht nur beim Request im js. Siehe auch Abschnitt für Payload.
Beispiel js quantity change
| Codeblock | ||
|---|---|---|
| ||
// ...
async myChangeAction() {
if (
false === this.configurator.blocked &&
this.configurator.payload.hasOwnProperty('cartSessionArticle') &&
this.configurator.payload.cartSessionArticle.shopSessionArticleQuantity !== this.quantity
) {
this.configurator.payload.cartSessionArticle.shopSessionArticleQuantity = this.quantity
this.configurator.payload.actions.push('MyChangeAction')
this.configurator.change()
}
}
// ... | ||
| Codeblock | ||
| language | php | RDark | title |
Beispiel php quantity change
| Codeblock | ||
|---|---|---|
| ||
// ...
public const ACTION_QUANTITY = 'MyChangeAction';
public const PAYLOAD_KEY = 'cartSessionArticle';
// $payload = Configurator\Lib\Event\OnExecuteChange $event->payload
public function process(array $payload, ?Http\Response\AdvancedResponseStack $response): void
{
// do not just copy. This is an example.
if (
array_key_exists('actions', $payload) &&
in_array(self::ACTION_QUANTITY, $payload['actions']) &&
array_key_exists(self::PAYLOAD_KEY, $payload) &&
array_key_exists('shopSessionArticleQuantity', $payload[self::PAYLOAD_KEY])
) {
$entity = $this
->staticController(CartSessionArticle\Manager::class)
->getConfiguratorRequestEntity()
;
if ($entity instanceof CartSessionArticle\Lib\Struct\CartSessionArticle) {
$quantity = (int)$payload[self::PAYLOAD_KEY]['shopSessionArticleQuantity'];
$this
->staticController(CartSessionArticle\Lib\Execute\Quantity::class)
->execute($entity->sessionArticle, $quantity)
;
if ($response instanceof Http\Response\AdvancedResponseStack) {
$element = new CartSessionArticle\Lib\Response\StackAction\ConfiguratorQuantityUpdate();
$element->quantity = $quantity;
$response->add($element);
}
}
}
}
// ... |
...
Um ein eigenes Modul für den Konfigurator zu laden, sollte das Data-Attribut "data-shop-configurator-module" verwendet werden. Dort sollte der Pfad von root /plugin/remote/brandbox/ beginnent angegeben werden.
Beispiel
| Codeblock | ||||||
|---|---|---|---|---|---|---|
| ||||||
$element->attributes['data-shop-configurator-module'] = '/plugin/remote/brandbox/shop-core/src/Shop/CartSessionArticle/js/configurator-quantity.js'; |
Erwartet wird mindestens folgendes:
Beispielklasse
| Codeblock | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
export default class MyDummyConfiguratorModule {
/**
* @param {ShopConfigurator} configurator
*/
constructor(configurator) {
this.configurator = configurator
}
async process(element) {
this.element = element
this.changeExample()
}
async changeExample() {
this.configurator.payload.actions.push('MyActionKey')
this.configurator.change()
}
} |
constuctor
Übersicht Events View
Event | Beschreibung |
|---|---|
| Damit kann ein eigenes Element registriert werden. Siehe auch "Eigenes Element registrieren". |
| Damit kann Einfluss über den Context genommen werden. Der Kontext dient als Basis für folgende Events und definiert, in welchem Kontext der Konfigurator gerade aufgerufen wird. |
| Damit kann die Struktur angepasst werden. Die Struktur ist der Aufbau der Bereiche und deren Inhalten. Das ist die Ebene der Pflege der Konfiguration für den Konfigurator. |
| Aufbau der UI-Elemente. Standardmäßig wird hier auch |
| Aufbau der UI-Elemente des einzelnen Bereichs. Standardmäßig wird hier auch |
| Aufbau des spezifischen UI-Elements für den in der Struktur hinterlegten Inhalt für diesen konkreten Bereich. Siehe auch "Eigene Elemente darstellen". |
| Dient dazu, die HTML-Meta-Tags wie keywords, title, canonical link für den Kontext des Konfigurators zu definierten. |
Übersicht Events Daten
Event | Beschreibung |
|---|---|
| Wird nach dem Laden der Seite aufgerufen. Erlaubt das Ausführen von StackResponses direkt nach dem Aufrufen der Seite. |
| Die Payload steht im JS zur Verfügung und wird von da requests wieder an PHP mitgeschickt. |
| Die Options werden bei requests und posts vom Konfigurator mitgeschickt. |
| Wird bei Änderungen im Konfigurator via Request aufgerufen. Hier wird die Payload aus dem JS (und OnPopluatePayload) mitgeschickt. Zusätzlich gibt es in der $payload den allgemeinen Key 'actions', mit dem die ausgeführten Aktionen lose mitgegeben werden. |