Home Postavljanje razvojnog okružja Uređivanje Shopify tema pomoću Shopify CLI alata
Postavljanje razvojnog okružjaShopify HrvatskaShopify OS 2.0Shopify za developere

Uređivanje Shopify tema pomoću Shopify CLI alata

SHOPIFY CLI FOR THEME UPDATES AND THEME DEVELOPMENT

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?

Uređivanje tema pomoću Shopify CLI alata

Š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
Uređivanje tema pomoću Shopify CLI alata

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.

Shopify CLI terminal login

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

Written by
Igor Bujas

Radim kao UI dizajner i front-end developer, zadnjih desetak godina gotovo isključivo na Shopify platformi. Ponekad ću napomenuti da sam u industriji toliko dugo da sam popravljao bugove za IE5 i animirao u Flashu dok je još bio Macromedijin proizvod. Kad ne radim, provodim dane penjući, roneći ili trenirajući borilačke sportove.

Leave a comment

Related Articles

Shopify automatizacija
Shopify HrvatskaShopify za poduzetnike

Automatski “Welcome Email” s popustom u Shopifyju

U suvremenoj e-trgovini, efikasna i pravovremena komunikacija s kupcima ključna je za...

Shopify HrvatskaShopify za developere

Kako zaštititi pojedinačnu stranicu lozinkom u Shopifyju — jednostavan vodič bez aplikacija

Shopify po defaultu dopušta postavljanje lozinke samo za cijelu trgovinu, ali ponekad...

AIShopify HrvatskaShopify za developere

Claude Code i Shopify: revolucionarni alat za vlasnike trgovina i developere

Shopify je vodeća platforma za e-trgovinu, a sada, uz Claude Code, možete...

Shopify HrvatskaShopify za poduzetnike

Shopify POS UI ekstenzije: Nova era prilagodljivosti i inovacija u prodajnim sustavima

U svijetu modernog maloprodajnog poslovanja, gdje brzina, personalizacija i besprijekorno korisničko iskustvo...

4 proven ways to speed up your Shopify store.

    We respect your privacy. Unsubscribe at anytime.