ReactJS Programmierung

Entwicklung von Widgets mit Scrivito.

Mein erstes selbst entwickeltes Scrivito Widget.

Unterhalb dieses Bereichs sehen Sie eine “Share This” Komponente. Die gleiche Komponente habe ich vor längerer Zeit mit Vue.js entwickelt. Da lag es nahe, dass ich diese Komponente, als Vorlage für mein erstes Scrivito Widget benutzt habe. Scrivito Widgets werden mit React entwickelt und der Unterschied zwischen Vue und React ist nicht so groß.

Scrivito Architektur

Um ein Widget für Scrivito zu erstellen, braucht es drei React Dateien.

  1. SocialLinksWidgetClass.js
  2. SocialLinksWidgetEditing.js
  3. SocialLinksWidgetComponent.js

Die Namensvergabe ist zwingend einzuhalten. Vorne steht immer der Name des Widgets, dann folgt “Widget“ und dann “Class“, “Editing" und “Component“.

In der ersten Datei wird das Datenmodel des Widgets festgelegt. Daraus generiert Scrivito ein Formular zur Erfassung von Attributen. In meinem SocialLinks Widget wird eine URL und ein kurzer Text benötigt.

So sieht der Code aus.

import * as Scrivito from 'scrivito';

const SocialLinksWidget = Scrivito.provideWidgetClass('SocialLinksWidget', {

attributes: {
  url: 'string',
  textToShare: 'string',
},

});

export default SocialLinksWidget;

Verglichen mit anderen CMS ist die Erstellung eines Formulars sehr einfach. Attribute können alles mögliche speichern, so z.B. auch Hintergrundfarben, Größen, Ausrichtungen von Elementen und was man sich sonst noch alles so vorstellen kann.

In der SocialLinksWidgetEditing.js wird das Widget und seine Attribute detailiert beschrieben:

import * as Scrivito from 'scrivito';
import boxWidgetIcon from '../../assets/images/box_widget.svg';

Scrivito.provideEditingConfig('SocialLinksWidget', {

   title: 'Social Links',
   thumbnail: `/${boxWidgetIcon}`,

attributes: {
   url: {
   title: 'Page slug',
   description: 'URL to this page. Format as slug',
},

textToShare: {
   title: 'Text',
   description: 'Text you want to share',
},
},

properties: [
   'url',
   'textToShare',
]
});

Die letzte JS-Datei ist schließlich die React Komponente, welche das Widget, für die Ausgabe im Frontend, rendered. Da der Code etwas länger ist, möchte ich hier darauf verzichten ihn hier anzuzeigen. Im Grunde genommen kann hier in JSX auf die Daten der Attribute zugegriffen werden und jegliches HTML benutzt werden.

So werden in meiner Komponente die Links zu Twitter und Facebook generiert. Endbenutzer können dieses Widget nun überall nutzen und sehr einfach den Link und den Text, der geteilt werden soll, vergeben. Eine Verbesserung wäre noch, wenn die URL vom Widget automatisch generiert wird.

Komplexere Widgets haben natürlich komplizierteren Code, als dieses kleine Beispiel. Aber zum erlernen der Scrivito Widget-Programmierung bieten sich einfache Widgets an.

Weitere Widgets, die ich entwickelt habe.
Z.B. dieses Eyecatcher-Widget.

Bild

Dieses Bootstrap Media Object.

So ein Media Object beinhaltet ein Bild, eine Headline, einen Link und einen kurzen Text.

Bootstrap Cards

Scrivito verfügt zwar schon über ein Card Widget, allerdings gefällt mir die Implementierung nicht so richtig. Es fehlt die Möglichkeit die Cards, als Deck oder als Group zu rendern. Das ist bei meinem Widget der Fall. Im Card Container Widget kann der Benutzer einfach Deck oder Group wählen. Alles weitere geschieht, beim Hinzufügen von Cards, automatisch.

Card Widget

Im Container Widget kann der Benutzer angeben, ob ein Bootstrap Card-Deck oder eine Bootstrap Card-Group benutzt wird. Dies ist ein Deck.

Card Widget

Im Container Widget kann der Benutzer angeben, ob ein Bootstrap Card-Deck oder eine Bootstrap Card-Group benutzt wird. Dies ist ein Deck.
Dank Flexbox werden die Karten immer in der selben Höhe angezeigt.

Card Widget

Im Container Widget kann der Benutzer angeben, ob ein Bootstrap Card-Deck oder eine Bootstrap Card-Group benutzt wird. Dies ist ein Deck.

Card Widget

Im Container Widget kann der Benutzer angeben, ob ein Bootstrap Card-Deck oder eine Bootstrap Card-Group benutzt wird. Dies ist eine Group.

Card Widget

Im Container Widget kann der Benutzer angeben, ob ein Bootstrap Card-Deck oder eine Bootstrap Card-Group benutzt wird. Dies ist eine Group.

Card Widget

Im Container Widget kann der Benutzer angeben, ob ein Bootstrap Card-Deck oder eine Bootstrap Card-Group benutzt wird. Dies ist eine Group.

Kommentare

Melde dich bitte an, wenn du einen Kommentar schreiben möchtest.
Es wurden noch keine Kommentare erstellt. Sei Erste(r).

Fazit

Sind Sie an individuellen Widgets für Ihr Scrivito-Projekt interessiert?

Dann können Sie mich gerne kontaktieren: per Mail an m.droste@mdwp.de oder telefonisch unter +49 2331 62 85 27 3