Modifica del Personal Shopper

Introduzione

Figura 1: Editor del Personal Shopper

Facendo clic su "Crea" o "Modifica" su uno dei tuoi Personal Shopper, visualizzerai 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 dello shopper per una facile navigazione
• Area di anteprima — Visualizzazione dello stato attuale dello shopper
• Barra laterale delle impostazioni — Contiene tutte le impostazioni e le opzioni di personalizzazione per lo shopper

Barra di Navigazione Superiore

Figura 2: Barra di Navigazione Superiore

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

1. Il pulsante Indietro chiude l'editor.
2. Il badge di stato indica se la versione del Personal Shopper che stai modificando è nello stato "Published" (Pubblicato) o "Draft" (Bozza).
3. Il toggle di anteprima commuta tra la modalità "preview" (anteprima) e "selection" (selezione). In modalità anteprima potrai interagire con il Personal Shopper come faresti sul tuo sito. In modalità selezione, cliccando sul Personal Shopper, selezionerai i componenti.
4. Il toggle del breakpoint cambia l'area di anteprima tra tre diverse dimensioni: desktop, mobile e schermo intero.
5. Pulsanti Annulla e Ripeti
6. Azioni primarie dell'editor. "Preview" (Anteprima) avvia la funzionalità Live Preview (Anteprima dal vivo). "Publish" (Pubblica) salverà e pubblicherà la versione corrente del Personal Shopper sul tuo sito. "Save" (Salva) salverà la versione corrente del Personal Shopper ma non aggiornerà la versione live sul tuo sito.

Anteprima dal Vivo

Cliccando il pulsante "Preview" (Anteprima) nella barra di navigazione superiore, accederai alla funzionalità "Live Preview" (Anteprima dal vivo) dell'editor del Personal Shopper.

Figura 3: Anteprima dal Vivo

La funzionalità Live Preview (Anteprima dal vivo) ti permette di visualizzare la versione del Personal Shopper che stai modificando direttamente sul tuo sito senza doverla pubblicare. Per utilizzare questa funzionalità, la versione di lavoro del Personal Shopper deve essere salvata.

Per utilizzare Live Preview (Anteprima dal vivo) dovrai inserire un URL e un Embed Selector (Selettore di incorporamento). L'URL deve trovarsi su un dominio in cui è in esecuzione lo script di Fanplayr Targeting. Per impostazione predefinita, l'URL sarà lo stesso di "Embed URL" (URL di incorporamento) definito nelle General Settings (Impostazioni generali).

Dovrai anche aggiungere un Embed Selector (Selettore di incorporamento) che viene utilizzato per mirare un elemento sulla pagina in cui aggiungere il Personal Shopper. Il sistema genererà e visualizzerà un URL; clicca e visualizza l'anteprima del Personal Shopper.

L'anteprima del Personal Shopper ti offre la possibilità di vedere come apparirebbe lo shopper sul tuo sito prima di renderlo disponibile a tutti i tuoi utenti. Ciò ti permette di perfezionare l'aspetto e la sensazione del Personal Shopper 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 ciascuna sezione e trascinarla su o giù per spostarla all'interno dello shopper.

Nella parte superiore della barra laterale è presente un link a "General Settings" (Impostazioni generali). Cliccandovi, potrai modificare alcune configurazioni generiche per lo shopper. Per maggiori informazioni, consulta Barra Laterale delle Impostazioni .

Aggiunta di una Sezione

Clicca il pulsante "Add Section" (Aggiungi Sezione) nella barra laterale per selezionare un nuovo componente da aggiungere al tuo shopper.

Figura 5: Popup Aggiungi Sezione

Seleziona un componente in questo elenco e clicca "Add" (Aggiungi) per aggiungere una nuova sezione alla fine del tuo Personal Shopper.

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 Personal Shopper. Cliccando sull'indicatore, verranno visualizzate maggiori informazioni su eventuali problemi e su come risolverli.

Area di Anteprima

Figura 6: Area di Anteprima Shopper

La parte principale dell'editor del Personal Shopper è l'area di anteprima. Si tratta di una visualizzazione reattiva del tuo Personal Shopper che ti dà un'indicazione di come apparirà sul tuo sito. Per impostazione predefinita, l'anteprima è in modalità "selection" (selezione) (vedi Barra di Navigazione), il che significa che puoi evidenziare e selezionare singole sezioni per visualizzarne e modificarne le impostazioni.

Barra Laterale delle Impostazioni

La barra laterale delle impostazioni si trova sul lato destro dell'editor ed è il luogo in cui viene effettuata la maggior parte della personalizzazione del Personal Shopper. Nella barra laterale sono presenti due gruppi di impostazioni modificabili: "General Settings" (Impostazioni generali) e "Component Settings" (Impostazioni dei componenti).

Impostazioni Generali

Se "General Settings" (Impostazioni generali) è selezionato nella barra laterale sinistra, la barra laterale delle impostazioni sarà composta dalla configurazione generale del Personal Shopper.

Figura 7: Impostazioni Generali

Il gruppo di impostazioni principale in "General Settings" (Impostazioni generali) è "Widget Level Config" (Configurazione a livello di widget). Queste impostazioni informano il sistema dove visualizzare il personal shopper. Ci sono due impostazioni che controllano questo aspetto:

• Embed URL (URL di incorporamento) — Questo è l'URL sul tuo dominio in cui il sistema cercherà di visualizzare il personal shopper una volta pubblicato. Questa stringa può includere caratteri jolly (*) in modo che lo shopper possa essere utilizzato su più di un URL.
• Embed Selector (Selettore di incorporamento) — Questo è il selettore di elementi CSS che verrà utilizzato per trovare l'elemento a cui lo shopper verrà aggiunto.

Le restanti impostazioni generali consistono in vari stili a livello di shopper, inclusi la dimensione e il colore del carattere di base, le dimensioni dei caratteri dei titoli e il colore di sfondo generale. Inoltre, c'è un'impostazione chiamata "Global CSS" (CSS globale) che consente agli utenti avanzati con conoscenze di CSS di scrivere CSS che verrà applicato all'intero shopper.

Impostazioni dei Componenti

Figura 8: Impostazioni dei Componenti

Se viene 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 del prodotto.

Ogni componente avrà il proprio set unico di impostazioni per personalizzare l'aspetto e la sensazione del componente. Ogni impostazione si applicherà solo a quella sezione specifica. Ad esempio, se imposti l'impostazione "Default Text Align" (Allineamento testo predefinito) per un componente di raccomandazione del prodotto, non influirà sulla stessa impostazione su altri componenti di raccomandazione del prodotto.

Come per le "General Settings" (Impostazioni generali), ogni componente avrà un'impostazione "Custom CSS" (CSS personalizzato) di cui gli utenti avanzati potranno avvalersi per personalizzare ulteriormente i loro componenti.

Origine Prodotto

L'impostazione più cruciale per qualsiasi componente di raccomandazione del prodotto è "Product Source" (Origine prodotto). Il valore di questa impostazione informa il sistema quali prodotti mostrare nel componente. Cliccando "Change" (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 generalmente si riducono alle seguenti quattro impostazioni:

• Model (Modello) — Controlla l'algoritmo utilizzato per generare l'elenco dei prodotti
• Product List (Elenco prodotti) — Questo è l'elenco di prodotti da cui l'algoritmo selezionato può attingere i suoi prodotti. Questo può essere utilizzato per limitare i prodotti raccomandati, ad esempio, solo ai prodotti in saldo.
• Minimum Items (Articoli minimi) — Numero minimo di articoli per il rendering del componente di raccomandazione del prodotto
• Product Limit (Limite prodotti) — Numero massimo di prodotti da mostrare nel componente