Crea un tema Shopify con il motore Liquid

Autore: Peter Berry

Data Della Creazione: 14 Luglio 2021

Data Di Aggiornamento: 13 Maggio 2024

Video: HOW TO ADD CUSTOM LIQUID TO SHOPIFY | 2022

Contenuto

File e cartelle dei temi
Mappatura degli URL ai modelli
Liquido: le basi
Capire product.liquid
Produzione
Logica
Filtri
Qual è il prossimo?
Ulteriori risorse e ispirazione

Nelle ultime settimane ho creato il tema Shopify per Viewport Industries, la società Elliot Jay Stocks e io abbiamo formato l'anno scorso. Abbiamo scelto Shopify per diversi motivi:

Ci permette di vendere prodotti sia digitali che fisici
È completamente ospitato, il che significa che non ci sono server di cui preoccuparsi
Supporta una serie di gateway di pagamento che si integrano perfettamente con la nostra banca
È basato su temi, il che significa che possiamo facilmente riutilizzare HTML, CSS e JavaScript del nostro sito esistente

Shopify utilizza un motore di modelli chiamato Liquid per inviare i dati dal tuo negozio ai tuoi modelli. Il liquido è forse l'unico ingrediente di un tema di Shopify che non hai usato prima e può essere scoraggiante. Ma la buona notizia è che non è poi così difficile iniziare.

Se hai mai usato Smarty, ERB o Twig, quanto segue ti sarà familiare. In caso contrario, non preoccuparti: si tratta solo di imparare alcune semplici regole. Dopo aver aggiunto le competenze Liquid al tuo toolkit di sviluppo web, sarai in grado di iniziare a creare temi per i clienti in pochissimo tempo.

File e cartelle dei temi

I temi di Shopify non sono altro che una serie di file (file HTML con estensione .liquid, CSS, JS, immagini e così via) e cartelle. I temi possono apparire e funzionare come preferisci: non ci sono davvero restrizioni. Ecco la struttura di base di un tema:

risorse
config
layout
theme.liquid
frammenti
modelli
404 liquido
articolo.liquido
blog.liquid
cart.liquid
collection.liquid
index.liquid
page.liquid
prodotto.liquido
search.liquid

Con questi file puoi creare i temi più elementari. Naturalmente, probabilmente vorresti aggiungere alcuni CSS, JavaScript e alcune immagini. Dovresti metterli nella cartella delle risorse. (Vale la pena notare che al momento non sono consentite le sottocartelle nella cartella delle risorse.)

Per ulteriori informazioni su come funzionano i temi e per scoprire le cartelle di configurazione e snippet, ti consiglio di leggere Theme from Scratch e Theme Settings sul Wiki di Shopify.

In alternativa puoi iscriverti al programma Partner gratuito, creare un negozio di prova e ispezionare uno dei tanti temi gratuiti disponibili dall'area di amministrazione del tuo negozio di prova: vai all'editor dei temi situato nel menu Temi.

Mappatura degli URL ai modelli

I temi di Shopify funzionano mappando l'URL corrente a un modello specifico. Ad esempio, se stiamo visualizzando un prodotto che ha il seguente URL ...

http://www.unitedpixelworkers.com/products/indianapolis

... allora Shopify saprà usare il tuo prodotto.liquido modello. È per questo motivo che dovresti usare solo i nomi di file sopra elencati per i tuoi modelli.

Oltre a Shopify sapere quale modello visualizzare in relazione all'URL corrente, ci mette a disposizione una serie di variabili molto specifiche. Queste sono note come "variabili modello" e ci consentono di visualizzare i dati nei nostri modelli.

Ad esempio, nel nostro modello product.liquid, abbiamo accesso al file Prodotto variabile. Ciò significa che possiamo visualizzare il nome, la descrizione, il prezzo e la disponibilità del nostro prodotto nel nostro modello. Utilizzeremo la combinazione di Liquid e variabili di modello per popolare i nostri modelli con i dati relativi ai nostri prodotti.

Per un elenco completo delle variabili del modello disponibili, visita Shopify Cheat Sheet di Mark Dunkley.

Liquido: le basi

Liquid è qui per semplificare la nostra vita come designer di temi. Uno dei modi principali in cui lo fa è con l'uso dei layout. I layout sono ideali per includere elementi di pagina comuni come intestazione, navigazione principale, piè di pagina e così via.

Nella mia struttura di cartelle sopra, noterai un file chiamato theme.liquid nella cartella dei layout. Puoi pensare a theme.liquid come il nostro modello principale. Tutti gli altri nostri modelli, come product.liquid, vengono renderizzati all'interno di questo modello principale. Puoi avere più di un layout se lo desideri, ma quello predefinito dovrebbe sempre essere chiamato theme.liquid.

Non ho visto il file theme.liquid di United Pixelworkers, ma potresti immaginare che contenga il markup per le aree delineate in rosso di seguito.

Ecco come potrebbe apparire un layout di base theme.liquid:

! DOCTYPE html>
html>
testa>
{{content_for_header}}
titolo> Il titolo della pagina va qui / titolo>
/ head>
corpo>
{{content_for_layout}}
/ body>
/ html>

Noterai due frasi racchiuse tra doppie parentesi graffe: {{content_for_header}} e {{content_for_layout}}. Questi sono i nostri primi esempi di Liquid in azione.

Shopify utilizza spesso {{content_for_header}} per aggiungere file specifici alla sezione head> di un documento: ad esempio, aggiungendo il codice di monitoraggio. {{content_for_layout}} è dove verranno visualizzati i contenuti del nostro modello mappato in URL. Ad esempio, se stiamo visualizzando una pagina di prodotto, il nostro file product.liquid sostituirà {{content_for_layout}} nel nostro file di layout.

Capire product.liquid

Ora che abbiamo esaminato le basi dei layout, è il momento di esaminare un modello.I negozi sono tutti incentrati sui prodotti, quindi diamo un'occhiata prodotto.liquido.

Ecco un esempio molto semplice ma funzionale di un modello product.liquid.

h2> {{product.title}} / h2>
{{ Descrizione del prodotto }}
{% if product.available%}
form action = "/ cart / add" method = "post">
seleziona id = "product-select" name = ’id’>
{% per variante in product.variants%}
valore dell'opzione = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
{% endfor%}
/ seleziona>
input type = "submit" name = "add" value = "Aggiungi al carrello" id = "acquista" />
/ form>
{% altro %}
p> Questo prodotto non è disponibile / p>
{% finisci se %}

Ci sono una serie di concetti chiave di Liquid al lavoro qui. Vediamoli in ordine.

Produzione

La prima riga di codice contiene la frase {{product.title}}. Una volta eseguito il rendering, questo produrrà il titolo del prodotto, che come ora sai è determinato dall'URL. Nell'esempio di United Pixelworkers riportato di seguito, il titolo del prodotto è semplicemente "Indianapolis".

Liquid utilizza il formato della sintassi del punto. In questo caso, {{product.title}} corrisponde alla variabile del modello di prodotto e al suo attributo title. Possiamo produrre la descrizione del prodotto nello stesso modo utilizzando {{ Descrizione del prodotto }}.

Questo è noto in termini liquidi come produzione. Tutto l'output è indicato da doppie parentesi graffe, come segue: {{your_output}}.

Logica

Nella riga successiva del codice, noterai un'istruzione tra parentesi graffa seguita da%: in questo caso, {% if product.available%}. Questo è un altro concetto importante in Liquid noto come logica. Più in basso, noterai {% else%} e infine le dichiarazioni {% endif%}.

Questo istruzione if ci permette di dettare ciò che il nostro modello mostra, in base a una o più condizioni: in questo caso, se il nostro prodotto è disponibile o meno. In effetti questo sta dicendo, “se il nostro prodotto è disponibile, mostra le informazioni ad esso relative; in caso contrario mostrare un messaggio che informi l'utente che è esaurito ”.

Tutte le istruzioni logiche in Liquid utilizzano la notazione percentuale tra parentesi graffe, ad esempio {% if ...%}. Ricorda solo di chiudere le tue dichiarazioni in modo appropriato, o incorrerai nei guai. Per esempio:

{% if product.available%}
Mostra il pulsante Aggiungi al carrello qui
{% altro %}
Visualizza un messaggio relativo alla prossima disponibilità del prodotto
{% finisci se %}

Filtri

Liquid ci consente di manipolare la nostra produzione in diversi modi. Uno di questi è usare i filtri. Il contenuto che entra nel filtro uscirà dall'altra parte alterato in un modo specifico.

Guardando l'esempio product.liquid sopra, noterai { i soldi }. Una variante è un termine usato per descrivere una variazione di un prodotto: ad esempio, diversi colori e dimensioni. Ciò che è interessante qui è che utilizziamo un filtro per modificare il prezzo in uscita, in questo caso utilizzando il filtro denaro. Ciò comporterà l'aggiunta del simbolo della valuta del negozio nella parte anteriore del prezzo.

Altri filtri includono strip_html, che rimuoverà qualsiasi tag HTML da una determinata porzione di testo e ucase, che lo convertirà in maiuscolo.

Puoi anche unire i filtri insieme. Per esempio:

{article.content}

In questo caso, prendiamo l'attributo di contenuto della variabile del modello di articolo e lo passiamo al filtro strip_html e infine al filtro truncate. Noterai che il filtro truncate ci permette di specificare per quanto tempo vogliamo che sia l'output finale: in questo caso, 20 caratteri.

I filtri ci consentono anche di creare rapidamente elementi di script e immagini nei modelli. Ecco un modo molto rapido per utilizzare un filtro per produrre un'immagine con un tag alt associato:

{asset_url}

L'utilizzo di questo nel nostro tema Shopify comporterà il rendering del seguente elemento img nel nostro modello:

img src = "/ files / shops / your_shop_number / assets / logo.png" alt = "Logo del sito" />

Il asset_url il filtro è molto utile in quanto restituisce il percorso completo al tema corrente risorse cartella. L'utilizzo di questo filtro ti consente di applicare il tuo tema a più negozi e non devi preoccuparti dei percorsi.

Qual è il prossimo?

Si spera che questi pochi esempi ti abbiano mostrato che Liquid non è così complicato. Certo, c'è molto di più che puoi fare con esso, ma padroneggiando output, logica e filtri, sei sulla buona strada per capire la maggior parte di ciò di cui avrai bisogno per creare un tema Shopify.