Continuando con nuestra serie sobre Bootic CLI (parte I) te presentamos en esta entrega cómo editar el diseño de tu tienda. O como sería un uso diario. Tanto para quitar/agregar o agregar nuevos elementos al diseño de tu tienda.
Ambiente de desarrollo y ambiente de producción
Antes que nada te debemos comentar que Bootic dispone de dos ambientes para tu tienda.
- El ambiente de producción—donde ocurre la acción real.
- El ambiente de desarrollo–donde podemos probar esa nueva paleta de colores, entre otras cosas.
El primero es la tienda en producción, donde acceden su clientes a comprar tus productos.
El segundo ambiente es de pruebas, donde todo lo que ahí ves son datos de producción, pero donde puedes hacer cambios en el diseño sin que estos «estropeen» los de producción.
Para acceder al ambiente de pruebas agrega /preview/dev a la URL de tu tienda.
IMPORTANTE: El ambiente de desarrollo no viene por defecto cuando creas la tienda, se debe generar. En el siguiente punto de enseñamos cómo hacerlo.
Descargando el diseño a tu PC—ambiente Dev
Puesto que el CLI ya lo tienes instalado (ver primera parte si todavía no lo instalas), vamos
a descargar la tienda a tu PC. Para ello digitamos el siguiente comando
(reemplazar MITIENDA por el nombre de tu tienda):
bootic theme clone MITIENDA --shop=MITIENDANos hará la siguiente pregunta:
Working on public theme of shop MITIENDA
Would you like to create (and work on) a development
version of your theme? (recommended) [y]
Acá nos pregunta si queremos trabajar en un ambiente de pruebas, si respondemos «sí» se creará uno copiando el diseño de tu actual tienda en producción.
Editando y subiendo el cambio
Supongamos que hiciste el siguiente cambio en theme.css de tu tienda:
product-description {
font-size: 16px; /* <---- se agregó esta regla */
}
Para subir el cambio vamos a la linea de comando y digitamos:
bootic theme push
Luego veremos:
Working on development theme of shop MITIENDA ---> Pushing local changes to remote... ---> Updating remote templates... --------- local theme.css was modified at 2021-06-22 04:17:30 UTC (more recent than remote): --------- padding: 12px 0 0; + font-size: 16px; } Update remote theme.css? [y]
Si le decimos «sí» el cambio se subirá a la tienda en tu ambiente de pruebas. Para ver el cambio en vivo anda a la siguiente URL:
https://MITIENDA.bootic.net/preview/dev
Recuerda que MITIENDA la debes reemplazar por el nombre de la tuya (en minúscula).
Por supuesto que hacer un cambio y luego subirlo no es del todo cómodo, es por eso que Bootic CLI dispone de una herramienta donde se detectarán los cambio que ocurran en tu PC y estos serán subidos de forma automática.
Bonus Point - control de versiones
Dentro de todos los beneficios que tiene trabajar el diseño de tu tienda en tu PC está el que puedes tener tu código gestionado por una aplicación de control de versiones; como por ejemplo: Git.
Watch—o el observador
Con watch activado los cambios serán enviado a la tienda de
inmetiado, para activarlo debes ir al directorio de trabajo y digitar los
siguiente:
bootic theme watchDéjalo corriendo para que haga su trabajo. En otra ventana haz los cambios en tu tienda. En la gran mayorías de las veces esta otra ventana debería tener corriendo tu editor de escritorio favorito.
El el siguiente video podrás ver watch en pleno funcionamiento. En la parte superior se edita theme.css y la parte inferior está corriendo watch, quien al momento de detectar el cambio sube el archivo.
Archivos de imagen
Si quieres subir una imagen o foto de apoyo el diseño de tu tienda el flujo sería el siguiente:
- Subir la foto dentro del directorio
assets - Si tenías corriendo
watchésta se subirá automáticamente - Si no estabas corriendo
watchdebes hacer:bootic theme push
Recuerda que para llamar una foto desde la tienda lo dedes hacer así:
<img src="{{ 'foto.jpg' | asset_url }}" alt="Foto">
Publicar en producción
Supongamos que ya estamos conformes con los cambios hechos en la tienda, ya los vimos (en la URL de la tienda en desarrollo) y depuramos. Llegó la hora de publicar.
Para publicar los cambios realizados en desarrollo en tu tienda en producción debes ingresar los siguiente en tu línea de comandos:
bootic themes publishEsta comando nos preguntará si queremos hacer una copia local de la tienda en producción antes de subir los cambios, es recomendamos que digas «sí».
Working on development theme of shop MITIENDA
Working on public theme of shop corinto
Would you like to make a local copy of your
current public theme before publishing? [y]
Y luego nos preguntará si queremos eliminar el ambiente de desarrollo, acá nuestra recomendació es «depende»: Si seguirás haciendo cambios, es mejor que no la borres, ahora si ya no trabajarás en más cambios sería bueno borrarla.
Delete the development copy of your theme after publishing? [y] Me gusta el peligro
Que tal si no quieres trabajar en un ambiente de desarrollo si no que quieres subir los cambios directo en Producción… ¿Es posible?, respuesta: Sí
No lo recomendamos pero el CLI también te permite trabajar directo en producción. A continuación el flujo de comandos:
- Bajamos la tienda a nuestro PC (cambiar MITIENDA por el nombre de tu tienda):
bootic theme clone MITIENDA --shop=MITIENDA -p - Trabajamos en el cambio localmente
- Publicamos el cambio:
bootic theme push(se hará directo en producción)
Más comandos
Bootic CLI dispone de una mini ayuda de todos los comandos que soporta, para ello debes digitar lo siguiente:
bootic theme Lo cual mostrará:
Commands:
# Clone remote theme into directory [dir]
bootic themes clone [dir]
# Show differences between local and remote copies (both public an...
bootic themes compare
# Create or delete a development theme for shop
bootic themes dev
# Describe subcommands or one specific subcommand
bootic themes help [COMMAND]
# Pull changes from a local (parent) theme into current one
bootic themes local_pull [from_path]
# Pair this directory to remote [shop]
bootic themes pair --shop=<shop_subdomain>
# Merges your development theme back into your public website
bootic themes publish
# Pull remote changes into current theme directory
bootic themes pull
# Push all local theme files in current dir to remote shop
bootic themes push
# Sync changes between local and remote themes
bootic themes sync
# Watch local theme dir and update remote when any file changes
bootic themes watch