Modificación de componentes funcionales proporcionados por la aplicación

La aplicación proporciona componentes funcionales reutilizables que se empaquetan en la biblioteca angular de @store/functional-components . Estos componentes se crean para direccionar un dominio específico o un caso de uso funcional, y se utilizan ampliamente en toda la aplicación.

Puede personalizar los componentes funcionales proporcionados por la aplicación o crear nuevos componentes personalizados según sea necesario para su empresa.

Antes de empezar

Los componentes funcionales proporcionados por la aplicación están presentes en la carpeta <store-temp>/packages/libs/functional-components/src/lib . Cada uno de estos componentes encapsula una prestación específica y se utiliza ampliamente en toda la aplicación.

Para correlacionar el componente funcional proporcionado por la aplicación con el componente personalizado, utilice el archivo <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-component-extn-config.json . En el archivo JSON, asegúrese de correlacionar los identificadores exclusivos de los componentes proporcionados por la aplicación con los componentes personalizados o alterados temporalmente.

La tabla siguiente describe la definición de esquema del archivo isf-component-extn-config.json :

Tabla 1. Atributos y descripciones de la definición del esquema
Nombre de atributo	Descripción
applicationProvidedComponentId	Identificador exclusivo asignado al componente funcional proporcionado por la aplicación. Por ejemplo, `MiniCartComponent`.
overrideComponentId	Identificador exclusivo que se asigna al componente alterado temporalmente o personalizado. Por ejemplo, `MiniCartCustomComponent`.

Cuando altere temporalmente un componente funcional proporcionado por la aplicación, actualice <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-component-extn-config.json con los atributos que se describen en la tabla.

Procedimiento

Modifique un componente funcional proporcionado por la aplicación de cualquiera de las maneras siguientes:
- Cree un nuevo componente personalizado.
  1. Vaya al directorio <store-temp>/extensions/features/override-component/src/app/components y ejecute el mandato siguiente:
```
ng g c <componentName> --prefix=isf
```
  2. Añada la variable de serie estática componentName con el valor como nombre de clase de componente, tal como se indica a continuación:
    public static componentName = 'MiniCartCustomComponent';
- Copie y modifique el componente proporcionado por la aplicación según sea necesario para su empresa.
  1. Identifique el componente funcional proporcionado por la aplicación que desea ampliar.
  2. Copie toda la carpeta de origen de componente y cópiela en el directorio <store-temp>/extensions/features/override-component/src/app/components .
Actualice el nombre de clase de componente personalizado.
Vaya al directorio <store-temp>/extensions/features/override-component/src/app . Abra el archivo app.module.ts y actualice el nombre de clase de componente personalizado en el objeto customComponentDeclarations .

Nota: Si el componente ampliado importa archivos fuera de la carpeta de componentes, asegúrese de copiar manualmente dichos archivos en la ubicación adecuada dentro de la carpeta de componentes. Además, asegúrese de importar y declarar los componentes en el archivo app.module.ts que está presente en la carpeta <store-temp>/extensions/features/override_component/src/app . Si la aplicación tiene dependencia de otro módulo angular, importe el módulo adecuado. Por ejemplo, FormsModule, CommonModule, ReactiveFormsModule, etc.
Actualice el archivo <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-component-extn-config.json con los detalles adecuados. Por ejemplo, para sustituir el componente mini-carrito proporcionado por la aplicación por el componente mini-carrito personalizado, actualice como se indica a continuación:
```
[{
   "applicationProvidedComponentId": "MiniCartComponent",
   "overrideComponentId": "MiniCartCustomComponent"
 }]
```

Para dar soporte a la localización e internacionalización, las carpetas i18n se mantienen en la carpeta <store-temp>/extensions/features/override-component/src/assets/override-component/i18n/ . El archivo de paquete en.json para el idioma inglés se incluye en la carpeta i18n . También puede crear un archivo JSON de paquete específico del idioma.

Nota:

Si modifica AddressCaptureComponent o AddressDisplayComponentproporcionados por la aplicación, realice los pasos siguientes:
1. Copie AddressRegistryService y AddressConfigList de <store-temp>/packages/libs/functional-components/src/lib/address en la carpeta <store-temp>/extensions/features/override-component/src/app/components/customAddress .
  Aquí, customAddress hace referencia al nombre de carpeta que contiene la visualización de dirección ampliada o los componentes de captura.
2. Importe AddressRegistryService y AddressConfigList en el archivo app.module.ts .
3. Registre AddressConfigList en AddressRegistryService en el constructor del archivo app.module.ts como se indica a continuación:
```
class AppModule implements OnDestroy, DoBootstrap {
......
   constructor() {
     .....
     AddressRegistryService.registerAddress(AddressConfigList, []);
     .....
   }
.......
}
```
Si modifica la GlobalSearchRegistryServiceproporcionada por la aplicación, realice los pasos siguientes:
1. Copie GlobalSearchRegistryService de <store-temp>/packages/libs/functional-components/src/lib/global-search en la carpeta <store-temp>/extensions/features/override-component/src/app/components/global-search-extn .
  Aquí, global-search-extn hace referencia al nombre de carpeta que contiene los componentes de búsqueda global ampliada.
2. Importe GlobalSearchRegistryService al archivo app.module.ts .
3. Declarar searchComponentDeclarations.
```
const searchComponentDeclarations = [
     OrderSearchComponent,
     CustomerSearchComponent,
     ProductSearchComponent,
     ShipmentSearchComponent
   ];
```
4. Registre searchComponentDeclarations en GlobalSearchRegistryService en el constructor del archivo app.module.ts como se indica a continuación:
```
GlobalSearchRegistryService.registerSearchComponents(searchComponentDeclarations);
```

Qué hacer a continuación

Para verificar localmente el componente funcional proporcionado por la aplicación ampliada, inicie la aplicación ejecutando el mandato siguiente y vaya a la pantalla donde se visualiza el componente funcional.
```
yarn start-app
```
Para verificar los cambios en el kit de herramientas del desarrollador, extraiga y despliegue las personalizaciones. Para obtener más información sobre la extracción e implantación de personalizaciones, consulte Extracción de personalizaciones.