Modifica Widget

Introduzione

Figura 1: Editor di Widget

Cliccando su "Crea" o "Modifica" su uno dei tuoi Widget, vedrai un editor a pagina intera (Figura 1). L'editor comprende quattro sezioni principali:

• Barra di navigazione superiore — Controlli base a livello di editor
• Barra laterale delle sezioni — Elenco di tutte le sezioni del widget per una facile navigazione
• Area di anteprima — Visualizzazione dello stato attuale del widget
• Barra laterale delle impostazioni — Contiene tutte le impostazioni e le opzioni di personalizzazione per il widget

INFO

L'editor di widget è un'estensione dell'editor di Personal Shopper. Se hai familiarità con l'editor dello shopper, ti sarà facile imparare l'editor di widget.

Barra di Navigazione Superiore

Figura 2: Navigazione Superiore

La barra di navigazione superiore contiene tutti i controlli dell'editor per l'editor di Personal Shopper (Figura 2):

1. Il pulsante Indietro chiude l'editor.
2. Il Nome è un identificatore per il widget specifico. Clicca il pulsante di modifica per personalizzare il nome. La modifica del nome non è finalizzata finché il widget non viene salvato / pubblicato.
3. Il badge di stato indica se il widget che stai modificando è nello stato "Pubblicato", "Bozza" o "Disabilitato". Vedi nota sotto.
4. L'interruttore Anteprima commuta tra la modalità "anteprima" e "selezione". In modalità anteprima potrai interagire con il widget come faresti sul tuo sito. In modalità selezione, cliccando sull'anteprima del widget selezionerai i componenti.
5. L'interruttore Breakpoint cambia l'area di anteprima tra tre diverse dimensioni: desktop, mobile e schermo intero.
6. Pulsanti Annulla e Ripristina
7. Azioni primarie dell'editor. "Anteprima" avvia la funzionalità Anteprima dal vivo. "Pubblica" salverà e pubblicherà la versione corrente del widget sul tuo sito. "Salva" salverà la versione corrente del widget ma non aggiornerà la versione live sul tuo sito.

INFO

Importante: Il sistema in runtime utilizza sempre la versione più recente pubblicata di ogni widget. Tuttavia, i widget pubblicati possono comunque essere aggiornati e il loro stato può essere cambiato in "Bozza". In questo caso, il widget ora "Bozza" è ancora utilizzato sul tuo sito usando la versione precedentemente pubblicata. Disabilita un widget nell'elenco per impedirne l'utilizzo.

Anteprima dal vivo

Cliccando il pulsante "Anteprima" nella barra di navigazione superiore, accederai alla funzione "Anteprima dal vivo" dell'editor di widget.

Figura 3: Anteprima dal vivo

L'Anteprima dal vivo ti permette di visualizzare la versione del widget che stai modificando dal vivo sul tuo sito senza doverla Pubblicare. Per utilizzare questa funzione, la versione di lavoro del widget deve essere salvata.

Se il tuo widget è contrassegnato come incorporato, ti verrà richiesto di specificare un selettore di incorporamento in questo popup. Altrimenti, tutto ciò che dovrai fornire è un URL per testare il widget. L'URL deve essere su un dominio su cui è in esecuzione lo script di Fanplayr Targeting. Questo URL non deve necessariamente corrispondere all'URL definito nella configurazione del widget. In altre parole, se lo desideri, puoi visualizzare in anteprima il widget su un URL diverso da quello in cui apparirà in definitiva.

L'anteprima del widget ti dà la possibilità di vedere come apparirebbe sul tuo sito prima di renderlo disponibile a tutti i tuoi utenti. Ciò ti consente di perfezionare l'aspetto del widget prima della Pubblicazione.

Barra Laterale delle Sezioni

Figura 4: Barra Laterale delle Sezioni

Sul lato sinistro dell'editor si trova la Barra Laterale delle Sezioni. Questa fornisce una facile navigazione tra le sezioni dell'editor. Clicca su ciascuna sezione per scorrere automaticamente l'area di anteprima alla sezione specifica e modificare le impostazioni del componente. Puoi cliccare sul lato sinistro di ogni sezione e trascinarla su o giù per spostarla all'interno del widget.

Nella parte superiore della barra laterale è presente un link a "Impostazioni Generali". Cliccando su questo, potrai modificare alcune configurazioni generiche per il widget. Vedi Barra laterale delle impostazioni per maggiori informazioni.

Aggiungere una Sezione

Clicca il pulsante "Aggiungi Sezione" nella barra laterale per selezionare un nuovo componente da aggiungere al tuo widget.

Figura 5: Popup Aggiungi Sezione

Seleziona un componente in questo elenco e clicca "Aggiungi" per aggiungere una nuova sezione alla fine del tuo widget.

Visualizzazione Errori / Problemi

Nella parte inferiore della Barra Laterale delle Sezioni è presente un indicatore che mostra quanti problemi, che potrebbero impedire la pubblicazione, sono presenti nel tuo widget. Cliccando sull'indicatore verranno mostrate maggiori informazioni su eventuali problemi e su come risolverli.

Area di Anteprima

Figura 6: Area di Anteprima

La parte principale dell'editor di widget è l'area di anteprima. È una visualizzazione responsiva del tuo widget che ti dà un'indicazione di come apparirà sul tuo sito. Per impostazione predefinita, l'anteprima è in modalità "selezione" (vedi Barra di navigazione), il che significa che puoi evidenziare e selezionare singole sezioni per visualizzare e modificare le loro impostazioni.

Barra Laterale delle Impostazioni

La barra laterale delle impostazioni si trova sul lato destro dell'editor ed è dove viene effettuata la maggior parte della personalizzazione del widget. Ci sono due gruppi di impostazioni modificabili nella barra laterale: "Impostazioni Generali" e "Impostazioni Componente".

Impostazioni Generali

Se "Impostazioni Generali" è selezionato nella barra laterale sinistra, la barra laterale delle impostazioni a destra consisterà nella configurazione generale del widget.

Figura 7: Impostazioni Generali

Le impostazioni generali del widget contengono vari controlli che governano il comportamento generale del widget. Di seguito analizzeremo alcune impostazioni chiave:

• Tipo di Visualizzazione — Controlla se il widget è "incorporato" nel sito o è un "overlay".
• URL di Visualizzazione — Questo è l'URL sul tuo dominio in cui il sistema cercherà di renderizzare il widget una volta pubblicato. Questa stringa può includere caratteri jolly (*) in modo da poter essere utilizzata su più URL.
• Selettore di Incorporamento — Questo è il selettore di elementi CSS che verrà utilizzato per trovare l'elemento a cui il widget verrà aggiunto (se incorporato).
• Altezza + Larghezza — Questa è l'altezza e la larghezza massime del widget (se overlay).
• Attiva all'Intenzione di Uscita — Se abilitato, il sistema mostrerà il widget solo se l'utente segnala "intenzione di uscita" spostando il mouse verso il bordo dello schermo (se overlay).
• Attiva Dopo Ritardo — Se impostato, il widget verrà mostrato solo dopo un ritardo corrispondente al valore definito in secondi (se overlay).

Le restanti impostazioni generali consistono in vari stili applicabili a tutto il widget, inclusa la dimensione e il colore del font di base, le dimensioni dei font delle intestazioni e il colore di sfondo complessivo. Inoltre, c'è un'impostazione chiamata "CSS Globale" che consente agli utenti esperti con conoscenza del CSS di scrivere CSS che verrà applicato all'intero widget.

Impostazioni Componente

Figura 8: Impostazioni Componente

Se un componente specifico è selezionato, la barra laterale destra sarà composta da tutte le impostazioni per il componente selezionato. Ad esempio, nella Figura 8, è selezionato un componente di raccomandazione del prodotto.

Ogni componente avrà il proprio set unico di impostazioni per personalizzare l'aspetto del componente. Ogni impostazione si applicherà solo a quella sezione specifica. Ad esempio, se imposti l'impostazione "Allineamento Testo Predefinito" per un componente di raccomandazione di prodotto, non avrà alcun impatto sulla stessa impostazione su altri componenti di raccomandazione di prodotto.

Come per le "Impostazioni Generali", ogni componente avrà un'impostazione "CSS Personalizzato" di cui gli utenti esperti possono avvalersi per personalizzare ulteriormente i loro componenti.

Sorgente del Prodotto

L'impostazione più cruciale per qualsiasi componente di raccomandazione di prodotto è la "Sorgente del Prodotto". Il valore di questa impostazione informa il sistema quali prodotti mostrare nel componente. Cliccando su "Cambia" nell'editor delle impostazioni, si aprirà il popup della Figura 9.

Figura 9: Editor Sorgente del Prodotto

Le impostazioni specifiche qui possono dipendere dal modello selezionato, ma generalmente si riducono alle seguenti quattro impostazioni:

• Modello — Controlla l'algoritmo utilizzato per generare l'elenco dei prodotti
• Lista Prodotti — Questo è l'elenco di prodotti da cui l'algoritmo selezionato può reperire i suoi prodotti. Può essere usato per limitare i prodotti raccomandati solo ai prodotti in saldo, ad esempio.
• Articoli Minimi — Numero minimo di articoli per renderizzare il componente di raccomandazione del prodotto
• Limite Prodotti — Numero massimo di prodotti da mostrare nel componente

INFO

Se utilizzi i modelli "Potrebbe Piacerti Anche", "Spesso Acquistati Insieme" o qualsiasi modello di "Attività Prodotto", il widget verrà mostrato solo su una pagina prodotto poiché questi modelli si basano sul prodotto attualmente visualizzato.

Attività Prodotto

Figura 10: Componente Attività Prodotto

Se il widget è di tipo "Attività Prodotto" (vedi Creazione Widget), allora invece di un componente di raccomandazione di prodotti hai accesso a un componente di "Attività Prodotto". Le impostazioni per questo componente possono essere viste nella Figura 10.

L'elemento chiave di queste impostazioni riguarda la variabile {{count}} utilizzata nell'impostazione del testo "Contenuto". L'attività del prodotto fornisce un valore in tempo reale per il numero di volte in cui il prodotto corrente è stato visualizzato / aggiunto al carrello / acquistato di recente (come definito nella sorgente del prodotto). Per accedere a questo valore nel tuo widget, devi utilizzare la variabile {{count}} da qualche parte nel tuo testo "Contenuto".