Uobičajene zamke CLI šablona i kako ih izbjeći

Stencil sučelje naredbenog retka moćan je alat koji vam omogućuje pregled prethodnih promjena BigCommerce promjena u stvarnom vremenu i povezivanje datoteka u komprimiranu temu koju možete prenijeti u svoju trgovinu. Može vam se činiti zastrašujuće zaroniti u tu vrstu razvoja ako ste novi u Stencilu.

Kao moderator u našoj zajednici za razvojne programe primijetio sam da se korisnici mogu prekinuti s uobičajenim pogreškama tijekom postupka instalacije. Integriranje razvoja šablona s vašim lokalnim postavljanjem i postupcima bit će lako kada prođemo nekoliko uobičajenih zamki. Ovaj će vas post voditi kroz skok u razvoj šablona i nadamo se da ćete smanjiti trenje koje biste mogli doživjeti tijekom nekih škakljivih dijelova.

Trebam li CLI šablonu?

Prvo, a možda i najvažnije, trebali biste utvrditi je li zapravo potrebno instalirati Stencil CLI da biste napravili promjene dizajna koje želite u svojoj trgovini. Radite pametno, nije naporno!

Evo nekoliko scenarija koji će vam pomoći pri donošenju te odluke.

P: Kupcima želim pokazati još nekoliko pojedinosti o proizvodima na mojim stranicama proizvoda - poput podataka o jamstvu - a moja trenutna tema to ne prikazuje izvorno. Trebam li instalirati šablon CLI?

O: Ne! Možete dodati reference na dodatna svojstva objekta Stencil kao {{product.warranty}} u datoteku predloška bez upotrebe CLI-ja. BigCommerce ima ugrađeni uređivač datoteka tema koji možete koristiti za unošenje potrebnih promjena. Ovdje potražite naš vodič za pristup datotekama temama i izmjenama izravno na nadzornoj ploči.

Pogledajte našu dokumentaciju za popis dostupnih objekata i čestice na koje se mogu uputiti. (Ne zaboravite deklarirati nove predmete u predlošku s prednjom materijom.)

P: Trebam li instalirati Stencil CLI da bih svoju trgovinu preveo na dodatne jezike?

O: Da, ovo je situacija u kojoj ćete morati instalirati CLI, jer ćete dodavati novu datoteku za prijenos json, a one moraju biti u paketu s temom.

P: Želim izraditi prilagođeni izgled stranica za određene proizvode. Trebam li CLI da to učinim?

O: Da, stvaranje datoteke prilagođenog predloška zahtijeva instalaciju CLI šablona. CLI će vam trebati za pregled prilagođenog predloška sa stranicom proizvoda dok radite i povezivanje nove datoteke s vašom temom.

Instaliranje CLI-a

Imamo jednostavan vodič za instaliranje CLI-a ovdje u BigCommerce Dev centru, ali želim se obratiti na nekoliko točaka tijekom postupka instalacije, gdje se ljudi obično zaglave.

Instaliranje ovisnosti pomoću Gita i npm-a

Primijetio sam da će korisnici Windowsa ponekad doseći zastoj kada dođe vrijeme za spuštanje šablona i njegovih ovisnosti od npm-a. Da biste to učinili, trebat će vam alat naredbenog retka ljuske koji može izvoditi Unix naredbe. U našoj dokumentaciji preporučujemo Git Bash, ali možete koristiti Powershell ili drugi softver.

Jednom kad instalirate Node sa ovisnostima koje su potrebne za pokretanje Stencila, moći ćete koristiti naredbu npm.

Prilagodba postojeće teme

U našoj dokumentaciji preporučujemo da s GitHuba povučete najnoviju verziju Cornerstonea, ali to nije potrebno ako već imate temu u koju želite uložiti izmjene.

U ovom scenariju sve što trebate učiniti je preuzeti svoju temu sa nadzorne ploče BigCommercea. Pod Storefront> Moje teme kliknite Preuzmi trenutnu temu da biste preuzeli zip datoteku svoje teme.

(Napomena: Za teme Pixel Union, morat ćete postaviti BitBucket SSH ključeve prije ovog koraka.)

Zatim ga raspakirajte i otvorite u ljusci do direktorija tema

cd / files / my_theme

Zatim trči

npm instalacija

Budite svjesni verzija ovisnosti

Problem broj jedan koji sam primijetio kod korisnika prilikom instaliranja Stencil CLI-a je da ne koriste preporučenu verziju čvora ili Python-a ili ne koriste najnoviju verziju samog CLI-ja.

Ako ste preuzeli CLI prije nekog vremena, sada bi bio pravi trenutak za instaliranje najnovije verzije. Pokreni da biste bili sigurni da to ide bez problema

npm deinstalirajte -g @ bigcommerce / stencil-cli

zatim

npm install -g @ bigcommerce / stencil-cli

To deinstalira i ponovno instalira CLI na globalnoj razini.

S Nodeom smo testirali verzije 6.10.3 do 8.12.0. Ako koristite stariju ili noviju verziju, možda ćete primijetiti takvu pogrešku prilikom pokretanja šablona iita - uz brod zabavnih upozorenja.

kobna pogreška: datoteka 'sass / context.h' nije pronađena

Ok, što sad? Prvo, uklonite mapu modula Node.

rm -rf node_module

Sada pokrenite nvm install 7.6.0

Nakon što se podržana verzija uspješno instalira, pokrenite nvm koristeći 7.60 i dvostruko provjerite da li ga koristite pokretanjem čvora -v. Sada biste trebali vidjeti da koristite podržanu verziju

Sada koristite čvor v7.6.0 (npm v6.8.0)

Konačno, pokrenite npm install u direktoriju tema i trebali biste biti u mogućnosti uspješno instalirati sve module čvora, a kada pokrenete šablon init, ne biste trebali vidjeti pogreške. Kada ste spremni za početak razvoja, pokrenite šablon!

Često postavljana pitanja

P: Primjećujem pogrešku pri pokretanju npm install: npm ERR! Pokušajte ponovo pokrenuti ovu naredbu kao root / Administrator.

O: Želite pokušati forsirati npm predmemoriju čistih kao administrator:

sudo cache čist -f

Zatim pokrenite npm Installagain.

P: Vidim pogrešku od 500 prilikom pokretanja šablona init. Je li to zbog pogreške na kraju BigCommercea?

O: Postoji nekoliko stvari koje treba provjeriti kada se to dogodi:

  • Obavezno koristite preporučenu verziju čvora
  • Ova će se pogreška vidjeti ako na vašoj BigCommerce trgovini nema primijenjene teme Stencil.
  • Ovo bi moglo biti nuspojava podnošenja zahtjeva u trgovinu pomoću domene proxy usluge poput Cloudflare ili Amazon Cloudfront. Ako sumnjate da je to krivac, izmijenite datoteku domaćina na svom računalu kako biste lokalni host preslikali na BigCommerce IP u svojoj trgovini.

P: Uspio sam instalirati i postaviti Stencil, ali vidim pogrešku 404 prilikom pokušaja pregleda prilagođene datoteke predloška!

O: Razlog zbog kojeg dobivate ovu pogrešku je taj što prvo morate stvoriti odgovarajuću stranicu u svojoj trgovini uživo s istim URL-om u koji ste preslikali prilagođeni predložak u vašoj .stencil datoteci. Na primjer, recimo da ste već uredili .stencil datoteku da biste uključili ključ za prilagođeni predložak proizvoda:

"proizvod": {
„Alternativna-product.html”:”/ test-url /”
}

Morate se prijaviti na upravljačku ploču vaše trgovine BigCommerce i stvoriti proizvod s URL-om / test-url /.

Završne misli

Jednom kad razbijete postupak instalacije, postaje mnogo lakše riješiti svaki korak. Ako ste i dalje izgubljeni, imate određeno postavljanje ili samo želite razgovarati s drugim programerima o naprednom razvoju Stencila, prijeđite na razvojnu zajednicu. Imate zanimljiv projekt Stencil na kojem radite? Tweet @BigcommerceDevs - želimo čuti o tome!