Errores comunes de la CLI de la plantilla y cómo evitarlos

La interfaz de línea de comandos de Stencil es una herramienta poderosa que le permite obtener una vista previa de los cambios de tema de BigCommerce en tiempo real y agrupar sus archivos en un tema comprimido que puede cargar en su tienda. Puede parecer un poco desalentador sumergirse en este tipo de desarrollo si es nuevo en Stencil.

Como moderador en nuestra Comunidad de desarrolladores, he notado que los usuarios pueden quedar atrapados en los errores comunes durante el proceso de instalación. Integrar el desarrollo de Stencil con su configuración y procesos locales será fácil una vez que veamos algunos escollos comunes. Esta publicación lo guiará a través del desarrollo de Stencil y, con suerte, ayudará a reducir la fricción que puede experimentar durante algunas de las partes difíciles.

¿Necesito la Stencil CLI?

Primero y quizás lo más importante, debe determinar si realmente necesita o no instalar la CLI de Stencil para realizar los cambios de diseño que desea en su tienda. ¡Trabaja de manera inteligente, no difícil!

Aquí hay algunos escenarios para ayudarlo a guiarlo a tomar esa determinación.

P: Me gustaría mostrar a los clientes algunos detalles más del producto en mis páginas de productos, como la información de la garantía, y mi tema actual no muestra esto de forma nativa. ¿Necesito instalar la CLI de Stencil?

A: ¡No! Puede agregar referencias a propiedades de objetos Stencil adicionales como {{product.warranty}} en un archivo de plantilla sin usar la CLI. BigCommerce tiene un editor de archivos de tema incorporado que puede usar para realizar los cambios que necesita. Consulte nuestra guía para acceder a sus archivos de tema y realizar cambios directamente en su Tablero aquí.

Consulte nuestra documentación para obtener una lista de los objetos disponibles y los parciales a los que se puede hacer referencia. (No se olvide de declarar nuevos objetos en una plantilla con la parte frontal).

P: ¿Necesito instalar la CLI de Stencil para traducir mi tienda a idiomas adicionales?

R: Sí, esta es una situación en la que necesitará instalar la CLI, porque agregará un nuevo archivo de traducción json, y estos deben estar incluidos en el tema.

P: Me gustaría crear un diseño de página personalizado para ciertos productos. ¿Necesito la CLI para hacer esto?

R: Sí, la creación de un archivo de plantilla personalizada requiere la instalación de Stencil CLI. Necesitará la CLI para obtener una vista previa de la plantilla personalizada con la página de su producto mientras trabaja, y para agrupar el nuevo archivo con su tema.

Instalar la CLI

Tenemos una guía sencilla para instalar la CLI aquí en el Centro de desarrollo de BigCommerce, pero quiero abordar algunos puntos durante el proceso de instalación donde la gente tiende a atascarse.

Instalar dependencias usando Git y npm

He notado que los usuarios de Windows a veces llegan a un punto muerto cuando llega el momento de eliminar Stencil y sus dependencias de npm. Para hacer esto, necesitará una herramienta de línea de comandos de shell que pueda ejecutar comandos de Unix. En nuestra documentación, recomendamos Git Bash, pero puede usar Powershell u otro software.

Una vez que instale Node con las dependencias necesarias para ejecutar Stencil, podrá usar el comando npm.

Personalizar un tema existente

En nuestra documentación, le recomendamos que despliegue la última versión de Cornerstone de GitHub, pero eso no es necesario si ya tiene un tema en el que desea realizar cambios.

En este escenario, todo lo que tiene que hacer es descargar su tema desde el panel de BigCommerce. En Tienda> Mis temas, haga clic en Descargar tema actual para descargar un archivo zip de su tema.

(Nota: para los temas de Pixel Union, deberá configurar las claves SSH de BitBucket antes de este paso).

Luego, descomprímalo y en su shell navegue hasta el directorio de temas

cd / files / my_theme

Entonces corre

npm install

Tenga en cuenta las versiones de dependencia

El problema número uno que he observado que los usuarios encuentran al instalar la CLI de Stencil es que no están utilizando la versión recomendada de Node o Python, o no están utilizando la versión más reciente de la CLI.

Si descargó la CLI hace un tiempo, ahora sería un buen momento para instalar la última versión. Para asegurarte de que todo salga bien, ejecuta

Desinstalación de npm -g @ bigcommerce / stencil-cli

entonces

npm install -g @ bigcommerce / stencil-cli

Esto desinstala y reinstala la CLI globalmente.

Con Node, hemos probado las versiones 6.10.3 a 8.12.0. Si está utilizando una versión anterior o posterior, es posible que vea un error como este cuando ejecuta stencil init, además de un montón de advertencias divertidas.

error fatal: archivo 'sass / context.h' no encontrado

Ok, que pasa ahora? Primero, inserta tu carpeta de módulos de Nodo.

rm -rf node_modules

Ahora ejecute nvm install 7.6.0

Una vez que la versión compatible se haya instalado correctamente, ejecute nvm use 7.60 y verifique que la esté utilizando ejecutando node -v. Ahora debería ver que está utilizando la versión compatible

Ahora usando el nodo v7.6.0 (npm v6.8.0)

Finalmente, ejecute npm install en su directorio de temas y debería poder instalar con éxito todos los módulos Node, y cuando ejecute stencil init, no debería ver ningún error. Cuando esté listo para comenzar a desarrollar, ejecute stencil start!

Preguntas frecuentes

P: Veo un error al ejecutar npm install: npm ERR! Intente ejecutar este comando nuevamente como root / Administrator.

R: Deberá intentar forzar una limpieza de caché npm como administrador:

sudo cache clean -f

Luego ejecute npm installagain.

P: Veo un error 500 al ejecutar stencil init. ¿Esto se debe a un error al final de BigCommerce?

R: Hay algunas cosas para verificar cuando esto sucede:

  • Asegúrese de estar utilizando una versión recomendada de Node
  • Verá este error si no tiene un tema Stencil aplicado en su tienda BigCommerce.
  • Esto podría ser un efecto secundario de hacer una solicitud a una tienda utilizando un servicio de dominio basado en proxy como Cloudflare o Amazon Cloudfront. Si sospecha que este es el culpable, modifique el archivo de hosts en su máquina para asignar su host local a la IP de BigCommerce de su tienda.

P: ¡Pude instalar y configurar Stencil, pero veo un error 404 al intentar obtener una vista previa de un archivo de plantilla personalizado!

R: La razón por la que recibe este error es porque primero necesita crear una página correspondiente en su tienda en vivo con la misma URL a la que asignó la plantilla personalizada en su archivo .stencil. Por ejemplo, supongamos que ya ha editado el archivo .stencil para incluir una clave para una plantilla de producto personalizada:

"Producto": {
"Alternate-product.html": "/ test-url /"
}

Debe iniciar sesión en el panel de control de su tienda BigCommerce y crear un producto con la URL / test-url /.

Pensamientos finales

Una vez que desglosa el proceso de instalación, se vuelve mucho más fácil solucionar problemas en cada paso. Si todavía está perdido, tiene una configuración específica o simplemente desea conversar con otros desarrolladores sobre el desarrollo avanzado de Stencil, diríjase a la Comunidad de desarrolladores. ¿Tienes un proyecto de Stencil interesante en el que estás trabajando? Tuitea @BigcommerceDevs: ¡queremos saberlo!