DokumentationCommerceHandbuch für Admin-Systeme

Entwickler-Tools

Last update: Wed Dec 18 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Einsteiger
  • Fortgeschrittener
  • Admin
  • Entwickler

Verwenden Sie die erweiterten Entwickler-Tools, 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 Änderungen am Text in der Benutzeroberfläche der Storefront und in der Admin vornehmen können.

Betriebsmodi

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

Der Betriebsmodus kann nur über die Befehlszeile des Servers von einem Benutzer mit entsprechenden Berechtigungen geändert werden. Weitere finden Sie unter „FestlegenBetriebsmodus“ "".

Die meisten Themen in der Händlerdokumentation gelten für 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 Workflow-Typ für die Frontend-Entwicklung bestimmt, ob während der Entwicklung weniger Kompilierungen Client- oder Server-seitig stattfinden. Less ist eine Erweiterung von CSS, die über zusätzliche Funktionen und Konventionen verfügt und optimierten Code generiert. Für die Design-Entwicklung wird eine Client-seitige Less-Kompilierung empfohlen. Die Server-seitige Kompilierung ist der Standardmodus. Die Workflow-Optionen für die Entwicklung sind nicht für Stores im Produktionsmodus verfügbar.
Siehe Client-seitige LESS-Kompilierung vs. Server-seitig in der Entwicklerdokumentation zu Commerce.

NOTE
Die Konfiguration des Frontend-Entwicklungs-Workflows ist nur im -Modus.

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

  1. Navigieren Sie in Admin-Seitenleiste zu Stores > Settings>Configuration.

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

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

  4. Legen Sie Workflow Type auf eine der folgenden Einstellungen fest:

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

  5. Klicken Sie abschließend auf Save Config.

Statische Dateisignaturen

Das Hinzufügen einer digitalen Signatur zur URL statischer Dateien ermöglicht es Browsern zu erkennen, wann eine neuere Version der Datei verfügbar ist. Zu den statischen Dateien, die mit digitalen Signaturen verfolgt werden können, gehören 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 unterscheidet, die im Cache des Browsers gespeichert ist, wird die neuere Version der Datei verwendet.

Siehe Statisches Inhaltssignieren in der Entwicklerdokumentation zu Commerce.

NOTE
Die Konfiguration Statischer Dateieinstellungen ist nur im Entwicklermodus“.

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

Eine detaillierte Liste der Konfigurationseinstellungen finden Sie unter Statische Dateieinstellungen in Konfigurationsreferenz.

So aktivieren Sie signierte statische Dateien:

  1. Navigieren Sie in Admin-Seitenleiste zu Stores > Settings>Configuration.

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

  3. Erweitern Sie Erweiterungsauswahl den Abschnitt Static Files Settings .

  4. Legen Sie Sign Static Files auf Yes fest.

  5. Klicken Sie abschließend auf Save Config.

Ressourcendateioptimierung

Der Zeitaufwand für das Laden von Ressourcendateien kann durch das Zusammenführen und Bündeln von Dateien sowie durch die Minimierung von Code reduziert werden.

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

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

Weitere Informationen finden unterPractices 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

So optimieren Sie Ressourcendateien:

  1. Navigieren Sie in Admin-Seitenleiste zu Stores > Settings>Configuration.

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

  3. Um CSS-Dateien zu optimieren, erweitern Erweiterungsauswahl den Abschnitt CSS Settings und führen Sie die folgenden Schritte aus:

    • Legen Sie Merge CSS Files auf Yes fest.
    • Legen Sie Minify CSS Files auf Yes fest.

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

_CSS_Settings

  1. Um JavaScript-Dateien zu optimieren, erweitern Erweiterungsauswahl den Abschnitt JavaScript Settings und führen Sie folgende Schritte aus:

    • Legen Sie Merge JavaScript Files auf Yes fest.
    • Legen Sie Minify JavaScript Files auf Yes fest.

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

  2. Um PHTML-Vorlagendateien zu minimieren, erweitern Sie Erweiterungsauswahl den Abschnitt Template Settings und setzen Minify Html auf Yes.

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

  3. Klicken Sie abschließend auf Save Config.

Client-Einschränkungen

Auf die Zulassungsliste setzen Bevor Sie ein Tool wie Vorlagenpfadhinweise verwenden, fügen Sie Ihre IP-Adresse zur Seite „Client-Einschränkungen für Entwickler“ hinzu, um zu vermeiden, dass das Einkaufserlebnis der Kunden im Store beeinträchtigt wird. Wenn Sie Ihre IP-Adresse nicht kennen, können Sie online danach suchen.

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

Technische Informationen finden Sie unter Benutzerdefinierte VCL zum Zulassen von Anfragen im Handbuch zu Commerce in Cloud-Infrastrukturen.

So fügen Sie Ihre IP-Adresse zur Zulassungsliste hinzu:

  1. Navigieren Sie in Admin-Seitenleiste zu Stores > Settings>Configuration.

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

  3. Erweitern Sie Erweiterungsauswahl den Abschnitt Developer Client Restrictions .

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

  4. Geben Sie Allow IPs Ihre IP-Adresse ein.

    Wenn der Zugriff von mehreren IP-Adressen benötigt wird, trennen Sie sie durch ein Komma.

  5. Klicken Sie abschließend auf Save Config.

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

Hinweise zu Vorlagenpfaden

Vorlagenpfadhinweise sind ein Diagnosewerkzeug, das jeder auf der Seite verwendeten Vorlage Notation mit dem Pfad hinzufügt. Hinweise auf Vorlagenpfade können entweder für die Storefront oder für den Administrator aktiviert werden.

NOTE
Hinweise zu Vorlagenpfaden können nur im Entwicklermodus bearbeitet werden.

Siehe Suchen von Vorlagen, Layouts und Stilen in der Commerce-Entwicklerdokumentation.

Beispiel-Storefront - Hinweise auf Vorlagenpfade {width="700" modal="regular"}

Auf die Zulassungsliste setzen Schritt 1: Hinzufügen der IP-Adresse zur

Bevor Sie Hinweise für Vorlagenpfade verwenden, fügen Sie Ihre IP-Adresse zur Zulassungsliste hinzu um Interferenzen mit Kunden zu vermeiden, die im Geschäft einkaufen. Wenn Sie fertig sind, stellen Sie sicher, dass Sie den Commerce-Cache löschen, um alle Hinweise aus dem Store zu entfernen.

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

Schritt 2: Aktivieren von Pfadhinweisen für Vorlagen

  1. Navigieren Sie in Admin-Seitenleiste zu Stores > Settings>Configuration.

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

  3. Erweitern Sie Erweiterungsauswahl den Abschnitt Debug und führen Sie folgende Schritte aus:

    Erweiterte Konfiguration - Debugging {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 dann für den Store aktiviert werden, wenn die URL den templatehints enthält, setzen Sie Hinweise für die Storefront mit URL-Parameter aktivieren auf Yes. Legen Sie dann bei Bedarf den Wert für den Parameter fest. Der Standardwert ist magento, Sie können jedoch einen benutzerdefinierten Wert verwenden. Wenn Sie beispielsweise den Wert in lorem ändern, würden Sie mymagento.com?templatehints=lorem verwenden, um Vorlagenhinweise anzuzeigen.

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

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

  4. Klicken Sie abschließend auf Save Config.

Schritt 3: Löschen des Cache

  1. Navigieren Sie in Admin-Seitenleiste zu System > Tools>Cache Management.

  2. Klicken Sie oben rechts auf Flush Magento Cache.

Inline übersetzen

Sie können das Tool Inline übersetzen im Entwicklermodus verwenden, um Text in der Benutzeroberfläche zu bereinigen, damit Ihre Stimme und Marke widergespiegelt werden. Wenn der Inline-Übersetzungs -Modus aktiviert ist, wird jeder Text auf der Seite, der bearbeitet werden kann, rot umrandet. Es ist einfach, Feldbezeichnungen, Nachrichten und anderen Text zu bearbeiten, der in der Storefront und in Admin angezeigt wird. Viele Designs verwenden beispielsweise Terminologie wie Mein Konto, Meine Wunschliste und Mein Dashboard, um Kunden dabei zu helfen, sich zurechtzufinden. Möglicherweise bevorzugen Sie jedoch einfach die Wörter Konto, Wunschliste und Dashboard.

NOTE
Das Inline-Übersetzungs-Tool ist nur verfügbar, wenn im Entwicklermodus gearbeitet wird.

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

Beispiel einer 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 für jeden Ausgabeblock in einer separaten CSV-Datei verwaltet und nach Gebietsschema organisiert. Anstatt das Tool „Inline übersetzen zu verwenden können Sie die CSV-Dateien auch direkt auf dem Server bearbeiten. Übersetzungsdateien werden in app/code/Magento/<module_name>/i18n/<language_locale>.csv gespeichert.

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

Schritt 1: Deaktivieren von Ausgabe-Caches

  1. Navigieren Sie in Admin-Seitenleiste zu System > Tools>Cache Management.

  2. Aktivieren Sie die folgenden Kontrollkästchen:

    • Blocks HTML output
    • Page Cache
    • Translations

  3. Legen Sie das Actions auf Disable fest und klicken Sie auf Submit.

Schritt 2: Aktivieren des Inline-Übersetzungs-Tools

  1. Navigieren Sie in Admin-Seitenleiste 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 Advanced und wählen Sie Developer.

  4. Erweitern Sie Erweiterungsauswahl den 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 übersetzen {width="600" modal="regular"}

  5. Legen Sie Enabled for Storefront auf Yes fest.

  6. Klicken Sie abschließend auf Save Config.

  7. Aktualisieren Sie die ungültigen Caches, aber lassen Sie die deaktivierten Caches vorerst so, wie sie sind.

Schritt 3: Text aktualisieren

  1. Öffnen Sie Ihre Storefront in einem Browser und gehen Sie zu der Seite, 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 umrandet. 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. Gehen Sie dann wie folgt vor:

    • Wenn sich die Änderung auf die spezifische Store-Ansicht bezieht, aktivieren Sie das Kontrollkästchen Store View Specific .

    • Geben Sie den neuen Custom ein.

  3. Klicken Sie abschließend auf Submit.

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

  4. Aktualisieren Sie den Browser, um Ihre Änderungen im Store anzuzeigen.

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

Schritt 4: Originaleinstellungen wiederherstellen

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

  2. Navigieren Sie in Admin-Seitenleiste zu Stores > Settings>Configuration.

  3. Legen Sie Store View auf die spezifische Ansicht fest, die bearbeitet wurde.

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

  5. Erweitern Sie Erweiterungsauswahl den Abschnitt Translate Inline .

  6. Legen Sie Enabled for Frontend auf No fest.

  7. Klicken Sie abschließend auf Save Config.

  8. Navigieren Sie in Admin-Seitenleiste zu System > Tools>Cache Management.

  9. Aktivieren Sie das Kontrollkästchen der folgenden Ausgabe-Caches, die zuvor deaktiviert waren:

    • Blocks HTML output
    • Page Cache
    • Translations

  10. Legen Sie das Actions auf Enable fest und klicken Sie auf Submit.

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

Schritt 5: Überprüfen Sie die Ä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 einer Storefront - Anmeldung von übersetzten Kunden {width="700" modal="regular"}

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