Postavljanje lokalnog Shopify CLI alata (Command Line Interface) je najbolji način postavljanja razvojnog okružja za rad na Shopify temama. Inicijalno prvenstveno predviđen za razvoj aplikacija, Shopify CLI sada možemo korisiti i za razvoj tema.
A gdje se onda uklapa ThemeKit?
Što koristiti: ThemeKit ili Shopify CLI za razvoj tema?
Prema Shopify dokumentaciji, koristiti ćemo Shopify CLI pri radu sa Shopify Online Store 2.0 temama, a ThemeKit kada radimo sa starijim temama, ili opcionalno kada već imamo postavljeno okružje koristeći ThemeKit na starijim projektima.
Sada kad smo definirali što i kada, pogledajmo kako koristiti Shopify CLI za postavljanje lokalnog radnog okružja.
Instaliranje Shopify CLI-a na Windows računalima
Ako želite napraviti instalaciju CLI-a na Windows računalima, prvo ćete morati instalirati Ruby + DevKit. Nakon toga instalirajte i RubyGems.
Tada ćemo upogoniti Terminal (Command Prompt) i upisati slijedeću naredbu:
gem install shopify-cli
I možemo napraviti provjeru instalacije:
shopify version
Instaliranje Shopify CLI-a na Mac računalima
Osobno, za najbrži i najjednostavniji način, koristim HomeBrew za instalaciju Shopify CLI-a na Mac-u. Dakle, u Terminal ukucamo:
brew tap shopify/shopify brew install shopify-cli
I testiramo instalaciju provjerom verzije:
shopify version
Naredba “shopify help” će ispisati sve dostupne komande za korištenje Shopify CLI-a.
shopify help
Odlično. Sada trebamo još dvije stavke kako bismo dovršili postavljanje radnog okružja: Shopify trgovinu, i Shopify temu – koristiti ćemo standardnu 2.0 temu “Dawn”. Ako nemate otvorenu Shopify trgovinu, možete otvoriti partnerski račun na Shopify-u i otvoriti svoju trgovinu.
Također ćemo trebati temu kao bazu za razvoj naše trgovine, a najbolja opcija za razvoj 2.0 tema trenutno je Shopify “Dawn” tema.
Spajanje CLI-a s našom Shopify trgovinom
Prvi korak će nam biti ulaz u trgovinu putem CLI-a. Dakle, u Terminal ćemo unijeti sljedeću naredbu:
shopify login --store=igorbujas.myshopify.com
Naravno, vi ćete unijeti ima vaše trgovine poslije “=”. Moja je igorbujas.myshopify.com.
Otvoriti će se novi prozor s login formom gdje ćete se opet morati ulogirati. Kada unesete svoje podatke, dobiti ćete slijedeću poruku:
Authenticated successfully. You may now close this page.
U Terminalu će se, ako ste član više organizacija, prikazati obavijest da izaberete kojoj želite pristupiti. Nakon toga ste uspješno ulogirani.
Ako održavate više trgovina i zaboravite u koju ste ulogirani, uvijek možete unijeti naredbu:
shopify whoami
Preuzimanje Shopify teme na vaše lokalno računalo
Kreirati ćemo folder gdje želimo spremiti temu te ju povući na naše računalo koristeći “pull” komandu:
shopify theme pull
Nakon što pritisnemo ENTER, Shopify će nas pitati koju temu želimo povući:
? Select a theme to pull from (Choose with ↑ ↓ ⏎, filter with 'f') > 1. Dawn [live] 2. debut [unpublished] 3. demo-store/main [unpublished]
Kada izaberete temu koju želite, pritisnite ENTER. Ta naredba će povući datoteke s naše Shopify trgovine i instalirati ih na naše računalo.
Ako je sve prošlo kako treba, dobiti ćemo slijedeću poruku:
Pulling theme files from Dawn (#121839616036) on igorbujas.myshopify.com ━━━━━━━━━ ┃ 100% ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (99.63s) ━━ ✓ Theme pulled successfully
Postoji šansa da dobijete ovakvu grešku: (ShopifyCli::API::APIRequestForbiddenError) {“errors”:”Unauthorized Access”}
Ako se to dogodi, probajte se odlogirati iz Shopifya, i iz CLI-a (koristeći naredbu shopify logout) te se ulogirajte ravno u admin (ne iz partnerskog računa) pristupajući domeni www.vaša-trgovina.com/admin.
Ako radite na development temi, a ne na postojećoj live trgovini, morate biti vlasnik trgovine.
Također, ako nemate instaliran Node, instalirajte ga – više korisnika je prijavilo da im je to riješilo problem.
Kreiranje lokalnog razvojnog okružja pomoću Shopify CLI-a
Kako bismo mogli pregledavati našu temu lokalno, morati ćemo kreirati development temu. U ovom slučaju to znači kreiranje skrivene teme pokrenute lokalno, a spojene na live Shopify temu. Ako ovo zvuči zamršeno, stvari će biti jasnije kada završimo postavljanje lokalnog okružja.
Vratimo se u Terminal, te unesimo slijedeću naredbu:
shopify theme serve
Ona će uskladiti našu lokalnu temu sa spojenom trgovinom.
┏━━ Viewing theme… ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ┃ * Syncing theme #122062274596 on igorbujas.myshopify.com ┃ 100% ┃ ┃ Serving . ┃ ┃ Please open this URL in your browser: ┃ http://127.0.0.1:9292 ┃ ┃ Customize this theme in the Online Store Editor: ┃ https://igorbujas.myshopify.com/admin/themes/122062274596/editor ┃ ┃ Share this theme preview: ┃ https://igorbujas.myshopify.com/?preview_theme_id=122062274596 ┃ ┃ (Use Ctrl-C to stop) ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (81.47s) ━━
Odlično. Sada imamo pokrenut lokalni server i možemo vidjeti našu temu u pretraživaču unosom linka koji smo dobili.
Jedna bitna napomena je da, obzirom da je ovo skrivena tema, podaci koje unesemo u “online store editor” NEĆE biti spremljeni. Zato je vrlo bitno da postavimo integraciju Shopifya s GitHubom. Ako radimo izmjene u “online editoru”, moramo koristiti editor na našoj Shopify trgovini, a ne ovaj lokalni.
Server će biti upogonjen sve dok ga ne zatvorimo (ctrl-c) or ili dok ne zatvorimo sam Terminal. Ovaj server također ima i automatsko osvježivanje pretraživača, što znači da ako napravimo neku izmjenu na datotekama naše lokalne teme, promptno ćemo vidjeti promjenu u pretraživaču, bez potrebe za osvježavanjem istog.
Dakle, sada imamo uspješno upogonjen Shopify CLI koji prikazuje našu development temu.
Možemo raditi izmjene kakve želimo i one će biti vidljive samo na našem lokalnom serveru, dakle na našem računalu. Kada smo spremni postaviti promjene na našu Shopify trgovinu, otvoriti ćemo novi prozor u Terminalu (ctrl-t) te poslati izmjene na live temu slijedećom naredbom:
shopify theme push
Otvoriti će se izbornik u kojem moramo izabrati na koju temu želimo dodati naše izmjene:
? Select theme to push to (Choose with ↑ ↓ ⏎, filter with 'f') > 1. Dawn [live] 2. debut [unpublished] 3. demo-store/main [unpublished] 4. Development (839aac-Igors-MBP) [development] [yours]
I morati ćemo potvrditi naš izbor:
? Are you sure you want to push to your live theme? (Choose with ↑ ↓ ⏎) > 1. yes 2. no
Ako je sve prošlo kako treba, dobiti ćemo i obavijest o tome:
┏━━ Pushing theme files to Dawn (#121839616036) on igorbujas.myshopify.com ━━━━━━━━━━━ ┃ 100% ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (38.19s) ━━ ✓ Your theme was pushed successfully View your theme: https://igorbujas.myshopify.com/ Customize this theme in the Online Store Editor: https://igorbujas.myshopify.com/admin/themes/121839616036/editor igorbujas@Igors-MacBook-Pro playground %
Ovo je odličan novi alat koji nam pomaže da automatiziramo i unaprijedimo rad na modernim Shopify temama. Iako moram priznati da će mi pomalo nedostajati ThemeKit.
Photo by Alesia Kazantceva on Unsplash
Leave a comment