Share
In de eerste twee delen van deze serie heb ik je voorgesteld aan het e-commerce-platform van Shopify, de belangrijkste concepten uitgelegd, besproken hoe thema's zijn geconstrueerd en vervolgens naar een diepgaande blik op Liquid - the Shopify-sjabloontaal geleid.
In dit laatste deel zullen we bekijken hoe een beetje diepere kennis van Liquid je in staat zal stellen om je thema's nog flexibeler te maken, zodat je rijke en fantasierijke winkelontwerpen kunt leveren.
Laten we beginnen met kijken naar hoe we "alternatieve lay-outs" met groot effect kunnen gebruiken.
Een van de krachtigste functies van Liquid is het lay-outbestand dat we in deel één hebben bekeken. Ik beschrijf een lay-outbestand vaak als een "hoofdsjabloon". Meestal bevat dit bestand onze HTML-verklaringen, branding, navigatie en footer - in feite alle gemeenschappelijke elementen van onze site die we op elke pagina willen weergeven.
Alle weergegeven pagina's in een Shopify-thema, tenzij anders vermeld, zijn gebaseerd op deze hoofdsjabloon. Standaard is dit de theme.liquid bestand dat zich in de lay-outs map. Onze microsjablonen, te vinden in de templates map wordt weergegeven op het punt waar Shopify de content_for_layout Vloeibare tijdelijke aanduiding in ons lay-outbestand.
Om je geheugen op te frissen, is hier een heel eenvoudig voorbeeld van een lay-outbestand:
content_for_headershop.name - page_title "screen.css" | asset_url | stylesheet_tag content_for_layout
Zoals vermeld in deel één, moet een lay-outbestand in een Shopify-thema twee Liquid-uitvoerlabels bevatten, content_for_header en content_for_layout. De eerste wordt door Shopify gebruikt om code toe te voegen voor analyses en om snelle toegang tot het admingebied van uw winkel te bieden. De seconde, content_for_layout, wordt vervangen door de relevante sjabloon uit onze sjablonenmap, bijvoorbeeld de product.liquid sjabloon wordt geïnjecteerd wanneer we een productdetailpagina bekijken.
Lay-outs zijn een geweldige functie en helpen ons om thema's mooi en DROOG te houden. Er zijn echter momenten dat de elementen van uw standaard lay-outbestand moeten worden gewijzigd. Misschien wilt u een splash-pagina maken die geen "normale" branding en navigatie vereist. Het is mogelijk dat u mogelijk de gewenste resultaten behaalt met CSS, maar waarschijnlijk wilt u andere opmaak produceren. Hier komen alternatieve lay-outs om de hoek kijken.
Het creëren van een alternatieve lay-out is zeer eenvoudig. Het eerste wat u moet doen is een nieuw bestand maken en het een relevante naam geven en de .vloeistof uitbreiding. De bestandsnaam is aan jou. Wat belangrijk is, is dat je het opslaat in de lay-outs map in uw themamap. In dit bestand kunt u elke gewenste HTML (zoals HTML-verklaringen, CSS, JS-koppelingen, enz.) Plaatsen samen met de twee hierboven besproken placeholders.
Om dit lay-outbestand te gebruiken en de standaardwaarde effectief te negeren theme.liquid lay-outbestand gebruiken we de volgende Liquid-syntaxis in een van de microsjablonen:
% layout "alternatief"%
Notitie: u hoeft niet het .vloeistof uitbreiding. Wanneer het relevante microsjabloon wordt verwerkt door Shopify, wordt het weergegeven met alternative.liquid als het lay-outbestand.
Op dezelfde manier waarop we specifieke lay-outs kunnen dicteren die op onze microsjablonen kunnen worden toegepast, kunnen we vloeibare logica gebruiken om verschillende productsjablonen weer te geven. Er zijn een aantal manieren om dit in Liquid te bereiken - mijn voorkeursmethode is om producthandvatten te gebruiken. Als je ooit WordPress hebt gebruikt, kun je denken aan een product handvat op dezelfde manier als een naaktslak. Dit is een standaard product-URL van de A Book Apart-website om aan te tonen:
http://www.abookapart.com/products/responsive-web-design
In dit voorbeeld is de handvat van het product responsieve-web-design - het laatste element van de URL. Producthandvatten worden automatisch voor u gemaakt wanneer u een product toevoegt in de Shopify-beheerder en is gebaseerd op de naam die u invoert; hoofdletters worden vervangen door kleine letters en spaties met streepjes. U kunt ze uiteraard overschrijven als dat nodig is.
Telkens wanneer Shopify een productdetailpagina rendert, gebruikt deze standaard de product.liquid microsjabloon. Laten we zeggen dat we een andere productpagina willen aanbieden, alleen voor Ethan's boek om het echt te benadrukken. Om dit te doen, moeten we een paar wijzigingen aanbrengen in de product.liquid sjabloon.
Ethan Marcotte's Responsive Web Design op de door Shopify aangedreven A Book Apart-siteAls de product.liquid sjabloon heeft toegang tot alle gegevens met betrekking tot het momenteel bekeken product. We kunnen de volgende vraag stellen met behulp van een Liquid als uitspraak:
% if product.handle == "responsive-web-design"% % include "responsive-web-design"% % else% [Normale HTML-code voor product.liquid] % endif%
Door het toevoegen van de als verklaring, die we in deel twee van deze serie hebben bekeken, kunnen we bepalen welke markup wordt weergegeven. Simpel gezegd, als het product.handle is gelijk aan "responsive-web-design" we nemen het bestand genaamd responsieve-web-design.liquid. Als dat niet zo is, geven we gewoon de code die we al hebben in onze product.liquid sjabloon.
Dit voorbeeld introduceert ons bij Liquid snippets. Fragmenten leven in de toepasselijke naam snippets map en waarnaar wordt verwezen zonder de .vloeistof extensie bij gebruik van de Liquid-tag % include%.
Zoals de naam al doet vermoeden, gebruiken % include% zal letterlijk een stukje code opnemen in uw microsjabloon of lay-outbestand. In het bovenstaande voorbeeld bevat het bestand de alternatieve markup die vereist is om Ethan's boek met alle benodigde Liquid-code weer te geven om de gegevens over het product in de sjabloon te plaatsen.
Natuurlijk kunt u aangeven dat deze specifieke sjabloon naast Ethan ook voor een ander boek wordt gebruikt. Hier is een manier om dat te bereiken:
% if product.handle == "responsive-web-design" OF product.handle == "ontwerp-is-een-werk"% % include "responsive-web-design"% % else% [ Normale HTML-code voor product.liquid] % endif%
In dit geval wilt u misschien uw fragment hernoemen naar iets gepaster, d.w.z.. product-showcase.liquid.
Het is vermeldenswaard dat u geen mappen kunt nesten in uw fragmentenmap. Daarom heb ik de neiging mijn bestanden vooraf te voorzien van hun functie:
Accentsconagua
product-responsieve-web-design.liquidproduct-showcase.liquidcollecties-books.liquidHet gebruik van deze naamconventie maakt het vinden van fragmenten veel gemakkelijker, vooral omdat uw gebruik ervan toeneemt.
Een voorbeeld van hoe ik fragmenten op de site 8 Faces heb gebruikt om logische problemen op te lossen Ik gebruik vaak fragmenten op twee verschillende manieren. Ten eerste om code te scheiden in hanteerbare brokken en ten tweede voor elementen van een pagina die ik opnieuw moet gebruiken, zoals een pagineringblok.
Als algemene vuistregel hier is hoe ik beslis waar ik code moet toevoegen:
Een andere truc die ik met veel effect heb toegepast, is om een microsjabloon te behandelen als een view controller - een idee dat ik heb overgenomen uit veel van de MVC-frameworks die ik heb gebruikt. Dit kan een nieuw concept voor u zijn, dus laten we het in meer detail bekijken.
In de bovenstaande voorbeelden gebruiken we vloeibare logica om te controleren op een bepaalde producthandle in de product.liquid microsjabloon. Als het antwoord op onze als verklaring klopt, we nemen een fragment op, anders geeft Shopify het HTML-blok tussen de % else% en % stop als % labels.
Voor sommigen lijkt dit misschien een beetje rommelig en kan het na verloop van tijd moeilijk worden om te lezen, vooral als je standaard bent product.liquid markup groeit. Om het eenvoudiger te beheren, kunnen we eenvoudig onze standaardmarkering uit de template product.liquid halen en er een fragment voor maken - ik noem dit meestal product-default.liquid.
Naar aanleiding van deze benadering kan ons bestand product.liquid worden aangepast aan het volgende:
% if product.handle == "responsive-web-design"% % include "product-responsive-web-design"% % else% % include "product-default"% % endif%
Natuurlijk, naarmate uw behoeften toenemen, kan dit bestand groeien om andere controles en relevante bestanden op te nemen, afhankelijk van de resultaten. De opties zijn onbeperkt.
Het is de moeite waard om te onthouden dat het niet alleen producten zijn die handvatten hebben in Shopify, collecties en pagina's ook. Met dezelfde aanpak voor collecties kunnen we het volgende doen in onze collections.liquid sjabloon:
% if collection.handle == "css"% % include "collection-css"% % else% % include "collection-default"% % endif%
geval In plaats van als elsif anders Deze methode werkt erg goed als we alleen willen controleren op een bepaald handvat, of het nu een product of verzameling is, maar wat als we dat willen uitbreiden naar meerdere producten of collecties?
We hebben twee mogelijke benaderingen, de eerste is door onze als verklaring met behulp van elsif. Hier is een voorbeeld:
% if product.handle == "responsive-web-design"% % include "product-responsive-web-design"% % elsif product.handle == "ontwerp-is-een-werk"% % include "productontwerp-is-een-werk"% % else% % include "product-default"% % endif%
Dit voorbeeld controleert beurtelings om twee producthandvatten en alleen als geen van beide waar is, wordt het weergegeven product-default.liquid snipper.
Het is mogelijk om meerdere te gebruiken elsif statements in Liquid, maar het kan een beetje uitgebreid worden. Een alternatief, en ik denk dat een nettere benadering is om te gebruiken geval. Hier is het bovenstaande voorbeeld gerefactored:
% case product.handle% % when "responsive-web-design"% % include "product-responsive-web-design"% % wanneer "ontwerp-is-een-werk"% % include "product-ontwerp-is-een-werk"% % else% % include "product-standaard"% % endcase%
We kunnen ook een meer vage vergelijking maken met behulp van de operator Vloeistof bevat. Laten we zeggen dat we elk product dat het woord responsief heeft in zijn handle een ander fragment gebruiken. Dit is hoe we het zouden kunnen benaderen met behulp van een eenvoudige vloeistof als uitspraak:
% if product.handle bevat "responsive"% % include "product-responsive"% % else% % include "product-default"% % endif%
Het gebruik van deze methode zou betekenen dat we onze sjabloon niet hoeven aan te passen om een nieuwe toe te voegen elsif of geval voor meer boeken die "responsief" in hun titel bevatten.
Deze benaderingen kunnen ook worden gebruikt binnen de microsjablonen in uw thema. U zou het bijvoorbeeld kunnen gebruiken om elementen programmatisch te tonen en te verbergen. Voorbeelden hiervan zijn verkoopbadges, speciale aanbiedingen en gerelateerde producten.
Handgrepen kunnen ook erg handig zijn bij het werken met CSS en JavaScript. Velen van ons gebruiken de body class voor CSS en JavaScript-hooks en net als bij WordPress is het vrij eenvoudig om een aantal nuttige klassen aan ons lichaamselement toe te voegen in Shopify.
Hier zijn een paar ideeën:
Voeg de momenteel weergegeven sjabloonnaam toe aan de hoofdklasse:
Merk op dat we het handvatfilter gebruiken om onze uitvoer te zuiveren. Enkele voorbeelden hiervan zijn:
Voortbouwend op dit kunnen we de huidige productgreep ook toevoegen aan onze lichaamsklasse. Om dingen netjes en opgeruimd te houden, kunnen we een als verklaring om voorwaardelijk de productgreep toe te voegen alleen wanneer we een product bekijken:
Thema-instellingen, eenmaal onder de knie, zijn een verbazingwekkend krachtige functie van Shopify-thema's 
Met de Shopify Desktop Theme Editor voor Mac kunt u bestanden naadloos synchroniseren tussen uw lokale bestandssysteem en uw winkel 