Accentsconagua
Share
Zoals sommigen van jullie misschien weten van mijn vorige artikelen, is Shopify een op thema's gebaseerd gehost handelsplatform waarmee je online winkels kunt bouwen. Het is gestaag gegroeid in de afgelopen paar jaar en vandaag is het platform achter 400.000 bedrijven in ongeveer 175 landen.
Het platform van Shopify evolueert voortdurend en de afgelopen maanden zijn een aantal belangrijke functies gelanceerd, specifiek gericht op thema- en app-ontwikkelaars. In dit artikel zullen we een selectie van deze nieuwe functies en gereedschappen bekijken, waaronder:
Veel van de volgende voorbeelden zullen bespreken Vloeistof. Vloeistof is de sjabloontaal waarmee themaontwikkelaars tijdelijke aanduidingen en logica-constructies in hun sjablonen kunnen gebruiken die worden vervangen door liveweergavegegevens wanneer een pagina wordt aangevraagd en gerenderd. Het gebruikt een eenvoudige syntaxis die uitvoer (bijvoorbeeld een producttitel) en logica (bijv voor lus). Ik zal hier niet te veel ingaan op details, maar je kunt mijn 25 minuten durende screencast bekijken die veel gedetailleerder ingaat op hoe Liquid werkt.
En terwijl je hier bent, ben je mogelijk ook geïnteresseerd in de volgende inspiratiepoging voor thema's die beschikbaar zijn op Themeforest:
Laten we beginnen met te kijken naar een van de belangrijkste themagerelateerde veranderingen die onlangs plaatsvonden: de img_url Vloeistoffilter. Tot voor kort werden afbeeldingen gerenderd op basis van een reeks vooraf gedefinieerde benoemde grootten. Bijvoorbeeld:
product.featured_image | img_url: 'grande'
Hier vragen we om de afgebeelde afbeelding voor het product grande. Dit zou, in de veronderstelling dat het originele beeld één zijde had gelijk aan of groter dan 600px, het beeld renderen met de langere van de twee assen die 600px zijn.
Deze benoemde formaten zijn nu verouderd en terwijl ze nog steeds werken, zijn ze vervangen door een nieuwe set parameters, waaronder grootte, gewas, schaal, en formaat. Dit maakt het nu mogelijk om een hele reeks beeldgerelateerde manipulaties uit te voeren die voorheen niet beschikbaar waren voor de thema-ontwikkelaars van Shopify.
Ik zal de gebruiken img_url Vloeistoffilter in deze voorbeelden, maar de technieken zullen ook werken met de volgende andere afbeelding gerelateerde objecten:
Laten we beginnen met te kijken hoe we het formaat van een afbeelding kunnen aanpassen. Om dit te doen, vervangen we de nu verouderde afbeelding naam met een specifieke grootte in pixels. Hier is een voorbeeld:
product.featured_image | img_url: '450x450'
Als u de bovenstaande syntaxis gebruikt, heeft u nu de controle over de afbeeldingsdimensies in handen: hier hebben we zowel de breedte als de hoogte opgegeven (in die volgorde).
U kunt ook alleen een breedte opgeven:
product.featured_image | img_url: '450x'
of alleen een hoogte:
product.featured_image | img_url: 'x450'
Als u één waarde opgeeft, berekent Shopify de resterende dimensie op basis van de oorspronkelijke afbeeldingsgrootte, waarbij de oorspronkelijke beeldverhouding intact blijft.
Als je teruggaat naar ons oorspronkelijke voorbeeld, zou je denken dat dit zou resulteren in een 450x450-versie van je afbeelding die wordt weergegeven. Dit is echter niet altijd het geval.
Dit verzoek zou resulteren in een perfect vierkant, alleen als aan beide van de volgende voorwaarden is voldaan:
Als beide voorwaarden waar zijn, wordt een vierkant vierkant van 450x450 weergegeven. Als dit niet het geval is, wordt het formaat van Shopify aangepast met dezelfde logica als wanneer u alleen hoogte of breedte hebt opgegeven. De langste zijde wint in deze situatie en wordt dienovereenkomstig geschaald.
Als u vierkante afbeeldingen wilt maken, kunt u de bijsnijdparameter gebruiken om ervoor te zorgen dat de afmetingen van de resulterende afbeelding overeenkomen met de gevraagde dimensies. Als de volledige afbeelding niet past in de door u gevraagde dimensies, geeft de bijsnijparameter aan welk deel van de afbeelding moet worden weergegeven. Er zijn drie geldige opties:
Deze functionaliteit is beschikbaar sinds eind 2016, maar begin 2017 is een update uitgebracht die nog meer flexibiliteit toevoegt. Thema's die beschikbaar zijn in de Shopify Theme Store, inclusief het premium Empire-thema dat hieronder is afgebeeld, maken allemaal gebruik van deze technieken. Het installeren van een gratis thema is een geweldige manier om meer te leren over het implementeren van deze ideeën.
srcset om te beschrijven hoe je hiervan kunt profiteren in je eigen thema's:
% voor product in collection.products% % assign image = product.featured_image%% endfor%
In dit voorbeeld gebruiken we de toewijzen Vloeistoffunctie om een variabele genaamd te maken beeld dat is gelijk aan de afbeelding met de momenteel bekeken producten (die is ingesteld in de Shopify-beheerder). We kunnen dan vloeibare logica gebruiken om onze te maken srcset aangiften met in dit geval de breedte eigendom:
% if image.width> 640% image.src | img_url: '640x' 640w % endif%
Het goede nieuws is dat themaontwikkelaars zich geen zorgen hoeven te maken over het opnieuw uploaden van al hun afbeeldingen, omdat Shopify elke afbeelding op het platform heeft geïndexeerd.
Twee andere parameters die het waard zijn om te bespreken zijn schaal en formaat. Met de schaalparameter kunt u de pixeldichtheid van de afbeelding opgeven. U kunt naargelang uw behoeften ofwel 2x of 3x opschalen:
product.image | img_url: '400x400', schaal: 2
De formaat parameter laat u specificeren welke bestandsindeling moet worden gebruikt voor de afbeelding. Momenteel kunt u een van beide opgeven jpg of pjpg (progressive JPEG):
product.image | img_url: '400x400', formaat: 'pjpg'
U kunt ook van deze techniek profiteren voor afbeeldingen in de map met items van uw thema. Om dit te doen, gebruikt u de asset_img_url filter. Hier is een voorbeeld dat ook gebruik maakt van de img_tag filter dat resulteert in een volledig gevormd filter img element dat wordt weergegeven in de sjabloon:
logo.jpg '| asset_img_url: '300x' | img_tag
Deze nieuwe beeldmanipulatiefilters en beeldeigenschappen maken het uiteindelijk mogelijk om zo flexibel te zijn als je nodig hebt als het gaat om het omgaan met afbeeldingen, het sturen van kunst en het vriendelijk zijn voor de eindgebruikersgegevensplannen..
Eind 2016 introduceerde Shopify "secties". Met deze nieuwe functie kunnen thema-ontwikkelaars een aangepaste beheerdersinterface maken waarmee winkeleigenaren gemakkelijk contentsecties zoals producten, diavoorstellingen, video's of productverzamelingen kunnen toevoegen, opnieuw ordenen en verwijderen. Dit zijn veelvoorkomende gebruiksscenario's, maar u kunt deze functie letterlijk gebruiken om winkeleigenaren toe te staan elk type inhoud toe te voegen en te bewerken. Alle wijzigingen in de beheerder kunnen in realtime worden bekeken en zodra ze zijn opgeslagen, zijn ze live in de winkel.
Secties kunnen statisch worden opgenomen in de sjablonen van een thema (zoals de kop- en voettekst), of ze kunnen dynamisch worden toegevoegd en verwijderd, via de admin-interface, op de startpagina van een thema. In het bovenstaande voorbeeld, waar we binnenkort op ingaan, kunt u zien hoe we een statische sectie kunnen bewerken die in de voettekst van de winkel wordt weergegeven. U zult ook de knop "Sectie toevoegen" zien, die ons in staat stelt om dynamische secties toe te voegen, meer later aan de startpagina.
Sectiesjablonen bevinden zich in de map met nieuwe secties en er kan op dezelfde manier naar fragmenten worden verwezen. Als ons bestand zich op secties / promotie.liquid bevond, zouden we het als volgt vermelden:
% sectie "promotie"%
Notitie: je hebt het niet nodig .vloeistof extensie zoals gebruikelijk is bij fragmenten in Shopify-thema's. Laten we een voorbeeld bekijken om de kracht van secties te verduidelijken. Het volgende is de inhoud van secties / footer.liquid:
section.settings.title
section.settings.description
% schema% "naam": "Voettekstbevordering", "instellingen": ["id": "titel", "type": "tekst", "label": "Promotietitel", "standaard": "Titel", "id": "description", "type": "richtext", "label": "Voeg uw onderstaande beschrijving toe", "standaard": "Voeg hier je beschrijving toe
"] % endschema% % stylesheet% % endstylesheet% % javascript% % endjavascript%
Als u bekend bent met de thema-instellingen van Shopify, ziet een deel ervan er misschien heel bekend uit. Het bevat een combinatie van HTML, vloeibare tijdelijke aanduidingen en JSON, vergelijkbaar met die in settings_schema.json. Overigens is de functionaliteit van settings_schema.json nog steeds over: secties voegen gewoon een extra laag functionaliteit toe.
Bovenaan de sjabloon staat de HTML-uitvoer die ik wil genereren wanneer de sjabloon de sectie tegenkomt bij het renderen. In elk van de h1 en p elementen zijn vloeibare tijdelijke aanduidingen die het nieuwe gebruiken section.settings. [x] uitvoersyntaxis. In onze voorbeelden gaat ons sectiesjabloon zoeken naar gegevens die overeenkomen met section.settings.title en section.settings.description.
Tot nu toe leuk en eenvoudig, maar hoe weet Shopify waarmee deze tijdelijke aanduidingen moeten worden gevuld? Dit komt allemaal neer op de JSON die ik eerder noemde, genesteld tussen de opening en sluiting % schema% labels.
"naam": "Voettekstbevordering", "instellingen": ["id": "titel", "type": "tekst", "label": "Promotietitel", "standaard": "Titel", "id": "description", "type": "richtextext", "label": "Voeg uw onderstaande beschrijving toe", "standaard": "Voeg hier je beschrijving toe
"]
Om ervoor te zorgen dat onze sectie verschijnt in het gedeelte "Thema aanpassen" van de beheerder van de winkel, moeten we deze een ID geven: dit doen we door de "naam" -waarde op het hoogste niveau van de JSON te definiëren.
Vervolgens hebben we het instellingenknooppunt dat, in dit voorbeeld, twee subknooppunten heeft. Beide bevatten eigenschappen van ID kaart, type, label, en standaard. Elk van deze, afhankelijk van hun waarde, bepaalt hoe de admin-interface wordt weergegeven. Laten we ze om beurten eens bekijken:
Een tekstreeks die intern wordt gebruikt. Het is vermeldenswaard dat, hoewel de ID's uniek moeten zijn in een sectiebestand, ze niet uniek hoeven te zijn in alle sectiebestanden. Als zodanig is het perfect OK om een ID kaart van titel in bestanden met meerdere secties. Sectie-instellingen komen ook niet in conflict met de instellingen in settings_schema.json.
Dit vertegenwoordigt het besturingselement dat in de beheerder wordt weergegeven. De meest gebruikte opties zijn als volgt:
% endfor% tekst: Tekstvelden met één regeltextarea: Meerregelige tekstgebiedenrijke text: Een rich text-editorimage_picker: Beeld uploadtradio-: Radio knoppenkiezen: Selectie drop-downscheckbox: CheckboxesVoor sommige hiervan is extra JSON vereist. Het selectiefunctie vereist bijvoorbeeld opties om het te vullen. Meer informatie over hoe deze werken, en andere besturingselementen die u mogelijk zou willen overwegen, zijn beschikbaar in de Shopify-documenten.
Dit is het HTML-label dat wordt gegenereerd in de beheerder boven uw besturingselement.
Met deze instelling kunt u tijdelijke aanduidingen toevoegen aan het besturingselement. Het is vermeldenswaard dat dit de waarden zijn die worden gebruikt totdat de sectie is bijgewerkt door de eigenaar van de winkel.
Mijn voorbeeld is vrij eenvoudig en zal twee besturingselementen maken. De eerste is een tekstveld van één regel dat wordt weergegeven in de h1 element in de sjabloon, de tweede is een RTF-vak met de opties vet, cursief en URL.
Er zijn veel andere opties die u kunt gebruiken om de beheerder van uw winkel te pimpen, waaronder het toevoegen van op maat gemaakte besturingselementen voor URL's, collectie- en productvermeldingen, evenals aangepaste HTML. We zullen ze niet allemaal in dit artikel bekijken, maar ik moedig je aan om je te verdiepen in de mogelijkheden.
U zult ook merken dat u aangepaste CSS en JavaScript kunt toevoegen aan sectiebestanden met behulp van de volgende Liquid-tags:
% stylesheet% % endstylesheet%
% javascript% % endjavascript%
Je denkt misschien dat dit een heleboel potentieel opgeblazen inline CSS en JavaScript kan toevoegen aan je thema. Het goede nieuws is dat Shopify alle CSS en JS samenvoegt tot een enkel bestand dat via de Liquid wordt geïnjecteerd content_for_header placeholder. Het platform zorgt ervoor dat slechts één exemplaar ooit wordt opgenomen, zelfs als dat gedeelte meerdere keren op een pagina wordt gebruikt. Meer informatie over hoe scripts worden uitgevoerd, is beschikbaar in de Shopify-documenten.
Nadat u uw besturingselementen en namen in het JSON-bestand hebt ingesteld, kunt u de sectie opnemen in elke relevante sjabloon. Secties kunnen worden toegevoegd aan een lay-outbestand (de buitenste laag van een pagina) of een afzonderlijk sjabloonbestand. De Shopify-beheerder geeft de bedieningselementen contextueel weer, d.w.z. alleen wanneer de relevante sjabloon wordt bekeken in de editor "Customize theme". Veranderende waarden zullen resulteren in een real-time update in de admin: dit is een geweldige manier om te zien hoe goed de lay-out zal beïnvloeden voordat je live gaat updaten en duwen.
Als u de gegenereerde HTML bekijkt, ziet u dat secties zijn ingepakt in een div element:
De id van de div heeft de indeling van
Shopify-sectie- [id], waarbij id een unieke ID voor dat element voor de pagina is en zonder op te geven een klasse van toevoegtShopify-sectie. U kunt ook uw eigen klasse aan het div-element toevoegen door in uw instellingen een klassewaarde op te geven. Hier is hoe het naar ons voorbeeld hierboven zou kijken:"id": "title", "type": "text", "Class": "title", "label": "Promotietitel", "standaard": "Titel"Deze toevoeging zou het volgende tot gevolg hebben:
Secties zijn een geweldige aanvulling op Shopify-thema's, omdat thema-ontwikkelaars hierdoor contextuele instellingen in een hele winkel kunnen inschakelen. Ze komen echter echt tot hun recht als ze samen werken met de nieuwe blokkenfunctionaliteit.
3. Blokken
Blokken bouwen op het sectiesconcept en geven winkeleigenaren de mogelijkheid om meerdere secties aan de startpagina van een winkel toe te voegen. Laten we eens kijken hoe we blokken kunnen gebruiken om de mogelijkheid toe te voegen om een aantal promotievakken aan de startpagina toe te voegen. Dit is het voorbeeldbestand waarmee we gaan werken:
% voor block in section.blocks% % if block.type == "promo-box"%block.settings.title
block.settings.description
% elsif block.type == "image-picker"%% endif% % endfor% % schema% "naam": "Promotional Blocks", "max_blocks": 5, "presets": ["name": "Promotional Blocks", "category": "Aangepaste inhoud van de startpagina"], "blokkeert": ["type": "promo-box", "naam": "Promotiekast", "limiet": 1, "instellingen": ["id": " title "," type ":" text "," label ":" Title "," default ":" uw titel hier ", " id ":" description "," type ":" textarea "," label " : "Description", "default": "your description here"], "type": "image-picker", "name": "Promo Image", "settings": ["id": "promo -image "," type ":" image_picker "," label ":" Promo Image "]] % endschema% % stylesheet% % endstylesheet% % javascript% % endjavascript%
Ik zal eerlijk zijn, het kostte me meer dan een tijdje om mijn hoofd rond te krijgen hoe blokken werken. Zodra je echter begrijpt hoe de stukjes bij elkaar passen, krijg je een hele reeks nieuwe mogelijkheden voor je thema-ontwikkeling.
In essentie kan de startpagina uit meerdere secties bestaan, waarbij elke sectie meerdere blokken kan bevatten. De eigenaar van de winkel kan vervolgens deze blokken opnieuw ordenen om een lay-out te maken die het beste aansluit op hun behoeften. Laten we eens kijken hoe dit verschilt van het vorige voorbeeld om bepaalde concepten te verduidelijken.
Allereerst zul je merken dat er een vloeistof is
voorlus bovenaan de sjabloon:% voor block in section.blocks% % if block.type == "promo-box"%block.settings.title
block.settings.description
% elsif block.type == "promo-image"%Omdat deze meerdere elementen overgeleverd zijn aan de winkeleigenaar, kunnen we als thema-ontwikkelaars niet weten wat we moeten produceren. We moeten daarom een Liquid-lusstructuur gebruiken, in dit geval een
voorloop, waarmee we alle blokken in een bepaald gedeelte om beurten kunnen herhalen en de relevante gegevens kunnen uitvoeren.In het bovenstaande fragment zie je dat ik een eenvoudig programma gebruik
if / elsifverklaring die controleert op het huidige bloktype. We kunnen het type zelf in het schema instellen, zoals we binnenkort zullen zien. In dit voorbeeld gebruiken weelsifom dubbel zeker te zijn van het type waar we naar zoeken. Als je maar twee verschillende bloktypes had, zoals we in dit voorbeeld doen, zou je gewoon kunnenanderszoals je weet is dit het enige andere alternatief: dat zei dat het geen kwaad meer om meer defensief te zijn.Afhankelijk van ons type wordt een ander gedeelte van HTML uitgevoerd. Voor het uitvoeren van de waarde die aan het blok is gekoppeld, gebruiken we de volgende syntaxis:
block.settings. [id]
[ID kaart]vertegenwoordigt het id dat in ons schema aan dat specifieke element is gegeven, dat we hierna zullen bespreken.Als je naar het schema gaat, zul je enkele vertrouwde en sommige onbekende elementen opmerken. Laten we beginnen met te kijken naar het openingsgedeelte:
"name": "Promotional Blocks", "max_blocks": 5, "presets": ["name": "Promotional Blocks", "category": "Custom Homepage Content"]Laten we elk onderdeel beurtelings bekijken:
"naam": "Promotieblokken": De naam die voor deze groep besturingselementen in de Shopify-beheerder wordt weergegeven"max_blocks": 5: Het totale aantal blokken dat in dit gedeelte kan verschijnen. Dit werkt samen met de limietinstelling van elk blok die we later zullen bespreken. Zodra het maximale aantal blokken is bereikt, kunt u niet meer toevoegen in de beheerder."Presets": Een reeks standaardinstellingen voor de dynamische sectie. In het bovenstaande voorbeeld willen we dat ons dynamische element wordt weergegeven onder de titel 'Promotieblokken' en in de categorie 'Aangepaste inhoud homepage'. Met de categoriewaarde kunnen we verschillende secties in een groep in de beheerder groeperen.Zodra we de hebben gedefinieerd
naam,max_blocks, en vooraf ingestelde waarden kunnen we onze aandacht richten op de bedieningselementen die we in de beheerder zouden willen weergeven. Deze worden gedefinieerd in de blokkensectie van het schema:"blokken": ["type": "promo-box", "naam": "Promotionele box", "limiet": 1, "instellingen": ["id": "title", "type": " tekst "," label ":" Titel "," standaard ":" uw titel hier ", " id ":" description "," type ":" textarea "," label ":" Description "," default " : "uw beschrijving hier"], "type": "promo-image", "name": "Promo Image", "settings": ["id": "promo-image", "type": "image_picker", "label": "Promo Image"]]Elk blok heeft een aantal vooraf gedefinieerde waarden:
"type": Een naam die aan deze specifieke groep besturingselementen wordt gegeven. Dit kan van alles zijn maar idealiter iets dat voor zich spreekt."naam": De naam van deze specifieke groep besturingselementen die u in de beheerder zou willen weergeven"begrenzing": Het aantal keren dat u deze specifieke groep besturingselementen wilt gebruiken, dat wil zeggen dit blok, dat in de sectie wordt weergegeven. We zullen dit binnenkort verder bekijken.Nadat u deze presets hebt gedefinieerd, kunt u verder gaan met het definiëren van de bedieningselementen die u in de admin wilt weergeven. Deze zijn gedefinieerd in instellingen:
"instellingen": ["id": "titel", "type": "tekst", "label": "Titel", "standaard": "uw titel hier", "id": "beschrijving", "type": "textarea", "label": "Description", "default": "uw beschrijving hier"]In ons voorbeeld hebben we twee mogelijke bloktypen die we aan deze sectie kunnen toevoegen. De eerste is het bloktype
promo-boxen de tweede is het bloktypepromo-afbeelding: beide hebben we onszelf gedefinieerd.Elk blok kan ook een eigen set instellingen definiëren die uit een of meer besturingselementen kan bestaan. In het bovenstaande voorbeeld, het blok van het type
promo-boxheeft twee besturingselementen die worden weergegeven wanneer deze aan de sectie worden toegevoegd. De eerste is een tekstveld en de tweede is eentextarea. Om een of andere reden kunnen blokken derijke texteditor die we in ons vorige voorbeeld hebben gebruikt, maar eentextareakunt u HTML toevoegen zoals vereist. Net als bij statische secties, moeten we ook en definiërenID kaart,type,label, enOmschrijving.Er zijn een aantal typen beschikbaar, waaronder:
tekst: Tekstvelden met één regeltextarea: Meerregelige tekstgebiedenimage_picker: Beeld uploadtradio-: Radio knoppenkiezen: Selectie drop-downscheckbox: Checkboxesreeks: Bereik schuifregelaarsIn het bovenstaande voorbeeld hebben we ook een afbeeldingsbesturingselement gedefinieerd met behulp van de
image_pickerwaarde. Hiermee kan de winkeleigenaar een afbeelding uploaden of een afbeelding kiezen die al naar de winkel is geüpload. Omdat dit een eigen type, naam en instellingen heeft, wordt de afbeeldingskiezer weergegeven als een andere optie die de winkeleigenaar kan toevoegen aan dit dynamische gedeelte.Ik noemde eerder dat de
promo-boxblok heeft een limietwaarde van 1. Hopelijk onthoud je ook dat we het maximumaantal blokken in deze sectie als 5 hebben gedefinieerd. Daarom is het in dit scenario mogelijk om een sectie te hebben die bestaat uit:
- 1 "promo-box" en 4 "promo-images"
- 5 "promo-afbeeldingen"
Nadat een combinatie is bereikt, kunt u geen extra blokken toevoegen aan de sectie, tenzij u een bestaand blok verwijdert.
Zodra u uw sjabloon en schema gereed hebt en eventuele aanvullende CSS en JavaScript, moet u een laatste stuk code toevoegen aan de index.liquid-sjabloon van uw thema om de functionaliteit van het blok te activeren. Door toe te voegen
content_for_indexnaar index.liquid Shopify weet elke sectie op te nemen waarvoor een of meer presets zijn gedefinieerd. Elke voorinstelling wordt dan een dynamische sectie die een verkoper vervolgens aan zijn themahomepage kan toevoegen.In de onderstaande afbeelding ziet u het eindresultaat. Nadat we op de beheerder hebben geklikt, kunnen we onze links of promotievlakken aan het dynamische gedeelte toevoegen. In dit geval heb ik Promotionele blokken gekozen en kan ik vervolgens extra blokken toevoegen - maar alleen promobeelden zoals we een limiet van 1 hebben opgegeven in ons schema voor het type "promotionele box".
Het is vermeldenswaard dat u niet alleen dynamische blokken binnen een sectie opnieuw kunt rangschikken, maar u kunt ook de bovenliggende secties opnieuw ordenen op de startpagina zoals u dat wilt. Een ding om te onthouden is dat er een harde limiet van 25 secties is die aan de startpagina kan worden toegevoegd.
Statische en dynamische secties en de daaropvolgende blokken zijn een zeer krachtig hulpmiddel. Het kostte me een tijdje om de concepten echt te begrijpen, maar eenmaal erop geklikt, begin je het potentieel dat ze bieden echt te waarderen.
4. Themakit en leisteen
Eén vraag die ik vaak krijg bij de eerste keer dat Shopify thema-ontwikkelaars zijn, is hoe je het beste een ontwikkelomgeving kunt opzetten om met het platform te werken: vandaag zijn er twee geweldige opties die je aan de gang zullen krijgen.
Vorig jaar bracht het thema-team van Shopify Shopify Theme Kit uit. Themakit is een enkel binair hulpprogramma voor opdrachtregels (werkt op Windows, Linux en macOS) waarmee u na installatie:
- Upload thema's naar meerdere omgevingen
- Thema-items uploaden en downloaden
- Kijk voor lokale wijzigingen en upload automatisch naar het Shopify-platform
Met de Themakit kunnen thema-ontwikkelaars werken met hun vertrouwde tools (teksteditor, preprocessors, enz.) En kunnen wijzigingen worden gesynchroniseerd op de achtergrond van een Shopify-ontwikkelingswinkel. Als je nog niet eerder naar Shopify hebt gekeken vanuit een thema-bouwperspectief, dan ben je misschien niet op de hoogte van ontwikkelingswinkels.
In wezen zijn het volledig uitgeruste Shopify-winkels met één verschil: u kunt geen echte betalingen doen. U kunt echter een "dummy-betalingsgateway" toevoegen om de volledige uitcheckflow naar een klant te demonstreren. Je kunt zoveel ontwikkelingswinkels maken als je nodig hebt via een gratis partneraccount. Zodra u klaar bent om te starten, kunt u eenvoudig de winkel upgraden naar een betaald plan of het thema implementeren in een andere winkel.
Themakit biedt een aantal nuttige opdrachten waarmee u kunt werken met thema's terwijl u in een lokale ontwikkelomgeving werkt. Na de installatie kunt u de
kijk maarcommando dat een proces start om uw directory te controleren op wijzigingen en deze te uploaden naar Shopify.Shopify kan niet echt "lokaal" zijn (vandaar de citaten), omdat je een internetverbinding nodig hebt om met een ontwikkelwinkel te werken, maar de integratie van de Themakit met je workflow geeft het gevoel dat het "lokaal" is. Gebruikt in combinatie met tools zoals Prepros kunt u ook profiteren van het live opnieuw laden van uw ontwikkelwinkel, evenals bestandsminificatie en concatenatie.
In 2017 lanceerde Shopify ook Slate: een open source thema-steiger en commandoregeltool voor het ontwikkelen van Shopify-thema's. Het is ontworpen om uw ontwikkelingsworkflow te ondersteunen en het proces van ontwikkelen, testen en implementeren van thema's naar Shopify-winkels te versnellen.
Terwijl ThemeKit je op één gebied helpt, gaat Slate veel verder. Naast het bieden van de themasynchronisatiemogelijkheden van ThemeKit (ThemeKit is eigenlijk een onderdeel van Slate), kunt u het ook in meerdere omgevingen tegelijk implementeren, skeletsjablonen voor een nieuw thema maken en stylesheets en scripts op een flexibele manier indelen.
De steigersjablonen van Slate zijn "opzettelijk leeg" (onderstaande homepage): Standaard Liquid-tags en logica die waarschijnlijk op elke sjabloon worden gebruikt, zijn opgenomen met weinig tot geen markeringen, klassen of andere code die u moet verwijderen. Het is bedoeld als een volledig functionerend vertrekpunt: het enige wat u hoeft te doen is de lege velden invullen en u bent klaar voor gebruik.
Ten slotte zijn er een aantal JavaScript- en Sass-helpers die u kunt gebruiken, of niet als u het volgende moet opnemen:
JavaScript
- Trap focus
- Responsieve tabellen en video's
- Valuta opmaken
- Afbeelding helpers
- Productvarianten
- Kar helpers
- Sectie-evenementen
CSS
- Breekpunten en mediaquery's
- rooster
- SVG-pictogrammen
- Responsieve tabellen
- Lege staten
- Sass-mixins
5. Polaris
In mei 2017 heeft Shopify het uiterlijk van alle applicaties bijgewerkt: zowel op desktop als mobiel. Om dit ambitieuze doel te bereiken, heeft het UX-team bij Shopify een nieuw ontwerpsysteem ontwikkeld, Polaris genaamd. Het is een compleet systeem dat niet alleen is bedoeld voor intern gebruik bij Shopify, maar ook voor Shopify-partners die interfaces bouwen voor apps die integreren via de Shopify-API. Het doel is om iedereen de bouwstenen te geven om interfaces te maken die naadloos lijken op de kern van Shopify admin.
Een van de belangrijkste kenmerken van Polaris is de uitgebreide componentbibliotheek. Elk onderdeel bevat uitleg over het probleem dat het oplost, aanbevelingen voor de beste werkwijze, gebruiksrichtlijnen en voorbeeldcode voor zowel HTML als React. Alle componenten zijn ook beschikbaar als een schetsbestand.
De bibliotheek bevat componenten voor:
- Acties: knoppen, acties en schakelingen
- Afbeeldingen en pictogrammen: ba
% endif% % endfor% % schema% "naam": "Promotional Blocks", "max_blocks": 5, "presets": ["name": "Promotional Blocks", "category": "Aangepaste inhoud van de startpagina"], "blokkeert": ["type": "promo-box", "naam": "Promotiekast", "limiet": 1, "instellingen": ["id": " title "," type ":" text "," label ":" Title "," default ":" uw titel hier ", " id ":" description "," type ":" textarea "," label " : "Description", "default": "your description here"], "type": "image-picker", "name": "Promo Image", "settings": ["id": "promo -image "," type ":" image_picker "," label ":" Promo Image "]] % endschema% % stylesheet% % endstylesheet% % javascript% % endjavascript%
