DocumentazioneCommerceGuida ai sistemi di amministrazione

Strumenti per sviluppatori

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

Creato per:

  • Principiante
  • Intermedio
  • Amministratore
  • Sviluppatore

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

Modalità operative

L'istanza di Adobe Commerce o di Magento Open Source può essere distribuita per l'esecuzione in produzione o in modalità sviluppatore. È possibile accedere agli strumenti e alle impostazioni di configurazione specifici per gli sviluppatori solo quando l'archivio è 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. Per ulteriori informazioni, vedere Impostare la modalità operativa nella Guida alla configurazione.

La maggior parte degli argomenti nella documentazione per esercenti si applica a un’istanza di 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.
Vedi Compilazione LESS lato client rispetto a lato server{:target="_blank"} nella documentazione per gli sviluppatori di Commerce.

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

Configurazione avanzata - flusso di lavoro sviluppo front-end

  1. Nella barra laterale Admin, passa a Stores > Settings>Configuration.

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

  3. Espandere Il selettore di espansione nella sezione Front-end Development Workflow.

  4. Imposta Workflow Type su uno dei seguenti:

    • Client side less compilation - La compilazione viene eseguita nel browser utilizzando la libreria less.js nativa.
    • Server side less compilation - Compilazione eseguita sul server utilizzando la libreria meno PHP. Questa è la modalità predefinita per la produzione.

  5. Al termine, fare 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 di contenuti statici{:target="_blank"} nella documentazione per gli sviluppatori di Commerce.

NOTE
La configurazione delle impostazioni di file statici è disponibile solo quando si lavora in modalità sviluppatore.

Configurazione avanzata - impostazioni file statici

Per un elenco dettagliato delle impostazioni di configurazione, vedere Impostazioni file statici nel Riferimento configurazione.

Per abilitare i file statici firmati:

  1. Nella barra laterale Admin, passa a Stores > Settings>Configuration.

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

  3. Espandere Il selettore di espansione nella sezione Static Files Settings.

  4. Imposta Sign Static Files su Yes.

  5. Al termine, fare 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.

Per ulteriori informazioni, consulta Best practice per le prestazioni.

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

Per ottimizzare i file di risorse:

  1. Nella barra laterale Admin, passa a Stores > Settings>Configuration.

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

  3. Per ottimizzare i file CSS, espandi il selettore di espansione nella sezione CSS Settings ed effettua le seguenti operazioni:

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

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

Impostazioni CSS

  1. Per ottimizzare i file JavaScript, espandere Selettore di espansione nella sezione JavaScript Settings ed effettuare le seguenti operazioni:

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

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

  2. Per minimizzare i file modello PHTML, espandere Il selettore di espansione nella sezione Template Settings e impostare Minify Html su Yes.

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

  3. Al termine, fare clic su Save Config.

Limitazioni per i client

Prima di utilizzare uno strumento come suggerimenti percorso modello, assicurati di aggiungere il tuo indirizzo IP al inserisco nell'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 solo in Modalità sviluppatore.

Per informazioni tecniche, consulta VCL personalizzato per consentire le richieste nella Guida di Commerce on Cloud Infrastructure.

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

  1. Nella barra laterale Admin, passa a Stores > Settings>Configuration.

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

  3. Espandere Il selettore di espansione nella sezione Developer Client Restrictions.

    Configurazione avanzata - restrizioni client sviluppatore {width="600" modal="regular"}

  4. Per Allow IPs, immetti il tuo indirizzo IP.

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

  5. Al termine, fare 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 solo in modalità sviluppatore.

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

Esempio di vetrina - suggerimenti percorso 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 al inserisco nell'elenco Consentiti di per evitare interferenze con i clienti che fanno acquisti nel negozio. Al termine, assicurati di cancellare la cache di Commerce per rimuovere tutti gli hint dall’archivio.

Configurazione avanzata - restrizioni client sviluppatore

Passaggio 2: abilitare gli hint per il percorso del modello

  1. Nella barra laterale Admin, passa a Stores > Settings>Configuration.

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

  3. Espandere Il selettore di espansione nella sezione 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 su Yes.

    • Per abilitare i suggerimenti del percorso del modello per l'archivio solo quando l'URL include il parametro templatehints, impostare Abilita suggerimenti per Storefront con parametro URL su Yes. Impostate quindi il valore del parametro, se necessario. Il valore predefinito è magento, ma è possibile 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, impostare Enabled Template Path Hints for Admin su Yes.

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

  4. Al termine, fare clic su Save Config.

Passaggio 3: cancellare la cache

  1. Nella barra laterale Admin, passa a System > Tools>Cache Management.

  2. Nell'angolo superiore destro fare clic su Flush Magento Cache.

Traduci in linea

Puoi usare lo strumento Traduci in linea in modalità sviluppatore per ritoccare il testo nell'interfaccia in modo da riflettere la tua voce e il tuo 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 la terminologia, ad esempio Account personale, Elenco desideri e Dashboard personale, per aiutare i clienti a trovare il modo di procedere. Tuttavia, è possibile utilizzare semplicemente le parole Account, Elenco 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. In alternativa, invece di utilizzare lo strumento Traduci in linea, è possibile modificare i file CSV direttamente sul server. I file di traduzione sono archiviati 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. Nella barra laterale Admin, passa a System > Tools>Cache Management.

  2. Selezionare le caselle di controllo seguenti:

    • Blocks HTML output
    • Page Cache
    • Translations

  3. Impostare il controllo Actions su Disable e fare clic su Submit.

Passaggio 2: abilitare lo strumento Traduci in linea

  1. Nella barra laterale Admin, passa a Stores > Settings>Configuration.

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

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

  4. Espandere Il selettore di espansione nella sezione Translate Inline.

    Deselezionare la casella di controllo Use Website per modificare le impostazioni.

    L'opzione Enabled for Admin ​non è disponibile quando si modifica una visualizzazione archivio specifica.

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

  5. Imposta Enabled for Storefront su Yes.

  6. Al termine, fare 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 passi il cursore del mouse su una casella di testo, viene visualizzata l'icona di un libro ( icona libro ).

  2. Fare clic sull'icona libro per aprire la finestra Traduci ed eseguire le operazioni seguenti:

    • Se la modifica riguarda la visualizzazione archivio specifica, selezionare la casella di controllo Store View Specific.

    • Immettere il nuovo testo Custom.

  3. Al termine, fare 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. Nella barra laterale Admin, passa a Stores > Settings>Configuration.

  3. Impostare Store View sulla visualizzazione specifica modificata.

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

  5. Espandere Il selettore di espansione nella sezione Translate Inline.

  6. Imposta Enabled for Frontend su No.

  7. Al termine, fare clic su Save Config.

  8. Nella barra laterale Admin, passa 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. Impostare il controllo Actions su Enable e fare 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