DocumentatieCommerceAdmin Systems Guide

Gereedschappen voor ontwikkelaars

Last update: Tue Nov 28 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • Beginner
  • Intermediate
  • Admin
  • Developer

Gebruik de geavanceerde ontwikkelaarshulpmiddelen om de compilatiemodus tijdens frontend ontwikkeling te bepalen, een lijst van gewenste personen van IP adressen, en de wenken van de de wegweg van het vertoningsmalplaatje te creëren. Er is ook een gereedschap waarmee u eenvoudig steunwijzigingen in de tekst in de interface van de winkel en Admin kunt aanbrengen.

Bewerkingsmodi

Uw Adobe Commerce- of Magento Open Source-instantie kan worden geïmplementeerd om te worden uitgevoerd in productie of ontwikkelmodus. De hulpmiddelen en configuratiemontages die specifiek voor ontwikkelaars worden ontworpen kunnen slechts worden betreden terwijl de opslag binnen loopt ontwikkelmodus.

De bewerkingsmodus kan alleen worden gewijzigd vanaf de opdrachtregel van de server door een gebruiker met de juiste machtigingen. Zie De bewerkingsmodus instellen in de Configuratiegids voor meer informatie .

De meeste onderwerpen in de handelsdocumentatie zijn op een instantie van de Handel van toepassing die op productiemodus loopt. Nochtans, kunnen de volgende configuratiemontages en de hulpmiddelen slechts worden gebruikt wanneer de installatie op ontwikkelaarwijze loopt.

Workflow voor ontwikkeling vóór

Het stroomtype van het Werkschema van de Ontwikkeling Frontend bepaalt als Minder compilatie op cliënt- of serverkant tijdens ontwikkeling plaatsvindt. Minder is een uitbreiding van CSS die extra eigenschappen en overeenkomsten heeft, en die gestroomlijnde code produceert. Minder compilatie aan de clientzijde wordt aanbevolen voor de ontwikkeling van thema's. De server-zijcompilatie is de standaardwijze. De opties voor de ontwikkelingswerkstroom zijn niet beschikbaar voor winkels in de productiemodus.
Zie LESS-compilatie aan clientzijde versus server-side{:target="_blank"} in de documentatie voor ontwikkelaars van Commerce.

NOTE
De configuratie van de ontwikkelworkflow vooraf is beschikbaar in Modus Ontwikkelaar alleen.

Geavanceerde configuratie - vooraf ontwikkelde ontwikkelingsworkflow {width="600" modal="regular"}

  1. Op de Beheerder zijbalk, ga naar Stores > Settings>Configuration.

  2. Vouw in het linkerdeelvenster uit Advanced en kiest u Developer.

  3. Uitbreiden Expansiekiezer de Front-end Development Workflow sectie.

  4. Set Workflow Type op een van de volgende wijzen:

    • Client side less compilation - Compilatie vindt plaats in de browser met behulp van de native less.js bibliotheek.
    • Server side less compilation - Compilatie vindt plaats op de server met behulp van de Minder PHP bibliotheek. Dit is de standaardmodus voor productie.

  5. Klik op Save Config.

Statische bestandshandtekeningen

Door een digitale handtekening toe te voegen aan de URL van statische bestanden, kunnen browsers detecteren wanneer een nieuwere versie van het bestand beschikbaar is. Statische bestanden die met digitale handtekeningen kunnen worden bijgehouden, zijn onder andere JavaScript, CSS, afbeeldingen en lettertypen. De handtekening wordt direct na de basis-URL aan het pad toegevoegd. Als de handtekening van een bestand afwijkt van die in de cache van de browser, wordt de nieuwere versie van het bestand gebruikt.

Zie Statische ondertekening van inhoud{:target="_blank"} in de documentatie voor ontwikkelaars van Commerce.

NOTE
De statische configuratie van de Montages van het Dossier is beschikbaar slechts wanneer het werken in ontwikkelmodus.

Geavanceerde configuratie - statische bestandsinstellingen {width="600" modal="regular"}

Voor een gedetailleerde lijst van de configuratiemontages, zie Statische bestandsinstellingen in de Configuratieverwijzing.

Ondertekende statische bestanden inschakelen:

  1. Op de Beheerder zijbalk, ga naar Stores > Settings>Configuration.

  2. Vouw in het linkerdeelvenster uit Advanced en kiest u Developer.

  3. Uitbreiden Expansiekiezer de Static Files Settings sectie.

  4. Set Sign Static Files tot Yes.

  5. Klik op Save Config.

Optimalisatie van bronbestanden

De tijd die nodig is om bronbestanden te laden, kan worden verkort door bestanden samen te voegen en te bundelen en door code te minimaliseren.

  • Bij het samenvoegen worden afzonderlijke bestanden van hetzelfde type gecombineerd tot één bestand.
  • Bundelen is een techniek waarbij afzonderlijke bestanden worden gegroepeerd om het aantal HTTP-aanvragen te verminderen dat nodig is om een pagina te laden.
  • Met Minificatie verwijdert u spaties, regeleinden en opmerkingen, maar dit heeft geen invloed op de functionaliteit van de code. Omdat geminimaliseerde bestanden niet kunnen worden bewerkt, dient u het proces alleen toe te passen wanneer u klaar bent om in productie te gaan.

Standaard voegen Adobe Commerce en Magento Open Source geen bestanden samen, bundelen of minimaliseren, en de projectontwikkelaar moet dan bepalen welke methoden voor het optimaliseren van bestanden moeten worden gebruikt.

Zie Best practices voor prestaties voor meer informatie .

NOTE
CSS- en JavaScript-bestanden kunnen worden geoptimaliseerd in Modus voor ontwikkelaars alleen.
Bestandstype
Ondersteunde bewerkingen
CSS-bestanden
MergeMinify
JavaScript-bestanden
MergeBundleMinify
Sjabloonbestanden
Minify

Bronbestanden optimaliseren:

  1. Op de Beheerder zijbalk, ga naar Stores > Settings>Configuration.

  2. Vouw in het linkerdeelvenster uit Advanced en kiest u Developer.

  3. Als u CSS-bestanden wilt optimaliseren, vouwt u Expansiekiezer de CSS Settings en voer de volgende handelingen uit:

    • Set Merge CSS Files tot Yes.
    • Set Minify CSS Files tot Yes.

    Geavanceerde configuratie - CSS-instellingen {width="600" modal="regular"}

CSS-instellingen

  1. Vouw om JavaScript-bestanden te optimaliseren Expansiekiezer de JavaScript Settings en voer de volgende handelingen uit:

    • Set Merge JavaScript Files tot Yes.
    • Set Minify JavaScript Files tot Yes.

    Geavanceerde configuratie - JavaScript-instellingen {width="600" modal="regular"}

  2. Als u PHTML-sjabloonbestanden wilt miniaturen, vouwt u Expansiekiezer de Template Settings sectie en set Minify Html tot Yes.

    Geavanceerde configuratie - sjablooninstellingen {width="600" modal="regular"}

  3. Klik op Save Config.

Clientbeperkingen

Voordat u een gereedschap zoals tips voor sjabloonpaden, zorg ervoor om uw IP adres aan de lijst van gewenste personen van de Beperkingen van de Cliënt van de Ontwikkelaar toe te voegen om de het winkelen ervaring van klanten in de opslag te verhinderen te verstoren. Als u uw IP adres niet kent, kunt u naar het online zoeken.

NOTE
De Beperkingen van de Cliënt van de ontwikkelaar kunnen in worden geplaatst Modus voor ontwikkelaars alleen.

Voor technische informatie, zie Aangepaste VCL voor het toestaan van aanvragen in de Handleiding voor handel in Cloud-infrastructuur.

Om uw IP adres aan de lijst van gewenste personen toe te voegen:

  1. Op de Beheerder zijbalk, ga naar Stores > Settings>Configuration.

  2. Vouw in het linkerdeelvenster uit Advanced en kiest u Developer.

  3. Uitbreiden Expansiekiezer de Developer Client Restrictions sectie.

    Geavanceerde configuratie - clientbeperkingen voor ontwikkelaars {width="600" modal="regular"}

  4. Voor Allow IPs, voer uw IP-adres in.

    Als de toegang van veelvoudige IP adressen nodig is, scheidt elk met een komma.

  5. Klik op Save Config.

  6. Vernieuw bij de aanwijzing eventuele ongeldige caches.

Tips voor sjabloonpad

Tips voor sjabloonpaden zijn een diagnostisch hulpmiddel dat notatie toevoegt aan het pad naar elke sjabloon die op de pagina wordt gebruikt. Tips voor sjabloonpaden kunnen worden ingeschakeld voor de winkel of de beheerder.

NOTE
Tips voor sjabloonpaden kunnen worden bewerkt in ontwikkelmodus alleen.

Zie Sjablonen, lay-outs en stijlen zoeken{:target="_blank"} in de documentatie voor ontwikkelaars van Commerce.

Voorbeeld van storefront - tips voor sjabloonpaden {width="700" modal="regular"}

Stap 1: Voeg uw IP adres aan de lijst van gewenste personen toe

Voordat u tips voor sjabloonpaden kunt gebruiken, voegt u uw IP-adres toe aan de lijst van gewenste personen om interferentie met klanten die in de winkel winkelen te voorkomen. Wanneer u wordt gebeëindigd, zorg ervoor om het geheime voorgeheugen van de Handel te ontruimen om alle wenken uit de opslag te verwijderen.

Geavanceerde configuratie - clientbeperkingen voor ontwikkelaars {width="600" modal="regular"}

Stap 2: tips voor sjabloonpaden inschakelen

  1. Op de Beheerder zijbalk, ga naar Stores > Settings>Configuration.

  2. Vouw in het linkerdeelvenster uit Advanced en kiest u Developer.

  3. Uitbreiden Expansiekiezer de  Debug en voer de volgende handelingen uit:

    Geavanceerde configuratie - foutopsporing {width="600" modal="regular"}

    • Als u padhints voor de winkel wilt activeren, stelt u Enabled Template Path Hints for Storefront tot Yes.

    • Om malplaatjewegwenken voor de opslag slechts toe te laten wanneer URL omvat templatehints parameter, set Tips inschakelen voor Storefront met URL-parameter tot Yes. Stel vervolgens indien nodig waarde voor de parameter in. De standaardwaarde is magento, maar u kunt een aangepaste waarde gebruiken. Als u bijvoorbeeld de waarde wijzigt in lorem, gebruikt u mymagento.com?templatehints=lorem om sjabloonhints weer te geven.

    • Als u padtips voor sjablonen voor de beheerder wilt activeren, stelt u Enabled Template Path Hints for Admin tot Yes.

    • Als u de namen van blokken wilt opnemen, stelt u Add Block Class Type to Hints tot Yes.

  4. Klik op Save Config.

Stap 3: De cache wissen

  1. Op de Beheerder zijbalk, ga naar System > Tools>Cache Management.

  2. Klik in de rechterbovenhoek op Flush Magento Cache.

Inline vertalen

U kunt het gereedschap Inline vertalen gebruiken in ontwikkelmodus om de tekst in de interface aan te passen aan uw stem en merk. Wanneer de modus Inline omzetten is geactiveerd, wordt alle tekst op de pagina die kan worden bewerkt, in rood omlijnd. Het is gemakkelijk om gebiedslabels, berichten, en andere tekst uit te geven die door storefront en Admin verschijnt. Veel thema's gebruiken bijvoorbeeld terminologie, zoals Mijn account, Mijn lijst, en Mijn dashboard, om klanten te helpen hun weg te vinden. Misschien wilt u echter liever gewoon de woorden gebruiken Account, Wishlist, en Dashboard.

NOTE
Het gereedschap Inline vertalen is alleen beschikbaar wanneer u in ontwikkelmodus.

Zie Overzicht van vertalingen in de documentatie voor de ontwikkeling van de handel.

Voorbeeld van een opslagruimte, vertaalbare tekst {width="700" modal="regular"}

Als uw winkel in meerdere talen beschikbaar is, kunt u de vertaalde tekst voor de landinstelling nauwkeurig aanpassen. Op de server wordt de interfacetekst onderhouden in een apart CSV-bestand voor elk uitvoerblok en wordt deze geordend door de landinstelling. Als alternatieve benadering in plaats van de Inline vertalen kunt u de CSV-bestanden ook rechtstreeks op de server bewerken. Vertaalbestanden worden opgeslagen in app/code/Magento/<module_name>/i18n/<language_locale>.csv.

NOTE
Als u het gereedschap Inline vertalen wilt gebruiken, moet uw browser pop-ups toestaan.

Stap 1: Uitvoercache uitschakelen

  1. Op de Beheerder zijbalk, ga naar System > Tools>Cache Management.

  2. Selecteer de volgende selectievakjes:

    • Blocks HTML output
    • Page Cache
    • Translations

  3. Stel de Actions controle op Disable en klik op Submit.

Stap 2: Het gereedschap Inline transleren inschakelen

  1. Op de Beheerder zijbalk, ga naar Stores > Settings>Configuration.

  2. Als u met een specifieke winkelweergave wilt werken, stelt u de optie Store View bij te werken.

  3. Vouw in het linkerdeelvenster uit Advanced en kiest u Developer.

  4. Uitbreiden Expansiekiezer de Translate Inline sectie.

    Wis de Use Website Schakel het selectievakje naar wens in om deze instellingen te wijzigen.

    De Enabled for Admin ​Deze optie is niet beschikbaar wanneer u een specifieke winkelweergave bewerkt.

    Geavanceerde configuratie - inline vertalen {width="600" modal="regular"}

  5. Set Enabled for Storefront tot Yes.

  6. Klik op Save Config.

  7. Vernieuw desgevraagd de ongeldige caches, maar laat de uitgeschakelde caches ongewijzigd.

Stap 3: De tekst bijwerken

  1. Open de winkel in een browser en ga naar de pagina die u wilt bewerken.

    Gebruik indien nodig de taalkiezer om de winkelweergave te wijzigen. Elke tekstreeks die kan worden vertaald, wordt in rood omlijnd. Wanneer u de cursor op een tekstvak plaatst, verschijnt er een boekpictogram ( Boekpictogram ) wordt weergegeven.

  2. Klik op het boekpictogram om het dialoogvenster Vertalen en voer de volgende handelingen uit:

    • Als de wijziging geldt voor de specifieke winkelweergave, selecteert u de optie Store View Specific selectievakje.

    • Voer de nieuwe Custom tekst.

  3. Klik op Submit.

    Aangepaste tekst invoeren {width="700" modal="regular"}

  4. Vernieuw de browser om de wijzigingen in de winkel te zien.

  5. Herhaal dit proces voor alle elementen in de winkel die moeten worden gewijzigd.

Stap 4: De oorspronkelijke instellingen herstellen

  1. Ga terug naar de beheerder van uw winkel.

  2. Op de Beheerder zijbalk, ga naar Stores > Settings>Configuration.

  3. Set Store View naar de specifieke weergave die is bewerkt.

  4. Vouw in het linkerdeelvenster uit Advanced en kiest u Developer.

  5. Uitbreiden Expansiekiezer de Translate Inline sectie.

  6. Set Enabled for Frontend tot No.

  7. Klik op Save Config.

  8. Op de Beheerder zijbalk, ga naar System > Tools>Cache Management.

  9. Schakel het selectievakje in van de volgende uitvoercache die eerder was uitgeschakeld:

    • Blocks HTML output
    • Page Cache
    • Translations

  10. Stel de Actions controle op Enable en klik op Submit.

  11. Vernieuw bij de aanwijzing eventuele ongeldige caches.

Stap 5: controleer de wijzigingen in uw winkel

Ga naar de winkel en bekijk elke pagina die is bijgewerkt om te controleren of de wijzigingen correct zijn. In dit voorbeeld: Customer Login is gewijzigd in Customer Sign In. Als er wijzigingen zijn aangebracht in een specifieke weergave, gebruikt u Taalkiezer om over te schakelen naar de juiste weergave.

Voorbeeld van winkel - vertaalde klant aanmelden {width="700" modal="regular"}

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