Modifica dei componenti funzionali forniti dall'applicazione

L'applicazione fornisce componenti funzionali riutilizzabili inclusi nella libreria angolare @store/functional-components . Questi componenti sono creati per indirizzare un dominio specifico o un caso di utilizzo funzionale e sono ampiamente utilizzati nell'applicazione.

È possibile personalizzare i componenti funzionali forniti dall'applicazione o creare nuovi componenti personalizzati in base alle esigenze aziendali.

Prima di iniziare

I componenti funzionali forniti dall'applicazione sono presenti nella cartella <store-temp>/packages/libs/functional-components/src/lib . Ciascuno di questi componenti racchiude una funzione specifica ed è ampiamente utilizzato nell'applicazione.

Per associare il componente funzionale fornito dall'applicazione al componente personalizzato, utilizzare il file <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-component-extn-config.json . Nel file JSON, assicurati di associare gli identificativi univoci dei componenti forniti dall'applicazione con i componenti personalizzati o sovrascritti.

La tabella riportata di seguito descrive la definizione di schema del file isf-component-extn-config.json :

Tabella 1. Attributi e descrizioni della definizione dello schema
Nome attributo	Descrizione
applicationProvidedComponentId	Un identificativo univoco assegnato al componente funzionale fornito dall'applicazione. Ad esempio, `MiniCartComponent`.
overrideComponentId	Un identificativo univoco assegnato al componente sovrascritto o personalizzato. Ad esempio, `MiniCartCustomComponent`.

Quando si sovrascrive un componente funzionale fornito dall'applicazione, aggiornare <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-component-extn-config.json con gli attributi descritti nella tabella.

Procedura

Modificare un componente funzionale fornito dall'applicazione in uno dei seguenti modi:
- Crea un nuovo componente personalizzato.
  1. Passare alla directory <store-temp>/extensions/features/override-component/src/app/components ed eseguire il seguente comando:
```
ng g c <componentName> --prefix=isf
```
  2. Aggiungere la variabile di stringa statica componentName con il valore come nome della classe del componente nel modo seguente:
    public static componentName = 'MiniCartCustomComponent';
- Copiare e modificare il componente fornito dall'applicazione come necessario per il proprio business.
  1. Identificare il componente funzionale fornito dall'applicazione che si desidera estendere.
  2. Copiare l'intera cartella di origine del componente e copiarla nella directory <store-temp>/extensions/features/override-component/src/app/components .
Aggiornare il nome classe del componente personalizzato.
Andare alla directory <store-temp>/extensions/features/override-component/src/app . Aprire il file app.module.ts e aggiornare il nome della classe del componente personalizzato nell'oggetto customComponentDeclarations .

Nota: se il componente esteso importa i file all'esterno della cartella del componente, assicurarsi di copiare manualmente tali file nell'ubicazione appropriata all'interno della cartella del componente. Inoltre, assicurarsi di importare e dichiarare i componenti nel file app.module.ts presente nella cartella <store-temp>/extensions/features/override_component/src/app . Se l'applicazione ha una dipendenza su un altro modulo angolare, importare il modulo appropriato. Ad esempio, FormsModule, CommonModule, ReactiveFormsModulee così via.
Aggiornare il file <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-component-extn-config.json con i dettagli appropriati. Ad esempio, per sostituire il componente mini - carrello fornito dall'applicazione con il componente mini - carrello personalizzato, aggiornare come segue:
```
[{
   "applicationProvidedComponentId": "MiniCartComponent",
   "overrideComponentId": "MiniCartCustomComponent"
 }]
```

Per supportare la localizzazione e l'internazionalizzazione, le cartelle i18n vengono conservate nella cartella <store-temp>/extensions/features/override-component/src/assets/override-component/i18n/ . Il file bundle en.json per la lingua inglese è incluso nella cartella i18n . Puoi anche creare un file JSON del bundle specifico della lingua.

Nota:

Se si modificano le AddressCaptureComponent o AddressDisplayComponentfornite dall'applicazione, completare la seguente procedura:
1. Copiare AddressRegistryService e AddressConfigList da <store-temp>/packages/libs/functional-components/src/lib/address nella cartella <store-temp>/extensions/features/override-component/src/app/components/customAddress .
  Qui, customAddress fa riferimento al nome della cartella che contiene i componenti di visualizzazione o di cattura dell'indirizzo esteso.
2. Importare AddressRegistryService e AddressConfigList nel file app.module.ts .
3. Registrare AddressConfigList in AddressRegistryService nel costruttore del file app.module.ts come segue:
```
class AppModule implements OnDestroy, DoBootstrap {
......
   constructor() {
     .....
     AddressRegistryService.registerAddress(AddressConfigList, []);
     .....
   }
.......
}
```
Se si modifica l' GlobalSearchRegistryServicefornito dall'applicazione, completare la seguente procedura:
1. Copiare GlobalSearchRegistryService da <store-temp>/packages/libs/functional-components/src/lib/global-search nella cartella <store-temp>/extensions/features/override-component/src/app/components/global-search-extn .
  Qui, global-search-extn fa riferimento al nome della cartella che contiene i componenti della ricerca globale estesa.
2. Importare GlobalSearchRegistryService nel file app.module.ts .
3. Dichiarare searchComponentDeclarations.
```
const searchComponentDeclarations = [
     OrderSearchComponent,
     CustomerSearchComponent,
     ProductSearchComponent,
     ShipmentSearchComponent
   ];
```
4. Registrare searchComponentDeclarations in GlobalSearchRegistryService nel costruttore del file app.module.ts come segue:
```
GlobalSearchRegistryService.registerSearchComponents(searchComponentDeclarations);
```

Cosa fare successivamente

Per verificare localmente il componente funzionale fornito dall'applicazione estesa, avviare l'applicazione eseguendo il seguente comando e passare alla schermata in cui viene visualizzato il componente funzionale.
```
yarn start-app
```
Per verificare le modifiche nel toolkit sviluppatori, estrarre e distribuire le personalizzazioni. Per ulteriori informazioni sull'estrazione e la distribuzione delle personalizzazioni, vedere Estrazione delle personalizzazioni.