Modifica del 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 di base validi per l'intero 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 del widget

INFO

L'editor di widget è un'estensione dell'editor di Personal Shopper. Se hai familiarità con l'editor di 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 validi per l'intero editor di Personal Shopper (Figura 2):

1. Il pulsante Indietro chiude l'editor.
2. Il Nome è un identificatore per il widget specifico. Clicca sul pulsante di modifica per personalizzare il nome. La modifica del nome non è definitiva fino a quando 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 la nota qui 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 a schermo intero.
6. Pulsanti Annulla e Ripeti
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 fase di esecuzione utilizza sempre la versione più recentemente pubblicata di ogni widget. Tuttavia, i widget pubblicati possono ancora essere aggiornati e il loro stato può essere modificato in "Bozza". In questo caso, il widget ora in "Bozza" è ancora utilizzato sul tuo sito utilizzando la versione precedentemente pubblicata. Disabilita un widget nell'elenco per impedirne l'utilizzo.

Anteprima dal Vivo

Cliccando sul 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 consente di visualizzare la versione del widget che stai modificando direttamente 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 in 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 il widget 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 di pubblicarlo.

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 ogni 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 c'è un link alle "Impostazioni Generali". Cliccando su questo, potrai modificare alcune configurazioni generiche per il widget. Per maggiori informazioni, vedi Barra Laterale delle Impostazioni.

Aggiunta di una Sezione

Clicca sul 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 su "Aggiungi" per aggiungere una nuova sezione alla fine del tuo widget.

Visualizzazione di 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 vista 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 regolano 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 tenterà di renderizzare il widget una volta pubblicato. Questa stringa può includere caratteri jolly (*) in modo da poter essere utilizzata su più di un 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 "l'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 varie stilizzazioni a livello di widget, inclusa la dimensione e il colore del carattere di base, le dimensioni del carattere delle intestazioni e il colore di sfondo complessivo. Inoltre, c'è un'impostazione chiamata "CSS Globale" che consente agli utenti esperti con conoscenze CSS di scrivere codice CSS che verrà applicato all'intero widget.

Impostazioni Componente

Figura 8: Impostazioni Componente

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

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

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.

Origine del Prodotto

L'impostazione più cruciale per qualsiasi componente di raccomandazione di prodotti è "Origine 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 nella Figura 9.

Figura 9: Editor Origine Prodotto

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

• Modello — Controlla l'algoritmo utilizzato per generare l'elenco dei prodotti
• Elenco Prodotti — Questo è l'elenco di prodotti da cui l'algoritmo selezionato può attingere i suoi prodotti. Questo può essere utilizzato per limitare i tuoi prodotti consigliati, ad esempio, solo ai prodotti in saldo.
• Articoli Minimi — Numero minimo di articoli per renderizzare il componente di raccomandazione di prodotti
• 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à del Prodotto

Figura 10: Componente Attività del Prodotto

Se il widget è del tipo "Attività del Prodotto" (vedi Creazione Widget), allora, invece di un componente di raccomandazioni di prodotti, hai accesso a un componente "Attività del 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 nell'origine del prodotto). Per accedere a questo valore nel tuo widget, devi utilizzare la variabile {{count}} da qualche parte nel tuo testo "Contenuto".

L'impostazione "Origine del Prodotto" per l'Attività del Prodotto definisce anche un'impostazione per "Attività Minima". Se in fase di esecuzione il valore da mostrare per il conteggio dell'attività è inferiore a questa impostazione, il widget non verrà mostrato.