Introduzione a Liquid: Guida Completa al Linguaggio di Template per Shopify

Codegrind Team•Sep 05 2024

Liquid è il linguaggio di template utilizzato da Shopify per creare temi e personalizzare l’aspetto e il comportamento del tuo negozio online. È un linguaggio semplice ma potente che consente di integrare dinamicamente contenuti nei temi Shopify, permettendo di mostrare prodotti, collezioni, prezzi e altri dati specifici in modo flessibile.

In questa guida esploreremo i concetti di base di Liquid, dalle sue strutture principali come variabili, cicli e condizionali, fino a come utilizzarlo per personalizzare i tuoi temi su Shopify.

Cos’è Liquid?

Liquid è un linguaggio di template lato server sviluppato da Shopify. È utilizzato per caricare dinamicamente i dati nei temi Shopify e permette di creare pagine web flessibili e personalizzate. Ogni tema di Shopify è costruito usando Liquid insieme a HTML, CSS e JavaScript.

Liquid funziona combinando modelli HTML statici con contenuti dinamici, come i prodotti o le informazioni sui clienti, che vengono recuperati dal database di Shopify. Quando un cliente visita il sito, il server genera una pagina HTML utilizzando Liquid per integrare i dati specifici in modo dinamico.

Struttura di Base di Liquid:

Liquid utilizza tre principali tipi di markup:

Variabili: Mostrano dati dinamici come nomi di prodotti, prezzi, ecc.
Tag: Eseguono logica o flussi di controllo (cicli, condizionali, ecc.).
Filtri: Modificano l’output delle variabili.

Sintassi di Liquid:

Liquid utilizza delimitatori per distinguere i comandi Liquid dal normale codice HTML.

Variabili: Le variabili vengono visualizzate con doppie parentesi graffe {{ }}.

Esempio:
```
{{ product.title }}
```
Tag: I tag di logica, come cicli e condizionali, sono racchiusi tra {% %}.

Esempio:
```
{% if product.available %}
  Questo prodotto è disponibile.
{% endif %}
```
Filtri: I filtri modificano le variabili e vengono applicati usando la pipe |.

Esempio:
```
{{ product.price | money }}
```

Variabili in Liquid

Le variabili in Liquid rappresentano i dati dinamici che puoi mostrare all’interno del tuo tema Shopify. Questi dati includono prodotti, collezioni, clienti e altro ancora.

Esempio di Utilizzo delle Variabili:

Prodotti: Per mostrare il titolo di un prodotto in Liquid, puoi utilizzare la variabile product.title.
```
<h1>{{ product.title }}</h1>
```
Prezzo: Puoi visualizzare il prezzo di un prodotto utilizzando product.price, applicando il filtro money per formattare il prezzo.
```
<p>Prezzo: {{ product.price | money }}</p>
```
Descrizione del Prodotto: La descrizione del prodotto può essere mostrata utilizzando la variabile product.description.
```
<div>{{ product.description }}</div>
```

Tag in Liquid

I tag di Liquid sono utilizzati per eseguire logica, come cicli, condizionali e inclusioni di file. Questi tag ti permettono di creare layout più complessi e dinamici.

Tipi di Tag:

Cicli: Il tag for viene utilizzato per iterare su collezioni di dati, come prodotti in una collezione o articoli del carrello.
```
<ul>
  {% for product in collection.products %}
    <li>{{ product.title }}</li>
  {% endfor %}
</ul>
```
Condizionali: Il tag if viene utilizzato per eseguire logica condizionale. Puoi mostrare o nascondere contenuti in base a determinate condizioni.
```
{% if product.available %}
  <p>In stock</p>
{% else %}
  <p>Esaurito</p>
{% endif %}
```

Assegnazione: Puoi usare il tag assign per creare nuove variabili all’interno di un template.

{% assign total_price = product.price | plus: 5 %}
<p>Prezzo con supplemento: {{ total_price | money }}</p>

Include: Il tag include permette di inserire file Liquid o frammenti di template all’interno di un’altra pagina o sezione.
```
{% include 'product-card' %}
```

Filtri in Liquid

I filtri vengono utilizzati per modificare o formattare l’output di una variabile in Liquid. Possono essere applicati alle variabili utilizzando la pipe |.

Esempi di Filtri Comuni:

money: Formatta i prezzi in valuta.
```
{{ product.price | money }}
```
capitalize: Converte la prima lettera di una stringa in maiuscolo.
```
{{ product.title | capitalize }}
```

date: Formatta una data.

{{ article.published_at | date: "%B %d, %Y" }}

size: Restituisce la dimensione di un array o di una stringa.
```
{% assign product_count = collection.products | size %}
```

Esempi Pratici di Utilizzo di Liquid su Shopify

1. Mostrare un Elenco di Prodotti

Se vuoi mostrare una lista di prodotti di una collezione specifica nella tua homepage, puoi usare un ciclo for per iterare attraverso i prodotti.

<h2>Prodotti in Collezione</h2>
<ul>
  {% for product in collection.products %}
    <li>
      <h3>{{ product.title }}</h3>
      <p>{{ product.price | money }}</p>
    </li>
  {% endfor %}
</ul>

2. Mostrare Solo Prodotti Disponibili

Puoi aggiungere una condizione per visualizzare solo i prodotti disponibili:

<ul>
  {% for product in collection.products %}
    {% if product.available %}
      <li>
        <h3>{{ product.title }}</h3>
        <p>{{ product.price | money }}</p>
      </li>
    {% endif %}
  {% endfor %}
</ul>

3. Personalizzare la Pagina del Carrello

Nella pagina del carrello, puoi usare Liquid per mostrare una lista di articoli e il totale dell’ordine:

<h2>Il tuo Carrello</h2>
<ul>
  {% for item in cart.items %}
    <li>{{ item.product.title }} - {{ item.quantity }} x {{ item.price | money }}</li>
  {% endfor %}
</ul>

<p>Totale: {{ cart.total_price | money }}</p>

Best Practices per l’Uso di Liquid su Shopify

Mantenere il Codice Pulito e Organizzato: Usa commenti e frammenti di template per mantenere il codice leggibile e organizzato.
```
{% comment %}
  Questo è un commento
{% endcomment %}
```
Riusare Codice con Include: Per evitare duplicazioni, usa il tag include per riutilizzare parti di template comuni, come una scheda prodotto o un layout di intestazione.
Testare le Condizioni: Assicurati di testare le condizioni e i cicli con diverse combinazioni di dati per garantire che funzionino come previsto.
Ottimizzare le Performance: Evita di utilizzare troppi cicli annidati o condizioni complesse che possono rallentare il rendering della pagina.

Conclusione

Liquid è uno strumento potente e flessibile che ti permette di personalizzare i temi di Shopify in modo dinamico e interattivo. Che tu voglia modificare l’aspetto del tuo negozio, mostrare dati specifici sui prodotti o creare pagine personalizzate, Liquid ti fornisce la logica e la flessibilità necessarie per farlo. Imparando a usare Liquid, sarai in grado di creare esperienze uniche per i tuoi clienti, migliorando il design e la funzionalità del tuo negozio Shopify.