DokumentationCommerceAdministratorsystemanleitung

Entwicklertools

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Einsteiger
  • Fortgeschrittener
  • Admin
  • Entwickler

Verwenden Sie die erweiterten Entwicklertools, um den Kompilierungsmodus während der Frontend-Entwicklung zu bestimmen, eine Zulassungsliste von IP-Adressen zu erstellen und Vorlagenpfadhinweise anzuzeigen. Es gibt auch Tools, mit denen Sie problemlos Textänderungen an Textstellen in der Benutzeroberfläche der Storefront und des Administrators vornehmen können.

Vorgangsmodi

Ihre Adobe Commerce- oder Magento Open Source-Instanz kann bereitgestellt werden, um entweder im Produktions- oder im Entwicklermodus ausgeführt zu werden. Auf die Tools und Konfigurationseinstellungen, die speziell für Entwickler entwickelt wurden, kann nur zugegriffen werden, während der Store im Entwicklermodus ausgeführt wird.

Der Betriebsmodus kann nur von einem Benutzer mit entsprechenden Berechtigungen über die Befehlszeile des Servers geändert werden. Weitere Informationen finden Sie unter Festlegen des Betriebsmodus im Konfigurationshandbuch .

Die meisten Themen in der Händlerdokumentation beziehen sich auf eine Commerce-Instanz, die im Produktionsmodus ausgeführt wird. Die folgenden Konfigurationseinstellungen und Tools können jedoch nur verwendet werden, wenn die Installation im Entwicklermodus ausgeführt wird.

Frontend-Entwicklungs-Workflow

Der Frontend-Entwicklungs-Workflow-Typ bestimmt, ob während der Entwicklung eine geringere Kompilierung auf Client- oder Server-Seite erfolgt. Less ist eine Erweiterung von CSS mit zusätzlichen Funktionen und Konventionen, die optimierten Code erzeugt. Clientseitige Weniger Kompilierung wird für die Designentwicklung empfohlen. Die serverseitige Kompilierung ist der Standardmodus. Die Optionen des Entwicklungs-Workflows stehen nicht für Stores im Produktionsmodus zur Verfügung.
Siehe Client-seitige LESS-Kompilierung vs. serverseitig{:target="_blank"} in der Commerce-Entwicklerdokumentation.

NOTE
Die Konfiguration des Frontend-Entwicklungs-Workflows ist nur im Entwicklermodus verfügbar.

Erweiterte Konfiguration - Frontend-Entwicklungs-Workflow {width="600" modal="regular"}

  1. Wechseln Sie in der Seitenleiste Admin zu Stores > Settings>Configuration.

  2. Erweitern Sie im linken Bereich den Wert Advanced und wählen Sie Developer aus.

  3. Erweitern Sie Erweiterungsauswahl im Abschnitt Front-end Development Workflow .

  4. Setzen Sie Workflow Type auf einen der folgenden Werte:

    • Client side less compilation - Die Kompilierung erfolgt im Browser mithilfe der nativen less.js-Bibliothek.
    • Server side less compilation - Die Kompilierung erfolgt auf dem Server mithilfe der Less PHP-Bibliothek. Dies ist der Standardmodus für die Produktion.

  5. Klicken Sie nach Abschluss des Vorgangs auf Save Config.

Statische Dateisignaturen

Durch Hinzufügen einer digitalen Signatur zur URL statischer Dateien können Browser erkennen, wann eine neuere Version der Datei verfügbar ist. Statische Dateien, die mit digitalen Signaturen verfolgt werden können, umfassen JavaScript, CSS, Bilder und Schriftarten. Die Signatur wird direkt nach der Basis-URL an den Pfad angehängt. Wenn sich die Signatur einer Datei von der im Cache des Browsers gespeicherten Signatur unterscheidet, wird die neuere Version der Datei verwendet.

Siehe Statische Inhaltssignatur{:target="_blank"} in der Commerce-Entwicklerdokumentation.

NOTE
Die Konfiguration der statischen Dateieinstellungen ist nur verfügbar, wenn Sie im Entwicklermodus arbeiten.

Erweiterte Konfiguration - Einstellungen für statische Dateien {width="600" modal="regular"}

Eine detaillierte Liste der Konfigurationseinstellungen finden Sie unter Einstellungen für statische Dateien in der Konfigurationsreferenz.

So aktivieren Sie signierte statische Dateien:

  1. Wechseln Sie in der Seitenleiste Admin zu Stores > Settings>Configuration.

  2. Erweitern Sie im linken Bereich den Wert Advanced und wählen Sie Developer aus.

  3. Erweitern Sie Erweiterungsauswahl im Abschnitt Static Files Settings .

  4. Setzen Sie Sign Static Files auf Yes.

  5. Klicken Sie nach Abschluss des Vorgangs auf Save Config.

Optimierung der Ressourcendatei

Die zum Laden von Ressourcendateien benötigte Zeit kann durch Zusammenführen und Bündeln von Dateien und Minimieren von Code verringert werden.

  • Beim Zusammenführen werden separate Dateien desselben Typs in einer einzigen Datei zusammengefasst.
  • Bundling ist eine Technik, die separate Dateien gruppiert, um die Anzahl der HTTP-Anfragen zu reduzieren, die zum Laden einer Seite erforderlich sind.
  • Die Minimierung entfernt Leerzeichen, Zeilenumbrüche und Kommentare, wirkt sich jedoch nicht auf die Funktionalität des Codes aus. Da minimierte Dateien nicht bearbeitet werden können, sollte der Prozess nur angewendet werden, wenn Sie bereit sind, in die Produktion zu wechseln.

Standardmäßig führen Adobe Commerce und Magento Open Source keine Dateien zusammen, bündeln sie nicht oder minimieren sie. Der Projektentwickler sollte festlegen, welche Dateioptimierungsmethoden verwendet werden sollen.

Weitere Informationen finden Sie unter Best Practices für die Leistung .

NOTE
CSS- und JavaScript-Dateien können nur im Entwicklermodus optimiert werden.
Dateityp
Unterstützte Vorgänge
CSS-Dateien
MergeMinify
JavaScript-Dateien
MergeBundleMinify
Vorlagendateien
Minify

Optimieren von Ressourcendateien:

  1. Wechseln Sie in der Seitenleiste Admin zu Stores > Settings>Configuration.

  2. Erweitern Sie im linken Bereich den Wert Advanced und wählen Sie Developer aus.

  3. Erweitern Sie zur Optimierung von CSS-Dateien den Abschnitt Erweiterungsauswahl im Abschnitt CSS Settings und führen Sie folgende Schritte aus:

    • Setzen Sie Merge CSS Files auf Yes.
    • Setzen Sie Minify CSS Files auf Yes.

    Erweiterte Konfiguration - CSS-Einstellungen {width="600" modal="regular"}

CSS Settings

  1. Erweitern Sie zur Optimierung von JavaScript-Dateien den Abschnitt Erweiterungsauswahl im Abschnitt JavaScript Settings und führen Sie die folgenden Schritte aus:

    • Setzen Sie Merge JavaScript Files auf Yes.
    • Setzen Sie Minify JavaScript Files auf Yes.

    Erweiterte Konfiguration - JavaScript-Einstellungen {width="600" modal="regular"}

  2. Um die PHTML-Vorlagendateien zu verkleinern, erweitern Sie den Abschnitt Template Settings mit dem Erweiterungsselektor 1 und setzen Sie Minify Html auf .

    Erweiterte Konfiguration - Vorlageneinstellungen {width="600" modal="regular"}

  3. Klicken Sie nach Abschluss des Vorgangs auf Save Config.

Kundenbeschränkungen

Bevor Sie ein Tool wie Vorlagenpfadhinweise verwenden, stellen Sie sicher, dass Sie Ihre IP-Adresse der Zulassungsliste "Developer Client Restrictions"hinzufügen, um zu verhindern, dass das Einkaufserlebnis von Kunden im Store gestört wird. Wenn Sie Ihre IP-Adresse nicht kennen, können Sie online danach suchen.

NOTE
Entwickler-Client-Einschränkungen können nur im Entwicklermodus festgelegt werden.

Technische Informationen finden Sie unter Benutzerdefinierte VCL für das Zulassen von Anforderungen im Commerce on Cloud Infrastructure Guide.

Hinzufügen Ihrer IP-Adresse zur Zulassungsliste:

  1. Wechseln Sie in der Seitenleiste Admin zu Stores > Settings>Configuration.

  2. Erweitern Sie im linken Bereich den Wert Advanced und wählen Sie Developer aus.

  3. Erweitern Sie Erweiterungsauswahl im Abschnitt Developer Client Restrictions .

    Erweiterte Konfiguration - Entwickler-Client-Beschränkungen {width="600" modal="regular"}

  4. Geben Sie für Allow IPs Ihre IP-Adresse ein.

    Wenn der Zugriff über mehrere IP-Adressen erforderlich ist, trennen Sie jede durch ein Komma.

  5. Klicken Sie nach Abschluss des Vorgangs auf Save Config.

  6. Aktualisieren Sie bei Aufforderung alle ungültigen Caches.

Hinweise zum Vorlagenpfad

Vorlagenpfadhinweise sind ein Diagnosetool, das Notation mit dem Pfad zu jeder Vorlage hinzufügt, die auf der Seite verwendet wird. Vorlagenpfadhinweise können entweder für die Storefront oder für den Administrator aktiviert werden.

NOTE
Vorlagenpfadhinweise können nur im Entwicklermodus bearbeitet werden.

Siehe Suchen von Vorlagen, Layouts und Stilen{:target="_blank"} in der Commerce-Entwicklerdokumentation.

Beispiel-Storefront - Vorlagenpfadhinweise {width="700" modal="regular"}

Schritt 1: Hinzufügen Ihrer IP-Adresse zur Zulassungsliste ""

Bevor Sie Vorlagenpfadhinweise verwenden, fügen Sie Ihre IP-Adresse zur Zulassungsliste hinzu, um Störungen mit Kunden zu vermeiden, die im Store einkaufen. Wenn Sie fertig sind, müssen Sie den Commerce-Cache löschen, um alle Hinweise aus dem Store zu entfernen.

Erweiterte Konfiguration - Entwickler-Client-Beschränkungen {width="600" modal="regular"}

Schritt 2: Vorlagenpfadhinweise aktivieren

  1. Wechseln Sie in der Seitenleiste Admin zu Stores > Settings>Configuration.

  2. Erweitern Sie im linken Bereich den Wert Advanced und wählen Sie Developer aus.

  3. Erweitern Sie den Abschnitt Debug des Erweiterungsselektors Erweiterung und führen Sie folgende Schritte aus:

    Erweiterte Konfiguration - debug {width="600" modal="regular"}

    • Um Vorlagenpfadhinweise für den Store zu aktivieren, setzen Sie Enabled Template Path Hints for Storefront auf Yes.

    • Damit Vorlagenpfadhinweise nur für den Store aktiviert werden, wenn die URL den Parameter templatehints enthält, setzen Sie Hinweise für Storefront mit URL-Parameter aktivieren auf Yes. Legen Sie dann bei Bedarf einen Wert für den Parameter fest. Der Standardwert ist magento, Sie können jedoch einen benutzerdefinierten Wert verwenden. Wenn Sie beispielsweise den Wert auf lorem ändern, verwenden Sie mymagento.com?templatehints=lorem, um Vorlagenhinweise anzuzeigen.

    • Um Vorlagenpfadhinweise für den Admin zu aktivieren, setzen Sie Enabled Template Path Hints for Admin auf Yes.

    • Um die Namen der Blöcke einzuschließen, setzen Sie Add Block Class Type to Hints auf Yes.

  4. Klicken Sie nach Abschluss des Vorgangs auf Save Config.

Schritt 3: Cache löschen

  1. Wechseln Sie in der Seitenleiste Admin zu System > Tools>Cache Management.

  2. Klicken Sie in der oberen rechten Ecke auf Flush Magento Cache.

Inline übersetzen

Sie können das Tool Inline übersetzen im Entwicklermodus verwenden, um Text in der Benutzeroberfläche zu berühren und so Ihre Stimme und Marke widerzuspiegeln. Wenn der Modus Inline übersetzen aktiviert ist, wird jeder Text auf der Seite, der bearbeitet werden kann, rot dargestellt. Sie können Feldbezeichnungen, Nachrichten und anderen Text, der in der Storefront und im Admin-Bereich angezeigt wird, einfach bearbeiten. Beispielsweise verwenden viele Designs Terminologie wie Mein Konto, Meine Wunschliste und Mein Dashboard, um Kunden bei der Umgehung zu helfen. Sie können jedoch einfach die Wörter Konto, Wunschliste und Dashboard verwenden.

NOTE
Das Tool Inline übersetzen ist nur verfügbar, wenn es im Entwicklermodus verwendet wird.

Siehe Übersetzungen - Übersicht in der Commerce-Entwicklerdokumentation.

Beispiel-Storefront - übersetzbarer Text {width="700" modal="regular"}

Wenn Ihr Store in mehreren Sprachen verfügbar ist, können Sie feine Anpassungen am übersetzten Text für das Gebietsschema vornehmen. Auf dem Server wird der Schnittstellentext in einer separaten CSV-Datei für jeden Ausgabeblock verwaltet und nach Gebietsschema geordnet. Statt das Tool Inline übersetzen zu verwenden, können Sie die CSV-Dateien alternativ auch direkt auf dem Server bearbeiten. Übersetzungsdateien werden in app/code/Magento/<module_name>/i18n/<language_locale>.csv gespeichert.

NOTE
Um das Tool Inline übersetzen verwenden zu können, muss Ihr Browser Popup-Fenster zulassen.

Schritt 1: Ausgabecache deaktivieren

  1. Wechseln Sie in der Seitenleiste Admin zu System > Tools>Cache Management.

  2. Aktivieren Sie die folgenden Kontrollkästchen:

    • Blocks HTML output
    • Page Cache
    • Translations

  3. Setzen Sie das Steuerelement Actions auf Disable und klicken Sie auf Submit.

Schritt 2: Aktivieren des Tools "Inline übersetzen"

  1. Wechseln Sie in der Seitenleiste Admin zu Stores > Settings>Configuration.

  2. Um mit einer bestimmten Store-Ansicht zu arbeiten, legen Sie die zu aktualisierende Store View fest.

  3. Erweitern Sie im linken Bereich den Wert Advanced und wählen Sie Developer aus.

  4. Erweitern Sie Erweiterungsauswahl im Abschnitt Translate Inline .

    Deaktivieren Sie das Kontrollkästchen Use Website nach Bedarf, um diese Einstellungen zu ändern.

    Die Option Enabled for Admin ​ist beim Bearbeiten einer bestimmten Store-Ansicht nicht verfügbar.

    Erweiterte Konfiguration - Inline-Übersetzung {width="600" modal="regular"}

  5. Setzen Sie Enabled for Storefront auf Yes.

  6. Klicken Sie nach Abschluss des Vorgangs auf Save Config.

  7. Aktualisieren Sie bei entsprechender Aufforderung die ungültigen Caches, aber lassen Sie die deaktivierten Caches unverändert.

Schritt 3: Text aktualisieren

  1. Öffnen Sie Ihre Storefront in einem Browser und rufen Sie die Seite auf, die Sie bearbeiten möchten.

    Verwenden Sie bei Bedarf die Sprachauswahl, um die Store-Ansicht zu ändern. Jede Textzeichenfolge, die übersetzt werden kann, ist rot dargestellt. Wenn Sie den Mauszeiger über ein Textfeld bewegen, wird ein Buchsymbol ( Buchsymbol ) angezeigt.

  2. Klicken Sie auf das Buchsymbol, um das Fenster Übersetzen zu öffnen, und führen Sie die folgenden Schritte aus:

    • Wenn die Änderung für die jeweilige Store-Ansicht erfolgt, aktivieren Sie das Kontrollkästchen Store View Specific .

    • Geben Sie den neuen Text Custom ein.

  3. Klicken Sie nach Abschluss des Vorgangs auf Submit.

    Benutzerdefinierten Text eingeben {width="700" modal="regular"}

  4. Um Ihre Änderungen im Store anzuzeigen, aktualisieren Sie den Browser.

  5. Wiederholen Sie diesen Vorgang für alle Elemente im Store, die geändert werden sollen.

Schritt 4: Wiederherstellen der ursprünglichen Einstellungen

  1. Kehren Sie zum Administrator Ihres Stores zurück.

  2. Wechseln Sie in der Seitenleiste Admin zu Stores > Settings>Configuration.

  3. Stellen Sie Store View auf die spezifische Ansicht ein, die bearbeitet wurde.

  4. Erweitern Sie im linken Bereich den Wert Advanced und wählen Sie Developer aus.

  5. Erweitern Sie Erweiterungsauswahl im Abschnitt Translate Inline .

  6. Setzen Sie Enabled for Frontend auf No.

  7. Klicken Sie nach Abschluss des Vorgangs auf Save Config.

  8. Wechseln Sie in der Seitenleiste Admin zu System > Tools>Cache Management.

  9. Aktivieren Sie das Kontrollkästchen der folgenden ausgehenden Zwischenspeicher, die zuvor deaktiviert waren:

    • Blocks HTML output
    • Page Cache
    • Translations

  10. Setzen Sie das Steuerelement Actions auf Enable und klicken Sie auf Submit.

  11. Aktualisieren Sie bei Aufforderung alle ungültigen Caches.

Schritt 5: Überprüfen der Änderungen in Ihrem Store

Gehen Sie zu Ihrer Storefront und überprüfen Sie jede Seite, die aktualisiert wurde, um sicherzustellen, dass die Änderungen korrekt sind. In diesem Beispiel wurde Customer Login in Customer Sign In geändert. Wenn Änderungen an einer bestimmten Ansicht vorgenommen wurden, verwenden Sie die Sprachauswahl, um zur richtigen Ansicht zu wechseln.

Beispiel-Storefront - übersetztes Kundenzeichen in {width="700" modal="regular"}

recommendation-more-help
d3c62084-5181-43fb-bba6-1feb2fcc3ec1