DokumentationHandelHandbok för adminsystem

Utvecklarverktyg

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Ämnen:

Skapat för:

  • Nybörjare
  • Mellanliggande
  • Administratör
  • Utvecklare

Använd de avancerade utvecklingsverktygen för att fastställa kompileringsläget under frontend-utvecklingen, skapa ett tillåtelselista med IP-adresser och visa sökvägstips för mallar. Det finns även verktyg för att enkelt göra dekorändringar i texten i butikens och administratörens gränssnitt.

Åtgärdslägen

Din Adobe Commerce- eller Magento Open Source-instans kan distribueras för körning i antingen produktion eller utvecklarläge. De verktyg och konfigurationsinställningar som är särskilt utformade för utvecklare är bara tillgängliga när butiken körs i utvecklarläge.

Åtgärdsläget kan bara ändras från serverns kommandorad av en användare med lämplig behörighet. Mer information finns i Ange åtgärdsläge i konfigurationshandboken.

De flesta avsnitten i dokumentationen för handlare gäller för en Commerce-instans som körs i produktionsläge. Följande konfigurationsinställningar och verktyg kan dock bara användas när installationen körs i utvecklarläge.

Utvecklingsarbetsflöde

Frontend Development Workflow-typen avgör om mindre kompilering sker på klient- eller serversidan under utvecklingen. Less är ett tillägg till CSS som har ytterligare funktioner och konventioner och som skapar strömlinjeformad kod. Mindre kompilering på klientsidan rekommenderas för temautveckling. Kompilering på serversidan är standardläge. Alternativen för utvecklingsarbetsflöde är inte tillgängliga för butiker i produktionsläge.
Se LESS-kompilering på klientsidan jämfört med{:target="_blank"} i dokumentationen för Commerce-utvecklare.

NOTE
Arbetsflödeskonfigurationen för frontend är endast tillgänglig i utvecklarläget.

Avancerad konfiguration - utvecklingsarbetsflöde för frontend

  1. Gå till Stores > Settings>Configuration ​på sidofältet_ Admin _.

  2. Expandera Advanced i den vänstra panelen och välj Developer.

  3. Expandera Expansionsväljaren i avsnittet Front-end Development Workflow.

  4. Ange Workflow Type till något av följande:

    • Client side less compilation - Kompileringen utförs i webbläsaren med det inbyggda less.js-biblioteket.
    • Server side less compilation - Kompilering utförs på servern med hjälp av Less PHP-biblioteket. Det här är standardläget för produktion.

  5. Klicka på Save Config när du är klar.

Statiska filsignaturer

Genom att lägga till en digital signatur i URL:en för statiska filer kan webbläsarna identifiera när en nyare version av filen är tillgänglig. Statiska filer som kan spåras med digitala signaturer är JavaScript, CSS, bilder och teckensnitt. Signaturen läggs till i sökvägen direkt efter bas-URL:en. Om en fils signatur skiljer sig från vad som lagras i webbläsarens cache, används den nyare versionen av filen.

Se Signering av statiskt innehåll{:target="_blank"} i dokumentationen för Commerce-utvecklare.

NOTE
Konfigurationen för statiska filinställningar är bara tillgänglig när du arbetar i utvecklarläge.

Avancerad konfiguration - inställningar för statiska filer

En detaljerad lista över konfigurationsinställningarna finns i Statiska filinställningar i Konfigurationsreferens.

Så här aktiverar du signerade statiska filer:

  1. Gå till Stores > Settings>Configuration ​på sidofältet_ Admin _.

  2. Expandera Advanced i den vänstra panelen och välj Developer.

  3. Expandera Expansionsväljaren i avsnittet Static Files Settings.

  4. Ange Sign Static Files till Yes.

  5. Klicka på Save Config när du är klar.

Optimering av resursfiler

Den tid det tar att läsa in resursfiler kan minskas genom att filer sammanfogas och paketeras, och genom att minimera koden.

  • När du sammanfogar filer kombineras separata filer av samma typ till en enda fil.
  • Paketering är en teknik som grupperar separata filer för att minska antalet HTTP-begäranden som krävs för att läsa in en sida.
  • Med miniatyr tas blanksteg, radbrytningar och kommentarer bort, men kodens funktion påverkas inte. Eftersom minimerade filer inte kan redigeras bör processen endast användas när du är redo att börja producera.

Som standard sammanfogar, paketerar eller minimerar inte Adobe Commerce och Magento Open Source filer, och projektutvecklaren bör avgöra vilka filoptimeringsmetoder som ska användas.

Mer information finns i Bästa praxis för prestanda.

NOTE
CSS- och JavaScript-filer kan bara optimeras i Utvecklarläge.
Filtyp
Åtgärder som stöds
CSS-filer
MergeMinify
JavaScript-filer
MergeBundleMinify
Mallfiler
Minify

Så här optimerar du resursfiler:

  1. Gå till Stores > Settings>Configuration ​på sidofältet_ Admin _.

  2. Expandera Advanced i den vänstra panelen och välj Developer.

  3. Om du vill optimera CSS-filer expanderar du Expansionsväljaren i avsnittet CSS Settings och gör följande:

    • Ange Merge CSS Files till Yes.
    • Ange Minify CSS Files till Yes.

    Avancerad konfiguration - CSS-inställningar {width="600" modal="regular"}

CSS-inställningar

  1. Om du vill optimera JavaScript-filer expanderar du Expansionsväljaren i avsnittet JavaScript Settings och gör följande:

    • Ange Merge JavaScript Files till Yes.
    • Ange Minify JavaScript Files till Yes.

    Avancerad konfiguration - JavaScript-inställningar {width="600" modal="regular"}

  2. Expandera Expanderingsväljaren i avsnittet Template Settings och ange Minify Html till Yes om du vill minimera PHTML-mallfiler.

    Avancerad konfiguration - mallinställningar {width="600" modal="regular"}

  3. Klicka på Save Config när du är klar.

Klientbegränsningar

Innan du använder ett verktyg som mallsökvägstips måste du lägga till din IP-adress i tillåtelselista för Developer Client Restrictions för att undvika att kundernas shoppingupplevelse i butiken störs. Om du inte känner till din IP-adress kan du söka efter den online.

NOTE
Begränsningar för utvecklarklient kan endast anges i utvecklarläge.

Mer teknisk information finns i Anpassad VCL för att tillåta begäranden i Commerce on Cloud Infrastructure Guide.

Så här lägger du till din IP-adress till tillåtelselista:

  1. Gå till Stores > Settings>Configuration ​på sidofältet_ Admin _.

  2. Expandera Advanced i den vänstra panelen och välj Developer.

  3. Expandera Expansionsväljaren i avsnittet Developer Client Restrictions.

    Avancerad konfiguration - begränsningar för utvecklarklient {width="600" modal="regular"}

  4. Ange din IP-adress för Allow IPs.

    Om åtkomst krävs från flera IP-adresser avgränsar du dem med kommatecken.

  5. Klicka på Save Config när du är klar.

  6. Uppdatera ogiltiga cacheminnen när du uppmanas till detta.

Tips för mallsökväg

Tips för mallsökvägar är ett diagnostiskt verktyg som lägger till anteckningar med sökvägen till varje mall som används på sidan. Tips för mallsökvägar kan aktiveras för antingen butiken eller administratören.

NOTE
Tips för mallsökväg kan bara redigeras i utvecklarläget.

Mer information finns i Hitta mallar, layouter och format{:target="_blank"} i dokumentationen för Commerce-utvecklare.

Exempelarkiv - tips för mallsökvägar

Steg 1: Lägg till din IP-adress i tillåtelselista

Innan du använder sökvägstips för mallar lägger du till din IP-adress i tillåtelselistaför att undvika störningar för kunder som handlar i butiken. När du är klar bör du rensa Commerce-cachen så att alla tips tas bort från butiken.

Avancerad konfiguration - begränsningar för utvecklarklient

Steg 2: Aktivera tips för mallsökväg

  1. Gå till Stores > Settings>Configuration ​på sidofältet_ Admin _.

  2. Expandera Advanced i den vänstra panelen och välj Developer.

  3. Expandera Expansionsväljaren i avsnittet Debug och gör följande:

    Avancerad konfiguration - felsökning {width="600" modal="regular"}

    • Om du vill aktivera tips för mallsökväg för arkivet anger du Enabled Template Path Hints for Storefront till Yes.

    • Om du bara vill aktivera sökvägstips för arkivet när URL:en innehåller parametern templatehints anger du Aktivera tips för Storefront med URL-parametern till Yes. Ange sedan ett värde för parametern om det behövs. Standardvärdet är magento, men du kan använda ett anpassat värde. Om du till exempel ändrar värdet till lorem använder du mymagento.com?templatehints=lorem för att visa malltips.

    • Om du vill aktivera tips för mallsökväg för administratören anger du Enabled Template Path Hints for Admin till Yes.

    • Om du vill inkludera namnen på blocken anger du Add Block Class Type to Hints till Yes.

  4. Klicka på Save Config när du är klar.

Steg 3: Rensa cachen

  1. Gå till System > Tools>Cache Management ​på sidofältet_ Admin _.

  2. Klicka på Flush Magento Cache i det övre högra hörnet.

Översätt textbundet

Du kan använda verktyget Översätt infogad i utvecklarläget för att redigera text i gränssnittet så att den återspeglar din röst och ditt varumärke. När läget Översätt infogad är aktiverat visas all text på sidan som kan redigeras med röda konturer. Det är enkelt att redigera fältetiketter, meddelanden och annan text som visas i butiken och i Admin. Många teman använder till exempel terminologi som Mitt konto, Min önskelista och Min instrumentpanel för att hjälpa kunderna att hitta rätt. Du kanske vill använda orden Konto, Önsklista och Kontrollpanel.

NOTE
Verktyget Översätt textbunden är bara tillgängligt när du arbetar i utvecklarläge.

Se Översikt över översättningar i dokumentationen för Commerce-utvecklare.

Exempelarkiv - översättningsbar text

Om din butik finns på flera språk kan du göra finjusteringar i den översatta texten för den språkinställningen. På servern finns gränssnittstext i en separat CSV-fil för varje utdatablock och ordnas efter språkområde. Du kan även redigera CSV-filerna direkt på servern, i stället för att använda verktyget Översätt textbundet . Översättningsfiler lagras i app/code/Magento/<module_name>/i18n/<language_locale>.csv.

NOTE
Om du vill använda verktyget Översätt textbundet måste webbläsaren tillåta popup-fönster.

Steg 1: Inaktivera utdatacache

  1. Gå till System > Tools>Cache Management ​på sidofältet_ Admin _.

  2. Markera följande kryssrutor:

    • Blocks HTML output
    • Page Cache
    • Translations

  3. Ställ in kontrollen Actions på Disable och klicka på Submit.

Steg 2: Aktivera verktyget Översätt textbundet

  1. Gå till Stores > Settings>Configuration ​på sidofältet_ Admin _.

  2. Om du vill arbeta med en viss butiksvy anger du att Store View ska uppdateras.

  3. Expandera Advanced i den vänstra panelen och välj Developer.

  4. Expandera Expansionsväljaren i avsnittet Translate Inline.

    Avmarkera kryssrutan Use Website om det behövs för att ändra de här inställningarna.

    Alternativet Enabled for Admin ​är inte tillgängligt när du redigerar en viss butiksvy.

    Avancerad konfiguration - översätt infogad {width="600" modal="regular"}

  5. Ange Enabled for Storefront till Yes.

  6. Klicka på Save Config när du är klar.

  7. Uppdatera ogiltiga cacheminnen när du uppmanas att göra det, men låt de inaktiverade cacherna vara som de är för tillfället.

Steg 3: Uppdatera texten

  1. Öppna butiken i en webbläsare och gå till sidan som du vill redigera.

    Använd vid behov språkväljaren för att ändra butiksvyn. Varje textsträng som kan översättas visas med röda konturer. När du hovrar över en textruta visas en bokikon ( bokikon ).

  2. Klicka på bokikonen för att öppna fönstret Översätt och gör följande:

    • Om ändringen gäller för den specifika butiksvyn markerar du kryssrutan Store View Specific.

    • Ange den nya Custom-texten.

  3. Klicka på Submit när du är klar.

    Ange egen text {width="700" modal="regular"}

  4. Uppdatera webbläsaren om du vill se ändringarna i butiken.

  5. Upprepa den här processen för alla element i butiken som ska ändras.

Steg 4: Återställ de ursprungliga inställningarna

  1. Återvänd till administratören för din butik.

  2. Gå till Stores > Settings>Configuration ​på sidofältet_ Admin _.

  3. Ange Store View till den specifika vy som redigerades.

  4. Expandera Advanced i den vänstra panelen och välj Developer.

  5. Expandera Expansionsväljaren i avsnittet Translate Inline.

  6. Ange Enabled for Frontend till No.

  7. Klicka på Save Config när du är klar.

  8. Gå till System > Tools>Cache Management ​på sidofältet_ Admin _.

  9. Markera kryssrutan för följande utdatacache som tidigare var inaktiverade:

    • Blocks HTML output
    • Page Cache
    • Translations

  10. Ställ in kontrollen Actions på Enable och klicka på Submit.

  11. Uppdatera ogiltiga cacheminnen när du uppmanas till detta.

Steg 5: Verifiera ändringarna i din butik

Gå till butiken och granska varje sida som har uppdaterats för att se till att ändringarna är korrekta. I det här exemplet ändrades Customer Login till Customer Sign In. Om du har ändrat en viss vy använder du Språkväljaren för att växla till rätt vy.

Exempelarkiv - översatt kundinloggning

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