Plattform der nächsten Generation

Von der Anwendung bereitgestellte Portlets ändern

Sie können die von der Anwendung bereitgestellten Portlets anpassen und durch angepasste Portlets ersetzen.

Vorbemerkungen

Geben Sie das von der Anwendung bereitgestellte Portlet an, das Sie anpassen wollen. Die von der Anwendung bereitgestellten Portlets befinden sich im Verzeichnis <store-temp>/packages/features/home/src/app/portlet-set . Sie können entweder eine neue Portletkomponente erstellen oder das von der Anwendung bereitgestellte Portlet kopieren und ändern.

Vorgehensweise

  1. Kopieren Sie den entsprechenden Ordner der von der Anwendung bereitgestellten Portletkomponente aus dem Verzeichnis <store-temp>/packages/features/home/src/app/portlet-set in das Verzeichnis <store-temp>/extensions/features/override-component/src/app/components .
  2. Aktualisieren Sie in der Datei component.ts des Portlets den Komponentenklassennamen des Portlets. Fügen Sie die Variable componentName hinzu und aktualisieren Sie die Variablen portletname und componentName mit dem Komponentenklassennamen.
  3. Aktualisieren Sie den Klassennamen der Portletkomponente, indem Sie die folgenden Schritte ausführen:
    1. Navigieren Sie zum Verzeichnis /extensions/features/override-component/src/app/ .
    2. Öffnen Sie die Datei apps.module.ts .
    3. Aktualisieren Sie im Objekt customComponentsDeclarations den Klassennamen der Portletkomponente.
    4. Importieren Sie den Klassennamen der Portletkomponente.
  4. Kopieren Sie die von der Anwendung bereitgestellte Portlet-JSON-Konfiguration aus der Datei <store-temp>/packages/features/app-shell/src/assets/app-shell/config/isf-persona-config.json in die Datei <store-temp>/extensions/override-static-assets/portlets/config/isf-persona-config.json . Sie können das von der Anwendung bereitgestellte Portlet anhand des Komponentenklassennamens identifizieren. Fügen Sie außerdem das Attribut extensionType mit den entsprechenden Werten hinzu. Weitere Informationen finden Sie unter Neue Portlets mit einer geeigneten Ansicht verknüpfen.
  5. Aktualisieren Sie in der JSON-Konfiguration den Klassennamen der angepassten Portletkomponente im Attribut portletComponent , das Sie in die Datei <store-temp>/extensions/override-static-assets/portlets/config/isf-persona-config.json kopiert haben.
    Hinweis: Ändern Sie in der JSON-Konfiguration nicht das Attribut portletTID .
  6. Deklarieren Sie alle Komponenten, die Teil des App-Moduls sind, in der Datei app.module.ts .
  7. Starten Sie die Anwendung, indem Sie den folgenden Befehl ausführen, und überprüfen Sie, ob das neue Portlet auf der Homepage geladen wurde.
    yarn start-app

Nächste Schritte

  • Zur Unterstützung der Lokalisierung und Internationalisierung befindet sich der Ordner i18n im Ordner <store-temp>/extensions/features/override-component/src/assets/override-component/ . Sie können die sprachspezifische JSON-Paketdatei erstellen. Beispiel: en.json für die englische Ländereinstellung und fügen Sie die sprachspezifische JSON-Datei für angepasste Paketeinträge hinzu, die en.json für die englische Ländereinstellung ist. Wenn Sie die von der Anwendung bereitgestellten Portlets überschreiben, stellen Sie sicher, dass die statische Variable für Bundles in app-module-ts die Assets enthält, die aus der Ausgangsanwendung geladen werden. Sehen Sie sich das folgende Beispielcode-Snippet an.
    class OverrideComponentBundlesModule {
      static bundles: Array<any> = [
        {
          prefix: './assets/override-component/i18n/',
          suffix: '.json'
        },
        {
          prefix: './assets/home/i18n/',
          suffix: '.json'
        }
      ].concat(CommonBundlesModule.bundles);
    };

    Weitere Informationen finden Sie unter Ändern von Bundle-Einträgen für die anwendungsdefinierten Komponenten.

  • Mit dem Winkelservice StoreRouterService können Sie zu verschiedenen Anzeigen oder Winkelrouten navigieren. Weitere Informationen finden Sie unter Navigieren zu Routen.
  • Extrahieren und implementieren Sie die Anpassungen, um die Änderungen im Developer Toolkit zu überprüfen. Weitere Informationen finden Sie unter Extrahieren von Anpassungen.