Share
Nelle prime due parti di questa serie ti ho presentato la piattaforma di e-commerce di Shopify, ho spiegato i concetti chiave, ho discusso di come sono stati costruiti i temi e poi sono passati a uno sguardo approfondito su Liquid - il linguaggio di template di Shopify.
In questa parte finale vedremo come una conoscenza più approfondita di Liquid ti consentirà di rendere i tuoi temi ancora più flessibili, consentendoti di offrire design di negozi ricchi e fantasiosi.
Iniziamo osservando come possiamo usare "layout alternativi" con grande effetto.
Una delle funzionalità più potenti di Liquid è il file di layout che abbiamo visto nella prima parte. Descrivo spesso un file di layout come un "modello principale". In genere questo file include le nostre dichiarazioni HTML, branding, navigazione e piè di pagina, in pratica tutti gli elementi comuni del nostro sito che vogliamo visualizzare su ogni pagina.
Tutte le pagine renderizzate in un tema di Shopify, se non specificato, saranno basate su questo modello principale. Di default questo è il theme.liquid file che risiede nel file layout cartella. I nostri micro modelli, che si trovano nel modelli cartella, sarà reso nel punto in cui Shopify incontra il content_for_layout Segnaposto liquido nel nostro file di layout.
Per fare il jog della memoria, ecco un esempio di file di layout molto semplice:
content_for_headershop.name - page_title "screen.css" | asset_url | stylesheet_tag content_for_layout
Come accennato nella prima parte, un file di layout in un tema Shopify deve includere due tag di uscita Liquid, content_for_header e content_for_layout. Il primo viene utilizzato da Shopify per aggiungere codice per l'analisi e per fornire un accesso rapido all'area di amministrazione del tuo negozio. Il secondo, content_for_layout, verrà sostituito dal modello pertinente dalla nostra cartella dei modelli, ad es. il product.liquid il modello verrà iniettato quando stiamo visualizzando una pagina dei dettagli del prodotto.
I layout sono un'ottima funzionalità e ci aiutano a mantenere i temi carini e ASCIUTTI. Tuttavia, ci saranno volte in cui gli elementi del file di layout predefinito devono essere modificati. Forse vuoi produrre una splash page che non richiede il branding e la navigazione "normali". È possibile che tu possa essere in grado di ottenere i risultati desiderati con i CSS, ma più probabilmente vorrai produrre un markup diverso. Ecco dove entrano in gioco schemi alternativi.
La creazione di un layout alternativo è molto semplice. La prima cosa da fare è creare un nuovo file e dargli un nome rilevante e il .liquido estensione. Il nome del file dipende da te. Ciò che è importante è che tu lo salvi layout cartella nella directory dei temi. In questo file puoi inserire qualsiasi HTML di cui hai bisogno (ad esempio dichiarazioni HTML, CSS, collegamenti JS, ecc.) Insieme ai due segnaposto discussi sopra.
Per utilizzare questo file di layout, e sovrascrivere in modo efficace il valore predefinito theme.liquid file di layout, usiamo la seguente sintassi Liquid in uno qualsiasi dei micro template:
% layout "alternativa"%
Nota: non è necessario includere il .liquido estensione. Ora, quando il modello micro pertinente viene elaborato da Shopify, verrà reso con alternative.liquid come il suo file di layout.
Allo stesso modo in cui possiamo dettare layout specifici da applicare ai nostri micro modelli, possiamo utilizzare Liquid logic per rendere diversi modelli di prodotto. Ci sono diversi modi per ottenere questo risultato in Liquid - il mio metodo preferito è quello di utilizzare le maniglie del prodotto. Se hai mai usato WordPress puoi pensare a a maniglia del prodotto allo stesso modo di a lumaca. Ecco un tipico URL del prodotto dal sito web di A Book Apart per dimostrare:
http://www.abookapart.com/products/responsive-web-design
In questo esempio l'handle del prodotto è web design reattivo - l'ultimo elemento dell'URL. Gli handle del prodotto vengono creati automaticamente per te quando aggiungi un prodotto nell'amministratore di Shopify e si basa sul nome che inserisci; i caratteri maiuscoli vengono sostituiti con caratteri minuscoli e spazi con trattini. Ovviamente puoi sovrascriverli se necessario.
Per impostazione predefinita, ogni volta che Shopify esegue il rendering di una pagina dei dettagli del prodotto, utilizzerà la product.liquid modello micro. Diciamo che vogliamo servire una pagina di prodotto diversa solo per il libro di Ethan per metterla in evidenza. Per fare questo dobbiamo fare un paio di modifiche al product.liquid modello.
Il libro Responsive Web Design di Ethan Marcotte sul sito A Book Apart di ShopifyCome il product.liquid modello ha accesso a tutti i dati relativi al prodotto attualmente visualizzato possiamo porre la seguente domanda utilizzando un liquido Se dichiarazione:
% if product.handle == "responsive-web-design"% % include "responsive-web-design"% % else% [Normal HTML code for product.liquid] % endif%
Aggiungendo il Se dichiarazione, che abbiamo visto nella seconda parte di questa serie, siamo in grado di controllare quale markup è reso. In poche parole, se il product.handle è uguale a "responsive-web-design" includiamo il file chiamato reattivo-web-design.liquid. Tuttavia, se non lo è, rendiamo semplicemente il codice che abbiamo già nel nostro product.liquid modello.
Questo esempio ci introduce a snippet di liquidi. I frammenti vivono nel nome appropriato snippet cartella e sono referenziati senza il .liquido estensione quando si usa il tag Liquid % includere %.
Come suggerisce il nome, usando % includere % includerà letteralmente un pezzo di codice nel tuo micro modello o nel file di layout. Nell'esempio sopra il file conterrà il markup alternativo richiesto per mostrare il libro di Ethan, incluso tutto il codice Liquid necessario per estrarre i dati sul prodotto nel modello.
Naturalmente è possibile specificare che questo modello particolare possa essere utilizzato per un altro libro oltre a quello di Ethan. Ecco un modo per ottenerlo:
% if product.handle == "responsive-web-design" OR product.handle == "design-is-a-job"% % include "responsive-web-design"% % else% [ Normale codice HTML per product.liquid] % endif%
In questo caso potresti voler rinominare il tuo snippet con qualcosa di più appropriato, ad es. product-showcase.liquid.
Vale la pena notare che non è possibile nidificare le cartelle all'interno della directory dei frammenti. Di conseguenza, tendo a prefisso i miei file con la loro funzione:
Accentsconagua
prodotto-reattiva-web-design.liquidproduct-showcase.liquidRaccolte books.liquidL'utilizzo di questa convenzione di denominazione semplifica molto la ricerca di frammenti, specialmente aumentando il loro utilizzo.
Un esempio di come ho usato snippet sul sito di 8 facce per separare le preoccupazioni logiche Tendo ad usare frammenti in due modi diversi. Innanzitutto per separare il codice in blocchi gestibili e in secondo luogo per gli elementi di una pagina che devo riutilizzare, come un blocco di paginazione.
Come regola generale, ecco come decido dove aggiungere il codice:
Un altro trucco che ho utilizzato con grande efficacia è il trattamento di un modello micro come controller di visualizzazione, un'idea che ho preso da molti dei framework MVC che ho utilizzato. Questo potrebbe essere un nuovo concetto per te, quindi diamo un'occhiata in modo più dettagliato.
Negli esempi di cui sopra stiamo usando la logica del liquido per verificare la presenza di un particolare handle del prodotto nel product.liquid modello micro. Se la risposta al nostro Se la dichiarazione è vera includiamo uno snippet, altrimenti Shopify rende il blocco HTML contenuto tra % altro % e % finisci se % tag.
Per alcuni questo potrebbe sembrare un po 'disordinato e può, nel tempo, diventare difficile da leggere, soprattutto se il tuo predefinito product.liquid il markup cresce Per semplificare la gestione, possiamo semplicemente rimuovere il markup predefinito dal modello product.liquid e creare uno snippet per esso. Tendo a chiamarlo product-default.liquid.
Seguendo questo approccio, il nostro file product.liquid potrebbe essere refactored al seguente:
% if product.handle == "responsive-web-design"% % include "product-responsive-web-design"% % else% % include "product-default"% % endif%
Naturalmente, man mano che le esigenze crescono, questo file potrebbe crescere per incorporare altri assegni e file pertinenti inclusi a seconda dei risultati. Le opzioni sono illimitate.
Vale la pena ricordare che non sono solo i prodotti con maniglie in Shopify, anche le raccolte e le pagine. Utilizzando lo stesso approccio per le collezioni, potremmo fare quanto segue nel nostro collections.liquid modello:
% if collection.handle == "css"% % include "collection-css"% % else% % include "collection-default"% % endif%
Astuccio Invece di se elsif altro Questo metodo funziona molto bene se vogliamo solo controllare un particolare handle, che si tratti di un prodotto o di una raccolta, ma se vogliamo estenderlo a più prodotti o raccolte?
Abbiamo due possibili approcci, il primo è estendendo il nostro Se dichiarazione usando ELSIF. Ecco un esempio:
% if product.handle == "responsive-web-design"% % include "product-responsive-web-design"% % elsif product.handle == "design-is-a-job"% % include "product-design-is-a-job"% % else% % include "product-default"% % endif%
Questo esempio controlla a turno due handle di prodotto e solo se nessuno dei due è vero, renderà il product-default.liquid frammento.
È possibile utilizzare più ELSIF dichiarazioni in Liquid ma può diventare un po 'prolisso. Un'alternativa, e penso che l'approccio più pulito sia da usare Astuccio. Ecco l'esempio sopra riportato refactored:
% case product.handle% % quando "responsive-web-design"% % include "product-responsive-web-design"% % quando "design-is-a-job"% % include "product-design-is-a-job"% % else% % include "product-default"% % endcase%
Possiamo anche fare un confronto più sfocato usando l'operatore Liquid contiene. Diciamo che vogliamo un prodotto che abbia la parola reattiva nel suo handle per usare uno snippet differente. Ecco come potremmo affrontarlo usando un semplice Liquid Se dichiarazione:
% se product.handle contiene "reattivo"% % include "product-responsive"% % else% % include "product-default"% % endif%
L'utilizzo di questo metodo significherebbe che non dovremmo modificare il nostro modello per aggiungerne uno nuovo ELSIF o Astuccio per ulteriori libri che contengono "responsive" nel loro titolo.
Questi approcci possono essere utilizzati anche all'interno dei micro modelli del tema. Ad esempio potresti usarlo per mostrare e nascondere gli elementi in modo programmatico. Esempi di questo potrebbero essere distintivi di vendita, offerte speciali e prodotti correlati.
Le maniglie possono anche essere molto utili quando si lavora con CSS e JavaScript. Molti di noi usano la classe del corpo per i ganci CSS e JavaScript e proprio come in WordPress è abbastanza facile aggiungere un numero di classi utili all'elemento del nostro corpo in Shopify.
Ecco alcune idee:
Aggiungi il nome del modello attualmente reso alla classe del corpo:
Nota che stiamo usando il filtro handleize per disinfettare il nostro output. Alcuni esempi di questo in azione sono:
Basandoci su questo, potremmo voler aggiungere l'attuale handle del prodotto anche alla nostra classe corporea. Per mantenere le cose pulite e in ordine possiamo usare un Se dichiarazione per aggiungere condizionalmente l'handle del prodotto solo quando stiamo visualizzando un prodotto:
Le impostazioni del tema, una volta acquisite, sono una caratteristica incredibilmente potente dei temi di Shopify 
L'editor di temi di Shopify Desktop per Mac consente la sincronizzazione di file apparentemente tra il tuo file system locale e il tuo negozio 