...

Prinzip der WEBSALE WebComponents

Die WEBSALE WebComponents sind wiederverwendbare Bausteine, die von WEBSALE bereitgestellt werden und . Sie generieren automatisch Quellcode für HTML und CSS generieren. Sie vereinfachen und erleichtern die Integration komplexer Funktionen , wie Suche, Filterung oder Paginierung , in die Storefront-Templates.

Jede WebComponent beginnt mit dem Präfix ws- und folgt der bekannten HTML-Syntax. Sie müssen wie HTML-Elemente geöffnet und geschlossen werden und können zusätzlich erweitert werden.

Ein einfaches Beispiel für die Struktur einer WebComponent:

<ws-searchbox> </ws-searchbox>

WebComponents können auch um zusätzliche HTML-Elemente oder Attribute ergänzt werden, um die Funktionalität und das Design individuell anzupassen.

Zum Beispiel:

<ws-searchbox use-suggest="true">
    <input type="search" name="query" placeholder="Artikel suchen">
</ws-searchbox>

CSS-Anweisungen, die von den WebComponents generiert werden, können in eigene CSS-Dateien übernommen oder durch zusätzliche Anweisungen ergänzt werden, um das Erscheinungsbild vollständig an das Shop-Design anzupassen.

Die von WEBSALE bereitgestellten WebComponents basieren auf dem React-JS-Framework. Dank der Nutzung von React können für die WebComponents auch Dadurch können sie React-spezifische Funktionalitäten verwendet werden, z.B. die Verwendung des <template>-Tagsnutzen, wie beispielsweise das <template>-Tag.

Ein Beispiel für eine Komponente, die auf React basiert:

<template id="resultItemTemplate">
    <div className="result-item">
        <h3>{product.name}</h3>
        <p>{product.price} €</p>
    </div>
</template>

...