Strumenti per sviluppatori

Utilizza gli strumenti avanzati per gli sviluppatori per determinare la modalità di compilazione durante lo sviluppo front-end, creare un inserisco nell'elenco Consentiti di indirizzi IP di tipo e visualizzare gli hint di percorso dei modelli. Sono inoltre disponibili strumenti per apportare facilmente modifiche al testo nell’interfaccia della vetrina e dell’amministratore.

Modalità operative

È possibile distribuire l’istanza Adobe Commerce o di Magento Open Source per l’esecuzione in produzione o modalità sviluppatore. Gli strumenti e le impostazioni di configurazione progettati appositamente per gli sviluppatori sono accessibili solo mentre lo store è in esecuzione in modalità sviluppatore.

La modalità operativa può essere modificata solo dalla riga di comando del server da un utente con le autorizzazioni appropriate. Consulta Impostare la modalità operativa nel Guida alla configurazione per ulteriori informazioni.

La maggior parte degli argomenti nella documentazione per esercenti si applica a un’istanza Commerce in esecuzione in modalità di produzione. Tuttavia, le impostazioni di configurazione e gli strumenti seguenti possono essere utilizzati solo quando l'installazione è in esecuzione in modalità sviluppatore.

Flusso di lavoro di sviluppo front-end

Il tipo di flusso di lavoro di sviluppo front-end determina se la compilazione Less viene eseguita sul lato client o server durante lo sviluppo. Less è un’estensione di CSS che dispone di funzioni e convenzioni aggiuntive e che produce codice semplificato. Per lo sviluppo dei temi, si consiglia la compilazione Less lato client. La compilazione lato server è la modalità predefinita. Le opzioni del flusso di lavoro di sviluppo non sono disponibili per i negozi in modalità di produzione.
Consulta Compilazione LESS lato client e lato server{:target="_blank"} nella documentazione per gli sviluppatori di Commerce.

NOTE
La configurazione del flusso di lavoro di sviluppo front-end è disponibile in Modalità sviluppatore solo.

Configurazione avanzata: flusso di lavoro di sviluppo front-end

  1. Il giorno Amministratore barra laterale, vai a Stores > Settings>Configuration.

  2. Nel pannello a sinistra, espandi Advanced e scegli Developer.

  3. Espandi Selettore di espansione il Front-end Development Workflow sezione.

  4. Imposta Workflow Type a uno dei seguenti elementi:

    • Client side less compilation - La compilazione avviene nel browser utilizzando less.js libreria.
    • Server side less compilation - La compilazione avviene sul server utilizzando la libreria meno PHP. Questa è la modalità predefinita per la produzione.
  5. Al termine, fai clic su Save Config.

Firme file statiche

L'aggiunta di una firma digitale all'URL di file statici consente ai browser di rilevare quando è disponibile una versione più recente del file. I file statici che possono essere tracciati con le firme digitali includono JavaScript, CSS, immagini e font. La firma viene aggiunta al percorso direttamente dopo l’URL di base. Se la firma di un file è diversa da quella memorizzata nella cache del browser, viene utilizzata la versione più recente del file.

Consulta Firma del contenuto statico{:target="_blank"} nella documentazione per gli sviluppatori di Commerce.

NOTE
La configurazione di Impostazioni file statiche è disponibile solo quando si lavora in modalità sviluppatore.

Configurazione avanzata: impostazioni dei file statici

Per un elenco dettagliato delle impostazioni di configurazione, vedi Impostazioni file statico nel Riferimento configurazione.

Per attivare i file statici firmati:

  1. Il giorno Amministratore barra laterale, vai a Stores > Settings>Configuration.

  2. Nel pannello a sinistra, espandi Advanced e scegli Developer.

  3. Espandi Selettore di espansione il Static Files Settings sezione.

  4. Imposta Sign Static Files a Yes.

  5. Al termine, fai clic su Save Config.

Ottimizzazione dei file di risorse

Il tempo necessario per caricare i file di risorse può essere ridotto unendo e raggruppando i file e riducendo al minimo il codice.

  • L'unione combina file separati dello stesso tipo in un unico file.
  • Il bundling è una tecnica che raggruppa file separati in modo da ridurre il numero di richieste HTTP necessarie per caricare una pagina.
  • La minimizzazione rimuove spazi, interruzioni di riga e commenti, ma non influisce sulla funzionalità del codice. Poiché i file ridotti a icona non possono essere modificati, il processo deve essere applicato solo quando si è pronti per l’avvio in produzione.

Per impostazione predefinita, Adobe Commerce e Magento Open Source non uniscono, raggruppano o riducono a icona i file e lo sviluppatore del progetto deve determinare quali metodi di ottimizzazione file utilizzare.

Consulta Best practice per le prestazioni per ulteriori informazioni.

NOTE
I file CSS e JavaScript possono essere ottimizzati in Modalità sviluppatore solo.
Tipo di file
Operazioni supportate
File CSS
MergeMinify
File JavaScript
MergeBundleMinify
File modello
Minify

Per ottimizzare i file di risorse:

  1. Il giorno Amministratore barra laterale, vai a Stores > Settings>Configuration.

  2. Nel pannello a sinistra, espandi Advanced e scegli Developer.

  3. Per ottimizzare i file CSS, espandi Selettore di espansione il CSS Settings ed effettuare le seguenti operazioni:

    • Imposta Merge CSS Files a Yes.
    • Imposta Minify CSS Files a Yes.

    Configurazione avanzata - Impostazioni CSS {width="600" modal="regular"}

Impostazioni CSS

  1. Per ottimizzare i file JavaScript, espandi Selettore di espansione il JavaScript Settings ed effettuare le seguenti operazioni:

    • Imposta Merge JavaScript Files a Yes.
    • Imposta Minify JavaScript Files a Yes.

    Configurazione avanzata: impostazioni JavaScript {width="600" modal="regular"}

  2. Per minimizzare i file modello PHTML, espandete Selettore di espansione il Template Settings sezione e set Minify Html a Yes.

    Configurazione avanzata - Impostazioni modello {width="600" modal="regular"}

  3. Al termine, fai clic su Save Config.

Limitazioni per i client

Prima di utilizzare uno strumento come suggerimenti percorso modello, assicurati di aggiungere il tuo indirizzo IP all’elenco Consentiti Developer Client Restrictions (Limitazioni client sviluppatore) per evitare di interrompere l’esperienza di acquisto dei clienti nel negozio. Se non conosci il tuo indirizzo IP, puoi cercarlo online.

NOTE
Le restrizioni per i client di sviluppo possono essere impostate in Modalità sviluppatore solo.

Per informazioni tecniche, consulta VCL personalizzato per consentire le richieste nel Guida di Commerce su infrastruttura cloud.

Per aggiungere il tuo indirizzo IP al inserisco nell'elenco Consentiti di:

  1. Il giorno Amministratore barra laterale, vai a Stores > Settings>Configuration.

  2. Nel pannello a sinistra, espandi Advanced e scegli Developer.

  3. Espandi Selettore di espansione il Developer Client Restrictions sezione.

    Configurazione avanzata: restrizioni per i client per sviluppatori {width="600" modal="regular"}

  4. Per Allow IPs, immetti l'indirizzo IP.

    Se è necessario l’accesso da più indirizzi IP, separali con una virgola.

  5. Al termine, fai clic su Save Config.

  6. Quando richiesto, aggiorna le cache non valide.

Suggerimenti percorso modello

Gli hint di percorso del modello sono uno strumento diagnostico che aggiunge una notazione con il percorso di ciascun modello utilizzato nella pagina. Gli hint per il percorso del modello possono essere abilitati sia per la vetrina che per l’amministratore.

NOTE
Gli Hint percorso modello possono essere modificati in modalità sviluppatore solo.

Consulta Individuazione di modelli, layout e stili{:target="_blank"} nella documentazione per gli sviluppatori di Commerce.

Esempio di vetrina: suggerimenti per il percorso del modello

Passaggio 1: aggiungi l’indirizzo IP al inserisco nell'elenco Consentiti di

Prima di utilizzare i suggerimenti del percorso del modello, aggiungi il tuo indirizzo IP alla INSERISCO NELL'ELENCO CONSENTITI DI per evitare interferenze con i clienti che fanno acquisti all'interno del negozio. Al termine, assicurati di cancellare la cache di Commerce per rimuovere tutti gli hint dall’archivio.

Configurazione avanzata: restrizioni per i client per sviluppatori

Passaggio 2: abilitare gli hint per il percorso del modello

  1. Il giorno Amministratore barra laterale, vai a Stores > Settings>Configuration.

  2. Nel pannello a sinistra, espandi Advanced e scegli Developer.

  3. Espandi Selettore di espansione il  Debug ed effettuare le seguenti operazioni:

    Configurazione avanzata - debug {width="600" modal="regular"}

    • Per attivare i suggerimenti del percorso del modello per l'archivio, impostare Enabled Template Path Hints for Storefront a Yes.

    • Per abilitare i suggerimenti del percorso del modello per l’archivio solo quando l’URL include templatehints parametro, impostato Abilita suggerimenti per vetrina con parametro URL a Yes. Impostate quindi il valore del parametro, se necessario. Il valore predefinito è magento, ma puoi utilizzare un valore personalizzato. Ad esempio, se modifichi il valore in lorem, utilizzerai mymagento.com?templatehints=lorem per visualizzare gli hint del modello.

    • Per attivare i suggerimenti del percorso del modello per l’amministratore, imposta Enabled Template Path Hints for Admin a Yes.

    • Per includere i nomi dei blocchi, impostare Add Block Class Type to Hints a Yes.

  4. Al termine, fai clic su Save Config.

Passaggio 3: cancellare la cache

  1. Il giorno Amministratore barra laterale, vai a System > Tools>Cache Management.

  2. Nell’angolo superiore destro, fai clic su Flush Magento Cache.

Traduci in linea

È possibile utilizzare lo strumento Traduci in linea in modalità sviluppatore per ritoccare il testo nell’interfaccia in modo da riflettere la voce e il marchio. Quando è attivata la modalità Traduci in linea, tutto il testo sulla pagina che può essere modificato viene evidenziato in rosso. È facile modificare le etichette dei campi, i messaggi e altro testo visualizzato nella vetrina e in Amministrazione. Ad esempio, molti temi utilizzano terminologia come Il mio account, La mia lista desideri, e Il mio dashboard, per aiutare i clienti a trovare il modo di procedere. Tuttavia, potrebbe essere preferibile utilizzare semplicemente le parole Account, Lista dei desideri, e Dashboard.

NOTE
Lo strumento Traduci in linea è disponibile solo quando si lavora in modalità sviluppatore.

Consulta Panoramica sulle traduzioni nella documentazione per gli sviluppatori di Commerce.

Esempio di vetrina: testo traducibile

Se il punto vendita è disponibile in più lingue, è possibile apportare regolazioni precise al testo tradotto per la lingua. Sul server, il testo dell’interfaccia viene mantenuto in un file CSV separato per ciascun blocco di output e organizzato in base alle impostazioni internazionali. Come approccio alternativo, anziché utilizzare il Traduci in linea , puoi anche modificare i file CSV direttamente sul server. I file di traduzione vengono memorizzati in app/code/Magento/<module_name>/i18n/<language_locale>.csv.

NOTE
Per utilizzare lo strumento Traduci in linea, il browser deve consentire la visualizzazione di popup.

Passaggio 1: disabilitare le cache di output

  1. Il giorno Amministratore barra laterale, vai a System > Tools>Cache Management.

  2. Selezionare le caselle di controllo seguenti:

    • Blocks HTML output
    • Page Cache
    • Translations
  3. Imposta il Actions controllo a Disable e fai clic su Submit.

Passaggio 2: abilitare lo strumento Traduci in linea

  1. Il giorno Amministratore barra laterale, vai a Stores > Settings>Configuration.

  2. Per utilizzare una visualizzazione specifica dello store, impostare Store View da aggiornare.

  3. Nel pannello a sinistra, espandi Advanced e scegli Developer.

  4. Espandi Selettore di espansione il Translate Inline sezione.

    Cancella Use Website per modificare queste impostazioni.

    Il Enabled for Admin ​non è disponibile quando si modifica una visualizzazione store specifica.

    Configurazione avanzata - Traduci in linea {width="600" modal="regular"}

  5. Imposta Enabled for Storefront a Yes.

  6. Al termine, fai clic su Save Config.

  7. Quando richiesto, aggiorna le cache non valide, ma lascia le cache disabilitate invariate per il momento.

Passaggio 3: aggiornare il testo

  1. Apri la vetrina in un browser e passa alla pagina da modificare.

    Se necessario, utilizza il selettore lingua per modificare la visualizzazione dello store. Ogni stringa di testo che può essere tradotta è evidenziata in rosso. Quando si passa il puntatore del mouse su una casella di testo, viene visualizzata l'icona di un libro ( Icona libro ).

  2. Fai clic sull’icona libro per aprire Traduci ed effettuare le seguenti operazioni:

    • Se la modifica riguarda una visualizzazione specifica dello store, seleziona la Store View Specific casella di controllo.

    • Inserisci il nuovo Custom testo.

  3. Al termine, fai clic su Submit.

    Inserisci testo personalizzato {width="700" modal="regular"}

  4. Per visualizzare le modifiche nell'archivio, aggiorna il browser.

  5. Ripetere questa procedura per modificare tutti gli elementi dell'archivio.

Passaggio 4: ripristinare le impostazioni originali

  1. Torna all’Amministratore del tuo negozio.

  2. Il giorno Amministratore barra laterale, vai a Stores > Settings>Configuration.

  3. Imposta Store View alla visualizzazione specifica modificata.

  4. Nel pannello a sinistra, espandi Advanced e scegli Developer.

  5. Espandi Selettore di espansione il Translate Inline sezione.

  6. Imposta Enabled for Frontend a No.

  7. Al termine, fai clic su Save Config.

  8. Il giorno Amministratore barra laterale, vai a System > Tools>Cache Management.

  9. Seleziona la casella di controllo delle seguenti cache di output precedentemente disabilitate:

    • Blocks HTML output
    • Page Cache
    • Translations
  10. Imposta il Actions controllo a Enable e fai clic su Submit.

  11. Quando richiesto, aggiorna le cache non valide.

Passaggio 5: verificare le modifiche nel punto vendita

Vai alla vetrina ed esamina ogni pagina aggiornata per verificare che le modifiche siano corrette. In questo esempio, Customer Login è stato modificato in Customer Sign In. Se sono state apportate modifiche a una visualizzazione specifica, utilizza Selezione lingua per passare alla visualizzazione corretta.

Esempio di vetrina: accesso del cliente tradotto

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