Accentsconagua
Share
Așa cum unii dintre dvs. știu din articolele mele anterioare Shopify este o platformă de găzduire găzduită pe temă, care vă permite să construiți magazine online. A crescut constant în ultimii ani și astăzi este platforma din spatele a 400.000 de companii din aproximativ 175 de țări.
Platforma Shopify evoluează în mod constant, iar în ultimele luni au fost lansate o serie de caracteristici cheie, vizând în special dezvoltatorii de teme și aplicații. În acest articol, vom analiza o selecție a acestor noi caracteristici și seturi de instrumente, printre care:
Vor fi discutate multe dintre exemplele de mai jos Lichid. Liquid este limbajul șablonului care permite dezvoltatorilor de teme să folosească substituenți și construcții logice în șabloanele lor, care vor fi înlocuite cu date din magazin live atunci când o pagină este solicitată și redată. Utilizează o sintaxă simplă care permite ieșirea (de exemplu, un titlu de produs) și logică (de ex pentru buclă). Nu voi intra în prea multe detalii aici, dar puteți urmări ecranul meu de 25 de minute, care merge mai mult în detaliu cu privire la modul în care Liquid funcționează.
Și în timp ce sunteți aici, puteți fi, de asemenea, interesat de următorul post de inspirație, pentru teme disponibile pe Themeforest:
Să începem să analizăm una dintre schimbările majore legate de tema care au avut loc recent: img_url Filtru lichid. Până de curând, imaginile au fost redate pe baza unui set de dimensiuni predefinite numite. De exemplu:
product.featured_image | img_url: 'grande'
Aici solicităm imaginea recomandată pentru produsul în dimensiune grande. Aceasta ar presupune că imaginea originală avea o latură egală sau mai mare de 600 pixeli, făcând imaginea cu cea mai mare dintre cele două axe fiind 600px.
Aceste dimensiuni numite sunt acum depreciate și în timp ce acestea vor funcționa în continuare au fost înlocuite de un nou set de parametri, inclusiv mărimea, a decupa, scară, și format. Acest lucru face acum posibil să facem o întreagă serie de manipulări legate de imagine, indisponibile anterior, pentru a-l crea pe dezvoltatorii temă Shopify.
Voi folosi img_url Filtru lichid în aceste exemple, dar tehnicile vor funcționa și cu următoarele alte obiecte legate de imagine:
Să începem să ne uităm la modul în care putem redimensiona o imagine. Pentru a face acest lucru, înlocuim imaginea acum depreciată Nume cu o dimensiune specifică în pixeli. Iată un exemplu:
product.featured_image | img_url: '450x450'
Folosind sintaxa de mai sus pune acum controlul dimensiunilor imaginii în mâinile dvs .: aici am specificat atât lățimea cât și înălțimea (în această ordine).
De asemenea, puteți specifica doar o lățime:
product.featured_image | img_url: '450x'
sau doar o înălțime:
product.featured_image | img_url: 'x450'
Când se specifică o singură valoare, Shopify va calcula dimensiunea rămasă pe baza dimensiunii originale a imaginii, menținând intacte raportul de aspect al imaginii originale.
Dacă ne întoarcem la exemplul nostru original, s-ar putea să credeți că ar rezulta o reproducere a unei imagini de 450x450 a imaginii dvs. Acest lucru nu este întotdeauna cazul.
Această solicitare ar duce la un pătrat perfect, numai dacă sunt îndeplinite ambele condiții:
Dacă ambele condiții sunt adevărate, atunci ar fi redată o imagine pătratică de 450x450. Dacă nu, Shopify o va redimensiona folosind aceeași logică ca și cum ați specificat doar înălțime sau lățime. Cea mai lungă parte câștigă în această situație și este scalată corespunzător.
Pentru a crea imagini pătrate, puteți utiliza parametrul culturii pentru a vă asigura că dimensiunile imaginii rezultate se potrivesc cu dimensiunile solicitate. Dacă întreaga imagine nu se potrivește dimensiunilor solicitate, parametrul de decupare specifică ce parte a imaginii va fi afișată. Există trei opțiuni valide:
Această funcționalitate a fost disponibilă de la sfârșitul anului 2016, dar la începutul anului 2017 a fost lansată o actualizare care a adus și mai multă flexibilitate. Temele disponibile în magazinul Theme Shopify, inclusiv tema Empire premium ilustrată mai jos, toate fac uz de aceste tehnici. Instalarea unei teme gratuite este o modalitate excelentă de a afla mai multe despre implementarea acestor idei.
srcset pentru a sublinia modul în care puteți profita de acest lucru în propriile teme:
% pentru produs în colecția.producte% % assign image = product.featured_image%
În acest exemplu, folosim atribui Funcția lichidă pentru a crea o variabilă numită imagine care este egal cu imaginea curentă a imaginilor prezentate (care este setată în administratorul Shopify). Apoi putem folosi logica lichidelor pentru a ne crea srcset declarații care utilizează, în acest caz, lăţime proprietate:
% dacă image.width> 640% image.src | img_url: '640x' 640w % endif%
Vestea bună este că dezvoltatorii temelor nu trebuie să vă faceți griji cu privire la reîncărcarea tuturor imaginilor lor, deoarece Shopify a indexat fiecare imagine pe platformă.
Alți doi parametri care merită discutate sunt scară și format. Parametrul scalei vă permite să specificați densitatea pixelilor imaginii. Puteți să vă sculați fie 2x sau 3x în funcție de nevoile dvs.:
product.image | img_url: '400x400', scară: 2
format vă permite să specificați ce format fișier să utilizeze pentru imagine. În prezent, puteți specifica oricare dintre ele jpg sau pjpg (JPEG progresiv):
product.image | img_url: '400x400', format: 'pjpg'
De asemenea, puteți profita de această tehnică pentru imaginile care se găsesc în dosarul de materiale al temei. Pentru a face acest lucru, utilizați asset_img_url filtru. Iată un exemplu care folosește și img_tag filtru care va avea ca rezultat o formare completă img element fiind redat în șablon:
logo.jpg | asset_img_url: '300x' img_tag
Aceste filtre noi de manipulare a imaginii și proprietățile imaginii vă permit în cele din urmă să fie la fel de flexibile cum trebuie să fie atunci când este vorba de a trata imaginile, direcția de artă și de a fi prietenos cu planurile de date ale utilizatorilor finali.
La sfârșitul lui 2016, Shopify a introdus secțiunile. Această nouă caracteristică permite dezvoltatorilor temelor să creeze o interfață de administrare personalizată, care permite proprietarilor magazinelor să adauge, să rearanjeze și să elimine cu ușurință secțiuni de conținut, cum ar fi produse, prezentări de tip slideshow, videoclipuri sau colecții de produse. Acestea sunt cazuri de utilizare obișnuită, dar puteți utiliza literalmente această funcție pentru a permite proprietarilor de magazine să adauge și să editeze orice tip de conținut. Toate modificările din admin pot fi vizualizate în timp real și o dată salvate vor fi live în magazin.
Secțiunile pot fi incluse static în șabloanele unei teme (cum ar fi antetul și subsolul) sau pot fi adăugate și eliminate dinamic, prin interfața de administrare, pe pagina principală a temei. În exemplul de mai sus, pe care îl vom vedea în curând, puteți vedea modul în care putem edita o secțiune statică care va apărea în subsolul magazinului. Veți observa, de asemenea, butonul "Adăugați secțiunea", care ne permite să adăugăm secțiuni dinamice, mai multe despre cele ulterioare, pe pagina de pornire.
Șabloanele secțiunilor se află în noul dosar al secțiunilor și pot fi menționate într-un mod similar cu fragmentele. Dacă fișierul nostru a fost localizat la secțiuni / promo.liquid, îl vom referi după cum urmează:
% secțiunea "promovare"%
Notă: nu aveți nevoie de .lichid cum este comun cu fragmentele din temele Shopify. Să aruncăm o privire la un exemplu care să ajute la clarificarea puterii secțiunilor. Următoarele sunt conținutul secțiuni / footer.liquid:
section.settings.title
section.settings.description
% schema% "nume": "Promovarea subsolului", "setări": "" id ":" titlu "," tip ":" text "; "Titlu", "id": "descriere", "tip": "richtext", "label"Adăugați descrierea dvs. aici
"] % endchema% % stylefolder% % endstylesheet% % javascript% % endjavascript%
Dacă sunteți familiarizați cu setările tematice Shopify, unele dintre acestea pot părea destul de familiare. Acesta conține un amestec de substituenți HTML, substituenți lichizi și JSON asemănători cu cei găsiți în settings_schema.json. De altfel, funcționalitatea settings_schema.json rămâne încă: secțiunile doar adaugă un strat suplimentar de funcționalitate.
În partea de sus a șablonului este ieșirea HTML pe care aș dori să o obțin când șablonul întâlnește secțiunea la timpul de randare. În interiorul fiecărui h1 și p elementele sunt înlocuitori lichizi utilizând noul secțiunea. setări. [x] ieșire sintaxă. În exemplele noastre, șablonul de secțiune va căuta date care corespund section.settings.title și section.settings.description.
Atât de frumos și ușor, dar cum Shopify știe ce să populeze cu acești substituenți? Toate acestea se referă la JSON-ul pe care l-am menționat mai devreme, între deschidere și închidere % schema% Etichete.
"nume": "Promovarea subsolului", "setări": ["id": "titlu", "tip": "text" "id": "descriere", "tip": "richtext", "label": "Adăugați descrierea dvs. aici
"]
Pentru ca secțiunea noastră să apară în zona "Customize Theme" a administratorului magazinului, trebuie să îi dăm un identificator: facem acest lucru prin definirea valorii "name" la nivelul de sus al JSON.
Apoi, avem nodul de setări care are, în acest exemplu, două sub-noduri. Ambele conțin proprietăți ale id, tip, eticheta, și Mod implicit. Fiecare dintre acestea, în funcție de valoarea lor, va guverna modul în care interfața de administrare este redată. Să aruncăm o privire la fiecare la rândul său:
Un șir de text care va fi utilizat intern. Merită menționat faptul că, deși ID-urile trebuie să fie unice într-un fișier de secțiune, acestea nu trebuie să fie unice în toate fișierele secțiunilor. Ca atare, este bine să ai un id de titlu în mai multe fișiere de secțiune. Setările secțiunii nu vor intra în conflict cu setările din settings_schema.json.
Aceasta reprezintă controlul care va fi redat în cadrul administratorului. Opțiunile cele mai frecvent utilizate sunt următoarele:
text: Câmpuri de text dintr-o singură linietextarea: Zone de text cu mai multe liniiRichText: Un editor de text bogatimage_picker: Încărcări de imaginiradio: Butoane radioSelectați: Căderi de selecțieCaseta de bifat: Căsuțe de selectareUnele dintre acestea necesită JSON suplimentar pentru a funcționa. De exemplu, controlul de selectare necesită opțiuni pentru a-l umple. Mai multe informații despre modul în care funcționează acestea, precum și despre alte controale pe care ați putea dori să le luați în considerare, sunt disponibile în documentele Shopify.
Aceasta reprezintă eticheta HTML care va fi generată în administratorul de deasupra dvs..
Această setare vă permite să adăugați valori de substituent la controler. Merită menționat faptul că acestea sunt valorile care vor fi utilizate până când secțiunea a fost actualizată de proprietarul magazinului.
Exemplul meu este destul de simplu și va crea două controale. Primul este un câmp de text dintr - o singură linie care va fi redat în h1 element în șablon, al doilea este o casetă de text bogată, care oferă opțiunile de caractere aldine, italice și URL.
Există numeroase alte opțiuni pe care le puteți utiliza pentru a vă ajuta să eliminați administratorul magazinului dvs., inclusiv adăugarea de comenzi personalizate pentru adresele URL, colecții și înregistrări de produse, precum și cod HTML personalizat. Nu ne vom uita la toate în acest articol, dar vă încurajez să explorați posibilitățile.
De asemenea, veți observa că puteți adăuga fișiere personalizate CSS și JavaScript în fișiere de secțiuni folosind următoarele etichete Liquid:
% stylefolder% % endstylesheet%
% javascript% % endjavascript%
S-ar putea să vă gândiți că acest lucru ar putea adăuga o multitudine de CSS și JavaScript in-line cu potențial plin de umor la tema dvs. Vestea bună este că Shopify concatează toate CSS și JS într-un singur fișier care este injectat prin intermediul lichidului content_for_header înlocuitor. Platforma asigură că numai o singură instanță este inclusă vreodată, chiar dacă secțiunea respectivă este utilizată de mai multe ori pe o pagină. Mai multe informații despre modul în care sunt executate scripturile sunt disponibile în Documentele Shopify.
Odată ce ați configurat comenzile și numele în fișierul JSON, puteți include secțiunea în orice șablon relevant. Secțiunile pot fi adăugate la un fișier de aspect (suprafața exterioară a unei pagini) sau la un fișier de șablon individual. Administratorul Shopify va afișa controalele în mod contextual: adică numai atunci când vizualizează șablonul relevant în editorul "personalizați tema". Schimbarea valorilor va duce la o actualizare în timp real a administratorului: aceasta este o modalitate foarte bună de a vedea cum modificările vor afecta aspectul înainte de actualizarea și împingerea live.
Dacă aveți o privire la HTML rendered, veți observa că secțiunile sunt înfășurate într-un div element:
Id-ul div are forma formatului
Shopify-secțiune- [id], unde id este un id unic pentru acel element pentru pagină, și fără a specifica adaugă o clasă deShopify-secțiune. Puteți adăuga propria clasă și în elementul div, specificând o valoare de clasă în setările dvs. Iată cum ar arăta exemplul nostru de mai sus:"id": "titlu", "tip": "text", "clasă": "titlu", "etichetă": "titlu de promovare", "implicit": "titlu"Această adăugire ar avea ca rezultat următoarele:
Secțiunile reprezintă o adăugare extraordinară pentru temele Shopify deoarece permit dezvoltatorilor de teme să permită setările contextuale într-un întreg magazin. Cu toate acestea, ele vin într-adevăr în propriile lor atunci când lucrează în tandem cu noi funcționalități blocuri.
3. Blocuri
Blocurile se bazează pe conceptul de secțiuni și permit proprietarilor magazinelor să adauge mai multe secțiuni la pagina de pornire a magazinului. Să aruncăm o privire asupra modului în care putem folosi blocurile pentru a adăuga posibilitatea de a adăuga un număr de cutii promoționale pe pagina de pornire. Iată exemplul cu care vom lucra:
% pentru bloc în section.blocks% % if block.type == "promo-box"%block.settings.title
block.settings.description
% elsif bloc.type == "selector de imagini"%% endif% % endfor% % schema% "name": "Blocuri promoționale", "max_blocks": 5, "presetări": ["nume": "Blocuri promoționale"; "Conținut de pagină de pornire personalizată"], "blocuri": ["tip": "promo-box", "nume": " titlu "," nume ":" text "," etichetă ":" titlu "," : "Descriere aici"], "tip": "selector de imagini", "nume": "promo", "setări" -image "," type ":" image_picker "," label ":" Promo Image "]] % endchema% % stylesheet% % endstylesheet% % javascript% % endjavascript%
Voi fi sincer, mi-a luat mai mult de puțin timp ca să-mi dau capul cum funcționează blocurile. Cu toate acestea, odată ce înțelegeți cum se potrivesc piesele, se va deschide un set complet de noi posibilități pentru dezvoltarea temelor.
În esență, pagina de pornire poate fi alcătuită din mai multe secțiuni, fiecare secțiune capabilă să conțină mai multe blocuri. Proprietarul magazinului poate apoi să rearanjeze aceste blocuri pentru a crea un aspect care se potrivește cel mai bine nevoilor acestora. Să aruncăm o privire asupra modului în care aceasta diferă de exemplul precedent pentru a ajuta la clarificarea unor concepte.
În primul rând veți observa că există un lichid
pentrubuclă în partea de sus a șablonului:% pentru bloc în section.blocks% % if block.type == "promo-box"%block.settings.title
block.settings.description
% elsif bloc.type == "promo-imagine"%Deoarece aceste elemente multiple se află la mila proprietarului magazinului, noi, ca dezvoltatori de temă, nu avem cum să știm ce trebuie să facem. Prin urmare, trebuie să folosim o structură de buclă lichidă, în acest caz a
pentrucare ne permite să repetăm toate blocurile prezente într-o anumită secțiune la rândul său și să transmitem datele relevante.În fragmentul de mai sus veți vedea că folosesc o simplă
în cazul în care / elsifdeclarație care verifică tipul blocurilor curente. Putem seta tipul în schemă însuși așa cum vom vedea în curând. În acest exemplu, folosimelsifsă fim siguri de tipul pe care îl verificăm. Dacă ați avea doar două tipuri distincte de blocuri, așa cum facem în acest exemplu, puteți doaraltfeldupă cum știți că este singura alternativă: care a spus că nu doare pentru a fi mai defensiv.În funcție de tipul nostru va fi transmisă o altă secțiune a HTML. Pentru a extrage valoarea asociată blocului, folosim următoarea sintaxă:
bloc. setări. [id]
[Id]reprezintă id-ul dat elementului respectiv din schema noastră pe care o vom acoperi în continuare.Trecând la schemă veți observa unele elemente familiare și unele necunoscute. Să începem prin a privi partea de deschidere:
"nume": "Blocuri promoționale", "max_blocks": 5, "presetări": ["nume": "Blocuri promoționale"Să aruncăm o privire la fiecare parte pe rând:
"nume": "Blocuri promoționale": Numele care va apărea pentru acest grup de controale în administratorul Shopify"max_blocks": 5: Numărul total de blocuri care pot apărea în această secțiune. Acest lucru este în concordanță cu setarea limită a fiecărui bloc pe care o vom acoperi mai târziu. După atingerea numărului maxim de blocuri, nu veți mai putea adăuga în admin.„presetări“: O serie de setări implicite pentru secțiunea dinamică. În exemplul de mai sus, dorim ca elementul nostru dinamic să apară sub titlul "Blocuri promoționale" și în categoria "Conținut personalizat al paginii de pornire". Valoarea categoriei ne permite să grupăm diferite secțiuni într-un grup din admin.Odată ce am definit
Nume,max_blocks, și valorile prestabilite, ne putem îndrepta atenția asupra controalelor pe care dorim să le prezentăm în admin. Acestea sunt definite în secțiunea blocurilor din schemă:"blocuri": ["tip": "promo-box", "nume": " text "," etichetă ":" descriere "," implicit ":" titlu "," : "descrierea dvs. aici"], "tip": "promo-image", "name": "promo image", "setări": [id "; "image_picker", "label": "Imagine promoțională"]]Fiecare bloc are un număr de valori predefinite:
"tip": Un nume dat acestui grup de controale. Acest lucru poate fi orice vrei, dar în mod ideal ceva de auto-explicativ."Nume": Numele acestui grup special de controale pe care doriți să îl afișați în admin"limită": De câte ori doriți ca acest grup de controale, adică acest bloc, să apară în secțiune. Vom analiza acest lucru în scurt timp.Odată ce ați definit aceste presetări, puteți trece pe definirea comenzilor pe care doriți să le afișați în admin. Acestea sunt definite în setări:
"setare": ["id": "titlu", "tip": "text", "etichetă": "titlu" "type": "textarea", "label": "Description", "default": "descrierea ta aici"]În exemplul nostru, avem două tipuri potențiale de blocuri pe care le putem adăuga la această secțiune. Primul este tipul de bloc
promo-boxiar al doilea este tipul de blocpromo-image: ambele pe care le-am definit noi înșine.Fiecare bloc poate, de asemenea, să definească setul propriu de setări, care poate consta din unul sau mai multe comenzi. În exemplul de mai sus, blocul de tip
promo-boxare două comenzi care vor apărea atunci când sunt adăugate la secțiune. Primul este un câmp text, iar al doilea este atextarea. Din anumite motive blocurile nu pot folosiRichTexteditorul pe care l-am folosit în exemplul nostru precedent, dar atextareavă va permite să adăugați codul HTML în funcție de necesități. Ca și în cazul secțiunilor statice, trebuie să definim șiid,tip,eticheta, șiDescriere.Există mai multe tipuri disponibile, printre care:
text: Câmpuri de text dintr-o singură linietextarea: Zone de text cu mai multe liniiimage_picker: Încărcări de imaginiradio: Butoane radioSelectați: Căderi de selecțieCaseta de bifat: Căsuțe de selectaregamă: Glisoare de distanțăÎn exemplul de mai sus, am definit, de asemenea, un control al imaginii utilizând
image_pickervaloare. Acest lucru va permite proprietarului magazinului să încarce o imagine sau să aleagă o fotografie care a fost deja încărcată în magazin. Deoarece are propriul tip, nume și setări, selectorul de imagini va apărea ca o altă opțiune pe care proprietarul magazinului o poate adăuga la această secțiune dinamică.Am menționat mai devreme că
promo-boxbloc are o valoare limită de 1. Sperăm să rețineți, de asemenea, că am definit numărul maxim de blocuri din această secțiune care urmează să fie 5. Prin urmare, în acest scenariu, este posibil să aveți o secțiune constând din:
- 1 "promo-box" și 4 "promo-imagini"
- 5 "imagini promo"
Odată ce ați atins o combinație, nu veți mai putea adăuga blocuri în secțiune dacă nu ștergeți un bloc existent.
După ce ați pregătit șablonul și schema, precum și orice CSS și JavaScript suplimentar, va trebui să adăugați o singură piesă finală în șablonul index.liquid al temei pentru a activa funcționalitatea blocului. Prin adăugarea
content_for_indexla index.liquid Shopify știe să includă orice secțiune care are una sau mai multe presetări definite. Fiecare presetare devine apoi o secțiune dinamică pe care un comerciant o poate adăuga la pagina principală a temelor.În imaginea de mai jos veți vedea rezultatul final. După ce faceți clic pe admin, suntem capabili să adăugăm link-urile noastre sau blocurile promoționale la secțiunea dinamică. În acest caz, am ales blocuri promoționale și, ulterior, am posibilitatea să adaug blocuri suplimentare - dar numai imagini Promo așa cum am specificat o limită de 1 în schema noastră pentru tipul de "promoționale".
Merită remarcat faptul că nu numai că puteți reordona blocurile dinamice dintr-o secțiune, dar, de asemenea, puteți reordona secțiunile părinte de pe pagina de pornire după cum considerați necesar. Un lucru de reținut este că există o limită de 25 de secțiuni care pot fi adăugate pe pagina de pornire.
Secțiunile statice și dinamice, și blocurile lor ulterioare sunt un instrument foarte puternic. Mi-a trebuit o vreme să înțeleg cu adevărat conceptele, dar, odată ce a făcut clic, ai început să apreciezi cu adevărat potențialul pe care îl oferă.
4. Setul tematic și ardezie
O întrebare pe care o primesc de multe ori de la prima dată când dezvoltatorii temă Shopify este cea mai bună modalitate de a crea un mediu de dezvoltare pentru a lucra cu platforma: astăzi există două opțiuni excelente care vă vor face să funcționeze.
Anul trecut echipa Shopify a lansat Theme Kit Shopify. Theme Kit este un singur instrument binar de linie de comandă (funcționează pe Windows, Linux și macOS) care, odată instalat, vă va permite:
- Încărcați teme în mai multe medii
- Încărcați și descărcați elemente ale temelor
- Urmăriți modificările locale și încărcați automat pe platforma Shopify
Theme Kit permite dezvoltatorilor de teme să lucreze cu instrumentele lor familiare (editor de text, preprocesoare etc.) și să aibă modificări sincronizate în fundal într-un magazin de dezvoltare Shopify. Dacă nu v-ați uitat la Shopify din perspectiva unei clădiri tematice, atunci este posibil să nu fiți conștient de magazinele de dezvoltare.
În esență, ele sunt pe deplin featured Shopify magazine cu o singură diferență: nu sunteți în măsură să ia plăți reale. Cu toate acestea, pentru a putea demonstra fluxul de plată completă către un client, puteți adăuga un "gateway de plată fals". Puteți crea cât mai multe magazine de dezvoltare de care aveți nevoie printr-un cont de partener gratuit. Odată gata de lansare, puteți să actualizați magazinul într-un plan plătit sau să implementați tema într-un alt magazin.
Theme Kit oferă o serie de comenzi utile care vă permit să interacționați cu teme în timp ce lucrați într-un mediu de dezvoltare locală. După configurare, puteți utiliza funcția
ceascomanda care va începe un proces de monitorizare a directorului dvs. pentru modificări și încărcarea acestora în Shopify.Shopify nu poate fi cu adevărat "local" (de aici citatele), deoarece veți avea nevoie de o conexiune la internet pentru a lucra cu un magazin de dezvoltare, dar integrarea Theme Kit în fluxul de lucru face să se simtă "local". Folosit în combinație cu instrumente cum ar fi Prepros, puteți beneficia și de reîncărcarea în direct a magazinului de dezvoltare, precum și de minimizarea și concatenarea fișierelor.
În 2017, Shopify a lansat și Slate: o schemă tematică open source și un instrument de comandă pentru dezvoltarea temelor Shopify. Acesta este conceput pentru a vă ajuta fluxul de lucru al dezvoltării și pentru a accelera procesul de dezvoltare, testare și implementare a unor teme pentru magazinele Shopify.
În timp ce ThemeKit te ajută într-o zonă, Slate merge mult mai departe. În plus față de furnizarea capabilităților de sincronizare a temelor din ThemeKit (ThemeKit este de fapt parte din Slate), vă permite de asemenea să implementați în mai multe medii în același timp, să creați șabloane de schelet pentru o temă nouă și să organizați foi de stil și scripturi într-un mod flexibil.
Șabloanele șabloane ale șabloanelor sunt "intenționat goale" (pagina principală ilustrată mai jos): etichetele și logica standard pentru lichide care pot fi utilizate pe fiecare șablon au fost incluse cu puțin sau fără marcaj, clase sau alte coduri pe care va trebui să le eliminați. Este destinat ca un punct de pornire complet funcțional: tot ce trebuie să faceți este să completați spațiile goale și sunteți în picioare.
În cele din urmă, există o grămadă de ajutoare JavaScript și Sass pe care le puteți utiliza sau nu, dacă trebuie să includeți:
JavaScript
- Trap focus
- Tabele și clipuri video receptive
- Formatați moneda
- Ajutoare pentru imagini
- Variante de produse
- Ajutoare pentru carucioare
- Sectiuni evenimente
CSS
- Fragmente și interogări media
- Grilă
- Imagini SVG
- Tabele responsabile
- Stări neclare
- Sass mixins
5. Polaris
În mai 2017, Shopify a actualizat aspectul tuturor aplicațiilor sale: atât pe desktop, cât și pe mobil. Pentru a atinge acest obiectiv ambițios, echipa UX de la Shopify a dezvoltat un nou sistem de design numit Polaris. Este un sistem pe deplin prezentat, care nu este destinat utilizării interne la Shopify, ci și pentru Shopify Partners, care construiesc interfețe pentru aplicații care se integrează prin API-ul Shopify. Obiectivul său este acela de a da oricui blocurile de construcție pentru a crea interfețe care apar fără probleme cu core Shopify admin.
Una dintre principalele caracteristici ale Polaris este biblioteca extensivă a componentelor. Fiecare componentă conține explicații cu privire la problema pe care o rezolvă, recomandări de bune practici, linii directoare de utilizare și exemplu de cod atât pentru HTML, cât și pentru React. Toate componentele sunt de asemenea disponibile ca fișier Sketch.
Biblioteca include componente pentru:
- Acțiuni: Butoane, acțiuni și comutări
- Imagini și pictograme: insigne, avatare, icoane și miniaturi
- Indicatori de feedback: Bannere
- Structură: carduri Callout, aspect de pagină și stări goale
- Titluri și text: Subtitrări, text afișat, titlu și subtitluri
- Formulare: casete de selectare, selectori de culoare și date, layout-uri de formular și liste de opțiuni
- Comportament: Elemente pliabile și scrollabile
- Listele: descriere și liste de resurse
- Navigare: Legături, paginare și file
- Suprapunerile: Popovere și sfaturi de instrucțiuni
- Embedded: Alerte, modale și elemente de culegere a resurselor
În plus față de biblioteca de componente, există o documentație extensivă care acoperă liniile direc
% endif% % endfor% % schema% "name": "Blocuri promoționale", "max_blocks": 5, "presetări": ["nume": "Blocuri promoționale"; "Conținut de pagină de pornire personalizată"], "blocuri": ["tip": "promo-box", "nume": " titlu "," nume ":" text "," etichetă ":" titlu "," : "Descriere aici"], "tip": "selector de imagini", "nume": "promo", "setări" -image "," type ":" image_picker "," label ":" Promo Image "]] % endchema% % stylesheet% % endstylesheet% % javascript% % endjavascript%
