Liquid, il linguaggio di programmazione che usa Shopify per i template

Se sei nuovo nella piattaforma Shopify e leggi i nostri contenuti, potresti chiederti a cosa si riferiscono effettivamente tutti i riferimenti a Liquid che faccio.

In questo articolo, cercherò di spiegarti tutto ciò che è necessario sapere su Liquid, su come si adatta alla costruzione del tema Shopify e sui concetti chiave che ti consentiranno di iniziare a creare template e-commerce potenti e coinvolgenti.

Iniziamo con un po' di storia.

Liquid è stato sviluppato dal co-fondatore e CEO di Shopify Tobias Lütke ed è ora disponibile come progetto open source su GitHub. Oggi è utilizzato in molti progetti software diversi, che vanno dai sistemi di gestione dei contenuti ai generatori di file flat e, naturalmente, a Shopify.

Liquid: lingua o motore?

Alcuni si riferiscono a Liquid come ad un linguaggio per template, mentre altri potrebbero chiamarlo motore di template. Non importa quale etichetta gli si dà - in entrambi i modi va bene.

Personalmente, mi piace definirlo un linguaggio template. Ha una sintassi (come i linguaggi di programmazione tradizionali), ha dei concetti come gli output, la logica e i loop e interagisce con le variabili (dati), proprio come faresti con un linguaggio web-centrico come PHP. Anche HubSpot usa lo stesso linguaggio per la creazione dei moduli.

Tuttavia, è proprio qui che finiscono le somiglianze. C'è molto che non puoi fare con Liquid. Ad esempio, non ha alcun concetto di "stato", non ti permette di entrare in profondità dentro la piattaforma, e può a volte sembrare contro-intuitivo per i programmatori esperti. Tuttavia, è stato pensato molto bene e ciò che a prima vista potrebbe sembrare una limitazione, di solito è inteso e per una buona ragione.

La funzione di Liquid

Liquid, come qualsiasi linguaggio template, crea un ponte tra un file HTML e un data store - nel nostro contesto, i dati sono ovviamente quelli di un negozio Shopify. Lo fa permettendoci di accedere a variabili all'interno di un modello con una sintassi semplice da usare e leggibile.

In Shopify, ogni modello ci consente di accedere a determinate variabili senza dover effettuare alcun sollevamento. Ad esempio, il {% raw %}product.liquid {% endraw %}template ci consente di accedere a tutti i dettagli relativi al prodotto attualmente visualizzato. Liquid, a sua volta, ci consente di produrre questi dati senza dover sapere nulla del prodotto stesso. Queste variabili sono note come template variables.

È inoltre possibile utilizzare Liquid per recuperare i dati non resi disponibili. Ad esempio, puoi chiedere a Shopify di compilare una variabile creata con tutti i prodotti di una particolare collezione.

Una volta che conosciamo i nomi delle variabili a cui abbiamo accesso o che creiamo, possiamo usare costrutti liquid come "output" e "loop" per visualizzare i dati nei nostri modelli.

La piattaforma Shopify sa quali dati recuperare e come visualizzarli in base al codice liquid presente nel modello. Potresti voler semplicemente visualizzare il nome di un prodotto o qualcosa di leggermente più complesso, come una gallery di immagini di un singolo prodotto o di una collection.

Il grande vantaggio di un linguaggio modello come Liquid è che tu, come designer, non hai bisogno di sapere nulla dei dati stessi. Pertanto, i modelli sono agnostici al 100% e possono essere applicati a più negozi senza alcuna conoscenza del contenuto del negozio.

Estensione e delimitatori di file di Liquid

I file liquidi hanno l'estensione di {% raw %}.liquid{% endraw %}. Un file .liquid è un mix di codice HTML standard e costrutti liquid. È una sintassi di facile lettura ed è facile da distinguere dall'HTML quando si lavora con un file di modello. Ciò è reso ancora più semplice grazie all'uso di due set di delimitatori.

{% raw %}{% if cart.item_count > 0 %}{% endraw %} {% raw %}<p>You have {{ cart.item_count }} item(s) in your cart</p>{% endraw %} {% raw %}{% else %}{% endraw %} {% raw %}<p>There's nothing in your cart :( Why not have a <a href= "/products">look at our product range</a></p>{% endraw %} {% raw %}{% endif %}{% endraw %}

I due delimitatori di parentesi graffa doppia {% raw %}{{ }}{% endraw %}indicano l'output, mentre i delimitatori di percentuale della parentesi graffa {% raw %}{%%}{% endraw %}indicano la logica. Diventerete molto familiari con questi: ogni costrutto Liquid inizia con uno o l'altro.

Un altro modo di pensare ai delimitatori è come "segnaposto". Un segnaposto può essere visto come un pezzo di codice che alla fine verrà sostituito dai dati quando il modello compilato viene inviato al browser. Questi dati sono determinati interamente dal progettista del tema come risultato del codice Liquid nel modello. In quanto tali, i modelli Liquid, proprio come i modelli che intersecano PHP e HTML, servono come rappresentazione di ciò che verrà reso.

La sintassi del codice Liquid

Il codice Liquid utilizza 3 pezzi principali: oggetti, tag e filtri.

Oggetti

Gli oggetti vengono esportati pezzi di dati dall'amministratore di Shopify. Gli oggetti sono avvolti nelle parentesi graffe in questo modo:

{% raw %}{{ product.title }}{% endraw %}

L'output di questo nella pagina del tuo sito verrà quindi sostituito con un articolo dal tuo negozio.

Tag

I tag liquid vengono utilizzati per le istruzioni logiche e controllano il flusso di un modello. Questo è dove i {% raw %}% {% endraw %}segni entrano in gioco, circondando il testo in questo modo:

{% raw %}{% if product.available %} <h4> Ciao! </h4> {% endif %}{% endraw %}

Ciò significa che la logica non verrà mostrata sulla pagina, a meno che il prodotto non sia disponibile. Nell'esempio, se il prodotto è disponibile, verrà visualizzato l'h4 nella pagina. Se si imposta un'altra condizione utilizzando quindi se l'elemento è, ad esempio esaurito, verrà visualizzato un messaggio esaurito al posto del prezzo.

{% raw %}{%{% endraw %} if {% raw %}product.available %}{% endraw %}

<h4> Ciao! </h4>

{% raw %}{% else %}{% endraw %}

<h4> Oh, mi dispiace </h4>

{% endif %}

Filtri

I filtri sono usati per modificare l'output di numeri, stringhe, oggetti e variabili. Un esempio di per i colori, per esempio:

{% raw %}{{ '#7abb55c' | colour_lighten: 30 }}{% endraw %}.

Questo metterebbe l'output come {% raw %}#d0e5c5{% endraw %}, che è il 30% più leggero di {% raw %}#7abb55c{% endraw %}.

Alcune informazioni utili

Ci vuole tempo per capire e abituarsi a Liquid. Poiché è un codice molto leggibile, è spesso più semplice da esaminare e capire ciò che farà. Per ulteriori informazioni è possibile leggere ulteriori informazioni sulle funzionalità nella pagina della guida di Shopify o tramite questa pagina di riferimento che spiega allo stesso modo tag, filtri, oggetti e anche le nozioni di base del codice Liquid.

Perché dovrei capire Liquid

Capire Liquid ti aiuterà come proprietario del negozio e ti aiuterà a capire cosa sta facendo il tuo tema. Anche se non sei uno sviluppatore o un programmatore / ingegnere, potresti essere in grado di sistemare alcune cose da te o capire da dove provengono i problemi. Questo potrebbe farti risparmiare tempo e denaro, sapendo già dove far intervenire i developer per risolvere il problema!