Общи клопки за трафарет на CLI и как да ги избегнем

Интерфейсът на командния ред Stencil е мощен инструмент, който ви позволява да преглеждате промените в темата на BigCommerce в реално време и да групирате вашите файлове в тема с цип, която можете да качите в магазина си. Може да изглежда малко обезсърчително да се потопите в този тип разработки, ако сте нов в Stencil.

Като модератор в нашата общност на програмисти забелязах, че потребителите могат да затворят често срещаните грешки по време на процеса на инсталиране. Интегрирането на разработката на Stencil с вашата локална настройка и процеси ще бъде лесно, след като преминем няколко общи клопки. Тази публикация ще ви насочи към скок в разработването на Stencil и се надяваме да помогне за намаляване на триенето, което може да изпитате по време на някои от трудните части.

Имам ли нужда от CLI за трафарет?

Първо и може би най-важното, трябва да определите дали наистина трябва да инсталирате Stencil CLI или да направите промените в дизайна, които искате в магазина си. Работете умно, не е трудно!

Ето няколко сценария, които ще ви помогнат да направите това решение.

Въпрос: Искам да покажа на клиентите още няколко подробности за продуктите на страниците на продуктите ми - като информация за гаранцията - и текущата ми тема не показва това на първо място. Трябва ли да инсталирам Stencil CLI?

О: Не! Можете да добавите препратки към допълнителни свойства на обект Stencil като {{product.warranty}} във файл с шаблони, без да използвате CLI. BigCommerce има вграден редактор на файлови теми, който можете да използвате, за да направите необходимите промени. Вижте нашето ръководство за достъп до вашите файлове с теми и извършване на промени директно в таблото за управление тук.

Вижте нашата документация за списък на наличните обекти и частиците, където могат да бъдат препратени. (Не забравяйте да декларирате нови обекти в шаблон с преден въпрос.)

Въпрос: Трябва ли да инсталирам Stencil CLI, за да преведа магазина си на допълнителни езици?

О: Да, това е ситуация, при която ще трябва да инсталирате CLI, тъй като ще добавяте нов файл за превод на json и те трябва да бъдат свързани в темата.

Въпрос: Бих искал да създам персонализирано оформление на страници за определени продукти. Имам ли нужда от CLI, за да направя това?

О: Да, създаването на файл с персонализиран шаблон изисква инсталиране на Stencil CLI. Ще ви трябва CLI, за да визуализирате персонализирания шаблон със страницата на вашия продукт, докато работите, и да свържете новия файл с вашата тема.

Инсталиране на CLI

Имаме директно ръководство за инсталиране на CLI тук в BigCommerce Dev Center, но искам да обърна внимание на няколко точки по време на процеса на инсталиране, където хората са склонни да се забият.

Инсталиране на зависимости с помощта на Git и npm

Забелязах, че потребителите на Windows понякога ще стигнат до безизходица, когато дойде време да свалят Stencil и неговите зависимости от npm. За да направите това, ще ви е необходим инструмент за команден ред на черупка, който може да изпълнява Unix команди. В нашата документация препоръчваме Git Bash, но можете да използвате Powershell или друг софтуер.

След като инсталирате Node със зависимостите, необходими за стартиране на Stencil, ще можете да използвате командата npm.

Персонализиране на съществуваща тема

В нашата документация препоръчваме да изтеглите последната версия на Cornerstone от GitHub, но това не е необходимо, ако вече имате тема, в която искате да направите промени.

В този сценарий всичко, което трябва да направите, е да изтеглите вашата тема от таблото за управление на BigCommerce. Под Storefront> My Themes щракнете върху Download Current Theme, за да изтеглите zip файл на вашата тема.

(Забележка: За теми на Pixel Union, трябва да настроите BitBucket SSH ключове преди тази стъпка.)

След това го разархивирайте и в черупката си отворете директорията с теми

CD / файлове / my_theme

След това бягайте

npm инсталиране

Имайте предвид версиите за зависимост

Проблем номер 1, с който наблюдавах, че се сблъскват потребители, когато инсталират Stencil CLI, е, че не използват препоръчителната версия на Node или Python или не използват най-новата версия на самия CLI.

Ако сте изтеглили CLI преди време, сега би било подходящо време да инсталирате най-новата версия. За да сте сигурни, че това върви гладко, стартирайте

npm деинсталиране -g @ bigcommerce / stencil-cli

тогава

npm инсталирайте -g @ bigcommerce / stencil-cli

Това деинсталира и преинсталира CLI в световен мащаб.

С Node тествахме версии 6.10.3 до 8.12.0. Ако използвате по-ранна или по-нова версия, може да видите грешка като тази, когато пускате stencil init - в допълнение към натоварването с лодка от забавни предупреждения.

фатална грешка: файлът „sass / context.h“ не е намерен

Добре, какво сега? Първо, нукирайте папката си с модули Node.

rm -rf node_модули

Сега стартирайте nvm install 7.6.0

След като поддържаната версия е инсталирана успешно, стартирайте nvm използвайте 7.60 и проверете два пъти, че го използвате, като стартирате node -v. Сега трябва да видите, че използвате поддържаната версия

Сега използвайте node v7.6.0 (npm v6.8.0)

И накрая, стартирайте npm installin в вашата директория с теми и би трябвало да можете успешно да инсталирате всички модули на Node, а когато стартирате stencil init, не трябва да виждате никакви грешки. Когато сте готови да започнете да разработвате, стартирайте стартиране на шаблон!

често задавани въпроси

В: Виждам грешка при стартиране на npm install: npm ERR! Моля, опитайте да изпълните тази команда отново като root / Administrator.

О: Ще искате да опитате да принудите кеш npm чист като администратор:

судо кеш чист -ф

След това стартирайте npm installlagain.

Въпрос: Виждам 500 грешка при стартиране на трафарет init. Това се дължи на грешка в края на BigCommerce?

О: Има няколко неща, които трябва да проверите, когато това се случи:

  • Уверете се, че използвате препоръчана версия на Node
  • Ще видите тази грешка, ако нямате тема Stencil, приложена на вашия BigCommerce Store.
  • Това може да бъде страничен ефект от отправяне на заявка до магазин с помощта на прокси базирана услуга на домейни като Cloudflare или Amazon Cloudfront. Ако подозирате, че това е виновникът, модифицирайте файла с хостове на вашата машина, за да картографирате своя localhost към BigCommerce IP на вашия магазин.

Въпрос: Успях да инсталирам и настрои Stencil, но виждам грешка 404 при опит за визуализация на файл с персонализиран шаблон!

О: Причината за получаване на тази грешка е, че първо трябва да създадете съответната страница в магазина си на живо със същия URL адрес, на който сте картографирали персонализирания шаблон във вашия .stencil файл. Например, да кажем, че вече сте редактирали .stencil файла, за да включите ключ за персонализиран шаблон на продукта:

„Продукт“: {
"Заместник-product.html": "/ тест-URL /"
}

Трябва да влезете в контролния панел на вашия магазин на BigCommerce и да създадете продукт с URL / test-url /.

Заключителни мисли

След като разрушите процеса на инсталиране, става много по-лесно да отстраните проблемите на всяка стъпка. Ако все още сте изгубени, имате определена настройка или просто искате да разговаряте с други разработчици за разширена разработка на Stencil, насочете се към Общността за програмисти. Имате интересен проект за Stencil, над който работите? Tweet @BigcommerceDevs - искаме да чуем за това!