Componenti speciali
Questa guida presuppone una conoscenza del funzionamento del routing in uno storefront PWA Kit. Per ulteriori informazioni, consultare la guida Routing.
PWA Kit React SDK include i seguenti componenti speciali: AppConfig, App, Error e Document.
L'implementazione predefinita di ogni componente speciale può essere sostituita dalla versione personalizzata. Ciò consente di configurare e personalizzare il comportamento di più pagine dello storefront.
Di seguito vengono illustrati singolarmente i vari componenti speciali:
Il componente AppConfig è posizionato vicino alla parte alta della gerarchia dei componenti nell'app React. Da questa posizione, consente di inserire codice per configurare e supportare le funzionalità a livello di app, ad esempio la gestione dello stato o l'applicazione di temi ai componenti. In Retail React App, il componente ChakraProvider viene inserito in AppConfig per rendere disponibili i valori dei temi (per colori, spaziatura ecc.) a tutti i componenti di Chakra UI.
Il componente AppConfig consente inoltre di estendere il set di argomenti che vengono passati a tutti i componenti ottimizzati da routeComponent tramite la funzione getProps. Per aggiungere questi argomenti, definire una funzione denominata extraGetPropsArgs come proprietà del componente AppConfig.
Retail React App utilizza la funzione extraGetPropsArgs per dare a tutti i componenti ottimizzati da routeComponent l'accesso a un oggetto per l'interazione con Salesforce Commerce API:
La versione del componente AppConfig di PWA Kit React SDK non produce alcun effetto, a meno che non se ne esegua l'override. Per eseguire l'override della versione SDK di AppConfig, definire un file in app/components/_app-config/index.jsx. Un progetto PWA Kit appena generato include già questo file per consentire all'utente di iniziare rapidamente.
App è un componente secondario di AppConfig. La sua finalità principale è includere qualsiasi componente per layout e IU che persista in qualsiasi punto dell'app React, ad esempio intestazione, piè di pagina e barra laterale.
Il componente App viene ottimizzato inoltre dalla funzione routeComponent. Se si definisce una funzione getProps come proprietà del componente App, essa viene richiamata quando viene renderizzato qualsiasi componente della matrice routes. Utilizzarla per qualsiasi logica che si intende eseguire su ogni pagina.
Come per AppConfig, in PWA Kit React SDK esiste una versione predefinita del componente App, di cui è consigliabile eseguire l'override. Per eseguire l'override della versione SDK di App, definire un file in app/components/_app/index.jsx. Un progetto PWA Kit appena generato include già questo file per consentire all'utente di iniziare rapidamente.
Tra le funzionalità implementate in App per un progetto appena generato vi sono il monitoraggio dei dati di analisi, il rilevamento offline e il componente SkipNavLink per l'accessibilità.
Il componente Error viene renderizzato al posto del componente App nelle seguenti condizioni:
- L'utente effettua una richiesta di un percorso non trovato nella matrice
routes. - Un componente della matrice
routesrestituisce un errore nella propria funzionegetProps. - Un componente della matrice
routesrestituisce un errore durante il rendering.
Quando viene restituito il componente Error, nell'intestazione della risposta viene incluso anche uno stato HTTP 404.
Come per gli altri componenti speciali, PWA Kit React SDK include una versione predefinita del componente Error, di cui è consigliabile eseguire l'override. Per eseguire l'override della versione SDK di Error, definire un file in app/components/_error/index.jsx. Un progetto PWA Kit appena generato include già questo file per consentire all'utente di iniziare rapidamente.
Sostituendo il componente Error, è possibile eseguire operazioni quali la personalizzazione della pagina di errore per il proprio brand, l'aggiunta di reindirizzamenti e il monitoraggio dell'errore come evento di analisi.
Il componente Document definisce l'HTML che circonda l'applicazione, ad esempio i tag <html>, <head> e <body>.
Come per gli altri componenti speciali, PWA Kit React SDK include una versione predefinita del componente Document, che può essere sostituita. In questo caso, tuttavia, l'override non è consigliato. Se invece si desidera un controllo più preciso dell'applicazione, è possibile eseguire l'override del componente Document definendo un file in app/components/_document/index.jsx. Un progetto PWA Kit appena generato non include questo file.
Anziché eseguire l'override del componente Document, si consiglia di utilizzare la libreria React Helmet per modificare i tag HTML in Document, ad esempio <head>.