Spoločné šablóny CLI úskalia a ako sa im vyhnúť

Rozhranie príkazového riadku šablóny je výkonný nástroj, ktorý vám umožňuje zobraziť ukážky zmien motívu BigCommerce v reálnom čase a spájať súbory do témy, ktorú môžete nahrať do svojho obchodu. Zdá sa, že trochu skľučujúce sa ponoriť do tohto typu vývoja, ak ste v Stencil nováčikom.

Ako moderátor v našej komunite vývojárov som si všimol, že používatelia môžu byť počas procesu inštalácie obesení o bežných chybách. Integrácia vývoja šablóny s miestnym nastavením a procesmi bude jednoduchá, keď prekonáme niekoľko bežných nástrah. Tento príspevok vás prevedie skokom do vývoja na šablóne a dúfajme, že pomôže znížiť trenie, ktoré sa môže vyskytnúť počas niektorých zložitých častí.

Potrebujem šablónu CLI pre šablónu?

Najdôležitejšie je, že by ste mali určiť, či skutočne potrebujete nainštalovať šablónu CLI šablóny, aby ste mohli vykonať zmeny dizajnu v obchode. Pracujte inteligentne, nie tvrdo!

Tu je niekoľko scenárov, ktoré vám pomôžu pri rozhodovaní.

Otázka: Chcel by som zákazníkom ukázať niekoľko ďalších podrobností o produktoch na mojich produktových stránkach - napríklad informácie o záruke - a môj aktuálny motív sa to natívne nezobrazí. Musím nainštalovať šablónu CLI šablóny?

A: Nie! Do súboru šablón môžete pridať odkazy na ďalšie vlastnosti objektov šablóny, ako napríklad {{product.warranty}}, bez použitia rozhrania CLI. BigCommerce má vstavaný editor tematických súborov, ktorý môžete použiť na vykonanie potrebných zmien. V našom sprievodcovi nájdete prístup k súborom tém a vykonanie zmien priamo v informačnom paneli.

V našej dokumentácii nájdete zoznam dostupných objektov a častí, na ktoré sa dajú odkazovať. (Nezabudnite nahlásiť nové objekty v šablóne s prednou záležitosťou.)

Otázka: Musím nainštalovať šablónu CLI šablóny, aby som mohol prekladať svoj obchod do ďalších jazykov?

Odpoveď: Áno, toto je situácia, keď budete musieť nainštalovať CLI, pretože budete pridávať nový súbor json prekladu a tie musia byť spojené do témy.

Otázka: Chcel by som vytvoriť vlastné rozloženie stránky pre určité produkty. Potrebujem na to CLI?

Odpoveď: Áno, vytvorenie vlastného súboru šablóny si vyžaduje inštaláciu šablóny Stencil CLI. Pri práci budete potrebovať rozhranie CLI, aby ste si počas práce mohli pozrieť ukážku vlastnej šablóny so svojou stránkou produktu a prepojiť nový súbor s vaším motívom.

Inštalácia CLI

Máme jednoduchého sprievodcu inštaláciou CLI tu v BigCommerce Dev Center, ale počas procesu inštalácie by som sa chcel venovať niekoľkým bodom, v ktorých majú ľudia tendenciu uviaznuť.

Inštalácia závislostí pomocou Git a npm

Všimol som si, že používatelia Windows niekedy dosiahnu bezvýchodiskovú situáciu, keď príde čas, aby zrušili šablónu a jej závislosti od npm. Na to budete potrebovať nástroj príkazového riadku shellu, ktorý dokáže spúšťať príkazy Unix. V našej dokumentácii odporúčame Git Bash, ale môžete použiť Powershell alebo iný softvér.

Po nainštalovaní uzla so závislosťami potrebnými na spustenie aplikácie Stencil budete môcť použiť príkaz npm.

Prispôsobenie existujúcej témy

V našej dokumentácii vám odporúčame stiahnuť najnovšiu verziu produktu Cornerstone zo služby GitHub. Nie je to však potrebné, ak už máte tému, v ktorej chcete vykonať zmeny.

V tomto scenári stačí prevziať tému z hlavného panela BigCommerce. V časti Storefront> Moje motívy kliknite na možnosť Download Current Theme (Prevziať aktuálny motív) a prevezmite si súbor ZIP s témou.

(Poznámka: V prípade tém Pixel Union budete musieť pred týmto krokom nastaviť kľúče BitBucket SSH.)

Potom ju rozbaľte a vo vašej schránke prejdite do adresára tém

cd / files / my_theme

Potom spustite

Npm inštalácia

Buďte si vedomí verzií závislosti

Jedným z problémov, s ktorým som sa stretol pri inštalácii rozhrania CLI šablóny, je, že nepoužívajú odporúčanú verziu uzla alebo Pythonu alebo nepoužívajú najnovšiu verziu samotného rozhrania CLI.

Ak ste si stiahli CLI pred chvíľou, teraz by bolo vhodné nainštalovať najnovšiu verziu. Aby ste sa uistili, že to ide hladko, spustite

npm odinštalovať -g @ bigcommerce / stencil-cli

potom

npm install -g @ bigcommerce / stencil-cli

Týmto sa globálne odinštaluje a znovu nainštaluje CLI.

S produktom Node sme testovali verzie 6.10.3 až 8.12.0. Ak používate staršiu alebo neskoršiu verziu, pri spustení šablóny sa môže zobraziť chyba, ako je táto, okrem zábavných varovaní.

závažná chyba: súbor sass / context.h nebol nájdený

Dobre, čo teraz? Najskôr nuke priečinok moduly Node.

rm -rf node_modules

Teraz spustite nvm install 7.6.0

Akonáhle je podporovaná verzia úspešne nainštalovaná, spustite nvm pomocou 7,60 a dvakrát skontrolujte, či ju používate, spustením uzla -v. Teraz by ste mali vidieť, že používate podporovanú verziu

Teraz sa používa uzol v7.6.0 (npm v6.8.0)

Nakoniec spustite npm installin v adresári tém a mali by ste byť schopní úspešne nainštalovať všetky moduly Node. Keď spustíte šablónu init, nemali by ste vidieť žiadne chyby. Keď ste pripravení začať vyvíjať, spustite šablónu štartu!

často kladené otázky

Otázka: Pri inštalácii aplikácie npm vidím chybu: npm ERR! Skúste tento príkaz spustiť znova ako root / administrátor.

Odpoveď: Budete chcieť skúsiť vynútiť npm cache čisté ako správca:

sudo cache clean -f

Potom spustite npm installagain.

Otázka: Pri spustení šablóny sa zobrazuje chyba 500. Je to kvôli chybe na konci spoločnosti BigCommerce?

A: Existuje niekoľko vecí, ktoré treba skontrolovať, keď sa to stane:

  • Uistite sa, že používate odporúčanú verziu uzla
  • Táto chyba sa zobrazí, ak vo svojom obchode BigCommerce nemáte aplikovanú šablónu šablóny.
  • Môže to byť vedľajší účinok pri podávaní žiadosti do obchodu pomocou doménovej služby založenej na proxy, ako je Cloudflare alebo Amazon Cloudfront. Ak máte podozrenie, že ide o vinníka, upravte súbor hosts vo vašom počítači tak, aby mapoval vášho localhosta na IP adresy BigCommerce vo vašom obchode.

Otázka: Podarilo sa mi nainštalovať a nastaviť šablónu, ale pri pokuse o ukážku súboru vlastnej šablóny sa zobrazuje chyba 404!

Odpoveď: Dôvodom, prečo sa zobrazuje táto chyba, je to, že musíte najprv v príslušnom obchode vytvoriť príslušnú stránku s rovnakou adresou URL, na ktorú ste namapovali vlastnú šablónu v súbore .stencil. Povedzme napríklad, že ste už upravili súbor .stencil tak, aby obsahoval kľúč pre vlastnú šablónu produktu:

„Produkt“: {
"Alternate-product.html": "/ Test-url /"
}

Musíte sa prihlásiť do ovládacieho panela svojho obchodu BigCommerce a vytvoriť produkt s adresou URL / test-url /.

Záverečné myšlienky

Po ukončení procesu inštalácie je oveľa jednoduchšie vyriešiť jednotlivé kroky. Ak ste stále stratili, máte konkrétne nastavenie alebo si len chcete porozprávať s inými vývojármi o pokročilom vývoji šablón, prejdite do komunity vývojárov. Máte zaujímavý projekt šablóny, na ktorej pracujete? Tweet @BigcommerceDevs - o tom sa chceme dozvedieť!