Share
Nella prima parte di questa serie (Introduzione di un web designer a Shopify) vi ho presentato la piattaforma di commercio di Shopify, spiegato alcuni dei concetti chiave e illustrato come è strutturato un tema di Shopify.
Andando avanti, questo tutorial si concentrerà su Liquid, il linguaggio dei template di Shopify. Analizzeremo i vantaggi di Liquid, discuteremo di come ci consente di inserire e manipolare i dati dai nostri negozi e di mostrare finalmente alcune delle funzionalità chiave che troverai quotidianamente nello sviluppo del tuo tema Shopify..
Se hai bisogno di aiuto per risolvere e risolvere problemi con il tuo negozio Shopify o persino di configurarlo da zero, puoi trovare un esperto di Shopify su Envato Studio pronto ad aiutarti. Ecco alcuni esempi:
Questo è un ottimo servizio di base per aiutarti a impostare Shopify rapidamente e facilmente. Ecco cosa include:
Se hai bisogno di aiuto per installare correttamente un tema, questo esperto di Shopify può aiutarti. Faranno:
Il servizio di base costa solo $ 50, e altri extra sono disponibili se si sceglie.
Cosa succede se hai bisogno di un tema personalizzato? Questo fornitore offre la personalizzazione del tuo tema Shopify esistente per soddisfare tutte le tue esigenze.
Le personalizzazioni includono:
Cerchi un pacchetto completo? Questo provider installerà e imposterà il tuo tema; aggiungi il tuo logo e il tuo marchio; personalizzare colori e caratteri; personalizzare i modelli liquidi; aggiungere script e installare app per funzionalità; impostare tag, varianti e categorie di prodotti; aggiungere o importare i tuoi prodotti, tempo permettendo; e fare qualsiasi test necessario.
Ciò include fino a 20 ore di set-up e tempi di sviluppo.
Ci sono molti altri esperti Shopify disponibili per aiutarti su Envato Studio. Quindi sfoglia i servizi disponibili o continua a leggere per saperne di più sull'utilizzo di Liquid.
Se non hai familiarità con il concetto di un linguaggio modello, spesso lo descrivo come un ponte tra i dati nel tuo negozio e i modelli HTML inviati al browser.
Utilizzando alcuni costrutti semplici da leggere (e facili da ricordare), siamo in grado di accedere ai dati dal nostro negozio (ad esempio, un titolo di prodotto, una descrizione di una raccolta, un set di immagini di prodotto o un post di un blog) e inviare tali dati direttamente nei nostri modelli . Uno dei principali vantaggi è che non è necessario avere alcuna conoscenza di quali siano questi dati - piuttosto dobbiamo solo sapere a quali variabili abbiamo accesso in ogni modello.
Un esempio di un tipico modello product.liquid in SublimeText2 con evidenziazione della sintassi di LiquidCome discusso nella prima parte di questa serie, Shopify decide quale modello inviare al browser in base all'URL attualmente richiesto. Ad esempio se l'URL è http://shopify-for-designers.myshopify.com/collections/cups Shopify renderà il collections.liquid modello.
Una volta che Shopify ha elaborato il modello pertinente per il rendering, analizza il modello (e il suo file di layout esterno) alla ricerca di segnaposti liquidi. Quando questi si verificano Shopify sostituisce il codice del liquido con i dati rilevanti del tuo negozio.
Un altro modo di pensare ai linguaggi dei modelli è come "trova e sostituisci" in un editor di testo. La piattaforma, in questo caso Shopify, cerca tutti i segnaposti liquidi e quindi li sostituisce con i dati del tuo negozio. Il documento finale costruito viene quindi inviato al browser come HTML.
All'inizio potrebbe sembrare un po 'alieno se questa è la tua prima incursione nel modello, ma presto ne avrai la certezza.
UN segnaposto è un pezzo di codice che alla fine verrà sostituito quando il modello viene inviato al browser.
Esistono due tipi di segnaposti in Liquid. Il primo è la doppia parentesi per denotare produzione e la seconda è la percentuale delle parentesi %% per denotare logica.
Ecco un rapido esempio di un produzione segnaposto che troverai tipicamente nel product.liquid modello micro:
product.title
Al momento del rendering, ciò produrrebbe il nome del prodotto attualmente visualizzato al posto di , per esempio:
Keir's Coffee Cup
L'output, a meno che non venga manipolato con un filtro (che vedremo in seguito) è semplicemente un caso di sostituzione del segnaposto con il testo del tuo negozio.
Oltre a consentirci di ottenere dati dal nostro negozio e visualizzarli nei nostri modelli, come dimostrato sopra, Liquid è anche in grado di controllare esattamente che cosa viene visualizzato nei nostri modelli utilizzando costrutti e loop logici.
Ad esempio, possiamo scegliere di mostrare un diverso frammento di HTML a seconda che il prodotto attualmente visualizzato sia disponibile o meno.
Inoltre, siamo in grado di utilizzare Liquid per produrre lo stesso codice di codice numerose volte, ad esempio una serie di immagini di prodotto. utilizzando loop ci consente di produrre tutti i prodotti associati a un prodotto in poche righe di codice Liquid.
Il liquido è davvero potente e, sebbene tu possa pensare che stiamo entrando nel territorio della programmazione, sono sicuro che lo raccoglierai abbastanza rapidamente.
Ora che hai una conoscenza di base di come funziona Liquid diamo un'occhiata a quattro caratteristiche chiave e al loro funzionamento in relazione allo sviluppo del tema.
Come accennato in precedenza le doppie parentesi in un .liquido il file denota un produzione segnaposto. Ecco due esempi che incontrerai spesso:
shop.name product.description
L'output ci consente di inserire nel nostro modello un dato specifico del nostro negozio e, come suggerisce il nome, di inviarlo al posto del placeholder Liquid.
Diciamo che il mio negozio è stato chiamato "Keir's Coffee Emporium". Se dovessi usare il shop.name etichetta liquida Shopify prende il nome del mio negozio e sostituisce il segnaposto liquido con il nome del mio negozio direttamente nel mio modello come HTML.
Allo stesso modo, se stessimo usando Descrizione del prodotto nel nostro product.liquid modello qualsiasi testo inserito nell'editor WYSIWYG per quel particolare prodotto sarebbe emesso al posto del Descrizione del prodotto segnaposto.
Nota: L'editor WYSIWYG emetterà HTML formattato in modo che non sia necessario avvolgere il tuo Descrizione del prodotto con qualsiasi elemento HTML, ad es. un .
Qualsiasi variabile, che si tratti di una variabile globale (disponibile in ogni singolo modello nel tema) o di una variabile di livello del modello (disponibile solo per un modello specifico) può essere emessa in questo modo. Altri esempi includono:
shop.description product.title collection.title collection.description
Per un elenco completo di variabili che puoi pubblicare nei tuoi temi ti consiglio vivamente di aggiungere un segnalibro al foglio dei trucchi di Mark Dunkley. Mi trovo a usare questo quotidiano.
Per riassumere, l'output di Liquid è molto simile a "trova e sostituisci". Durante il rendering del modello, Shopify andrà a trovare tutte le istanze dei tag di uscita Liquid e li sostituirà con i dati rilevanti dal tuo negozio.
Noterai anche da questi esempi che Liquid usa il sintassi del punto per l'accesso ai dati. L'elemento che precede il punto è la variabile, mentre la voce dopo è un attributo di quella variabile. Ad esempio la nostra variabile del negozio sopra ha sia un attributo nome che descrizione.
Il sito di documentazione di Shopify contiene esempi di codici e screencast Passiamo alla logica dei liquidi. Mentre leggermente più complicato per i tag di logica degli utenti di prima volta non è così difficile da capire una volta che li hai provati per te stesso.
Considerando liquido produzione i segnaposti ci permettono di prendere i dati e visualizzarli nei nostri modelli Logica liquida i tag ci consentono di controllare il flusso di un modello. A differenza dei tag di output, l'inclusione di tag logici nei modelli non comporta il rendering diretto di alcun elemento, ma piuttosto il controllo che cosa è reso.
Un tipico esempio che uso per illustrare come viene utilizzata la logica Liquid è quello di evidenziare quando un prodotto è esaurito. Il seguente esempio si trova in genere nel file product.liquid modello micro:
% se prodotto.available% Questo prodotto è disponibile % else% Siamo spiacenti, questo prodotto è esaurito % endif%
Come vedrai, la sintassi di Liquid logic è leggermente diversa dall'output. Invece del delimitatori che usiamo %%.
Nell'esempio sopra stiamo controllando ciò che viene prodotto sul nostro template usando un semplice Se, altro, finisci se dichiarazione. In molti modi Se le dichiarazioni sono come domande.
Nell'esempio sopra se la risposta al nostro Se domanda è vero rendiamo le parole "Questo prodotto è disponibile", se lo è falso il nostro modello porta avanti e produce il testo che segue il nostro % altro % clausola - in questo caso "Scusa, questo prodotto è esaurito".
Ti troverai usando Se dichiarazioni molto nello sviluppo del tema Shopify. Ecco un altro esempio per aiutarti a capire:
% se cart.item_count> 0%Hai cart.item_count articoli nel carrello
% altro %Non c'è niente nel carrello :( Perché non dare un'occhiata alla nostra gamma di prodotti
% finisci se %
Questo esempio mostra un modo in cui è possibile visualizzare il numero di articoli nel carrello di un visitatore o generare un collegamento ai prodotti.
Noterai in questo esempio che stiamo usando il maggiore di > operatore. Come il cart.item_count variabile restituisce il numero di articoli nel carrello degli utenti corrente che possiamo controllare per vedere se è maggiore di zero, cioè ha elementi in esso.
Se questo ritorna Non c'è niente nel carrello :( Perché non dare un'occhiata alla nostra gamma di prodottivero possiamo emettere il messaggio con il numero di articoli corrente, altrimenti non possiamo produrre
Hai accesso a una vasta gamma di operatori in Liquid, molti dei quali ti troverai a usare regolarmente:
Accentsconagua
== pari!= non uguale> più grande di< meno di> = più grande o uguale<= meno o ugualeo questo o quelloe deve essere questo e quellocontiene include la sottostringa se usata su una stringa, o elemento se usato su una matriceQuindi rivolgiamo la nostra attenzione al concetto di loop liquidi.
Se hai fatto qualche forma di programmazione di base, il concetto di looping sui dati ti sarà molto familiare. Utilizzando un ciclo, spesso noto come a per ciclo, ci consente di stampare lo stesso pezzo di codice un numero noto di volte nel nostro modello.
Diamo un'occhiata ad un esempio di un tema di Shopify per aiutare a solidificare il concetto:
% per immagine in product.images%% endfor%
In questo esempio, in genere trovato in product.liquid modello micro, stiamo usando un ciclo per produrre ogni immagine associata al prodotto attualmente visualizzato. Scopriamolo in passaggi per capirlo appieno.
La nostra linea di apertura ci introduce all'idea di collezioni in Liquid. diversamente da collezioni di prodotti che abbiamo visto nella prima parte collezioni in Liquid sono diversi. È una sfortunata convenzione di denominazione in questo senso quindi mi piace fare riferimento alle raccolte in Liquid come Collezioni liquide evitare la confusione.
Una collezione Liquid nei temi Shopify può assumere molte forme, ma un buon esempio è product.images come usato sopra. Una collezione di Liquid è facile da individuare in quanto normalmente prende il plurale - come in immagini sopra. Nel nostro esempio abbiamo a che fare con una raccolta Liquid di tutte le immagini associate a un prodotto.
Un altro esempio è product.variants. Ciò restituirebbe un oggetto contenente i dettagli di tutte le varianti del prodotto pronte per il loopover nel nostro modello. Se hai bisogno di un primer sulle varianti di prodotto, ne abbiamo discusso nella prima parte.
Noterai anche che stiamo usando la parola Immagine per indicare l'elemento corrente nel ciclo. Ogni volta che facciamo il giro del nostro ciclo Immagine ci darà accesso ai dati associati a ciascuna immagine a turno. Naturalmente questo sarà diverso per ogni ciclo.
Vale anche la pena notare che non è necessario sapere quanti loop si verificheranno. Dopo che non ci sono più immagini su loop, Shopify continuerà e renderà la parte successiva del modello.
La seconda riga del nostro codice è in parte HTML e parte Liquid. Noterai che il src l'attributo è popolato con un tag di uscita Liquid. Vedremo i filtri, indicati dal | carattere, ma questo breve costrutto popolerà l'attributo src con l'URL completo alla versione "piccola" dell'immagine corrente nel nostro ciclo.
La linea finale del nostro esempio è la nostra chiusura EndFor dichiarazione. Questo chiude in modo efficace qualsiasi codice che verrà reso all'interno del ciclo.
Se avessimo tre immagini nel nostro product.images oggetto l'output finale sarebbe simile a questo:
Pure Fix Cycles utilizza i loop per produrre le numerose varianti di prodotto per la loro ruota AerospokeI loop sono davvero utili e qualcosa che incontrerai ogni giorno nello sviluppo del tuo tema. L'output di immagini e varianti di prodotto sono due esempi comunemente trovati.
Ho accennato ai filtri in relazione al nostro esempio precedente, quindi passiamo più in dettaglio e osserviamo come funzionano.
I filtri vengono utilizzati insieme a un tag di uscita. Il loro scopo è di manipolare i dati in qualche modo in modo che siano le modifiche di formato. Un ottimo esempio è il filtro della data:
article.published_at | data: '% d% B% Y'
Senza il filtro Shopify pubblicherebbe semplicemente la data in cui l'articolo del blog è stato pubblicato nel formato in cui è memorizzato nel database - che potrebbe non essere leggibile. Tuttavia aggiungendo nel | e includendo il filtro data possiamo manipolare noi stessi il formato.
Iniziamo a sinistra con un dato, in questo caso una data, e usando il filtro esce l'altro lato cambiato. Questo, in sostanza, è l'unico scopo di un filtro. Prende un pezzo di dati e in qualche modo lo manipola in modo che la sua forma cambi.
Il foglio dei trucchi di Mark Dunkley delinea tutti i filtri liquidi disponibiliEcco un altro esempio:
'style.css' | asset_url | stylesheet_tag
Qui stiamo usando due filtri con l'obiettivo finale di creare un elemento di stile completamente formato nel nostro file di layout.
Iniziamo a sinistra con il nome del nostro file CSS e prima applichiamo il ASSET_URL filtro. Questo è un filtro incredibilmente utile. Poiché non abbiamo idea di dove il nostro file style.css si trovi sulla rete di Shopify (oltre che nella nostra cartella di risorse all'interno del nostro tema) abbiamo bisogno di un modo per Shopify di compilare il percorso del file.
Questo è lo scopo del ASSET_URL filtro. Prenderà il nome del nostro file, style.css in questo esempio e anteporre il percorso completo alla cartella delle risorse del tuo negozio. Vale la pena notare che non controlla che il file esista.
Ecco come potrebbe apparire l'output:
//cdn.shopify.com/s/files/1/0222/9076/assets/style.css
Il filtro finale nella catena, stylesheet_tag, prende questo URL e lo avvolge in un elemento di stile che viene poi stampato nel nostro file di layout. Ecco il risultato finale:
Ogni filtro prende l'output dal suo filtro precedente e a sua volta lo modifica. Quando non ci sono altri filtri per passare i dati, il risultato viene visualizzato come HTML nel modello.
Ci sono molti filtri davvero utili, qui ci sono solo alcuni che ti ritroveranno a usare:
In questo tutorial abbiamo approfondito un po 'di terreno. Abbiamo esaminato Liquid e il suo rapporto con i nostri micro modelli HTML e file di layout e abbiamo esaminato quattro concetti chiave: output, logica, loop e filtri.
Un ottimo passo successivo sarebbe aprire un account Shopify Partner gratuito e iniziare a sezionare un tema. Molti degli esempi utilizzati in questo tutorial sono tratti dal mio tema di starter estremamente nudo disponibile su GitHub.
In preparazione alla terza parte, ti consiglio di scaricare una copia e applicarla a un negozio di sviluppo. I dettagli completi sul caricamento di un tema sono disponibili nei documenti Shopify. È letteralmente semplice come caricare un file ZIP. Gioca con l'editor dei modelli nell'amministratore dei tuoi sviluppatori di sviluppo, modifica alcuni tag, applica un filtro o due e aggiungi elementi nel file di layout per vedere come cambiano le cose.
Nella parte finale di questa breve serie ti presenterò alcune idee più avanzate che dimostreranno quanto possono essere flessibili Liquid e Shopify. Analizzeremo il modo in cui ti consentono di far cantare davvero i tuoi temi utilizzando esempi tratti dai miei progetti e altri negozi Shopify noti.
% endfor% 
