Accentsconagua
Share
Som noen av dere kanskje vet fra mine tidligere artikler, er Shopify en temabasert hosted handelsplattform som gjør at du kan bygge nettbutikker. Det har vært jevnt voksende de siste årene, og i dag er plattformen bak 400 000 bedrifter i rundt 175 land.
Shopify-plattformen utvikler seg kontinuerlig, og i løpet av de siste månedene har en rekke viktige funksjoner blitt lansert, spesielt rettet mot tema- og apputviklere. I denne artikkelen ser vi på et utvalg av disse nye funksjonene og verktøyene, inkludert:
Mange av de følgende eksemplene vil diskutere Væske. Væske er malingsspråket som gjør det mulig for utviklere å bruke plassholdere og logikkkonstruksjoner i sine maler som vil bli erstattet med live store data når en side blir bedt om og gjengitt. Den bruker en enkel syntaks som tillater utdata (for eksempel en produkttittel) og logikk (for eksempel a til loop). Jeg vil ikke gå inn for mange detaljer her, men du kan se min 25 minutters screencast som går inn i mye mer detalj om hvordan Liquid fungerer.
Og mens du er her, kan du også være interessert i følgende inspirasjonspost, for temaer som er tilgjengelige på Themeforest:
La oss begynne med å se på en av de store temarelaterte endringene som skjedde nylig: img_url Flytende filter. Inntil nylig ble bilder gjengitt basert på et sett med forhåndsdefinerte navngitte størrelser. For eksempel:
product.featured_image | img_url: 'grande'
Her ber vi om det kjente bildet for produktet i størrelse grande. Dette ville, forutsatt at det opprinnelige bildet hadde en side lik eller større enn 600px, gjør bildet med lengre av de to aksene som er 600px.
Disse navngitte størrelsene er nå avviklet, og mens de fortsatt vil fungere, har de blitt erstattet av et nytt sett med parametere, inkludert størrelse, avling, skala, og format. Dette gjør det nå mulig å gjøre en hel rekke bilderelaterte manipuleringer som tidligere ikke er tilgjengelige for Shopify-temautviklere.
Jeg skal bruke img_url Væskefilter i disse eksemplene, men teknikkene vil også fungere med følgende andre bilderelaterte objekter:
La oss begynne med å se på hvordan vi kan endre størrelsen på et bilde. For å gjøre dette, erstatter vi det nå utdaterte bildet Navn med en bestemt størrelse i piksler. Her er et eksempel:
product.featured_image | img_url: '450x450'
Ved å bruke ovenstående syntaks plasserer du kontrollen av bildedimensjonene i hendene: Her har vi angitt både bredde og høyde (i den rekkefølgen).
Du kan også spesifisere bare en bredde:
product.featured_image | img_url: '450x'
eller bare en høyde:
product.featured_image | img_url: 'x450'
Når du spesifiserer en enkelt verdi, beregner Shopify den gjenværende dimensjonen basert på den opprinnelige bildestørrelsen, slik at det opprinnelige bildens aspektforhold holdes intakt.
Hvis du går tilbake til vårt opprinnelige eksempel, kan du tro at det ville føre til at en 450x450-versjon av bildet ditt blir gjengitt. Dette er imidlertid ikke alltid tilfelle.
Denne forespørselen vil resultere i et perfekt firkant, bare hvis begge følgende betingelser er oppfylt:
Hvis begge forholdene er sanne, vil et 450x450 kvadratbilde bli gjengitt. Hvis ikke, vil Shopify endre størrelsen på den med samme logikk som om du bare har angitt høyde eller bredde. Den lengste siden vinner ut i denne situasjonen og skaleres tilsvarende.
For å opprette firkantede bilder kan du bruke beskjæringsparameteren for å sikre at de resulterende bildens dimensjoner samsvarer med de forespurte dimensjonene. Hvis hele bildet ikke passer inn i de forespurte dimensjonene, angir beskjæringsparameteren hvilken del av bildet som skal vises. Det er tre gyldige alternativer:
Denne funksjonaliteten har vært tilgjengelig siden slutten av 2016, men i begynnelsen av 2017 ble det gitt en oppdatering som ga enda mer fleksibilitet. Temaer som er tilgjengelige i Shopify Theme Store, inkludert premium Empire-temaet nedenfor, bruker alle disse teknikkene. Å installere et gratis tema er en fin måte å lære mer om hvordan du implementerer disse ideene.
srcset å skissere hvordan du kan dra nytte av dette i dine egne temaer:
% for produktet i collection.products% % assign image = product.featured_image%% endfor%
I dette eksemplet bruker vi tildele Væskefunksjon for å opprette en variabel som kalles bilde som er lik det kjente bildet som vises for øyeblikket (som er angitt i Shopify admin). Vi kan da bruke Liquid Logic til å lage vår srcset erklæringer som bruker, i dette tilfellet, bredde eiendom:
% hvis image.width> 640% image.src | img_url: '640x' 640w % endif%
Den gode nyheten er at temautviklere ikke trenger å bekymre seg for å laste opp alle bildene sine, da Shopify har indeksert hvert bilde på plattformen.
To andre parametere som er verdt å diskutere er skala og format. Skaleparameteren lar deg angi bildepunktets tetthet. Du kan skala opp enten 2x eller 3x, avhengig av dine behov:
product.image | img_url: '400x400', skala: 2
De format parameteren lar deg spesifisere hvilket filformat som skal brukes til bildet. For øyeblikket kan du spesifisere enten jpg eller pjpg (progressiv JPEG):
product.image | img_url: '400x400', format: 'pjpg'
Du kan også dra nytte av denne teknikken for bilder som ligger i temaets eiendomsmappe. For å gjøre dette bruker du asset_img_url filter. Her er et eksempel som også gjør bruk av img_tag filter som vil resultere i en fullstendig formet img element blir gjengitt i malen:
logo.jpg '| asset_img_url: '300x' | img_tag
Disse nye filmanipuleringsfiltrene og bildegenskapene gjør det endelig mulig å være så fleksibel som du trenger å være når det gjelder å håndtere bilder, kunstretninger og være vennlig med sluttbrukernes dataplaner.
I slutten av 2016 innførte Shopify "Seksjoner". Denne nye funksjonen gjør det mulig for utviklere å lage et tilpasset admingrensesnitt som gjør at eiere kan enkelt legge til, ombestille og fjerne innholdsdeler som produkter, lysbildefremvisninger, videoer eller produktsamlinger. Dette er vanlig bruk, men du kan bokstavelig talt bruke denne funksjonaliteten slik at butikkeiere kan legge til og redigere alle typer innhold. Alle endringer i administrasjonen kan ses i sanntid, og en gang lagret, vil være i butikken.
Seksjoner kan inkluderes statisk i temaets maler (som topptekst og bunntekst), eller de kan dynamisk legges til og fjernes via admingrensesnittet på et temaets hjemmeside. I det ovennevnte eksempelet, som vi vil gå inn på kort tid, kan du se hvordan vi kan redigere en statisk seksjon som vil vises i bunnteksten i butikken. Du vil også merke "Add Section" -knappen som gjør at vi kan legge til dynamiske seksjoner, mer om dem senere, til hjemmesiden.
Seksjonsmaler ligger i den nye seksjonsmappen og kan refereres på samme måte som utdrag. Hvis vår fil var plassert på seksjoner / promotion.liquid, ville vi referere det som følger:
% seksjon "forfremmelse"%
Merk: du trenger ikke .væske utvidelse som er vanlig med utdrag i Shopify-temaer. La oss ta en titt på et eksempel for å bidra til å avklare kraften i seksjoner. Følgende er innholdet i seksjoner / footer.liquid:
section.settings.title
section.settings.description
% schema% "navn": "Footer Promotion", "settings": ["id": "tittel", "type": "tekst", "label": "Promotion Title" "Tittel", "id": "beskrivelse", "type": "richtext", "label": "Legg til beskrivelse nedenfor", "standard": "Legg til beskrivelsen din her
"] % endschema% % stylesheet% % endstylesheet% % javascript% % endjavascript%
Hvis du er kjent med Shopify-temainnstillinger, kan noe av dette se ganske kjent ut. Den består av en blanding av HTML, Liquid plassholdere og JSON som ligner på det som finnes i settings_schema.json. Forresten, funksjonaliteten til settings_schema.json gjenstår fortsatt: seksjoner legger bare til et ekstra lag med funksjonalitet.
Øverst i malen er HTML-utgangen som jeg vil gjerne bli generert når malen møter delen ved gjengangstid. Inne i hver av h1 og p elementer er flytende plassholdere ved hjelp av det nye section.settings. [x] utgangssyntax. I våre eksempler vil vår seksjonsmal søke etter data som svarer til section.settings.title og section.settings.description.
Så langt snill og enkelt, men hvordan vet Shopify hva du skal fylle disse stedholderne med? Alt dette kommer ned til JSON jeg nevnte tidligere plassert mellom åpning og lukking % skjema% tags.
"navn": "Footer Promotion", "settings": ["id": "title", "type": "tekst", "label": "Promotion Title" "id": "beskrivelse", "type": "richtext", "label": "Legg til beskrivelse nedenfor", "standard": "Legg til beskrivelsen din her
"]
For at vår seksjon skal vises i "Tilpass tema" i butikkens administrasjon, må vi gi den en identifikator: Vi gjør dette ved å definere "navn" -verdien på toppnivået til JSON.
Deretter har vi innstillingsnoden som i dette eksemplet har to undernoder. Begge inneholder egenskaper av id, type, merkelapp, og misligholde. Hver av disse, avhengig av deres verdi, vil styre hvordan administrasjonsgrensesnittet blir gjengitt. La oss ta en titt på hver i tur:
En tekststreng som vil bli brukt internt. Det er verdt å merke seg at mens IDene må være unike på tvers av en seksjonsfil, behøver de ikke være unike på tvers av alle seksjonsfiler. Som sådan er det helt greit å ha en id av tittel i flere seksjonsfiler. Seksjonsinnstillinger vil heller ikke være i konflikt med innstillingene i settings_schema.json.
Dette representerer kontrollen som skal gjengis i administrasjonen. De mest brukte alternativene er som følger:
% endfor% tekst: Enkeltlinje tekstfelttextarea: Tekstlinjer i flere linjerrik tekst: En rik tekstredigererimage_picker: Bildeopplastingerradio: Radioknapperå velge: Valgfallsvalgavkrysnings: AvkrysningsbokserNoen av disse krever ekstra JSON å jobbe. For eksempel krever valgkontrollen alternativer for å fylle den. Mer informasjon om hvordan disse fungerer, samt andre kontroller som du kanskje vil vurdere, er tilgjengelige i Shopify-dokumentene.
Dette representerer HTML-etiketten som skal genereres i administratoren over kontrollen din.
Denne innstillingen lar deg legge til plassholderverdier til kontrollen. Det er verdt å merke seg at disse er verdiene som vil bli brukt til seksjonen er oppdatert av butikkens eier.
Mitt eksempel er ganske enkelt og vil skape to kontroller. Den første er et enkeltlinje tekstfelt som vil bli gjengitt i h1 element i malen, den andre er en rik tekstboks som gir alternativene med fet, kursiv og URL.
Det er mange andre alternativer du kan bruke til å pimp ut butikkens admin, inkludert å legge til skreddersydde kontroller for nettadresser, samling og produktoppføringer, samt tilpasset HTML. Vi vil ikke se på dem alle i denne artikkelen, men jeg oppfordrer deg til å dykke inn i mulighetene.
Du vil også legge merke til at du kan legge til tilpasset CSS og JavaScript til seksjonsfiler ved hjelp av følgende flytende koder:
% stylesheet% % endstylesheet%
% javascript% % endjavascript%
Du kan tenke at dette kan legge til mye potensielt oppblåst inline CSS og JavaScript til temaet ditt. Den gode nyheten er at Shopify sammenkaller alle CSS og JS til en enkelt fil som injiseres via væsken content_for_header plassholder. Plattformen sikrer at bare en enkelt forekomst er inkludert, selv om den delen brukes flere ganger på en side. Mer informasjon om hvordan skript utføres er tilgjengelig i Shopify-dokumentene.
Når du har konfigurert kontrollene og navnene i JSON-filen, kan du inkludere delen i en hvilken som helst relevant mal. Seksjoner kan legges til en layoutfil (den ytre huden på en side) eller en individuell malfil. Shopify-administratoren vil vise kontrollene kontekstuelt: det vil si bare når du ser den aktuelle malen i redigeringsverktøyet "tilpasse temaet". Endring av verdier vil resultere i en sanntidsoppdatering i administrasjonen: dette er en fin måte å se hvordan endringer vil påvirke oppsettet før du oppdaterer og presser live.
Hvis du ser på gjengitt HTML, merker du at seksjoner er pakket inn i en div element:
Divets id tar formatet på
Shopify-delen-[id], hvor id er et unikt id for det elementet for siden, og uten å spesifisere legger en klasse avShopify-seksjon. Du kan også legge til din egen klasse i div-elementet ved å spesifisere en klasseverdi i innstillingene dine. Slik ser det ut til vårt eksempel ovenfor:"id": "tittel", "type": "tekst", "klasse": "tittel", "etikett": "kampanjetittel", "standard": "tittel"Dette tillegget vil resultere i følgende:
Seksjoner er et flott tillegg til Shopify-temaer som de tillater temautviklere å aktivere kontekstuelle innstillinger på en hel butikk. Imidlertid kommer de virkelig til seg selv når de jobber sammen med de nye blokkene.
3. Blokker
Blokker bygger på toppen av seksjonskonseptet og tillater butikkeiere å legge til flere seksjoner på en butiks hjemmeside. La oss se på hvordan vi kan gjøre bruk av blokker for å legge til muligheten til å legge til en rekke kampanjer på hjemmesiden. Her er eksempelfilen vi skal jobbe med:
% for blokk i section.blocks% % hvis block.type == "promo-box"%block.settings.title
block.settings.description
% elsif block.type == "image-picker"%% endif% % endfor% % schema% "navn": "Reklame blokker", "max_blocks": 5, "forhåndsinnstillinger": ["navn": "Reklame blokker", "kategori" "Tilpasset hjemmeside innhold"], "blokker": ["type": "promo-boks", "navn": "Kampanje boks", "grense": 1, "innstillinger": ["id" tittel "," type ":" tekst "," label ":" Tittel "," standard ":" din tittel her ", " id ":" beskrivelse "," type ":" textarea " : "Beskrivelse", "Standard": "Beskrivelsen din her"], "Type": "Bildevalg", "Navn": "Promo Image", "Settings": ["id" -image "," type ":" image_picker "," label ":" Promo Image "] % endschema% % stilark% % endstylesheet% % javascript% % endjavascript%
Jeg vil være ærlig, det tok meg litt mer enn en stund å få hodet mitt rundt hvordan blokkerer arbeidet. Men når du forstår hvordan brikkene passer sammen, vil det åpne opp et helt nytt sett med muligheter for temautviklingen.
I hovedsak kan hjemmesiden bestå av flere seksjoner med hver seksjon som er i stand til å inneholde flere blokker. Butikkinnehaveren kan deretter ombestille disse blokkene for å lage et oppsett som passer best til deres behov. La oss se på hvordan dette skiller seg fra det forrige eksempelet for å bidra til å klargjøre noen begreper.
For det første vil du legge merke til at det er en væske
tilloop øverst i malen:% for blokk i section.blocks% % hvis block.type == "promo-box"%block.settings.title
block.settings.description
% elsif block.type == "promo-bilde"%Ettersom disse flere elementene er til fordel for butikkinnehaveren, har vi som temautviklere ingen måte å vite hva vi trenger for å sende ut. Vi må derfor bruke en væskesløyfestruktur, i dette tilfellet a
tilsløyfe, noe som gjør at vi kan iterere over alle blokkene som er tilstede i en bestemt seksjon, og avgir de aktuelle dataene.I koden ovenfor ser du at jeg bruker en enkel
hvis / elsifsetning som sjekker for gjeldende blokker type. Vi kan angi typen i skjemaet selv som vi ser snart. I dette eksemplet bruker vielsifå være dobbelt sikker på hvilken type vi sjekker etter. Hvis du bare hadde to forskjellige blokktyper, som vi gjør i dette eksemplet, kan du bareellerssom du vet, det er det eneste andre alternativet: som sa det gjør ikke vondt for å være mer defensiv.Avhengig av vår type, vil en annen del av HTML bli sendt ut. For å utdatere verdien som er knyttet til blokken bruker vi følgende syntaks:
block.settings. [id]
[Id]representerer id gitt til det aktuelle elementet i vårt skjema som vi vil dekke neste.Flytter til skjemaet vil du legge merke til noen kjente og noen ukjente elementer. La oss begynne med å se på åpningsdelen:
"navn": "Reklame blokker", "maks_blocks": 5, "forhåndsinnstillinger": ["navn": "Reklame blokker", "kategori": "Tilpasset hjemmeside innhold"]La oss ta en titt på hver del i sin tur:
"navn": "Reklame blokker": Navnet som vil vises for denne gruppen av kontroller i Shopify admin"max_blocks": 5: Det totale antallet blokker som kan vises i denne delen. Dette fungerer i samklang med hver blokks grenseinnstilling som vi dekker senere. Når maksimalt antall blokker er nådd, vil du ikke kunne legge til noe mer i administrasjonen."presets": En rekke standardinnstillinger for den dynamiske delen. I eksemplet ovenfor ønsker vi at vårt dynamiske element skal vises under tittelen "Promotional Blocks" og i kategorien "Tilpasset Hjemmesideinnhold". Kategoriverdien tillater oss å gruppere ulike seksjoner i en gruppe i administrasjonen.Når vi har definert
Navn,max_blocks, og forhåndsdefinerte verdier kan vi gjøre oppmerksomheten til kontrollene vi ønsker å vises i administrasjonen. Disse er definert i blokk-delen av skjemaet:"blokker": ["type": "promo-boks", "navn": "Kampanjekasse", "grense": 1, "innstillinger": ["id": "title" Tekst "," Etikett ":" Tittel "," Standard ":" Din tittel her "," Id ":" Beskrivelse "," Type ":" Textarea "," Etikett ":" Beskrivelse " : "din beskrivelse her"], "type": "promo-bilde", "navn": "Promo Image", "Settings": ["id": "Promo-Image", "Type" "image_picker", "label": "Promo Image"]]]]Hver blokk har en rekke forhåndsdefinerte verdier:
"type": Et navn gitt til denne spesielle gruppe kontroller. Dette kan være alt du vil, men ideelt noe selvforklarende."Navn": Navnet på denne spesielle gruppen kontroller som du vil se ut i administrasjonen"grense": Antall ganger du vil ha denne bestemte gruppen kontroller, det vil si denne blokken, vises i seksjonen. Vi ser nærmere på dette i løpet av kort tid.Når du har definert disse forhåndsinnstillingene, kan du flytte til definere kontrollene du vil se i administrasjonen. Disse er definert i innstillinger:
"innstillinger": ["id": "tittel", "type": "tekst", "label": "Tittel", "standard": "din tittel her", "id": "beskrivelse" "type": "textarea", "label": "Beskrivelse", "standard": "Beskrivelsen din her"]I vårt eksempel har vi to potensielle blokktyper som vi kan legge til i denne delen. Den første er blokktypen
promo-boxog den andre er blokktypenpromo-bilde: Vi begge definerte oss selv.Hver blokk kan også definere sitt eget sett med innstillinger som kan bestå av en eller flere kontroller. I eksemplet ovenfor, blokken av typen
promo-boxhar to kontroller som vil vises når de legges til delen. Den første er et tekstfelt og det andre er atextarea. Av en eller annen grunn kan blokker ikke brukerik tekstredaktør vi brukte i vårt forrige eksempel, men atextareavil tillate deg å legge til HTML i etter behov. Som med statiske seksjoner må vi også definere ogid,type,merkelapp, ogbeskrivelse.Det finnes en rekke typer tilgjengelig, inkludert:
tekst: Enkeltlinje tekstfelttextarea: Tekstlinjer i flere linjerimage_picker: Bildeopplastingerradio: Radioknapperå velge: Valgfallsvalgavkrysnings: Avkrysningsbokserområde: Range sliderI eksemplet ovenfor har vi også definert en bildekontroll ved hjelp av
image_pickerverdi. Dette gjør at butikkinnehaveren kan laste opp et bilde eller velge en som allerede er lastet opp i butikken. Siden dette har sin egen type, navn og innstillinger, vil bildetavleseren vises som et annet alternativ som butikkens eier kan legge til i denne dynamiske delen.Jeg nevnte tidligere at
promo-boxblokk har en grenseverdi på 1. Du vil forhåpentligvis også huske at vi definerte maksimalt antall blokker i denne seksjonen for å være 5. Derfor er det i dette scenariet mulig å ha en seksjon bestående av:
- 1 "promo-box" og 4 "promo-bilder"
- 5 "promo-bilder"
Når en eller annen kombinasjon er nådd, vil du ikke kunne legge til flere blokker i seksjonen, med mindre du sletter en eksisterende blokk.
Når du har ferdig med malen og skjemaet, og eventuelle tilleggs CSS og JavaScript, må du legge til et siste stykke kode i temaets indeks.liquid-mal for å aktivere blokkens funksjonalitet. Ved å legge til
content_for_indextil index.liquid Shopify vet å inkludere noen seksjoner som har en eller flere forhåndsinnstillinger definert. Hver forhåndsinnstilling blir da en dynamisk del som en kjøpmann kan legge til på deres temapakke.I bildet nedenfor ser du sluttresultatet. Etter å ha klikket inn i administrasjonen, kan vi legge til enten våre linker eller kampanjeblokker til den dynamiske delen. I dette tilfellet valgte jeg Promotional Blocks og kan senere legge til flere blokker - men bare Promo-bilder som vi angav en grense på 1 i skjemaet for "Promotional Box" -typen.
Det er verdt å merke seg at du ikke bare kan omorganisere dynamiske blokker i en seksjon, men du kan også omorganisere foreldreseksjonene på hjemmesiden slik som du ser det. En ting å huske er at det er en vanskelig grense på 25 seksjoner som kan legges til hjemmesiden.
Statiske og dynamiske seksjoner, og deres etterfølgende blokker er et veldig kraftig verktøy. Det tok meg en stund å virkelig forstå konseptene, men når det klikket du begynte å virkelig sette pris på det potensialet de tilbyr.
4. Tema sett og skifer
Et spørsmål jeg ofte blir spurt av første gang Shopify-temautviklere er det beste å sette opp et utviklingsmiljø for å jobbe med plattformen: i dag er det to gode muligheter som får deg til å løpe.
I fjor utgav Shopify temaer laget Shopify Theme Kit. Theme Kit er et enkelt binært kommandolinjeverktøy (fungerer på Windows, Linux og MacOS) som, når installert, vil gjøre det mulig for deg å:
- Last opp temaer til flere miljøer
- Last opp og last ned tema eiendeler
- Se etter lokale endringer og last opp automatisk til Shopify-plattformen
Theme Kit gjør det mulig for temautviklere å jobbe med sine kjente verktøy (tekstredigerer, preprosessorer osv.) Og har endret synkronisert i bakgrunnen til en Shopify-utviklingsbutikk. Hvis du ikke har sett på Shopify fra et temaparkeringsperspektiv før du kanskje ikke er oppmerksom på utviklingsbutikker.
I hovedsak er de fullt utstyrt Shopify-butikker med en forskjell: du kan ikke ta virkelige utbetalinger. For at du skal kunne vise full kassekontroll til en klient, kan du imidlertid legge til en "Dummy Payment Gateway". Du kan opprette så mange utviklingsbutikker som du trenger via en gratis partnerkonto. Når du er klar til å starte, kan du bare oppgradere butikken til en betalt plan, eller distribuere temaet til en annen butikk.
Theme Kit tilbyr en rekke nyttige kommandoer som lar deg samhandle med temaer mens du arbeider i et lokalt utviklingsmiljø. Når du har installert, kan du bruke
sekommando som vil starte en prosess for å overvåke katalogen din for endringer og laste dem opp til Shopify.Shopify kan ikke være virkelig "lokal" (derfor sitatene), ettersom du trenger en Internett-tilkobling for å jobbe med en utviklingsbutikk, men integrering av Theme Kit i arbeidsflyten din gjør det til å føle seg "lokal". Brukes i forbindelse med verktøy som Prepros, kan du også dra nytte av live-gjenopplasting av utviklingsbutikken, samt filminifisering og sammenkobling.
I 2017 lanserte Shopify også Slate: et open source tema stillas og kommandolinjeverktøy for å utvikle Shopify-temaer. Den er utviklet for å hjelpe utviklingsarbeidet ditt og fremskynde prosessen med å utvikle, teste og distribuere temaer til Shopify-butikker.
Mens ThemeKit hjelper deg i ett område Slate går mye lenger. I tillegg til å gi temasynkroniseringsfunksjonene til ThemeKit (ThemeKit er faktisk en del av skifer), kan du også distribuere til flere miljøer samtidig, lage skjermmaler for et nytt tema og organisere stilark og skript på en fleksibel måte.
Skiferens stillasmaler er "forsettlig tomme" (hjemmesiden vist nedenfor): Standard Væskeetiketter og logikk som sannsynligvis vil bli brukt på hver mal, har blitt inkludert med lite eller ingen merking, klasser eller annen kode som du må fjerne. Det er ment som et fullt fungerende utgangspunkt: alt du trenger å gjøre er å fylle ut emnene og du er oppe.
Til slutt er det en gjeng med JavaScript og Sass-hjelpere som du kan bruke, eller ikke hvis du må inkludere:
Javascript
- Feltfokus
- Responsive tabeller og videoer
- Format valuta
- Bildehjelpere
- Produktvarianter
- Kurvhjelpere
- Seksjonshendelser
CSS
- Breakpoints og media spørringer
- Nett
- SVG ikoner
- Responsive tabeller
- Tomme stater
- Sass mixins
5. Polaris
I mai 2017 oppdaterte Shopify utseendet på alle applikasjoner: både på skrivebordet og mobilen. For å kunne oppnå dette ambisiøse målet utviklet UX-teamet på Shopify et nytt designsystem kalt Polaris. Det er et fullt utstyrt system som ikke bare er beregnet for bruk internt på Shopify, men også for Shopify Partners som bygger grensesnitt for apper som integreres via Shopify API. Målet er å gi noen byggesteinene for å skape grensesnitt som virker sømløse med kjernen Shopify admin.
En av hovedtrekkene til Polaris er det omfattende komponentbiblioteket. Hver komponent har forklaringer på problemet det løser, anbefalinger om beste praksis, bruksretningslinjer og eksempelkoden for både HTML og React. Alle komponentene er også tilgjengelige som en Sketch-fil.
Biblioteket inneholder komponenter for:
- Handlinger: Knapper, handlinger og bytter
- Bilder og ikoner: Merker, avatarer, ikoner og miniatyrbilder
- Tilbakemeldingsindikatorer: Bannere
- Struktur: Kallkort, sideoppsett og tomme stater
- Titler og tekst: Tekst, tekst, overskrift og underposisjoner
- Skjemaer: Avmerkingsbokser, farger og datovalgere, skjemaoppsett og valglister
- Oppførsel: Sammenleggbare og rullbare elementer
- Lister: Beskrivelse og ressurslister
- Navigasjon: Lenker, paginering og faner
- Overlegg: Popovers og verktøytips
- Embedded: Alerts, modals, og ressurs plukkere
I tillegg til komponentbiblioteket er det omfattende dokumentasjon som dekker utformingsretningslinjer og prinsipper som har informert om etableringen på elementene. Den tilhørende stilguiden går også inn i detalj om hvordan Shopify UX-teamet tenker på typografi, farge og UX. Det er også svært nyttige seksjoner dedikert til illustrasjon og datavisualisering, inkludert detaljerte beskrivelser som beskriver når du skal bruke standard avatarer og ikoner for hvordan du kan merke grafer på riktig måte.
Sammen med komponentbiblioteket kan du og ditt team bruke stilguiden til å lære om designretningslinjene og prinsippene som har styrt opprettelsen av disse elementene. Dette gir deg en førstehåndsvisning av hvordan Shopifes brukeropplevelsesteam tenker på design og grensesnittutvikling.
Polaris er ment å ikke bare lage grensesnitt for Shopify-apper som er ujevnere og enklere for utviklere av frontend, men også å la deg opprette kjente opplevelser for butikkeiere som installerer appen din. Språk er et stort element i ethvert grensesnitt, og innholdsretningslinjene inneholder råd om hvordan du planlegger måten du kommuniserer på. Det er også eksempler som fremhever hvordan du kan endre stemme og tone, avhengig av butikkens eierbehov og følelser.
Polaris er et open source-prosjekt og er tilgjengelig på GitHub. Teamet på Shopify støtter aktivt prosjektet, og er du i stand til å opprette et problem eller foreta en funksjonsforespørsel.
Konklusjon
Vi har dekket mye bakken i denne artikkelen, men forhåpentligvis gir den deg litt innsikt i noen nyere utviklinger til Shopify-plattformen som vil hjelpe deg med å bygge bedre temaer og programmer for deg og dine kunder.
% endif% % endfor% % schema% "navn": "Reklame blokker", "max_blocks": 5, "forhåndsinnstillinger": ["navn": "Reklame blokker", "kategori" "Tilpasset hjemmeside innhold"], "blokker": ["type": "promo-boks", "navn": "Kampanje boks", "grense": 1, "innstillinger": ["id" tittel "," type ":" tekst "," label ":" Tittel "," standard ":" din tittel her ", " id ":" beskrivelse "," type ":" textarea " : "Beskrivelse", "Standard": "Beskrivelsen din her"], "Type": "Bildevalg", "Navn": "Promo Image", "Settings": ["id" -image "," type ":" image_picker "," label ":" Promo Image "] % endschema% % stilark% % endstylesheet% % javascript% % endjavascript%
