Page Builder Procedura dettagliata parte 2: blocchi

Nella barra laterale Admin, passa a Content > Elements>Blocks.

Nell'angolo superiore destro fare clic su Add New Block.

Per Block Title, immettere Google Map.

Per Identifier, immettere google-map.

Scegli Store View dove il blocco deve essere disponibile.

{width="600" modal="regular"}

Nell'angolo superiore destro fare clic su Save.

Scorri verso il basso fino all'anteprima del contenuto Page Builder (attualmente vuota) e fai clic su Edit with Page Builder.

Nel pannello Page Builder, espandere Media e trascinare un segnaposto Map nell'area di visualizzazione.

{width="600" modal="regular"}

Se Google Maps è configurato per il tuo archivio, verrà visualizzata una mappa con il percorso del tuo archivio.

{width="600" modal="regular"}

Se Google Maps non è ancora configurato per l'archivio, verrà visualizzata una mappa segnaposto.

{width="600" modal="regular"}

Nell'angolo superiore destro dell'area di visualizzazione fare clic sull'icona Chiudi schermo intero ( ).

Facendo clic su questa icona si ritorna alla sezione Content ​per il blocco con l'anteprima visualizzata.

Nell'angolo superiore destro fare clic sulla freccia Save e scegliere Save & Close.

Passa alla console della piattaforma Google Cloud.

Fai clic sull’elenco a discesa del progetto e seleziona o crea il progetto per il quale desideri aggiungere una chiave API.

Per configurare le credenziali API, segui le istruzioni nella documentazione di Google Maps.

Copia la chiave API negli Appunti.

Torna all'amministratore Commerce e passa a Stores > Settings>Configuration.

Nel pannello a sinistra in General, scegli Content Management.

Espandere Advanced Content Tools.

{width="600" modal="regular"}

Per ulteriori informazioni sulle opzioni di configurazione Content Management Advanced Tools, vedere la Guida di riferimento alla configurazione.

Per Google Maps API Key, incolla la chiave copiata.

Fare clic su Test Key.

Se si è verificato un problema con la chiave, tornare al sito di Google Maps Platform per risolvere il problema. Riprovare.

Dopo aver verificato la chiave, fare clic su Save Config.

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

Nella griglia, trovare Simple Page ​creato nel primo tutorial e selezionare Edit ​nella colonna​ Action.

Espandere nella sezione Content e fare clic su Edit with Page Builder o all'interno dell'area di anteprima del contenuto.

Nel pannello Page Builder sotto Layout, trascina un segnaposto Row ​nella parte superiore dell'area di visualizzazione.

{width="600" modal="regular"}

Nel pannello Page Builder, espandi Add Content e trascina un segnaposto Block nella nuova riga.

Passa il puntatore del mouse sul contenitore di blocchi vuoto per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( {width="20"} ).

{width="600" modal="regular"}

Nella pagina Modifica blocco fare clic su Select Block.

{width="600" modal="regular"}

Nella casella di ricerca, immettere map e premere Invio/Ritorno per trovare il blocco creato.

{width="600" modal="regular"}

Nella griglia, fare clic su Select per scegliere il blocco Google Maps.

Nell'angolo superiore destro fare clic su Save per salvare le impostazioni e tornare all'area di lavoro Page Builder.

Nell'angolo superiore destro dell'area di visualizzazione fare clic sull'icona Chiudi schermo intero ( ).

Facendo clic su questa icona si ritorna alla sezione Content ​per la pagina con l'anteprima visualizzata.

Nell'angolo superiore destro fare clic sulla freccia Save e scegliere Save & Close.

Nella barra laterale Admin, passa a Content > Elements>Dynamic Blocks.

{width="700" modal="regular"}

Nell'angolo superiore destro fare clic su Add Dynamic Block.

{width="600" modal="regular"}

Completa le impostazioni di base per il nuovo blocco dinamico:

• Imposta Enable Dynamic Block su Yes.

• Per Dynamic Block Name, immettere Tee Shirt Promo.

• Impostare Dynamic Block Type su Content Area e fare clic su Done.

  Il tipo di blocco dinamico determina la posizione del blocco nel layout di pagina. Quando imposti un blocco dinamico per il tuo archivio, considera sia il layout di pagina che il tema, in modo da poter sfruttare lo spazio disponibile. Alcuni negozi hanno un’area di contenuto attiva limitata a una larghezza fissa, mentre altri estendono l’intera larghezza dello schermo.

  {width="600" modal="regular"}

• Per Customer Segment, seleziona la casella di controllo di ciascun segmento che desideri applicare al blocco dinamico e fai clic su Fine per salvare l'elenco dei segmenti.

  Nell'esempio seguente sono presenti due segmenti di clienti che identificano i clienti registrati in base al sesso. Questo blocco dinamico viene visualizzato solo per le clienti di sesso femminile registrate che hanno effettuato l’accesso ai loro account mentre fanno acquisti nel tuo negozio.

  {width="600" modal="regular"}

Passa il puntatore del mouse sul contenitore righe per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( {width="20"} ).

In Appearance ​scegliere Full Bleed.

Per Minimum Height, immettere 400px.

Scorri fino alla sezione Background ​e imposta Background Image ​facendo clic su Select from Gallery ​e scegliendo l'immagine wide-banner-background.png caricata nella prima esercitazione.

Nell'angolo superiore destro fare clic su Save per applicare le impostazioni e tornare all'area di lavoro Page Builder.

{width="600" modal="regular"}

Nel pannello Page Builder, espandi Elements e trascina un segnaposto Testo nella seconda colonna.

{width="600" modal="regular"}

Immetti nell’editor le tre righe di testo seguenti:

Even more ways to mix and match.

Buy 3 Luma tees and get a 4th free.

Shop Tees >

{width="600" modal="regular"}

Selezionare tutte e tre le righe di testo e utilizzare la barra degli strumenti per impostare Altezza riga su 40px.

{width="600" modal="regular"}

Impostare Font Size per ogni riga come segue:

Poiché questo blocco può essere posizionato in qualsiasi punto della pagina, utilizza lo stile di paragrafo predefinito, anziché i livelli di intestazione. Inoltre, non preoccuparti che il testo non venga ancora disposto correttamente nella colonna.

{width="600" modal="regular"}

In un’altra scheda del browser, apri la vetrina e passa alla pagina che deve essere la destinazione del collegamento.

Puoi utilizzare l’URL completo o un URL relativo che omette il riferimento al dominio dello store.

URL completo
: https://mystore.com/women/tops-women/tees-women.html

URL relativo
: ../women/tops-women/tees-women.html

Torna alla scheda dell'area di lavoro Page Builder e all'editor di testo, seleziona il testo Shop Tees > nella terza riga e scegli Bold ( ) nella barra degli strumenti dell'editor.

Con il testo Shop Tees > nella terza riga ancora selezionato, scegli Inserisci/modifica collegamento ( ) nella barra degli strumenti dell'editor.

{width="600" modal="regular"}

Per URL, immettere il collegamento relativo preparato.

Imposta Target su None.

Questa impostazione consente di aprire la pagina nella stessa finestra del browser, anziché aprire una nuova scheda.

Per Title, immettere Shop Tees.

L’attributo di collegamento Titolo viene utilizzato da alcuni browser come descrizione comando.

Per salvare il collegamento e tornare all'area di lavoro Page Builder, fare clic su OK.

{width="600" modal="regular"}

Nell'angolo superiore destro dell'area di visualizzazione fare clic sull'icona Chiudi schermo intero ( ).

Facendo clic su questa icona si ritorna alla sezione Content ​per il blocco dinamico con l'anteprima visualizzata.

Nell'angolo superiore destro fare clic su Save.

Apri di nuovo il blocco dinamico Tee Shirt Promo in modalità di modifica.

Espandere nella sezione Related Promotions e fare clic su Add Cart Price Rules.

{width="600" modal="regular"}

Nella pagina Aggiungi regole prezzo carrello correlato, seleziona la casella di controllo per Acquista 3 magliette e ottieni la quarta regola di prezzo gratuita, quindi fai clic su Add Selected.

{width="600" modal="regular"}

La regola prezzo viene visualizzata nella sezione Promozioni correlate in Regola prezzo carrello correlato. È possibile associare più regole di prezzo a un blocco dinamico. Tuttavia, questo semplice esempio ne utilizza solo uno.

{width="600" modal="regular"}

Nell'angolo superiore destro fare clic su Save.

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

Trovare la pagina semplice creata nel primo esercizio di procedura dettagliata e aprirla in modalità di modifica.

Espandere nella sezione Content e fare clic su Edit with Page Builder.

Passa il puntatore del mouse sulla riga superiore con la stessa immagine del blocco dinamico per visualizzare la casella degli strumenti e l'icona Rimuovi ( {width="20"} ).

Per confermare la rimozione della riga dalla pagina, fare clic su OK.

Nel pannello Page Builder sotto Layout, trascina un nuovo segnaposto Row ​nella parte superiore dell'area di visualizzazione.

Nel pannello Page Builder, espandi Add Content e trascina un segnaposto Dynamic Block nella nuova riga.

{width="600" modal="regular"}

Passa il puntatore del mouse sul contenitore di blocchi dinamici per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( {width="20"} ).

{width="600" modal="regular"}

Nella pagina Edit Dynamic Block, fare clic su Select Dynamic Block.

{width="600" modal="regular"}

Trovare il blocco dinamico Tee Shirt Promo ​creato e fare clic su Select.

Di seguito viene visualizzato un riepilogo delle informazioni sul blocco dinamico.

{width="600" modal="regular"}

Accettare Template, Dynamic Block Block Template predefiniti.

Al termine, fare clic su Save per salvare le impostazioni e tornare all'area di lavoro Page Builder.

{width="600" modal="regular"}

Nell'angolo superiore destro dell'area di visualizzazione fare clic sull'icona Chiudi schermo intero ( ).

Facendo clic su questa icona si ritorna alla sezione Content ​per la pagina con l'anteprima visualizzata.

Nell'angolo superiore destro fare clic sulla freccia Save e scegliere Save & Close.

Nella barra laterale Admin, passa a Content > Elements>Dynamic Blocks.

Trova il blocco dinamico Tee Shirt Promo ​nella griglia e aprilo in modalità di modifica.

Espandere nella sezione Content e fare clic su Edit with Page Builder.

Modifica la larghezza delle colonne:

• Passa il cursore del mouse sul bordo tra le due colonne.

• Tenere premuto il pulsante del mouse e trascinare il bordo di due divisioni verso sinistra.

  {width="600" modal="regular"}

  La prima colonna è ora quattro su 12 (4/12) divisioni di griglia, e la seconda colonna è otto su 12 (8/12) divisioni di larghezza.

  {width="600" modal="regular"}

Modificare il colore del testo:

• Selezionare le prime due righe di testo.

• Sulla barra degli strumenti dell'editor, scegliere Text Color e fare clic sul campione White.

{width="600" modal="regular"}

Nell'angolo superiore destro dell'area di visualizzazione fare clic sull'icona Chiudi schermo intero ( ).

Facendo clic su questa icona si ritorna alla sezione Content ​per il blocco dinamico con l'anteprima visualizzata.

Nell'angolo superiore destro fare clic su Save.

Apri una finestra del browser nella vetrina.

Per visualizzare la pagina di esempio, modifica l’URL nella barra degli indirizzi come segue:

mystore.com/sample-page

Se l’archivio è configurato per includere il suffisso html, includi il suffisso come segue:

mystore.com/sample-page.html

Accedi come cliente donna:

• Nell'angolo superiore destro della home page, fare clic su Sign In.

• Se i dati Luma di esempio sono installati nel sistema, usa le seguenti credenziali:

  Email - roni_cost@example.com

  Password - roni_cost3@example.com

• Fare clic su Sign In.

• Torna alla pagina di esempio per visualizzare il blocco dinamico creato con la promozione Tee Shirt.

{width="700" modal="regular"}