Shopify i Github Integracija

Shopify je nedavno pustio u pogon niz izvrsnih novih značajki i izmjena na platformi ujedinjenih pod zajedničkim imenom “Shopify OS (Online Store) 2.0”.

Jedna od tih značajki je i integracija popularnog Github servisa sa Shopifyem, koja omogućuje auto-sinkronizaciju Shopify tema sa pohranama na Githubu. Ovo je izuzetno moćan alat jer je do sada postojao samo jedan način na koji je bilo moguće verzionirati kod na starije verzije, i funkcionirao je slično kao i na WordPressu.

Sada možemo izvorno koristiti snagu Git-a za sigurnosno kopiranje naših projekata, a ta opcija je prijeko potrebna. Klijenti će prčkati po kodu, zapošljavati druge developere, studije ili agencije za razvoj novih funkcionalnosti, instalirati će aplikacije trećih strana i mnogo toga tu može poći po krivu. Zato je izuzetno bitno imati kopiju svog koda.

Kako koristiti GIT sa Shopifyem

Za početak ćemo upogoniti Terminal (ako radite u macOS okruženju), ili možemo raditi direktno u editoru koda, koristimo li neki koji ima tu opciju. Ja sam zadnjih godina na Visual Studio Codeu (da, Microsoftov je, i da, genijalan je).

Pozicionirajte se u željeni folder (moj se zove “Demo store”, i kopirao sam novu Shopify 2.0 temu “Dawn” u njega) koristeći “cd” naredbu:

cd demo-store

I pritisnite ENTER (uvijek, poslije svake GIT komande). Time ćete pokrenuti prazni repozitorij:

git init

Dobiti ćete ovakav odgovor:

Initialized empty Git repository in /Users/yourname/yourfolder/projects/demo-store/.git/

Sad moramo dodati naš inicijalni “commit” koristeći “git add” naredbu:

git add .

Možemo utipkati “git status” da provjerimo je li sve dodano kako treba:

git status

Sad kad smo sve pripremili, unijeti ćemo sljedeće:

git commit -m "Our first commit"

Pritisnite “ENTER” i to je to.

Sad ćemo se preseliti u Github i kreirati novi repozitorij.

Shopify i GitHub integracija

Vratimo se u “Terminal” i unesimo:

git remote add origin https://github.com/igorNnw/demo-store.git
git branch -M main
git push -u origin main

I na kraju, pohranit ćemo kod u naš repozitorij koristeći naredbu:

git push origin main

Odlično. Sada smo gotovi s GitHubom i možemo se ulogirati u Shopifyevo administrativno sučelje kako bismo povezali našu temu sa repozitorijem koji smo upravo kreirali.

Kada uđemo u admin, locirati ćemo Online Store -> Themes, naći Theme Library sekciju, i izabrati Add Theme -> Connect From Github

Otvoriti će se okvir na desnoj strani, i unijeti ćemo naše podatke

Moramo izabrati granu (branch), a ime naše je “main” (definirali smo ime u ovom dijelu: “git branch -M main”). Nakon što smo se spojili, završili smo s postavljanjem razvojnog okruženja. Sad možemo objaviti temu.

Od sada, svaki put kad promijenimo nešto na stranici i gurnemo to putem gita na našu granu “main”, izmjene će biti objavljene automatski.

Ovom integracijom smo riješili dvije stvari:

• Postavili smo revizije, kopije i verzije s komentarima našeg koda.
• Obzirom da je ovo dvosmjerna integracija, ako neki član tima ili klijent naprave izmjene direktno u Shopifyevom “Editoru”, taj kod će isto automatski biti pohranjen sa strane Shopifya.

Pogledati ćemo i druge značajke Shopify 2.0 izdanja, kao što su “sekcije na svim stranicama” i izvorna meta-polja, u narednih par članaka.