Page Builder Procedura dettagliata parte 3: contenuto del catalogo

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

Trovare la pagina semplice creata nel primo esercizio e modificata nel secondo 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 Row ​nella parte superiore dell'area di visualizzazione.

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

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

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

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

Per Select Products By, scegliere Condition.

Aggiungi una condizione:

• Fai clic sull'icona Aggiungi ( ).

• In Product Attribute ​scegliere Category.

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

• Completare la parte Category is… della condizione facendo clic sull'icona Altro (…), quindi fare clic sull'icona Selettore ( ).

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

• Nell'albero delle categorie, espandere la categoria Donne > Superiori e selezionare la casella di controllo Tees.

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

• Fare clic sull'icona del segno di spunta ( ).

  L’ID della categoria corrispondente viene visualizzato nel campo per completare la condizione.

Immettere Number of Products to Display.

Per impostazione predefinita, nell’elenco vengono visualizzati cinque prodotti.

Completare le impostazioni rimanenti in base alle esigenze.

Se necessario, utilizzare le descrizioni dei campi alla fine della pagina Aggiungi contenuto - Prodotti come riferimento.

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 ( {width="20"} ).

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 Catalog > Products.

Trova un prodotto semplice da utilizzare per questo esempio e aprilo in modalità di modifica.

Scorri verso il basso ed espandi il nella sezione Content.

Accanto a Description, fare clic su Edit with Page Builder.

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

Se la descrizione del prodotto è stata immessa in precedenza senza Page Builder, la descrizione corrente verrà visualizzata come HTML in un contenitore Codice HTML. Con il tema Luma, la descrizione del prodotto viene visualizzata nella scheda Dettaglio.

Nel pannello Page Builder sotto Layout, trascina un Row ​nell'area di visualizzazione, posizionandolo sotto il contenitore di codice HTML.

Cercate la linea guida rossa da visualizzare quando la riga si trova nella posizione corretta.

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

Nel pannello Page Builder, espandi Media e trascina un segnaposto Video nella nuova riga.

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

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

{width="500" modal="regular"}

Immettere Video URL.

Il video può essere ospitato su YouTube o Vimeo. Il video di questo esempio è disponibile su YouTube al seguente URL:

https://www.youtube.com/watch?v=ZpFrNyD4100

{width="500" modal="regular"}

Immetti Maximum Width in pixel per la visualizzazione del video.

Se si lascia vuota questa opzione, il video riempie lo spazio disponibile.

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 ( {width="20"} ).

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 Catalog > Products.

Nell'angolo superiore destro fare clic su Add Product.

Crea il prodotto con le seguenti proprietà:

• ​

  Attributo Set: Default

• Product Name: Il mio prodotto

• ​

  SKU: Tutorial

• ​

  Price: 75.00

• ​

  Quantity: 100

• Stock Status: In magazzino

• ​

  Weight: 1

• Categories: Donne > Superiori > Tees

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

Nella barra laterale Admin, passa a Stores > Attributes>Product.

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

Immettere Default Label per l'attributo.

Per questo esempio, utilizzare My Page Builder Attribute per l'etichetta.

Imposta Catalog Input Type for Store Owner su Page Builder.

Durante la creazione di un attributo personalizzato, è possibile specificare l'editor più adatto all'applicazione come Page Builder o come standard, WYSIWYG Text Editor.

Tipo di input {width="600" modal="regular"}

Espandere nella sezione Advanced Attribute Properties e configurare le impostazioni seguenti:

• Attribute Code: immettere un codice attributo in caratteri minuscoli, utilizzando i trattini invece degli spazi. Per questo esempio, utilizzare my_page_builder_attribute.

• Scope: accettare il valore predefinito, Store View.

• Default Value: immettere un valore predefinito per l'attributo.

• ​

  Unique Value: No

• ​

  Add to Column Options: No

• ​

  Use in Filter Options: Yes

Nel pannello Attribute Information ​a sinistra, scegli Storefront Properties ​e apporta le seguenti impostazioni:

• ​

  Use for Promo Rule Conditions: Yes

• ​

  Visible on Catalog Pages on Storefront: Yes

• ​

  Used in Product Listing: Yes

Al termine, fare clic su Save Attribute.

Ripeti i passaggi precedenti per creare un secondo attributo con le stesse proprietà di base, ma con il tipo di input Editor di testo come segue:

• Default Label: attributo Editor di testo personale

• Catalog Input Type for Store Owner: Editor di testo

• ​

  Attributo Code: my_text_editor_attribute

Nella barra laterale Admin, passa a Stores > Attributes>Attribute Set.

In questo esempio i nuovi attributi vengono aggiunti temporaneamente al set di attributi default. Al termine di questo esercizio, rimuovi gli attributi dal set di attributi, in modo da non influire sul catalogo.

Trovare l'attributo Default ​impostato nell'elenco e fare doppio clic per aprirlo in modalità di modifica.

Nell'elenco Attributi non assegnati, individuare i nuovi attributi creati e trascinarli nella colonna Groups, in Content.

La posizione dell'attributo nella colonna Groups determina la posizione in cui viene visualizzato nella pagina.

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

Fare clic su Save per tornare all'elenco Set di attributi.

Quando richiesto, fare clic sul collegamento Cache Management nella parte superiore della pagina e aggiornare eventuali cache non valide.

Nella barra laterale Admin, passa a Catalog > Products.

Nella griglia Prodotti, individua Il mio prodotto e aprilo in modalità di modifica.

Scorri verso il basso ed espandi il nella sezione Content.

Nella parte superiore della sezione sono disponibili due attributi standard per il contenuto del prodotto:

• Descrizione breve, che utilizza l'editor WYSIWYG standard.
• Descrizione, che visualizza l'anteprima di Page Builder.

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

Mentre scorri verso la metà inferiore della sezione, sono presenti i due attributi creati e assegnati:

• Il mio attributo Page Builder, che visualizza l'anteprima di Page Builder.
• Attributo My Text Editor, che utilizza l'editor WYSIWYG standard.

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

Nell'editor Attributo editor testo immettere Text Editor Attribute placeholder text.

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

Per Attributo My Page Builder, fare clic su Edit with Page Builder e aggiungere il testo della descrizione:

• Nel pannello Page Builder, espandi Elements e trascina un Text object nell'area di visualizzazione.

• Immettere Page Builder attribute placeholder text.

• Nell'angolo superiore destro dell'area di visualizzazione fare clic sull'icona Chiudi schermo intero ( {width="20"} ).

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

Scorrere fino a Description, fare clic su Edit with Page Builder e aggiungere il testo desiderato utilizzando lo stesso metodo del passaggio precedente.

Nell'angolo superiore destro della pagina del prodotto fare clic sulla freccia Save e scegliere Save & Close.

Se richiesto, fare clic sul collegamento Cache Management nel messaggio nella parte superiore della pagina e aggiornare eventuali cache non valide.

Vai alla pagina del prodotto di esempio nella vetrina.

In questo esempio, il prodotto si trova nella navigazione superiore in Donne > Cime > Tees.

Scorri verso il basso fino alle informazioni dell'Attributo My Page Builder.

La posizione degli attributi sulla pagina del prodotto è determinata dal tema. Nel tema Luma, i nuovi attributi si trovano subito dopo la descrizione del prodotto.

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