giovanni cecchini

1. Cosa sono i color swatches?
2. Novità su Shopify in Liquid
3. COME USARE I COLOR SWATCHES SUL TEMA DAWN

Cosa sono i color swatches?

Le palette di colori, o “swatches,” sono rappresentazioni visive delle varianti di prodotto o delle opzioni, e offrono diversi vantaggi:

1. Semplificazione della selezione delle varianti: Le palette semplificano il processo di selezione delle varianti, consentendo ai clienti di confrontare facilmente le opzioni e scegliere quella desiderata.
2. Feedback visivo istantaneo: Quando un cliente seleziona una palette, l’immagine principale del prodotto cambia immediatamente, fornendo un feedback visivo istantaneo.
3. Miglioramento dell’aspetto visivo della pagina: Aggiungendo un componente di colore interattivo, le palette migliorano l’aspetto visivo della pagina.
4. Riduzione del carico cognitivo: Presentare le opzioni visualmente riduce la fatica decisionale e il carico cognitivo.
5. Layout più efficiente: Rispetto al testo, le palette sono un modo efficiente per presentare più opzioni nello spazio disponibile.
6. Precisione nella rappresentazione dei colori e dei pattern: Le palette garantiscono che l’aspetto del prodotto sul sito web sia coerente con l’estetica del marchio.

In passato, gli sviluppatori di temi dovevano utilizzare metodi poco affidabili per visualizzare le palette di colori, come l’inserimento di immagini dai file aggiunti all’amministrazione, l’utilizzo di colori HTML o complesse espressioni regolari per recuperare e visualizzare le informazioni sui colori.

Novità su Shopify in Liquid

Ora, grazie alla disponibilità delle palette nell’amministrazione e in Liquid, gli sviluppatori possono facilmente accedere alle informazioni sulle palette e renderle nei selettori di varianti, ottenendo una soluzione più robusta. Possono anche personalizzare l’aspetto delle palette tramite l’editor di temi.

Per un esempio di come ciò potrebbe apparire, puoi consultare questa pagina prodotto, che utilizza il tema Dawn con le palette abilitate.

Inoltre, la funzionalità delle palette introduce nuovi elementi in Liquid. L’oggetto Liquid “swatch” restituisce dati di colore e immagine basati sulle informazioni di una variante. Ecco gli attributi attuali dell’oggetto “swatch”:

• swatch.color restituisce il codice esadecimale del valore della palette di una variante.
• swatch.color.rgb converte il codice esadecimale del colore in una stringa RGB.
• swatch.image restituisce il percorso di un’immagine.

Inoltre, la proprietà product_option.values può ora restituire l’oggetto “swatch” come possibile valore. Questo è utile quando si configurano i selettori di varianti per accettare e memorizzare informazioni relative alle palette.

Per implementare le palette nei temi, segui questi passaggi:

1. Crea impostazioni di sezione per personalizzare le palette: Nel tuo schema di impostazioni del prodotto, crea diverse opzioni che i commercianti possono personalizzare per modificare l’aspetto del selettore di varianti quando sono presenti varianti con palette. A seconda delle opzioni che vuoi offrire, puoi consentire l’uso di diverse forme di palette o modalità di selezione (ad esempio, elencate in un menu a discesa).
2. Aggiorna il selettore di varianti del prodotto: Configura una nuova logica per gestire le opzioni di prodotto, in modo che il selettore di varianti possa verificare e scorrere i valori delle palette. Il selettore di varianti del tema dovrà anche renderizzare condizionalmente diversi tipi di selettori di palette in base alle impostazioni di sezione disponibili e scorrere ciascuna palette individuale.
3. Crea un componente per le palette: Per visualizzare le rappresentazioni visive delle varianti di prodotto, il tuo tema dovrebbe avere un componente per le palette che renderizzi ciascuna palette con cui i clienti interagiranno come elemento di input. Questo componente genererà colori e URL delle immagini per ciascuna palette in base ai dati passati dal selettore di varianti.
4. Aggiusta il Javascript per Gestire l’Aggiornamento Dinamico delle Pagine: Per garantire che il selettore di varianti mostri informazioni corrette durante le interazioni dei clienti, dovrai aggiornare il tuo Javascript del tema. Considera di aggiungere una nuova funzione che gestisca i cambiamenti delle varianti. Questa funzione può aggiornare la visualizzazione visiva delle palette per riflettere i valori attualmente selezionati. Inoltre, se una palette è esaurita, puoi segnarla come non disponibile. Gestire correttamente gli aggiornamenti dinamici assicura un’esperienza senza intoppi per i tuoi clienti.
5. Aggiungi Nuovi Stili CSS e Traduzioni: Una volta che la funzionalità funziona come previsto e hai testato a fondo tutti gli scenari possibili delle varianti, è il momento di migliorare l’estetica. Crea stili CSS che si adattino al design complessivo del tuo tema. Inoltre, aggiungi traduzioni per eventuali impostazioni nei file di localizzazione del tema. Se hai implementato opzioni di personalizzazione più complesse, considera di scrivere una documentazione a cui i commercianti possono fare riferimento dall’editor del tema.

Ecco gli ulteriori dettagli sulla gestione delle palette di colori nel tema Dawn:

COME USARE I COLOR SWATCHES SUL TEMA DAWN

Dawn V13 è stato lanciato durante l’edizione invernale del Shopify ’24 e include il supporto per le palette di colori. Ciò significa che gli sviluppatori possono utilizzarlo come modello per implementare le palette nei propri temi. Vediamo più da vicino i diversi componenti utilizzati per visualizzare le palette su Dawn, basandoci sui passaggi che abbiamo già descritto:

1. Impostazioni di Sezione: Nel file main-product.liquid di Dawn, le impostazioni di schema della sezione contengono le opzioni per le palette. I commercianti possono scegliere tra stili diversi che verranno mostrati ai clienti. Le opzioni disponibili includono solo le palette, menu a discesa con palette e opzioni senza palette. Inoltre, i commercianti possono regolare la forma delle palette. In Dawn, le opzioni sono cerchio o quadrato, ma nel tuo tema potresti implementarle in modo diverso.
2. Selettore di Varianti e Opzioni: Lo snippet product-variant-picker definisce la struttura e la logica per visualizzare diversi tipi di metodi di selezione delle varianti (palette, pulsanti, menu a discesa). Il codice verifica se il valore della variante corrente ha una palette associata e, in base alla disponibilità delle palette e alle impostazioni selezionate, crea un gruppo di campi per ciascuna opzione di prodotto. All’interno del gruppo di campi, viene reso lo snippet product-variant-options, che gestisce i dettagli di ciascuna opzione all’interno del tipo di selettore scelto. Questo snippet contiene la logica per visualizzare le opzioni di variante come palette, pulsanti o menu a discesa, in base alla disponibilità e al tipo della variante di prodotto. Questo snippet verifica se un’immagine di palette è associata al valore dell’opzione di variante corrente e, in tal caso, genera un URL dell’immagine. In caso contrario, verifica se un colore specifico è associato all’opzione e può generare una stringa RGB per il colore.
3. Rendering delle Palette: Il componente delle palette in Dawn è suddiviso in due elementi: il selettore di input con cui il cliente interagirà e la rappresentazione visiva effettiva dell’opzione di prodotto, che può essere un colore o un’immagine. Puoi vedere questi elementi negli snippet swatch-input.liquid e swatch.liquid, rispettivamente. Lo snippet swatch-input.liquid contiene un input radio button che può accettare parametri basati sullo snippet genitore, oltre a un’etichetta associata al pulsante radio. L’etichetta avrà nomi di classe diversi a seconda della forma selezionata dal commerciante nell’editor del tema. Aggiungendo la proprietà title="{{ value }}", si fornisce un suggerimento con il valore della palette quando si passa sopra con il mouse. Infine, lo snippet swatch.liquid renderizza la stessa palette visiva. Se la palette è un’immagine, verrà generato un URL, altrimenti, se è un colore, verrà generata una stringa RGB per quel colore. L’immagine o il colore verrà visualizzato all’interno di un elemento span e riceverà classi basate sulle impostazioni selezionate.
4. Javascript Espanso: Il file global.js di Dawn contiene la logica che aggiorna dinamicamente la pagina del prodotto quando vengono selezionate diverse varianti. Questo è stato ampliato per gestire anche le palette. Il tema ha una nuova funzione updateSelectedSwatchValue({ target }) che aggiorna la visualizzazione visiva della palette selezionata quando viene selezionata una diversa palette. A seconda del tipo di selettore di palette abilitato, la funzione utilizza diverse condizioni per aggiornare l’HTML interno dell’elemento di visualizzazione della palette selezionata, riflettendo il nuovo valore, o aggiorna lo stile di sfondo della palette per riflettere la variante selezionata.