Capcanele CLI comune cu stencil și cum să le evităm

Interfața liniei de comandă Stencil este un instrument puternic care vă permite să previzualizați modificările temei BigCommerce în timp real și să încorporați fișierele într-o temă cu zip pe care o puteți încărca în magazinul dvs. Poate părea un pic descurajant să te arunce în acest tip de dezvoltare dacă ești nou la Stencil.

În calitate de moderator în comunitatea noastră de dezvoltatori, am observat că utilizatorii se pot agăța de erorile comune în timpul procesului de instalare. Integrarea dezvoltării Stencil la configurația și procesele dvs. locale va fi ușoară odată ce trecem peste câteva capcane comune. Acest post vă va ghida prin sărituri în dezvoltare pe Stencil și, sperăm, vă va ajuta să reduceți frecarea pe care o puteți experimenta în unele părți complicate.

Am nevoie de CLI Stencil?

În primul rând și poate cel mai important, ar trebui să stabiliți dacă aveți sau nu nevoie să instalați stencil CLI pentru a face modificările de design pe care le doriți în magazin. Muncește inteligent, nu greu!

Iată câteva scenarii care vă ajută să vă ghidați în luarea acestei decizii.

Î: Aș dori să arăt clienților încă câteva detalii despre produs în paginile mele de produs - cum ar fi informațiile de garanție - iar tema mea actuală nu o afișează în mod nativ. Am nevoie să instalez CLI-ul Stencil?

A: Nu! Puteți adăuga referințe la proprietăți suplimentare ale obiectului Stencil, cum ar fi {{product.warranty}} într-un fișier șablon fără a utiliza CLI. BigCommerce are un editor de fișiere cu temă încorporat pe care îl puteți utiliza pentru a face modificările de care aveți nevoie. Consultați ghidul nostru pentru accesarea fișierelor dvs. tematice și modificări direct în tabloul de bord aici.

Consultați documentația noastră pentru o listă a obiectelor disponibile și a parțialelor la care pot fi făcute referințe. (Nu uitați să declarați obiecte noi într-un șablon cu aspect frontal.)

Î: Trebuie să instalez CLI Stencil pentru a-mi traduce magazinul în limbi suplimentare?

R: Da, aceasta este o situație în care va trebui să instalați CLI, deoarece veți adăuga un nou fișier de traducere json, iar acestea trebuie incluse în temă.

Î: Aș dori să creez un aspect de pagină personalizat pentru anumite produse. Am nevoie de CLI pentru a face acest lucru?

R: Da, pentru a crea un fișier șablon personalizat este necesară instalarea Stencil CLI. Veți avea nevoie de CLI pentru a previzualiza șablonul personalizat cu pagina produsului în timp ce lucrați și pentru a grupa noul fișier cu tema dvs.

Instalarea CLI

Avem un ghid simplu pentru instalarea CLI aici în BigCommerce Dev Center, dar vreau să abordez câteva puncte în timpul procesului de instalare, unde oamenii tind să se blocheze.

Instalarea dependențelor folosind Git și npm

Am observat că utilizatorii Windows vor ajunge uneori la un impas atunci când va veni timpul să retragă Stencil și dependențele sale de la npm. Pentru a face acest lucru, va trebui un instrument de linie de comandă shell care să poată rula comenzi Unix. În documentația noastră, vă recomandăm Git Bash, dar puteți utiliza Powershell sau alt software.

După ce instalați Node cu dependențele necesare pentru a rula Stencil, veți putea utiliza comanda npm.

Personalizarea unei teme existente

În documentația noastră vă recomandăm să derulați ultima versiune de Cornerstone de la GitHub, dar aceasta nu este necesară dacă aveți deja o temă la care doriți să faceți modificări.

În acest scenariu, tot ce trebuie să faci este să descarci tema din tabloul de bord BigCommerce. Sub Magazin> Temele mele, faceți clic pe Descărcați tema curentă pentru a descărca un fișier zip din tema dvs.

(Notă: Pentru temele Pixel Union, va trebui să configurați tastele SSH BitBucket înainte de acest pas.)

Apoi, dezarhivați-o și în shell-ul dvs. navigați în directorul tematic

cd / files / my_theme

Apoi aleargă

instalare npm

Fiți conștienți de versiunile de dependență

Problema numărul unu în care am observat că utilizatorii se confruntă cu instalarea CLI Stencil este că nu folosesc versiunea recomandată de Node sau Python sau nu folosesc cea mai recentă versiune a CLI în sine.

Dacă ați descărcat CLI cu ceva timp în urmă, acum ar fi un moment bun pentru a instala cea mai recentă versiune. Pentru a vă asigura că acest lucru merge bine, rulați

npm dezinstalare -g @ bigcommerce / stencil-cli

atunci

npm install -g @ bigcommerce / stencil-cli

Aceasta dezinstalează și reinstalează CLI la nivel global.

Cu Node, am testat versiunile 6.10.3 până la 8.12.0. Dacă utilizați o versiune anterioară sau ulterioară, este posibil să apelați o eroare ca aceasta atunci când executați stencil init - pe lângă o încărcătură cu avertismente amuzante.

eroare fatală: fișierul „sass / context.h” nu a fost găsit

Bine, ce acum? Mai întâi, nukați-vă folderul modulelor Node.

noduri rm -rf_module

Acum rulați nvm install 7.6.0

După ce versiunea acceptată este instalată cu succes, executați nvm utilizează 7.60 și verificați dublu dacă îl utilizați rulând nodul -v. Acum ar trebui să vedeți că utilizați versiunea acceptată

Acum folosind nodul v7.6.0 (npm v6.8.0)

În cele din urmă, rulați npm installin directorul dvs. tematic și ar trebui să puteți instala cu succes toate modulele nod, iar atunci când executați stencil init, nu ar trebui să vedeți nicio eroare. Când sunteți gata să începeți să dezvoltați, executați stencil start!

întrebări frecvente

Î: Văd o eroare la executarea instalării npm: npm ERR! Încercați să rulați din nou această comandă ca root / Administrator.

R: Vrei să încerci să forțezi un cache npm curat ca administrator:

sudo cache clean -f

Apoi rulați npm installagain.

Î: Văd o eroare de 500 atunci când rulează init stencil. Aceasta se datorează unei erori la sfârșitul BigCommerce?

R: Există câteva lucruri de verificat când se întâmplă acest lucru:

  • Asigurați-vă că utilizați o versiune recomandată de Node
  • Veți vedea această eroare dacă nu aveți o temă Stencil aplicată pe magazinul dvs. BigCommerce.
  • Acesta ar putea fi un efect secundar de a face o solicitare către un magazin folosind un serviciu de domeniu bazat pe proxy, cum ar fi Cloudflare sau Amazon Cloudfront. Dacă bănuiți că acesta este vinovatul, modificați fișierul gazdelor de pe mașina dvs. pentru a face maparea localhost-ului dvs. la BigCommerce IP al magazinului dvs.

Î: Am reușit să instalez și să configurez Stencil, dar am văzut o eroare 404 când încercam să previzualizați un fișier șablon personalizat!

R: Motivul pentru care primiți această eroare este pentru că trebuie să creați mai întâi o pagină corespunzătoare din magazinul live cu aceeași adresă URL pe care ați mapat șablonul personalizat în fișierul dvs. .stencil. De exemplu, să zicem că ați editat deja fișierul .stencil pentru a include o cheie pentru un șablon de produs personalizat:

"produs": {
„Alternate-product.html“:“/ test-url /“
}

Trebuie să vă conectați la panoul de control al magazinului dvs. BigCommerce și să creați un produs cu adresa URL / test-url /.

Gânduri finale

După ce întrerupeți procesul de instalare, devine mult mai ușor să depanați fiecare pas. Dacă tot ați pierdut, aveți o configurație specifică sau doriți doar să discutați cu alți dezvoltatori în legătură cu dezvoltarea avansată a Stencil, mergeți către comunitatea de dezvoltatori. Aveți un proiect interesant Stencil la care lucrați? Tweet @BigcommerceDevs - vrem să aflăm despre asta!