Seitenvergleich

...

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

...

Das Zusammenbauen des Elements sollte über \Brandbox\ShopCore\Shop\Configurator\Lib\Event\OnPopulateElement gemacht werden. Hier muss aber zuerst geprüft werden, dass $event→identifier und $event→context für das Element valide sind.

Javascript

Der Konfigurator besitzt eine eigene Struktur für das Javascript, um direkt mit dem Artikel zu arbeiten.

Payload

Die Payload ist ein Datenobjekt, welches als Kommunikation zwischen JS und PHP gedacht ist.

Die Payload kann mit Shop\Configurator\Lib\Event\OnPopulatePayload in PHP befüllt werden und wird bei configurator.change() Requests mit JS an PHP Shop\Configurator\Lib\Event\OnExecuteChange zurückgeschickt. Hier können auch eigene Daten hinzugefügt werden.

Change

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

// ...

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()
    }
}

// ...

Beispiel php quantity change

// ...

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);
            }
        }
    }
}

// ...

Modul / eigenes Script laden

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

$element->attributes['data-shop-configurator-module'] = '/plugin/remote/brandbox/shop-core/src/Shop/CartSessionArticle/js/configurator-quantity.js';

Erwartet wird mindestens folgendes:

Beispielklasse

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

Übersicht Events Daten