Besondere Komponenten

In dieser Anleitung wird davon ausgegangen, dass Sie mit der Funktionsweise des Routings in einer PWA Kit-Storefront vertraut sind. Mehr darüber erfahren Sie in unserer Anleitung Routing.

Das PWA Kit React SDK enthält die folgenden Sonderkomponenten: AppConfig, App, Error und Document.

Sie können die Standardimplementierung der einzelnen Sonderkomponenten mit Ihrer eigenen maßgeschneiderten Version überschreiben, sodass Sie das Verhalten Ihrer Storefront seitenübergreifend konfigurieren und anpassen können.

Sehen wir uns jetzt jede dieser Sonderkomponenten genauer an:

Sie finden die Komponente AppConfig in Ihrer React App relativ weit oben in der Komponentenhierarchie. Von dieser Position aus können Sie Code einfügen, um appweite Funktionalitäten wie die Zustandsverwaltung oder Komponententhemen zu konfigurieren und zu unterstützen. In der Retail React App wird die Komponente ChakraProvider in AppConfig eingefügt, um Themenwerte (für Farben, Abstände etc.) der gesamten Chakra UI verfügbar zu machen.

Mit der Komponente AppConfig können Sie darüber hinaus den Argumentensatz erweitern, der über die getProps-Funktion an alle von routeComponent erweiterten Komponenten übergeben wird. Um diese Argumente hinzuzufügen, definieren Sie eine Funktion namens extraGetPropsArgs als Eigenschaft der AppConfig-Komponente.

Die Retail React App gestattet mit der Funktion extraGetPropsArgs allen von routeComponent erweiterten Komponenten Zugriff auf ein Objekt für die Interaktion mit der Salesforce Commerce API:

Die Version der AppConfig-Komponente aus dem PWA Kit React SDK wird erst wirklich wirksam, wenn Sie sie überschreiben. Um die SDK-Version von AppConfig zu überschreiben, definieren Sie in app/components/_app-config/index.jsx eine Datei. Ein neu erstelltes PWA Kit Projekt enthält diese Datei bereits, um Ihnen den Einstieg zu erleichtern.

Die App-Komponente ist der Komponente AppConfig untergeordnet. Ihr Hauptzweck besteht darin, alle Komponenten für Layout und Benutzeroberfläche einzuschließen, die überall in Ihrer React App verwendet werden wie Header, Footer und Seitenleiste.

Die App-Komponente wird ebenfalls von der routeComponent-Funktion erweitert. Wenn Sie eine getProps-Funktion als Eigenschaft der App-Komponente definieren, wird sie jedes Mal aufgerufen, wenn eine der Komponenten des routes-Arrays gerendert wird. Diese Funktionalität können Sie sich für jede Logik zunutze machen, die Sie auf allen Seiten ausführen möchten.

Wie für AppConfig ist auch für die App-Komponente eine Standardversion im PWA Kit React SDK vorhanden, und wir empfehlen Ihnen, auch sie zu überschreiben. Um die SDK-Version von App zu überschreiben, definieren Sie in app/components/_app/index.jsx eine Datei. Ein neu erstelltes PWA Kit Projekt enthält diese Datei bereits, um Ihnen den Einstieg zu erleichtern.

Dies sind einige der Funktionen, die in App bei einem neu erstellten Projekt implementiert sind: Analytics-Verfolgung, Offline-Erkennung und die SkipNavLink-Komponente für schnelleren Zugriff auf die Seiteninhalte.

Unter jeder der folgenden Bedingungen wird anstatt der App-Komponente die Error-Komponente gerendert:

  • Der Benutzer fordert einen Pfad an, der nicht im routes-Array enthalten ist.
  • Eine Komponente des routes-Arrays wirft in ihrer getProps-Funktion einen Fehler.
  • Eine Komponente des routes-Arrays wirft während des Renderings einen Fehler.

Wenn die Error-Komponente zurückgegeben wird, enthält der Antwort-Header ebenfalls einen HTTP-404-Statuscode.

Wie die anderen Sonderkomponenten enthält das PWA Kit React SKD ebenfalls eine Standardversion der Error-Komponenten, und wir legen Ihnen nahe, sie zu überschreiben. Um die SDK-Version von Error zu überschreiben, definieren Sie in app/components/_error/index.jsx eine Datei. Ein neu erstelltes PWA Kit Projekt enthält diese Datei bereits, um Ihnen den Einstieg zu erleichtern.

Durch Überschreiben der Error-Komponente können Sie beispielsweise die Fehlerseite mit Ihrer Marke gestalten, Umleitungen hinzufügen und Fehler als ein Analytics-Ereignis verfolgen.

Die Document-Komponente definiert den Ihre Anwendung umgebenden HTML-Code wie beispielsweise die Tags <html>, <head> und <body>.

Wie die anderen Sonderkomponenten enthält das PWA Kit React SKD ebenfalls eine Standardversion der Document-Komponente, die Sie überschreiben können. Aber in diesem Fall empfehlen wir nicht, dass Sie dies tun. Sollten Sie jedoch eine feinkörnige Kontrolle über Ihre Anwendung benötigen, können Sie Document überschreiben, indem Sie in app/components/_document/index.jsx eine Datei definieren. Ein neu erstelltes PWA Kit Projekt enthält diese Datei nicht.

Anstatt die Document-Komponente zu überschreiben, empfehlen wir, für die Modifizierung der HTLM-Tags in Document wie z. B. <head> die React Helmet-Bibliothek zu verwenden.