Tillsammans med Shopify Theme Development

I de två första delarna av denna serie introducerade jag dig till Shopify e-handelsplattform, förklarade de viktigaste koncepten, diskuterade hur teman konstrueras och sedan flyttas till en djupgående titt på Liquid - Shopify-templerande språk.

I den här sista delen kommer vi att titta på hur en lite djupare kunskap om Liquid gör att du kan göra dina teman ännu mer flexibla så att du kan leverera rika och fantasifulla butiksmönster.

Låt oss börja med att titta på hur vi kan använda "alternativa layouter" till stor effekt.

Alternativa layouter

En av de mest kraftfulla funktionerna i Liquid är den layoutfil som vi tittade på i del ett. Jag beskriver ofta en layoutfil som en "mallmall". Vanligtvis kommer den här filen att inkludera våra HTML-deklarationer, branding, navigering och sidfot - i huvudsak alla vanliga delar av vår webbplats som vi vill visas på varje sida.

Alla renderade sidor i ett Shopify-tema, om inte annat anges, kommer att baseras på den här mallmallen. Som standard är detta theme.liquid fil som är bosatt i layouter mapp. Våra mikromallar, belägna i mallar mapp kommer att göras vid den tidpunkt då Shopify möter content_for_layout Flytande platshållare i vår layoutfil.

För att jogga ditt minne här är ett mycket grundläggande layoutfils exempel:

  content_for_header   "screen.css" | asset_url | stylesheet_tag   content_for_layout   

Som nämnts i del ett måste en layoutfil i ett Shopify-tema innehålla två Liquid Output-taggar, content_for_header och content_for_layout. Den första används av Shopify för att lägga till kod för analys och för att ge snabb åtkomst till butikens administrativa område. Den andra, content_for_layout, kommer att ersättas med den relevanta mallen från vår mallarmapp, t.ex. de product.liquid mall injiceras när vi tittar på en produktdetaljer sida.

Layouts är en bra funktion och hjälper oss att hålla teman snygg och torr. Det kommer emellertid att finnas tider att elementen i din standardlayoutfil behöver ändras. Kanske vill du producera en stänk sida som inte kräver "normal" branding och navigering. Det är möjligt att du kanske kan uppnå önskade resultat med CSS, men mer sannolikt kommer du att vilja producera olika markup. Här är alternativa layouter till spel.

Att skapa en alternativ layout är väldigt enkelt. Det första du behöver göra är att skapa en ny fil och ge den ett relevant namn och .flytande förlängning. Filnamnet är upp till dig. Vad som är viktigt är att du sparar den i layouter mappen i din temakatalog. I den här filen kan du placera vilken HTML som helst (dvs HTML-deklarationer, CSS, JS-länkar etc) tillsammans med de två platshållarna som diskuteras ovan.

För att kunna använda denna layoutfil och effektivt överstyra standardvärdet theme.liquid layoutfil använder vi följande flytande syntax i någon av mikromallarna:

% layout "alternativ"% 

Notera: du behöver inte inkludera .flytande förlängning. Nu när den relevanta mikromallen behandlas av Shopify kommer den att återges med alternative.liquid som dess layoutfil.

Produktspecifika mallar

På samma sätt som vi kan diktera specifika layouter som ska tillämpas på våra mikromallar kan vi använda flytande logik för att göra olika produktmallar. Det finns ett antal sätt att uppnå detta i Liquid - min föredragna metod är att utnyttja produkthandtag. Om du någonsin har använt WordPress kan du tänka på a produkthandtag på samma sätt som a snigel. Här är en typisk produktadress från webbplatsen A Book Apart för att visa:

http://www.abookapart.com/products/responsive-web-design 

I detta exempel är produkthandtaget reagerar-web-design - det sista elementet i webbadressen. Produkthandtag skapas automatiskt för dig när du lägger till en produkt i Shopify-administratorn och baseras på namnet du anger. stora bokstäver ersätts med små bokstäver och mellanslag med bindestreck. Du kan naturligtvis åsidosätta dem om du behöver.

Som standard gör varje gång Shopify en produktdetaljsida som den använder product.liquid mikromall. Låt oss säga att vi vill tjäna en annan produktsida bara för Ethans bok för att verkligen markera den. För att kunna göra detta måste vi göra några ändringar i product.liquid mall.

Ethan Marcots bok Responsive Web Design på Shopify powered A Book Apart-webbplatsen

Som den product.liquid mall har tillgång till all data relaterad till den för närvarande visade produkten kan vi fråga följande fråga med hjälp av en vätska om påstående:

% if product.handle == "responsive-webdesign"% % inkluderar "responsiv webbdesign"% % else% [Normal HTML-kod för product.liquid] % endif% 

Genom att lägga till i om uttalande, som vi tittade på i del två i denna serie, kan vi styra vilken markering som gjorts. Enkelt uttryckt, om produkten.Denna är lika med "responsiv webbdesign" inkluderar vi filen som heter reagerar-web-design.liquid.  Om det inte är det gör vi helt enkelt den kod som vi redan har i vår product.liquid mall.

Kraften i snippets

Detta exempel introducerar oss till Liquid-fragment. Snippets lever i den lämpliga namnet utdrag mapp och refereras utan .flytande förlängning vid användning av Liquid-taggen % include%.

Som namnet antyder använder du % include% kommer bokstavligen att inkludera en bit kod i din mikromall eller layoutfil. I exemplet ovan skulle filen innehålla den alternativa markeringen som krävs för att visa upp Ethans bok inklusive alla nödvändiga Liquid-kod för att dra data om produkten i mallen.

Självklart kan du ange att den här mallen ska användas för en annan bok utöver Ethans. Här är ett sätt att uppnå det:

% if product.handle == "responsive-web-design" ELLER product.handle == "design-is-a-job"% % inkluderar "responsiv webbdesign"% % else% [ Normal HTML-kod för product.liquid] % endif% 

I det här fallet kanske du vill byta namn på ditt utdrag till något mer lämpligt, dvs. produkt-showcase.liquid.

Det är värt att notera att du inte kan placera mappar i din katalog med utdrag. Följaktligen tenderar jag att prefixa mina filer med sin funktion:

• produkt-responsiva-web-design.liquid
• produkt-showcase.liquid
• samlingar-books.liquid

Genom att använda den här namngivningskonventionen blir det enklare att hitta utdrag, särskilt när användningen av dem ökar.

Ett exempel på hur jag använde snippets på 8 Faces webbplatsen för att skilja logiska problem

När ska du använda utdrag

Jag brukar använda snippets på två olika sätt. För det första att separera koden i hanterbara bitar och för det andra för element på en sida som jag behöver återanvända, till exempel ett paginationsblock.

Som en allmän tumregel här är hur jag bestämmer mig för var man ska lägga till kod:

• Visas på varje sida - layoutfil
• Visas på mer än en sida - utdragsfil
• Visas på en sida - mikromall

Mikro Mallar som Controllers

Ett annat knep som jag har haft till stor nytta är att behandla en mikromall som visningskontroller - en idé jag har tagit från många av de MVC-ramar jag har använt. Det här kan vara ett nytt koncept för dig så låt oss ta en titt på det mer detaljerat.

I ovanstående exempel använder vi Liquid Logic för att kontrollera om ett visst produkthandtag i product.liquid mikromall. Om svaret på vårt om uttalandet är sant att vi inkluderar ett utdrag, annars ger Shopify HTML-blocket som finns mellan % else% och % endif% taggar.

För vissa kan det tyckas lite rörigt och kan över tiden bli svårt att läsa, speciellt om din standard är product.liquid markup växer. För att underlätta hanteringen kan vi helt enkelt ta vår standardmarkering ut ur product.lquid-mallen och skapa ett utdrag för det - jag brukar kalla det här produkt-default.liquid.

Genom att följa detta tillvägagångssätt kan vår product.liquid-fil återföras till följande:

% if product.handle == "responsive-webdesign"%% % include "produkt-responsiv webbdesign"% % else% % include "product-default"% % endif%  

Naturligtvis, när dina behov växer, kan den här filen växa till att inkludera andra kontroller och relevanta filer inkluderade beroende på resultaten. Alternativen är obegränsade.

Det är värt att komma ihåg att det inte bara är produkter som har handtag i Shopify, samlingar och sidor också. Med samma tillvägagångssätt för samlingar kan vi göra följande i vår collections.liquid mall:

% om collection.handle == "css"% % inkluderar "collection-css"% % else% % include "collection-default"% % endif% 

Använder sig av fall Istället för om elsif annars

Denna metod fungerar väldigt bra om vi bara vill kolla efter ett visst handtag, vare sig det är en produkt eller samling, men om vi vill utvidga det till flera produkter eller samlingar?

Vi har två möjliga tillvägagångssätt, det första är genom att utvidga vårt om uttalande genom att använda elsif. Här är ett exempel:

% if product.handle == "responsive-webdesign"% % inkluderar "produkt-responsiv webbdesign" %% % elsif product.handle == "design-is-a-job"% % inkluderar "produktdesign-är-ett-jobb"% % else% % inkluderar "produkt-standard"% % endif% 

Detta exempel kontrollerar för två produkthandtag i sin tur och endast om det inte är sant kommer det att göra det produkt-default.liquid kodavsnitt.

Det är möjligt att använda flera elsif uttalanden i flytande men det kan bli lite verbose. Ett alternativ, och jag tycker att det är ett bättre sätt att använda fall. Här är ovanstående exempel refactored:

% case product.handle% % när "responsiv webbdesign"% % inkluderar "produkt-responsiv webbdesign"%% % när "design-is-a-job"% % Inkludera "produktdesign-är-ett-jobb"% % else% % include "product-default"% % endcase% 

Vi kan också göra en mer fuzzy jämförelse med hjälp av Liquid operatören innehåller. Låt oss säga att vi vill ha någon produkt som har ordet lyhörd i sitt handtag för att använda ett annat utdrag. Så här kan vi närma oss det med en enkel Liquid om påstående:

% om product.handle innehåller "responsive"% % include "product-responsive"% % else% % inkluderar "product-default"% % endif% 

Med hjälp av den här metoden skulle vi inte behöva redigera vår mall för att lägga till i en ny elsif eller fall för ytterligare böcker som innehåller "responsiva" i deras titel.

Dessa tillvägagångssätt kan också användas inom mikromallarna i ditt tema. Till exempel kan du använda den för att visa och gömma elementen programmatiskt. Exempel på detta kan vara säljmärken, specialerbjudanden och relaterade produkter.

Skapa användbara CSS-krokar

Handtag kan också vara mycket praktiska när du arbetar med CSS och JavaScript. Många av oss använder kroppsklassen för CSS- och JavaScript-krokar och precis som i WordPress är det ganska enkelt att lägga till ett antal användbara klasser till vårt kroppselement i Shopify.

Här är några idéer:

Lägg till det nuvarande mallnamnet till kroppsklassen:

Observera att vi använder handtaget för att sanera vår produktion. Några exempel på detta i åtgärd är:

På grund av detta kanske vi vill lägga till det nuvarande produkthandtaget till vår kroppsklass. För att hålla sakerna snygga och städa kan vi använda en om uttalande att villkorligt lägga till produkthandtaget endast när vi tittar på en produkt:

Observera hur jag tar med platsen före product.handle output tagg.

Vissa teman lägger också till den aktuella sidtiteln till kroppsdelen i form av en id, bygger på ovanstående skulle vår kod nu se ut som följer:

För gott mått kan vi till och med lägga till en check för samlingar och lägga till det också:

Det är ganska lätt att justera denna logik för dina egna ändamål.

Hittills har vi tittat på hur vi kan använda Liquid för att gå utöver utmatning av data och kontrollera flödet av våra mallar. Låt oss nu vända oss till en annan bra funktion av Shopify - temainställningar.

Temainställningar

Temainställningar tillåter temutvecklare att ge ett enkelt sätt för alla användare att anpassa utseendet på deras butik utan att behöva ändra någon HTML eller CSS. Detta gör teman mycket flexibla - ett plus om du någonsin överväger att sälja ett tema via Shopify-temabutiken eller Themeforest.

För att exponera temainställningar i vår butikadministratör måste vi skapa en fil som heter settings.html och spara det i config-mappen. Observera förlängningen, det här är den enda filen med a .html förlängning i ditt Shopify-tema.

Det finns oändliga användningsområden för temainställningar, men en vanlig är att ändra bakgrundsfärgen på hela webbplatsen. Här är ett kodexempel som vi kan diskutera:

 
Färger Inställningar
 
 
 
 
Bakgrund (exempel)
 
 
 
 
 
 

Det viktigaste elementet här är inmatning. Observera att vi har gett den ett id och namnattribut av bg_color och en klass av Färg. Denna klass är viktig; när vi tittar på våra temainställningar i administratören kommer Shopify att göra en praktisk färgplockare i stället för vår inmatning.

Tema inställningar, en gång mästare, är en otroligt kraftfull funktion av Shopify-teman

Du kommer också märka att jag har satt ett värde på vår inmatning av #fff. Om vi ​​väljer att använda våra temainställningar i vår CSS-fil är det värdet som blir standard. Utan denna standard kommer ett tomt värde att användas. Detta är en gotcha jag ser mycket!

Temainställningar är globalt tillgängliga för oss, vilket innebär att vi kan mata ut sitt värde i alla våra mallar och layoutfiler. Detta inkluderar våra CSS och JavaScript-filer. För att hänvisa till en inställning använder vi i detta fall vår bakgrundsfärg följande syntax:

settings.bg_color 

Observera att vi använder id av ingången för att dra ut sitt värde. Av denna anledning måste iden för varje ingång vara unik.

Använda temainställningar

För att kunna använda temainställningar i vår CSS-fil måste vi lägga till .flytande till vår CSS-fil. Om vår fil heter screen.css vi ändrar det helt enkelt till screen.css.liquid.

När vi har gjort det kan vi göra följande i vår CSS-fil:

kropp bakgrund: settings.bg_color;  

När Shopify serverar vår CSS-fil kommer den att ersätta våra Liquid output-taggar med det värde som anges i temainställningarna i Shopify-administratören. Förhoppningsvis belyser detta exempel behovet av att värdera värdet!

Förutom att skriva in text och numeriska värden i temainställningar kan du ladda upp filer, spela in booleska värden med kryssrutor och erbjuda valda neddragningar för att välja ett värde från en lista.

 
Hemsida
 
Hjälte
 
 
 
 
Visa hjälte?
 
 
 
 
 
 

Ovanstående exempel är taget från den 8-sidiga webbplatsen jag arbetade på 2013. Vi använder denna inställning för att styra logiken på hemsidan, så här är hur:

% om settings.show_hero == true% [Relevant hjälte banner kodbit] % endif% 

Lägga till filer är lite mer komplicerat så låt oss ta en snabb titt på det. Markeringen är dock ganska enkel:

 
Hemsida
 
Hjälte
 
 
 
Bild (full storlek)
 
 
 
 
 

Det finns ett par saker att notera här, för det första namnet attributet som i vårt exempel är hem-sida-hero.jpg. Oavsett namnet på filen du laddar upp, kommer den att döpa om till hem-sida-hero.jpg.

Det andra värt att veta är förlängningen, i vårt fall .jpg. Oavsett vilken filtyp du överför Shopify försöker konvertera den till den angivna typen. Om det inte kan, kommer det att rapportera ett fel. Till sist, till skillnad från produktbilder, sparas filuppladdningar alltid i tematets aktivmapp.

Så här kan vi göra vår hemsida hjältebild i vår mall:

Här använder vi ASSET_URL filtrera för att lägga till i hela sökvägen till bilden på Shopify CDN. Om du inte är bekant med det här filtret kan du läsa mer om det i del två i den här serien.

Jag rekommenderar starkt att du hämtar ett gratis tema eller två från Shopify-temabutiken och dissekera teman inställningsmallen, eftersom de är ett bra byggstenar för din egen temat utveckling.

Shopify Toolkit

Även om det är rättvist att säga att allt du verkligen behöver börja utveckla teman är en textredigerare och ett Shopify-partnerkonto, finns det några godisar där ute som är väl värda att överväga.

Om du har följt serien har du kanske anmält dig till ett gratis Shopify-partnerkonto. En sak som jag alltid rekommenderar att göra är att ställa in den "falska gatewayen" i dina utvecklingsbutiker. Du hittar det på fliken Inställningar under utcheckningen i Shopify-administratören. Om du aktiverar det här kan du visa upp en fullständig transaktion och generera alla relaterade e-postmeddelanden som genereras. Det är värt att komma ihåg att du också kan använda alla dessa flytande tekniker i dina meddelandemail till stor effekt.

Ett annat mycket användbart verktyg är Shopify Desktop Theme Editor för Mac. När det är installerat kommer det att synkronisera dina filändringar till din utveckling, eller leva, handla. Om du använder Mac, Windows eller Linux kan du också installera Shopify-temat Gem kommandoradsverktyget för att synkronisera dina lokala filer till din utvecklingsbutik.

Shopify Desktop Theme Editor för Mac möjliggör en synlig filsynkronisering mellan ditt lokala filsystem och din butik

Slutligen, om du är en TextMate-användare eller en fan av SublimeText kanske du vill installera en kopia av Liquid Extension som hanterar syntaxmarkering för Liquid.

Tema Inspiration

Shopify-temabutiken är full av gratis teman som du kan ladda ner och lära av. Men när det gäller att starta ditt eget tema kanske du föredrar något mer avskalat som min egen panna på GitHub.

Medel

Slutligen är det några valmöjligheter som hjälper dig med din Shopify-temat utveckling:

• Mark Dunkleys cheat sheet - Varje mallvariabel och flytande logik, filter och output tag du någonsin behöver.
• Shopify temadokumentation - Nyligen omdesignad och en bra referenspunkt för temabyggnad
• Shopify e-handelsforum - Massor av ämnen som täcker allt från att skapa en butik till temaväxling och tips och tips om att driva en framgångsrik online-verksamhet

Nästa steg

Shopify är en bra och givande plattform för att designa för med den extra bonusen att Liquid blir allmänt antagen i andra verktyg som blandning och SiteLeaf. Vi har täckt mycket över dessa tre handledning. Framför allt hoppas du att du har hittat det intressant och användbart och att de idéer som presenteras här gör att du kan skapa bra e-handelsupplevelser för dig och dina kunder.