DocumentatieCommerceAdmin Systems Guide

Gereedschappen voor ontwikkelaars

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

Gemaakt voor:

  • Beginner
  • tussenpersoon
  • Beheerder
  • Ontwikkelaar

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 opgesteld om in of productie of ontwikkelaarwijze in werking te stellen. De hulpmiddelen en configuratiemontages die specifiek voor ontwikkelaars worden ontworpen kunnen worden betreden slechts terwijl de opslag op ontwikkelaarwijze loopt.

De bewerkingsmodus kan alleen worden gewijzigd vanaf de opdrachtregel van de server door een gebruiker met de juiste machtigingen. Zie plaats de verrichtingswijzein de Gids van de Configuratie voor meer informatie.

De meeste onderwerpen in de handelsdocumentatie zijn op een instantie van Commerce 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 Cliënt-kant LESS compilatie vs. server-kant{:target= "_blank"} in de de ontwikkelaarsdocumentatie van Commerce.

NOTE
De configuratie van het vooruitgangsontwikkelingswerkschema is beschikbaar op wijze van de Ontwikkelaarslechts.

Geavanceerde configuratie - vooruitstrevende ontwikkelingswerkschema

  1. Voor Admin sidebar, ga Stores > Settings>Configuration.

  2. Vouw in het linkerdeelvenster Advanced uit en kies Developer .

  3. Breid selecteur van de Uitbreiding de Front-end Development Workflow sectie uit.

  4. Stel Workflow Type in op een van de volgende opties:

    • 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 als de bewerking is voltooid.

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 kunnen worden bijgehouden met digitale handtekeningen 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 inhoud ondertekenend{:target= "_blank"} in de de ontwikkelaarsdocumentatie van Commerce.

NOTE
De statische configuratie van de Montages van het Dossier is beschikbaar slechts wanneer het werken op ontwikkelaarwijze.

Geavanceerde configuratie - statische dossiermontages

Voor een gedetailleerde lijst van de configuratiemontages, zie de Statische Montages van het Dossier in de Verwijzing van de Configuratie.

om ondertekende statische dossiers toe te laten:

  1. Voor Admin sidebar, ga Stores > Settings>Configuration.

  2. Vouw in het linkerdeelvenster Advanced uit en kies Developer .

  3. Breid selecteur van de Uitbreiding de Static Files Settings sectie uit.

  4. Stel Sign Static Files in op Yes .

  5. Klik op Save Config als de bewerking is voltooid.

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 beste praktijken van Prestatiesvoor meer informatie.

NOTE
CSS en de dossiers van JavaScript kunnen op slechts Modus van de Ontwikkelaar worden geoptimaliseerd.
Bestandstype
Ondersteunde bewerkingen
CSS-bestanden
MergeMinify
JavaScript-bestanden
MergeBundleMinify
Sjabloonbestanden
Minify

om middeldossiers te optimaliseren:

  1. Voor Admin sidebar, ga Stores > Settings>Configuration.

  2. Vouw in het linkerdeelvenster Advanced uit en kies Developer .

  3. Om CSS dossiers te optimaliseren, breid selecteur van de Uitbreiding de CSS Settings sectie uit en doe het volgende:

    • Stel Merge CSS Files in op Yes .
    • Stel Minify CSS Files in op Yes .

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

CSS-instellingen

  1. Om de dossiers van JavaScript te optimaliseren, breid selecteur van de Uitbreiding de JavaScript Settings sectie uit en doe het volgende:

    • Stel Merge JavaScript Files in op Yes .
    • Stel Minify JavaScript Files in op Yes .

    Geavanceerde configuratie - de montages van JavaScript {width="600" modal="regular"}

  2. Om PHTML- malplaatjedossiers te minimaliseren, breid selecteur van de Uitbreiding de Template Settings sectie uit en reeks Minify Html aan Yes.

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

  3. Klik op Save Config als de bewerking is voltooid.

Clientbeperkingen

Alvorens een hulpmiddel zoals wenken van de malplaatjewegte gebruiken, 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 het het winkelen ervaring van klanten in de opslag niet 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 op slechts de Wijze van de Ontwikkelaarworden geplaatst.

Voor technische informatie, zie Douane VCL voor het toestaan van verzoekenin Commerce op de Gids van de Infrastructuur van de Wolk.

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

  1. Voor Admin sidebar, ga Stores > Settings>Configuration.

  2. Vouw in het linkerdeelvenster Advanced uit en kies Developer .

  3. Breid selecteur van de Uitbreiding de Developer Client Restrictions sectie uit.

    Geavanceerde configuratie - de beperkingen van de ontwikkelaarcliënt {width="600" modal="regular"}

  4. Voer bij Allow IPs uw IP-adres in.

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

  5. Klik op Save Config als de bewerking is voltooid.

  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
De wenken van de Weg van het malplaatje kunnen op ontwikkelaarwijzeslechts worden uitgegeven.

Zie plaats malplaatjes, lay-outs, en stijlen{:target= "_blank"} in de de ontwikkelaarsdocumentatie van Commerce.

storefront van het Voorbeeld - de wenken van de malplaatjeweg

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

Alvorens de wenken van de malplaatjeweg te gebruiken, voeg uw IP adres aan de lijst van gewenste personentoe om interferentie met klanten te vermijden die in de opslag winkelen. Als u klaar bent, wist u de Commerce-cache om alle tips uit de winkel te verwijderen.

Geavanceerde configuratie - de beperkingen van de ontwikkelaarcliënt

Stap 2: tips voor sjabloonpaden inschakelen

  1. Voor Admin sidebar, ga Stores > Settings>Configuration.

  2. Vouw in het linkerdeelvenster Advanced uit en kies Developer .

  3. Breid selecteur van de Uitbreiding de Debug sectie uit en doe het volgende:

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

    • Stel Enabled Template Path Hints for Storefront in op Yes om padhints voor de winkel te activeren.

    • Om malplaatjewegwenken voor de opslag toe te laten slechts wanneer URL de templatehints parameter omvat, plaats laat wenken voor Storefront met Parameter URL aan Yes toe. 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 padhints voor de sjabloon voor de beheerder wilt activeren, stelt u Enabled Template Path Hints for Admin in op Yes .

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

  4. Klik op Save Config als de bewerking is voltooid.

Stap 3: De cache wissen

  1. Voor Admin sidebar, ga System > Tools>Cache Management.

  2. Klik in de rechterbovenhoek op Flush Magento Cache .

Inline vertalen

U kunt het Translate Inline hulpmiddel op ontwikkelaarwijzegebruiken om tekst in de interface aan te raken om op uw stem en merk te wijzen. 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. Bijvoorbeeld, gebruiken vele thema's terminologie zoals Mijn Rekening, Mijn Wishlist, en Mijn Dashboard, om klanten te helpen hun weg vinden rond. Nochtans, zou u kunnen verkiezen om de woorden Rekening, Wishlist, en Dashboard eenvoudig te gebruiken.

NOTE
Het vertaalde Inline hulpmiddel is beschikbaar slechts wanneer het werken op ontwikkelaarwijze.

Zie Overzicht van Vertalingenin de de ontwikkelaarsdocumentatie van Commerce.

Voorbeeld storefront - vertaalbare tekst

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 afwisselende benadering, eerder dan gebruik het Vertaal Inline hulpmiddel, kunt u de Csv- dossiers direct op de server ook uitgeven. 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. Voor Admin sidebar, ga System > Tools>Cache Management.

  2. Selecteer de volgende selectievakjes:

    • Blocks HTML output
    • Page Cache
    • Translations

  3. Stel het besturingselement Actions in op Disable en klik op Submit .

Stap 2: Het gereedschap Inline transleren inschakelen

  1. Voor Admin sidebar, ga Stores > Settings>Configuration.

  2. Als u met een specifieke winkelweergave wilt werken, stelt u de Store View in die u wilt bijwerken.

  3. Vouw in het linkerdeelvenster Advanced uit en kies Developer .

  4. Breid selecteur van de Uitbreiding de Translate Inline sectie uit.

    Schakel indien nodig het selectievakje Use Website uit om deze instellingen te wijzigen.

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

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

  5. Stel Enabled for Storefront in op Yes .

  6. Klik op Save Config als de bewerking is voltooid.

  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 over om het even welk tekstvakje beweegt, verschijnt een boekpictogram ( pictogram van het Boek ).

  2. Klik het boekpictogram om het Vertaal venster te openen en het volgende te doen:

    • Als de wijziging geldt voor de specifieke winkelweergave, schakelt u het selectievakje Store View Specific in.

    • Voer de nieuwe Custom tekst in.

  3. Klik op Submit als de bewerking is voltooid.

    ga Aangepaste Tekst {width="700" modal="regular"} in

  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. Voor Admin sidebar, ga Stores > Settings>Configuration.

  3. Stel Store View in op de specifieke weergave die is bewerkt.

  4. Vouw in het linkerdeelvenster Advanced uit en kies Developer .

  5. Breid selecteur van de Uitbreiding de Translate Inline sectie uit.

  6. Stel Enabled for Frontend in op No .

  7. Klik op Save Config als de bewerking is voltooid.

  8. Voor Admin sidebar, ga 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 het besturingselement Actions in 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 is Customer Login 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.

de storefront van het Voorbeeld - vertaalde klantenteken binnen

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