DocumentazioneCommerceContenuto e progettazione

Aggiornamenti del layout

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

Creato per:

  • Principiante
  • Intermedio
  • Amministratore
  • Utente

Prima di iniziare a utilizzare gli aggiornamenti di layout personalizzati, è importante comprendere come vengono costruite le pagine del tuo archivio e la differenza tra i termini layout e aggiornamento layout. Layout si riferisce alla composizione visiva e strutturale della pagina. L'aggiornamento del layout si riferisce a un insieme specifico di istruzioni XML che possono sostituire o personalizzare la modalità di costruzione della pagina.

Il layout XML dell'archivio Commerce è una struttura gerarchica di contenitori e blocchi. Alcuni elementi vengono visualizzati in ogni pagina, altri solo in pagine specifiche. Per ulteriori informazioni su layout, contenitori e blocchi, vedere la Panoramica dei layout nella Guida per gli sviluppatori di FrontEnd.

Lo strumento Widget consente di aggiungere facilmente un blocco di contenuto esistente al layout predefinito di una pagina. Per aggiornamenti più avanzati, è necessario salvare il codice di aggiornamento del layout XML sul server e quindi fare riferimento al file come aggiornamento del layout personalizzato dall'amministratore. Per una panoramica del processo, vedere Utilizzare gli aggiornamenti del layout.

Nel diagramma seguente, i nomi che fanno riferimento ai contenitori sono neri e i tipi di blocchi, o percorsi di classi di blocchi, sono blu.

Diagramma layout blocco standard

Tipo di blocco
Descrizione
page/html
Il nome di questo blocco è root ed è uno dei pochi blocchi radice nel layout. Puoi anche creare un blocco personalizzato e denominarlo root, che è il nome standard per i blocchi di questo tipo. Può esistere un solo blocco di questo tipo per pagina.
page/html_head
Il nome del blocco è head ed è un elemento figlio del blocco radice. Può esistere un solo blocco di questo tipo per pagina e non deve essere rimosso.
page/html_notices
Il nome del blocco è global_notices ed è un elemento figlio del blocco radice. Se questo blocco viene rimosso dal layout, gli avvisi globali non vengono visualizzati nella pagina. Può esistere un solo blocco di questo tipo per pagina.
page/html_header
Il nome del blocco è header ed è un elemento figlio del blocco radice. Questo blocco corrisponde all’intestazione visiva nella parte superiore della pagina e contiene diversi blocchi standard. Può esistere un solo blocco di questo tipo per pagina e non deve essere rimosso.
page/html_wrapper
Anche se incluso nel layout predefinito, questo blocco è obsoleto ed è incluso solo per garantire la compatibilità con le versioni precedenti. Non utilizzare blocchi di questo tipo.
page/html_breadcrumbs
Il nome di questo blocco è breadcrumbs ed è un elemento figlio del blocco intestazione. Questo blocco visualizza le breadcrumb per la pagina corrente. Può esistere un solo blocco di questo tipo per pagina.
page/html_footer
Il nome del blocco è footer ed è un elemento figlio del blocco radice. Il blocco piè di pagina corrisponde al piè di pagina visivo nella parte inferiore della pagina e contiene diversi blocchi standard. Può esistere un solo blocco di questo tipo per pagina e non deve essere rimosso.
page/template_links
Nel layout standard sono presenti due blocchi di questo tipo. Il blocco top.links è un elemento figlio del blocco intestazione e corrisponde al menu di navigazione superiore. Il blocco footer_links è un elemento figlio del blocco piè di pagina e corrisponde al menu di navigazione inferiore.

Nota: ​è possibile modificare i collegamenti dei modelli, come illustrato negli esempi.
page/switch
Esistono due blocchi di questo tipo in un layout standard. Il blocco store_language è un elemento figlio del blocco di intestazione e corrisponde al commutatore della lingua superiore. Il blocco store_switcher è un elemento figlio del blocco piè di pagina e corrisponde al commutatore dell'archivio inferiore.
core/messages
Esistono due blocchi di questo tipo in un layout standard. Il blocco global_messages visualizza messaggi globali. Il blocco messages viene utilizzato per visualizzare tutti gli altri messaggi. Se rimuovi questi blocchi, il cliente non visualizza alcun messaggio.
core/text_list
Questo tipo di blocco è ampiamente utilizzato in Commerce come segnaposto per il rendering dei blocchi figlio.
core/profiler
Esiste una sola istanza di questo tipo di blocco per pagina. Viene utilizzato per il profiler interno Commerce e non deve essere utilizzato per altri scopi.

Posizionare un blocco utilizzando gli aggiornamenti del layout

Gli aggiornamenti del layout consentono di personalizzare il layout di una pagina. Gli aggiornamenti di layout offrono maggiore flessibilità rispetto a un widget, ma richiedono l'accesso al server e una conoscenza di base di XML.

Nei passaggi seguenti viene illustrato come utilizzare un aggiornamento del layout per posizionare un blocco in una pagina. Per esempi specifici e informazioni sulla sintassi, consulta Attività comuni di personalizzazione del layout nella Guida per gli sviluppatori di FrontEnd.

Passaggio 1: creare il blocco

  1. Creare il blocco che si desidera inserire.

  2. Prendere nota di block_id, perché viene utilizzato nelle istruzioni di aggiornamento del layout.

Passaggio 2: creare l’aggiornamento del layout in XML

  1. Componi le istruzioni di layout in XML per fare riferimento a un blocco CMS.

  2. Salva le istruzioni di layout sul server nella cartella di layout in cui vengono salvati i file XML per il tema.

    Ad esempio:

    <theme_dir>/<Namespace>_<Module>/layout

    L'handle di layout è il nome file che inizia con cms_page_view_selectable_, seguito dalla chiave URL della pagina CMS, dall'opzione di aggiornamento del layout e dal suffisso file xml. Nell'esempio seguente, customer-service è la chiave URL della pagina e ChatTool è l'opzione selezionata per applicare l'aggiornamento del layout alla pagina.

    cms_page_view_selectable_<customer-service>_<ChatTool>.xml

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Elemento Descrizione
    Identificatore pagina CMS Chiave URL della pagina con qualsiasi barra (/) sostituita da un carattere di sottolineatura (_).
    Nome aggiornamento layout Opzione visualizzata per Aggiornamento layout personalizzato.

Passaggio 3: Includere un riferimento all’aggiornamento del layout dalla pagina

  1. Nella barra laterale Admin, passa a Content > Elements>Pages.

  2. Individua la pagina in cui desideri inserire il blocco e aprila in modalità di modifica.

  3. Scorri verso il basso ed espandi il selettore di espansione nella sezione Design.

  4. Per visualizzare tutti gli aggiornamenti di layout disponibili associati alla pagina, fare clic sul menu Custom Layout Update.

    Elenco aggiornamenti layout personalizzato {width="400" modal="regular"}

  5. Seleziona l’aggiornamento del layout da applicare alla pagina.

Passaggio 4: salvare e aggiornare la cache

  1. Al termine, fare clic su Save & Close.

  2. Nel messaggio nella parte superiore dell'area di lavoro, fare clic su Cache Management e aggiornare tutti gli elementi della cache non validi.

recommendation-more-help
2b0136b4-ef75-405f-9734-60d741f198de