Desarrollo avanzado de temas en Shopify

1. Introducción: Hola, me llamo Gavin. Soy el fundador de Disco, una empresa que ayuda a los propietarios de tiendas Shopify a sacar el máximo provecho de sus tiendas a través del desarrollo de temas para clientes y el desarrollo de aplicaciones para clientes. También he lanzado un par de productos en torno al desarrollo de Shopify, entre ellos Mastering Shopify Themes y Mastering Shopify Apps. También hay un par de proyectos de código abierto en los que trabajé. Todas estas cosas tienen como objetivo ayudar a desarrolladores como tú desarrollar temas de Shopify en un mapa realmente eficiente y fácil. Estar involucrado en todas las diferentes partes de Shopify, significa que tengo que aprender constantemente y volver a aprender muchas cosas en torno al desarrollo del tema Shopify, y eso es realmente lo que estoy tratando de compartir contigo a través de este curso, las mejores prácticas, los consejos, trucos y técnicas que he desarrollado a lo largo de los años. El título de este curso es Advanced Shopify Theme Development, y sigue de la introducción de Kurt Elster a Shopify Theme Development. Ese curso también está disponible aquí mismo en Skillshare. Este curso se basa en que no solo tengas habilidades de desarrollo web existentes, sino que también tengas un poco de familiaridad laboral con Shopify. Entonces, si ese no es el caso todavía, verdad te sugiero que regreses y tomes el curso de Kurt antes de volver a este. Asumiendo que te sientes cómodo con los conceptos básicos del desarrollo de Shopify, entonces este curso se va a enfocar en nivelar tus habilidades en dos áreas clave. El primero va a ser en mejorar el proceso que utilizamos para desarrollar temas. Entonces, mirando las herramientas y técnicas en torno a ese tipo de cosas. La segunda parte, para asegurarnos de que no solo estamos hablando de esto en un vacío, es sumergirnos en algunos escenarios del mundo real, y mirar el código y las prácticas de desarrollo que realmente usaremos en un escenario real. Tomar este curso debería darte las habilidades y la confianza que necesitas para abordar proyectos de desarrollo de Shopify más grandes y las solicitudes entrantes de los clientes. Esto significa que estarás fuera a entregar más valor a tus clientes y a tu empresa. A su vez, eso significa que eres capaz de cobrar más por el valor que estás creando 2. Descripción general del proyecto del curso: Al igual que con muchas cosas la mejor manera de aprender desarrollo de tema Shopify en mi opinión al menos es a través de hacerlo realmente, y es por eso que este curso contiene un proyecto de clase. De verdad te animo a que te tomes una grieta a eso una vez que has visto a través del video la primera vez. El proyecto comenzará con ustedes descargando el tema base. Es funcional pero es realmente bastante simple. Entonces solo te pedimos que apliques algunas de las técnicas que aprenderás a lo largo de este curso a través de ese tema. Entonces, cosas como agregar filtrado y clasificación dinámicos, alguna funcionalidad Ajax, agregan al carrito cosas así. Entonces también tienes la oportunidad si realmente querías agregar tus propios pedacitos de estilo con CSS y SASS. Trabajar a través de ese proyecto sólo debería tomar unas horas y te daremos algo de exposición a lo que creo que es algún escenario práctico de mundos reales para el desarrollo del tema Shopify. Las únicas cosas que realmente necesitas para el proyecto son una tienda de desarrollo y un editor de texto de tu elección. Tendrás que familiarizarte con cómo configurar una tienda de desarrollo. Si no estás familiarizado con eso, entonces regresa al curso de Kurtz sobre temas de Introducción a Shopify para darte un refresco. Si te quedas atascado en cualquier etapa con el proyecto, entonces podrías revisar el repositorio de GitHub el cual tiene ejemplos para cada paso de los proyectos o siempre podrías ponerte en contacto conmigo como clase más tarde e intentaré ayudarte. Una vez que hayas completado el proyecto, sería realmente genial si pudieras compartirlo conmigo mismo y con otros estudiantes y puedes hacerlo a través de la plataforma Skillshare. Está bien. Empecemos. 3. Un mejor flujo de trabajo de desarrollo: El primer tema que vamos a cubrir es el flujo de trabajo de desarrollo. Entonces, el proceso que utilizamos para desarrollar, probar y desplegar nuestros temas. El motivo por el que creo que esto es algo importante a abordar es porque cuanto más esfuerzo gastamos en nuestro flujo de trabajo, más fácil es para nosotros desarrollar estos temas y más tiempo podemos dedicar a construir cosas que los clientes realmente se preocupan por. El objetivo aquí es entregar las cosas más rápido y profesionalmente, podemos evitar repetirnos en pasos manuales y también hace que sea un poco más fácil colaborar con otros desarrolladores cuando estamos trabajando juntos en equipo. Entonces, empecemos por el inicio y veamos lo que obtenemos con el editor en línea predeterminado de Shopify. Entonces, llegamos a eso desde el Administrador de Shopify y una vez que lo abrimos, vemos que en realidad obtenemos una bastante buena visión general de nuestra estructura temática a la izquierda aquí y luego cuando realmente abrimos archivos, obtenemos buenas características como sintaxis líquida destacando y hay una versión limitada de control de revisión. En eso podemos hacer cambio y guardar y luego esperar para volver a versiones anteriores. Pero todavía hay algunas limitaciones bastante severas con este enfoque. Entonces estamos desarrollando la nube. Entonces, si tenemos un editor local preferido, realmente no obtenemos la ventaja de poder usar eso. Realmente no obtenemos un historial de cambios a través de todos los diferentes archivos. En nuestro tema, no es muy fácil revertir cambios en grupos grandes y por supuesto es muy difícil colaborar con otros usando este flujo de trabajo porque realmente no sabemos quién está editando qué archivos y si vamos a sobrescribir cambios. Dados estos problemas, vamos a empezar a buscar formas solucionarlos o de evitarlos y hacer que ese proceso de desarrollo sea fácil. Lo primero que vamos a hacer para ayudarte con eso es mirando la Gema Theme. Ahora, la Gema Theme es una pequeña utilidad de línea de comandos que automatiza el proceso de carga y descarga de archivos entre tu máquina de desarrollo local y un tema de Shopify con el que estás trabajando. Veamos cómo configurarnos con la Gema Theme. Entonces, lo primero que quieres hacer es asegurarte de que tengas instalado Ruby, ya que es un RubyGem. Si no estás seguro de cómo hacer que Ruby se ejecute en tu plataforma, entonces puedes buscar en Google instrucciones sobre cómo conseguir esa configuración. Entonces una vez que hayas hecho eso, solo tienes que ejecutar un comando gem install con el tema Shopify. Gem es el argumento que instalará la Gema y luego tendremos acceso a una opción de línea de comandos de tema, que si solo escribimos en nuestra línea de comandos diremos que obtenemos un montón de instrucciones de uso. Debido a que la gema Shopify Theme utiliza la API de Shopify para subir y descargar activos para nosotros, vamos a necesitar configurarla con algunas credenciales de API para poder trabajar con un tema actual. Entonces, eso es lo que voy a hacer aquí. Estoy creando una nueva aplicación privada desde dentro del Administrador de Shopify. Simplemente le voy a dar un nombre algo así como Theme Gem y luego podemos usar las credenciales generadas aquí y pasar eso a la Gema Theme. Entonces, verás que una vez que hayas creado una app, tendrás esta clave API y una contraseña API. Entonces, para configurarnos con un nuevo tema, lo que vamos a hacer es saltar de nuevo a la línea de comandos, crear un directorio para nuestro tema y luego una vez que sudo en él, podemos usar el comando theme configure para configurar la configuración para nosotros. Por lo que sólo vamos a utilizar la información que tenemos en nuestro admin pass out para configurar. Entonces, pasamos la clave API, la contraseña y luego también vamos a pasar en el dominio de la tienda con la que estamos trabajando. Entonces, esta es solo la cuenta.myshopify.com y luego una vez que golpeemos enter, eso creará un archivo config.yaml. Echando un vistazo al contenido de ese archivo, podemos ver que se agrega la clave y contraseña que pasamos a este archivo de configuración y realmente no necesitamos preocuparnos por las otras opciones de configuración por el momento. Como puedes ver, ahora ejecuté un comando de descarga de tema y que básicamente usará la API de Shopify para obtener una lista de todos los activos de nuestro tema actual en nuestra tienda Shopify y descargarlos localmente. Entonces, si abrimos un editor de texto como Sublime Text y miramos esto localmente, podemos ver que hemos copiado todos los archivos de nuestro tema hasta nuestra máquina local. Entonces, ahora podemos hacer uso de una de las mejores características de la Gema Theme que es el comando de reloj tema. Entonces, si ejecutamos eso dentro de un directorio donde tenemos un tema, entonces podemos usar un editor local para hacer cambios en esos archivos y hacer que se apliquen automáticamente cargados a la tienda Shopify con la que estamos trabajando. Entonces, para ver un ejemplo aquí, solo voy a cambiar el título de mi página y luego una vez guarde estos cambios, veré que eso automáticamente se sube a la tienda Shopify. Entonces, así es como traemos el desarrollo local y evitamos ese problema del que estábamos hablando antes con el editor en línea predeterminado, donde no podemos usar nuestro editor preferido ni usar métodos de desarrollo local. La segunda herramienta que vamos a ver para ayudarnos con nuestro piso de desarrollo temático es Git y si no lo has usado Git antes es un sistema de control de revisiones que se utiliza muy comúnmente en mucho desarrollo de software incluyendo desarrollo web y te da muchas ventajas en que hace mucho más fácil colaborar con otras personas, te da una manera de mantener un historial de revisiones para que puedas ver quién hizo qué cambios cuando con tus temas y también juega muy fuertemente en algunas de las estrategias avanzadas de despliegue que vamos a estar viendo en lecciones posteriores. Echemos un vistazo a cómo íbamos a poner un tema que tenemos localmente bajo control de revisión de Git. Entonces, lo primero que hay que hacer es comprobar que realmente tenemos el cliente de línea de comandos de Git y lo hacemos con sólo escribir git—version. Si estás ejecutando un sistema Mac o Linux, entonces tendrás esto por defecto, posible que tengas que instalarlo manualmente en Windows. Una vez que hayas hecho eso, puedes ejecutar el comando git init en el directorio local y eso configurará tu repositorio de Git. Lo primero que hago cuando creo un nuevo repositorio de Git para un tema de Shopify es crear lo que se llama un archivo gitignore y agregarle el archivo config.yaml. Entonces esto solo le dice a Git que no queremos realizar un seguimiento de los cambios en el archivo config.yaml y eso se debe a que contiene credenciales API para nuestra tienda, por lo que realmente no queremos estar comprometiéndolos en un repositorio y potencialmente exponer ellos al público. Entonces, una vez que haya configurado ese archivo ignore, puedo agregar todos los archivos de mi tema con el comando git add y luego comprometerlos usando el comando git commit y veremos que todos los archivos del directorio que he se ha comprometido con el repositorio de Git. Entonces, este git todo va a ser muy familiar si has usado Git antes. Si no has usado Git antes de entonces realmente te animo a salir y encontrar uno de los excelentes tutoriales disponibles en línea sobre cómo usarlo. Es una herramienta realmente útil la estaremos usando mucho durante este curso Para darte una idea de cómo funciona el flujo de trabajo con Git. Entonces una vez que hayamos configurado nuestro repositorio, como acabamos de hacer, y luego haría cambios a nuestro tema. Entonces, por ejemplo, aquí solo estoy cambiando el título de la página. Guardamos esos cambios y luego regresamos de la línea de comandos, podemos obtener una visión general de lo que ha cambiado usando el comando Git status y luego podemos ejecutar git add para agregar ese cambio a nuestro próximo commit. Entonces, finalmente, podemos ejecutar el comando git commit para realmente finalizar ese commit y hay herramientas GUI alrededor que te ayudarán con este flujo de trabajo si prefieres usar eso en lugar de la línea de comandos. Pero una vez que hayas agregado todos estos cambios, verás que puedes ejecutar git log y obtener un historial de quién hizo qué cambios y cuándo a tu tema. Ahora hemos visto dos formas de mejorar nuestro flujo de trabajo de desarrollo, hemos traído nuestro desarrollo temático local a través de la Gema Theme y también hemos colocado nuestros temas bajo control de revisión usando Git. Vamos a ver algunas técnicas de proceso de desarrollo más adelante en el curso cuando veamos el despliegue de temas avanzados y también la automatización del flujo de trabajo. Pero por ahora, realmente quiero quedarme atascado en algunas cosas más prácticas. Entonces, algún código real, lo que podríamos ver en un escenario de desarrollo temático de Shopify del mundo real. Pero a medida que empezamos a abordar eso puedes usar las cosas que acabamos aprender en este curso para seguir. 4. Personalización de productos: Es hora de sumergirnos en alguna edición temática real, y vamos a empezar mirando la personalización del producto. Entonces, cómo podemos dejar que los visitantes personalicen sus productos desde la página del producto. Esta es una funcionalidad bastante común. Probablemente lo hayas visto en muchos temas en la tienda Shopify Theme, en Mosaic en sus sitios alrededor de la web. Pero el enfoque que vamos a tomar es empezar por mirar lo básico y ver cómo se construye la funcionalidad en una tienda Shopify a partir de estos componentes básicos. Al hacer eso, nos vamos a centrar en las tres cosas más importantes cuando estés construyendo una página de producto. El primero de ellos es asegurarse de que se está comunicando con el cliente, así que le dice qué opciones están disponibles, qué pueden hacer para configurar su producto para que realice diferentes selecciones. El segundo es asegurarse de que les sea fácil hacer sus selecciones, por lo que dependiendo del tipo de elecciones que necesiten tomar, puedes proporcionar la entrada y los controles adecuados para que hagan eso. Entonces lo último es proporcionar retroalimentación, para que si sí hacen una selección, para que cambien el color de un producto o algo así, ese cambio se refleje en la página, para que pueda ver que eso ha sido recibido y ver qué efecto tiene en su compra. Empecemos por presentar la tienda Candle que es la tienda demo que estaremos utilizando a lo largo de este curso para trabajar. Entonces, esta es la página de producto que nos interesa. Contamos con un conjunto de variantes. Las opciones variantes que podemos elegir entre para este producto particular de la vela es el color de la vela, y si la vela viene con tapa o no. También somos capaces de agregar una propiedad personalizada, propiedad de elemento de línea personalizada a la vela que es un mensaje grabado, y luego finalmente tenemos estos pequeños bits adicionales de metadatos que son el precio mostrado y la imagen mostrada. El precio y la imagen dependen de qué variante particular escojamos. Antes de empezar a ver cómo mejorar esta página de producto, echemos un vistazo a lo que tenemos en este momento. Por lo tanto, tenemos una página de producto estándar con un menú desplegable selecto con todas las posibles opciones de variante. Bajo precios podemos ingresar una propiedad personalizada a un mensaje, y luego cuando agregamos al carrito, nos llevan a la página del carrito como de costumbre, y todo esto está funcionando sin JavaScript. Entonces, para echar un vistazo al HTML real detrás de esta página de producto en este momento, diremos que está escrito bastante sencillo. Tenemos un título del producto. Contamos con una sección que contiene todas las imágenes de producto que vimos en el lado izquierdo ahí donde usando un poco de lógica líquida para averiguar cuál debe ser la imagen destacada en base a la primera o variante seleccionada. Tenemos entonces una sección que es el formulario del producto, que contiene el formulario HTML real que vimos, el precio del producto. También incluye que seleccione con las diferentes variantes y precios en ella. Tenemos una sección que contiene las propiedades personalizadas para los productos o donde estábamos agregando ese mensaje grabado y luego en la parte inferior del formulario, tenemos el botón agregar al carrito. Entonces, en general un enfoque bastante estándar a una página de producto. Entonces, pensando en formas en las que podemos mejorar esta página de producto, una de las primeras cosas que salta sobre su página para mí es el cuadro de selección, tener todas las opciones en el único desplegable no muestra realmente al usuario lo diferente son y lo que pueden seleccionar. Entonces, veremos cómo podemos cambiar eso. Entonces, saltando al tema.liquid, vamos a añadir un poco de JavaScript y vamos a volver y paso a través exactamente de lo que esto está haciendo en un segundo. Pero si hago este cambio, guarde el archivo, y sólo vamos a revisar ese tema, ver se está ejecutando y subiendo nuestros cambios automáticamente a la tienda de temas. Si actualizamos, entonces veremos que en realidad hemos dividido esas opciones, por lo que le queda más claro al usuario cuáles son las opciones. Volviendo al JavaScript que escribiste, solo paso por eso, podemos decir la línea 20 que estamos revisando para asegurarnos que solo estamos incluyendo esto en las páginas de productos, línea 21 estamos incluyendo la selección de opciones JavaScript que es una biblioteca provista de Shopify que en realidad hace la mayor parte de esta magia para nosotros, y entonces el resto de este JavaScript está configurando eso básicamente. Entonces, se está llamando a ese nuevo shopify.OptionSelectors y está pasando el ID de ese cuadro de selección original. Entonces, es decir, apunte este cuadro de selección y esto es lo que quiero dividir en esos cuadros selectos separados, y luego pasamos unas cuantas opciones a ese inicializador. Eso básicamente hace todo lo que acabamos de ver. Entonces, esto es bueno, pero si volvemos a nuestra página, verás que en realidad no obtenemos mucha retroalimentación cuando cambiamos estas opciones. Entonces, en la barra de URL en la parte superior, podemos ver que la URL está cambiando pero en realidad no estamos viendo ese cambio reflejado en la página. Entonces, la imagen no está cambiando, el precio no está cambiando ya que cambiamos estas opciones. Entonces, veamos cómo podemos resolver eso. Entonces, la clave para esto va a ser la función de devolución de llamada OnVariantSelected la cual destellamos como solo una función vacía antes. Entonces, esta es una función que se llama en cualquier momento las opciones de tu página cambian y se selecciona una nueva variante, y se pasa la variante como objeto adyacente y también el seleccionado que realmente activó ese cambio, por lo que este cuadro de selección. Entonces, lo que vamos a hacer aquí es solo actualizar esta función para cambiar la cúpula de nuestra página, para actualizarla en base a la variante que fue seleccionada. Entonces, puedes ver aquí el código que he agregado estamos actualizando el precio que se muestra y estamos usando la variante price y la función de formato de dinero de Shopify para hacer eso, entonces solo encontramos el elemento de precio y lo actualizamos según sea necesario. También estamos habilitando o desactivando el botón de agregar al carrito. Entonces, a veces podríamos estar seleccionando una variante que en realidad no está disponible y necesitamos desactivar el botón. Entonces, por último, estamos actualizando la imagen destacada en la página, así que estamos revisando para ver si la variante tiene una imagen destacada vinculada a ella, y luego usando el método Shopify GetSizeDimageURL para obtener la URL adecuada para ese particular imagen destacada, luego simplemente encontrar el elemento domo de imagen destacado en la página y cambiar su fuente. Entonces, guardando eso y revisando eso es subir a Shopify. Si actualizo la página ahora, deberíamos ver que la página se está actualizando a medida que cambiamos estas opciones. Entonces, estamos diciendo que la imagen destacada está cambiando, el precio está cambiando para reflejar la variante que en realidad acabamos de seleccionar. Entonces, esa es una buena característica que da a nuestros clientes más comentarios sobre las decisiones que están tomando y les permite entender las diferencias en las opciones de producto que están escogiendo. Lo siguiente que vamos a abordar es el comportamiento de las imágenes en miniatura. Entonces, por el momento, si hago clic en una imagen en miniatura, obtengo una versión más grande de esa apertura en una nueva pestaña, como esta, que no necesariamente es un mal resultado pero como cliente, espero que si hago clic en una miniatura roja, me quiero que las opciones aquí cambien para que coincida con la miniatura en la que hice clic. Entonces, en cuanto a cómo vamos a implementar esto, lo vamos a hacer en dos pasos, y el primer paso va a ser agregar algún marcado a los propios enlaces en miniatura. Entonces, si encontramos aquí los enlaces en miniatura, vamos a agregar un atributo de datos especial a la propia imagen en miniatura. Entonces, vamos a llamar a esta variante de cambio de datos. Entonces vamos a especificar el ID de la variante a la que esta miniatura está vinculada, y así cada imagen en Shopify tiene una lista de variantes con las que puede estar relacionada. Simplemente vamos a tomar el primero de esos y devolver el ID de variante para eso. Entonces, para ver cómo se ve esto en realidad en nuestra página, volvamos al navegador, actualicemos, y luego inspeccionemos estos enlaces individuales en miniatura usando la herramienta inspector de Chrome, y podemos decir que cada uno de estos enlaces sí tiene un variante de cambio de datos, atributo de datos y está vinculado a un ID de variante particular. hecho de agregar estos atributos de datos en realidad no ha cambiado el comportamiento de nuestras miniaturas, así que eso es lo que vamos a hacer ahora y configurar un manejador de eventos para manejar los eventos de clic en esas miniaturas. Entonces, vamos a hacer eso dentro del tema.líquido. sumergirse en eso, lo primero que vamos a hacer es en realidad cuando estamos inicializando esas opcionesSelectores, vamos a mantener una referencia a esa opción seleccionar y veremos por qué en un segundo. Pero una vez que hayamos hecho eso, ahora vamos a agregar un manejador de eventos para eventos de clic en cualquier elemento con ese atributo variante de cambio de datos que configuramos antes. En el método para ese manejador, vamos a evitar el comportamiento predeterminado, lo que abrimos en una nueva pestaña, y luego lo que vamos a hacer en su lugar es usar esa referencia a la opción select, es que vamos a llamar el método select variant, y pasarle el ID de la variante a la que está vinculada esta miniatura en particular. Entonces, vamos a ahorrar y echar un vistazo a cómo funciona eso. Refrescando la página, y ahora, si hacemos clic en una miniatura, deberíamos ver que la opción seleccionada está cambiando para reflejar los valores de la variante a la que está vinculada esa miniatura. Entonces, este es exactamente el tipo de comportamiento que queremos. Es importante tener en cuenta que en realidad no teníamos que especificar manualmente, en ese manejador de clics en la miniatura, no teníamos que decirlo, y ahora necesitas actualizar la imagen destacada, o ahora necesitas actualizar el precio, en realidad simplemente fluye como consecuencia de cómo configuramos nuestra variante select handler. Esto para mí demuestra el poder del enfoque de construir cosas alrededor de esta sencilla opción base select está en primer lugar, configurando unas buenas variantes. Seleccionar llamada respaldada, ven una página según sea necesario, porque entonces, podemos agregar componentes adicionales más adelante como estas selecciones en miniatura, y todo lo que necesitan hacer esencialmente, es enviar un mensaje a la opción select, diciendo: “Me gustaría seleccionar esta variante ahora”. La lógica que ya hemos implementado manejará todas las demás actualizaciones de la página. Al presionar, pensemos en qué más podemos hacer para que esta página sea mejor para los usuarios. Una de las cosas que identificaría es el desplegable de selección para la opción de color. Entonces, seleccionar desplegable es bueno cuando tienes muchas opciones, y un usuario sabe lo que quiere elegir, así que por ejemplo, un país. Pero para los colores, probablemente estés mejor mostrando esos colores a los usuarios en forma de una muestra o algo así. Entonces, lo que vamos a hacer ahora, veamos cómo podríamos ir para abordar eso. Entonces, sumergiéndonos en la plantilla de producto, vamos a añadir un poco de líquido para hacer esto, y cuando digo un poco, quiero decir bastante. Desafortunadamente, esto es un poco típico de un líquido. Entonces, no vamos a sumergirnos en los detalles de esto demasiado, sino para darte la idea general, lo que estamos haciendo es iterar a través de cada opción que tiene este producto. Entonces, ya sea su color o tamaño, encontrando los que estén relacionados con el color, y luego basados en eso iterando a través de todas las variantes que ese producto ha definido todos los diferentes colores que están disponibles. Entonces para cada color que esté disponible, emitimos un enlace que tenga una muestra dentro de él. Entonces, eso es lo que es este enlace de aquí, y podemos decir que está dando salida a un atributo de estilo que incluye ese color, y luego mucho como teníamos el atributo variante de cambio de datos en nuestras imágenes en miniatura, ahora tenemos una opción de cambio de datos, y valor de cambio de datos, atributo de datos. Entonces, nuestro enfoque aquí en realidad va a ser bastante similar a las miniaturas, y que vamos a configurar un oyente de eventos para escuchar clics en este tipo específico de enlace, pero en lugar de cambiar toda la variante, lo que vamos a hacer es usar la opción de cambio de datos y el valor de cambio de datos, atributos de datos en nuestros enlaces de muestra para cambiar solo el color específico que estamos seleccionando en lugar de toda la variante. Entonces, justo antes de previsualizar cómo se ven los cambios líquidos que acabamos de implementar, solo vamos a agregar un poco de estilo a nuestra hoja de estilo para asegurarnos de que nuestras muestras se rendericen correctamente, y luego vamos a guardar eso, y luego echa un vistazo a lo que sucede cuando actualicemos nuestra página, y veremos que las muestras se renderizan como habíamos esperado. Ahora, debido a que los configuramos como enlaces que apuntan a varianza particular como una especie de retroceso, esto realmente semitrabajo. Si hacemos clic en estos enlaces ahora, verás que la variante se está actualizando en la URL. Pero para que esto funcione plenamente de la manera que queremos, vamos a tener que configurar ese oyente de eventos JavaScript de una manera similar a la varianza. Entonces, volviendo a caer en el teme.liquid donde tenemos todo nuestro JavaScript por el momento, vamos a agregar un segundo oyente de eventos cual es muy similar a agregar data change variant listener. Pero esta vez estamos escuchando un clic en nuestra opción de cambio de datos. En realidad, lo siento. En el manejo real a eso, nuevamente estamos previniendo la acción por defecto, y luego estamos extrayendo el tipo y valor de la opción. Entonces, ya sea una opción de color, y luego si es rojo, verde o azul, y luego miramos dentro de los desplegables selectos existentes que hemos generado para ver si ese valor existe, y si es así, vamos a cambiar esa casilla de selección a ese valor dado. Para ver cómo funciona esto en realidad, volvemos a la página y actualizamos. Ahora, cuando seleccionamos unas opciones de color diferentes, deberíamos ver que sólo se está actualizando la opción de color y eso se está actualizando dinámicamente a través de JavaScript. Entonces, ahora que tenemos eso funcionando, porque puede ser que no tenía sentido tener la opción de plomo como estilo de muestra también. Porque, solo hay dos opciones y ser útil para que los usuarios solo seleccionen entre esas dos. Entonces, lo vamos a hacer básicamente generalizando el fragmento líquido que agregamos a nuestra página de producto para las muestra de color, y simplemente haciendo que funcione con opciones no color también. Entonces, vamos a hacer eso creando una carpeta de fragmentos, y creando un nuevo fragmento. Entonces, esto es básicamente, exactamente lo mismo que el líquido que agregamos a la plantilla de producto con estas ligeras modificaciones, siendo las modificaciones que renderizará para todo tipo de opciones, no solo opciones de color pero hay un check-in ahí para decir si la opción es una opción de color o no. Si es una opción de color, entonces va a renderizar este enlace de mosaico con la muestra, lo contrario, solo va a renderizar un enlace de texto regular. Ahora probablemente sea un buen momento para reiterar, para no estar demasiado estresado si no estás siguiendo junto con cada pequeño detalle del código. Por el momento solo estamos enfocados en el enfoque general y las ideas, y siempre puedes leer el código real con mucho más detalle en el repositorio de GitHub. Terminemos aquí, y ahora que tenemos nuestro fragmento configurado, podemos reemplazar el código nuestra plantilla líquida de producto por solo una inclusión de ese fragmento. Entonces, eso funcionará tanto para el color como para la opción no color. Entonces, ahora podemos guardar que se subirá automáticamente a nuestra tienda y luego cuando actualicemos, podemos ver que la opción de tapa ahora es igual que la muestra también. Por lo tanto, los usuarios ahora pueden obtener una buena visión general de todas las diferentes opciones que están disponibles para este producto, y trabajar en tándem entre la selección de color y tapa para ser exactamente lo que quieren. Entonces, estamos muy cerca ahora de que se hagan, pero probablemente sean solo dos cositas que nos gustaría limpiar antes del final. El primero es que, sólo queremos estar mostrando las muestras o los desplegables selectos, no ambas al mismo tiempo, y hay que tomar en cuenta que las muestras no van a funcionar cuando nosotros tener JavaScript habilitado, por lo que, tenemos que pensar en lo que va a suceder cuando JavaScript no está habilitado en nuestro sitio. Entonces, lo que vamos a hacer para manejar esto, es un patrón bastante común, vamos a agregar una clase CSS al cuerpo de nuestra página, y eliminar esa clase cuando tengamos JavaScript habilitado, y en base a si esa clase está presente o no, vamos a poder mostrar u ocultar los diferentes métodos de selección. Entonces, hemos agregado la clase a nuestro cuerpo, y ahora solo necesitamos agregar un poco de JavaScript para eliminar esa clase. Entonces una vez que hayamos hecho eso, podemos saltar a nuestra hoja de estilos y simplemente añadir un poco de estilo para ocultar elementos particulares cuando no tenemos JavaScript habilitado. Entonces, actualizando la página ahora, podemos ver que con JavaScript habilitado, esas casillas selectas están ocultas, y somos capaces de usar las muestreas como normal, si JavaScript no está habilitado, entonces tenemos esta bonita caída de nuevo al sencillo cuadro de selección que es un bonito pero sí funciona. Está bien. Entonces, había mucho pasando en ese ejemplo. Pero no te preocupes si no lo conseguiste todo la primera o segunda vez. Lo realmente importante para salir de la lección, es ver cómo se construye la página del producto en Shopify, y también entender la ventaja de tomar este enfoque de mejora progresiva. Entonces, construir cada componente uno encima del otro, una manera que sea independiente, que sea más fácil de mantener y razonar sobre lo que está pasando, en la página. Este enfoque de mejora progresiva de tomar estos pequeños bloques de construcción, y apilarlos uno encima del otro para que sean independientes, y que obtenemos una página que funcione sin JavaScript, luego agregar lentamente funcionalidad. Este es un enfoque que vamos a tomar en la siguiente lección cuando empecemos a mirar páginas de colecciones. 5. Filtrar, ordenar y ver colecciones: En esta lección, vamos a estar continuando nuestro trabajo con la tienda de velas de demostración. Pero esta vez nos vamos a centrar en las páginas de colección en lugar de en las páginas de productos. Pero todavía vamos a estar haciendo el mismo tipo de cosas, todavía vamos a estar tratando de ayudar a nuestros clientes a tomar sus decisiones de manera más efectiva y eficiente. Proporcionar una mejor experiencia de usuario. Una vez más, vamos a estar haciendo eso de una manera que acumule nuestros conocimientos y comprensión de cómo se juntan las páginas de Shopify desde cero. Este es un ejemplo de página de colección de nuestra tienda de velas demo y lo que vamos a estar haciendo en esta lección, es agregar formas para que los clientes profundicen y encuentren los productos que realmente les interesan. Entonces, cosas que habrás visto en muchas tiendas Eagle Nest antes, cosas como, poder cambiar la forma en que vemos los productos, poder vender productos, poder filtrarlos. Si bien estamos haciendo todo esto, creo que es importante tener en cuenta que el objetivo de estas páginas de colección es siempre facilitar las cosas al usuario, profundizar y encontrar lo que buscan. Entonces, vamos a empezar por permitir que los clientes cambien la forma en que ven estos productos. Ya sea como cuadrícula o en una lista donde puedan ver más detalle. Echemos un vistazo al HTML con el que estamos empezando. Si abrimos la plantilla de colecciones, veremos que es bastante sencillo, tenemos un título, tenemos una sección llamada productos de colección que es donde se muestran los productos reales, y después tenemos una sección vacía llamada controles de colección, que será donde pongamos los elementos que permitirán a nuestro usuario controlar lo que está diciendo. Entonces, vamos a empezar a darle al usuario la capacidad de controlar la vista envolviendo toda la página en un formulario y veremos por qué lo estamos haciendo en un segundo, y luego vamos a agregar algo de HTML a los controles de colección, y eso es va a consistir en un menú desplegable selecto, que nos da la capacidad de elegir qué vista, y luego tenemos un botón de enviar, que llama a una actualización. Entonces para ver qué efecto realmente tiene en nuestra página, diremos que ahora tenemos este control selecto muy simple, y podemos cambiar entre un ListView y un GridView. Entonces, que en realidad no estamos cambiando nada en nuestra página, pero verás que está cambiando la URL y agregando este parámetro de consulta de vista. Para hacer realmente algo con este parámetro de consulta, vamos a tener que usar una característica en Shopify llamada plantillas de vista alternas. Entonces para hacer eso en nuestro directorio de plantillas, vamos a crear una nueva plantilla y la llamaremos collection.list.liquid, y luego solo agregaremos algún contenido HTML aleatorio aquí para ver cómo funciona esto. Guarda eso, y luego si volvemos a nuestro navegador, podemos decir que si nuestro parámetro de vista se deja como cuadrícula, entonces obtenemos lo que teníamos originalmente, pero si lo cambiamos a lista, la plantilla definitiva se renderiza con el contenido que acabamos de crear. Hagamos algo un poco más útil que esto. Entonces, para empezar, vamos a tener alguna funcionalidad común entre nuestras vistas de cuadrícula y lista. Entonces, vamos a extraer la página de colección actual en un fragmento. Llamaremos a esta vista de colección, y solo copiaremos lo que tenemos en nuestra plantilla de colección existente en ahí. Ahora en nuestra colección.liquid, vamos a incluir ese fragmento y vamos a decir que nuestra vista predeterminada debe ser una vista de cuadrícula. Entonces, lo incluiremos con grid como parámetro a ese fragmento. Entonces en nuestra vista de lista alternativa, vamos a incluir exactamente lo mismo, pero solo cambia el parámetro a lista. Entonces ahora que nuestro fragmento está siendo incluido en ambas plantillas, podemos ajustarlo para manejar tanto las vistas de cuadrícula como de lista y lo vamos a hacer agregando una clase CSS y ahora poniendo el nombre del fragmento de vista de colección, que será poblado con lista o cuadrícula, dependiendo de dónde lo estemos incluyendo, y hemos configurado algunos estilos CSS para renderizarlo de manera diferente en función del valor de eso. Por lo que ahora refrescando nuestra página, verás que si tenemos el manejador de vista de lista, vamos a ver los productos como una lista, y si lo dejamos como cuadrícula, entonces los veremos renderizados como una cuadrícula. Entonces, esa es una simple implementación de vista. Ahora, pasemos a ordenar y aquí es donde veremos la ventaja de tener este enfoque basado en forma para actualizar nuestros parámetros de consulta porque todo lo que realmente necesitamos hacer para agregar clasificación a nuestro formulario es agregar este elemento selecto con estos valores de opción aquí. Entonces, solo nombramos el valor de selección, seleccionamos el elemento ordenar por y las opciones que ponemos en él son los parámetros de clasificación predefinidos en los que Shopify nos permite ordenar nuestros productos. Entonces, simplemente guardando eso y saltando nuevamente al navegador, podemos decir que ahora tenemos un desplegable sort by select, así como la vista y podemos mezclar y igualar nuestros valores aquí para cambiar la forma en que estamos viendo nuestros productos. Entonces, este enfoque basado en forma es agradable porque significa que no necesitamos JavaScript para actualizar la forma en que estamos viendo los productos, y también significa que toda la información que necesitamos para recrear la vista que estamos viendo está ahí arriba en la URL. Nuestro siguiente paso será dejar que nuestros clientes estrechen los productos que les interesan a través del uso de filtros. Ahora es importante señalar, que en Shopify, realmente tenemos dos niveles de filtrado. Contamos con filtrado de nivel de colección y filtrado de nivel de etiqueta. Entonces, tomaremos primero el filtrado de nivel de colección y eso es básicamente, simplemente estrechando los productos en los que nos interesan en base a qué colección se encuentran. Vamos a tomar el enfoque más simple para implementar esto, que es simplemente proporcionar una lista de enlaces a cada colección que nos gustaría filtrar. Entonces, acabamos de agregar este elemento de lista a nuestros controles de colección y en la parte superior, tenemos un elemento de lista que contiene un enlace a la colección antigua, que es un caso especial, y luego para cada otra colección en nuestra tienda, vamos a renderizar un nuevo elemento de lista y dentro de ese elemento de lista, vamos a renderizar ya sea un enlace a la colección o si es la colección actual, simplemente renderizaremos un lapso. Al ver esto en la práctica, refrescaremos nuestra página y veremos que como se esperaba, tenemos una lista de enlaces a todas nuestras diferentes colecciones. Entonces, hacer click en esos nos va a llevar a la URL para esa colección, como puedes ver aquí arriba, y encima de eso entonces podremos cambiar nuestra vista y ordenar parámetros para ajustar la vista de manera adecuada. Para que los usuarios puedan perforar aún más específicamente en nuestras colecciones, podemos dejar que se filtren en función de las etiquetas que tienen los productos. Nuevamente la implementación sabia, vamos a mantener esto bastante simple. Entonces, como tuvimos con nuestro filtrado de colecciones, vamos a tener una lista de enlaces que podemos usar para filtrar en etiquetas. Entonces puedes ver aquí, tenemos nuestra lista desordenada, y luego vamos a iterar sobre cada etiqueta dentro de la colección, y para cada una de esas etiquetas, vamos a renderizar un enlace ya sea usando el enlace Shopify para eliminar etiqueta o enlace para agregar filtros de etiqueta. Estos son útiles ayudantes líquidos que Shopify proporciona es exactamente para este propósito. Al ver cómo se ve esto en el frente de nuestra tienda, veremos que después de refrescar, ahora tenemos nuestras etiquetas listadas como enlaces y podemos activarlas y desactivarlas según sea necesario para filtrar más la colección. También notarás que la lista de etiquetas disponibles cambia en función de qué etiquetas están presentes dentro de la categoría. Entonces, eso ayuda a los clientes a reducir a solo etiquetas relevantes. Al igual que antes, podemos aplicar ajustes de vista y ordenación y todo se pone para nosotros en la URL. Entonces, sólo tenemos un par de características más que añadir antes de tener una página de colección bastante funcional y una de esas características que nos faltan todavía es la paginación. Afortunadamente, nuestro sencillo enfoque basado en forma va a hacer que agregar esto sea relativamente fácil. Mirando el HTML para nuestra página de colección en este momento. Para paginar cualquier cosa, necesitamos envolverlo en esta etiqueta paginate que luego pasamos la lista de artículos que queremos paginar que en este caso son los productos de la colección, y luego una serie de cuantos artículos nos gustaría por página. Entonces, empezaremos con tres. Por lo general, tendrías algo un poco más alto en una página real pero esto nos permitirá ver la paginación en acción. También voy a incluir este fragmento de paginación aquí y eso renderizará los controles que utilizamos para paginar. No voy a entrar en demasiados detalles sobre el contenido real de este código ya que puedes encontrar esto tanto en los ejemplos de GitHub para esta lección como en la documentación de Shopify. Echando un vistazo al resultado de nuestra obra se puede ver que de inmediato nos cortaron a tres resultados en la página y tenemos esta paginación que abajo en la parte inferior aquí, y podemos movernos por las páginas en nuestros resultados y la URL se mantiene actualizada en línea con eso. Quiero señalar aquí que toda la información estatal sobre nuestra página, entonces qué colección, qué filtros aplicamos, en qué estado de vista estamos, cómo estamos ordenando los productos está todo en la URL. Lo que significa, no sólo que podamos copiar y pegar esa URL para volver a exactamente la misma posición, Podemos refrescar la página y volver a exactamente la misma posición. Pero también, si desactivamos JavaScript, nuestra página funciona exactamente de la misma manera. Creo que esa propiedad es realmente importante en los temas de Shopify porque a pesar de que mucha gente no está navegando por la web sin JavaScript en estos días, hay situaciones en las que el JavaScript no se carga por un error. O no se ejecuta debido a un error pero también para los usuarios en lentas, digamos conexiones móviles, a menudo podrían estar interactuando con tu página antes de que JavaScript tenga la oportunidad de iniciar sesión. Entonces, tener esta experiencia base, asegurándose de que nuestras páginas se mejoren progresivamente, realmente mejora la experiencia del usuario y evita perder ventas. Ahora, eso no quiere decir que no haya formas de que podamos usar JavaScript para mejorar la experiencia del cliente para quienes la están usando. Entonces por ejemplo, por el momento, necesitamos presionar el botón de actualización después de seleccionar nuestra vista y nuestras opciones de clasificación, vamos a mejorar esa experiencia haciendo que el formulario se envíe de forma automática cuando se cambie un cuadro de selección. Para ello, vamos a añadir algo de JavaScript al fondo de nuestro tema.liquid. Por lo que normalmente, pondrías esto en un archivo JavaScript separado. Pero por el bien de la discusión, vamos a poner esto aquí. Y así este bit de JavaScript tiene un cheque para asegurarse de que solo se ejecute en páginas de colección. Y luego estamos configurando un oyente de eventos en un evento de cambio en cualquier elemento con una recopilación de actualización de datos, atributo de datos. Y luego en el manejador para ese evento, simplemente estamos enviando la forma en la que vive el elemento. Entonces, vamos a asegurarnos de que nuestros elementos selectos efectivamente tengan esa recopilación de actualización de datos, atributo de datos, y una vez que guardemos eso y refresquemos nuestra página, ahora deberíamos ver que si cambiamos las casillas de selección, estamos enviar automáticamente el formulario y nuestra vista está cambiando. Eso es genial pero también significa que ahora tenemos este botón de actualización inútil, o al menos es inútil cuando tenemos JavaScript habilitado. Entonces lo que vamos a hacer es usar un patrón común para ocultar este botón cuando sí tengamos JavaScript habilitado, y solo hacerlo visible cuando no tengamos JavaScript disponible, y en realidad necesitábamos enviar el formulario. Entonces, puedes ver aquí en la hoja de estilos del tema que tenemos esta clase js-hide la cual va a ocultar cosas si tenemos JavaScript habilitado. Pero entonces, muéstralo si no lo hacemos. Entonces para asegurarnos de que se apliquen las clases correctas, teníamos la clase no js al cuerpo por defecto, y luego simplemente eliminamos eso usando JavaScript. Entonces, en la parte inferior de la página, solo agregaremos un poco de código para apagar esa clase si efectivamente tenemos JavaScript habilitado. Entonces, mirando esto en acción, vamos a guardar, actualizar ese navegador, y tenemos JavaScript habilitado en este momento y veremos que ese botón está efectivamente oculto pero todavía puedo cambiar mi vista y mis opciones de clasificación. Eso está funcionando bien. Pero entonces, si apago JavaScript, ahora tenemos ese botón, y podemos usarlo como de costumbre. Entonces, mientras estamos en el proceso de agregar funcionalidad JavaScript a nuestras páginas de colección, echemos un vistazo a agregar ajax para que los clientes puedan moverse por nuestras páginas de colección sin tener que hacer una actualización completa de página. personal, me parece que las ventajas percibidas de las páginas alimentadas ajax un poco exageradas. Especialmente cuando se toma en consideración la complejidad extra en su implementación. Pero puede haber algunas ventajas y, por suerte, en nuestro caso la forma en que hemos construido nuestros formularios hasta la fecha significa que agregar funcionalidad ajax es en realidad razonablemente sencillo. Entonces nuestro enfoque para esto va a empezar con agregar un ID al formulario que estamos usando, y eso es para que podamos referirnos a ello en JavaScript. Nuestra estrategia básicamente va a interceptar los eventos de envío en este formulario y a hacer ese evento de envío de formularios regulares en una solicitud ajax. Entonces, eso es lo que vamos a hacer con este JavaScript aquí y paseando por él, podemos ver, como mencioné, estamos capturando el evento de envío en ese formulario de cobro. Estamos impidiendo la acción predeterminada en ese formulario que es enviar como un formulario regular, y luego estamos usando el método de carga de jQuery que es una conveniencia alrededor del envío de una solicitud ajax recuperando algunos contenidos HTML y reemplazándolo en nuestra página actual. Entonces en este caso, estará reemplazando el contenido de nuestra página por nuestra vista de colección actualizada, y también tenemos un poco de código aquí que se activa en el renderizado exitoso de ese contenido usando push estados para mantener actualizada la barra de URL de nuestro navegador. Entonces, este sencillo enfoque es todo lo que necesitamos para usar realmente ajax con nuestras páginas de colección. Entonces, si refresco la página aquí, y ahora en cualquier momento realizo una acción que vuelva a enviar esos formularios como cambiar mi vista. Mi página en realidad se está recargando vía ajax. Entonces, podemos comprobar que eso realmente está sucediendo abriendo las herramientas de desarrollador de Chrome, revisando el panel de red y luego veremos si eso a medida que cambie esta selección de casillas. De hecho está realizando una sola solicitud ajax y no una recarga de página completa. Ahora, el astuto entre ustedes pudo haber notado que si bien esto funcionará para cualquier acción que desencadene un formulario actualizado como mutar los cuadros de selección, cómo enlaza colección mientras aún trabajarán escritorio realizando una actualización de página completa cada vez que hacemos clic en ellos. Entonces, en realidad hay una solución a eso también, y es bastante similar a cómo manejamos el envío del formulario. Entonces ya verás, nuestro filtro vinculado aquí ya tiene un atributo de recopilación de enlaces de datos, y así nuestra solución aquí va a ser simplemente agregar un oyente al evento click para cualquier cosa con un atributo de recopilación de enlaces de datos. Nuevamente, evitar una acción difícil que es seguir el enlace y luego utilizar nuevamente el método de carga para cargar en el destino de ese enlace como contenido de nuestra página y nuevamente usando estado push para mantener actualizada nuestra URL. Entonces, para echar un vistazo a cómo funciona eso, de nuevo, podemos abrir el panel de desarrolladores de Chrome para comprobar que realmente estamos haciendo solicitudes ajax, y ahora podemos decir que cuando estamos haciendo clic en estos enlaces, estamos de hecho realizando una sola solicitud ajax en lugar de una recarga de página completa. Por supuesto, gracias a la forma en que construimos esto con realce progresivo podemos apagar JavaScript y aún así tener una página de recolección totalmente funcional y muy, muy utilizable para nuestros clientes. Nuevamente, pasaba mucho en esa lección. Pero de verdad quiero estresar. No te preocupes si no conseguiste algunos de los aspectos más técnicos ahí. Siempre puedes dirigirte al repositorio de GitHub. Allí puedes consultar los ejemplos de código. Están bien comentados, y eso debería hacer un poco más fácil de entender. Lo importante a entender es cómo se juntan las páginas de Shopify desde un nivel básico, y cómo podemos usar esos componentes individuales juntos para construir una página realmente funcional y utilizable. 6. Agregar Ajax a tu tema: Si se hace correctamente, agregar funcionalidad impulsada por Ajax a tu tema puede ser una manera realmente genial de que se sienta un poco más receptiva y más fácil de usar para los clientes. Y es probablemente algo que habrás visto en muchos temas en estos días. En esta lección, vamos a ver la mejor manera de empezar a agregar funcionalidad de agregar al carrito de Ajax powered a nuestras páginas de colección. Entonces, estamos de vuelta en la página del producto y esta vez alrededor, estamos buscando hacer que nuestra experiencia del cliente sea un poco mejor agregando funcionalidad del carrito Ajax a nuestro botón de agregar al carrito. funcionalidad de Ajax puede hacer que nuestras páginas de productos se sientan un poco más receptivas y también pueden evitar que nuestros clientes tengan que realizar tareas repetitivas como reconfigurar un producto si quieren pedir varias versiones del mismo. Al igual que hicimos en nuestra lección anterior con páginas de colección, queremos hacer este realce progresivo. Entonces, echemos un vistazo a lo que está pasando con nuestras páginas de productos en este momento. Entonces, somos capaces de seleccionar nuestras opciones de producto, agregar un mensaje personalizado, y luego cuando hacemos clic en “Agregar al carrito”, estamos haciendo una solicitud de post estándar para agregar ese producto a nuestro carrito y nos redirigen a la página del carrito. Entonces, lo que vamos a estar viendo en esta lección es cómo cambiar esa interacción para que cuando hacemos clic en el botón “Añadir al carrito”, realmente estamos haciendo una solicitud Ajax para agregar el producto al carrito con la opción y opciones sin redirigir al usuario lejos de la página del producto. Entonces, empecemos por mirar la documentación de Shopify para el Ajax o API que ponen a disposición para ver una idea de lo que es posible con él. Entonces, verás en la documentación que tienen alguna información útil al respecto, pero en su mayoría nos interesa aquí está estas posibles solicitudes. Entonces, puedes ver aquí que somos capaces de buscar información sobre los productos, somos capaces de agregar nuevos artículos al carrito, agarrar información de defección sobre el carrito actual, y somos capaces de realizar solicitudes de post para actualizar artículos existentes dentro el carrito. Entonces, nuestra estrategia para mejorar progresivamente esta interacción va a ser interceptar el envío del formulario cuando hacemos clic en la página “Agregar al carrito” usando la consulta Drae y luego en lugar de una solicitud de post regular, vamos a tomar lo mismo datos en ese formulario y realizar una solicitud Ajax para agregar los artículos al carrito. Vamos a indagar en nuestro código temático. Entonces, si abrimos nuestra plantilla de producto, veremos que tenemos nuestro formulario del que vamos a enviar el envío de. Tiene una idea de forma de producto y lo usaremos en nuestro JavaScript. En el JavaScript real, vamos a utilizar para convertir esto en una solicitud Ajax, vamos a agregar al fondo del tema LIQUIDO, que es donde hemos estado poniendo la mayor parte del JavaScript hasta la fecha. En un tema real, como creo que ya he mencionado antes, quisiéramos poner esto en un archivo JavaScript separado aquí en el directorio de activos. Pero por ahora, sólo vamos a mantener todo aquí para que sea más fácil mantener un control mental de. Entonces, cuando se trata de los JavaScripts reales, vamos a como mencionamos, vamos a agregar un oyente de eventos al evento de envío para ese formulario y vamos a evitar la acción predeterminada, que es enviar ese forma como normal. Emular la publicación de formulario se hace con el método $.post nuestro endpoint es /cart/Add.json y vamos a passet el parámetro de datos que se obtiene de serializar el formulario. Entonces, $ (esto) se refiere a la forma misma en esta instancia. Entonces esto debería ser en realidad todo lo que necesitamos para las partes iniciales y la funcionalidad. Entonces, si vuelvo a la página de mi carrito y actualizo y hago un par de selecciones y mensaje mis productos y golpeo “Añadir al carrito” va a parecer que en realidad no pasa nada pero eso es porque el envío del formulario ha sido interceptado. Y así si voy a mi carrito, verás que este producto fue realmente agregado con éxito. Entonces, si queremos duplicar que eso sucedió a través de Ajax y no a través de alguna otra forma o magia, podemos usar las herramientas de desarrollador chrome para inspeccionar las solicitudes de red que en realidad se están haciendo. Entonces, si hacemos otra selección perforando un mensaje y luego cuando golpeamos “Agregar al carrito” veremos la solicitud de agregar Ajax real y pudimos inspeccionar los detalles de eso a través de ese panel, podemos ver el datos de formulario que se están pasando, y también vemos que la respuesta que regresa es una representación JSON de la línea de ítem que se acaba de agregar. Por supuesto, toda nuestra motivación al agregar Ajax es hacer que esto sea más utilizable para nuestros clientes. Y lo que realmente hemos hecho es que sea menos utilizable porque ahora estamos proporcionando prácticamente cero comentarios sobre el hecho de que algo se está agregando al carrito. Entonces, echemos un vistazo a cómo podemos arreglar eso. Usaremos un patrón bastante común aquí y eso es para cambiar el texto del botón “Añadir al carrito” y desactivarlo cuando empecemos a hacer nuestra solicitud Ajax, y luego cuando termine, vamos a volver a cambiarlo . Para ello vamos a utilizar estas devoluciones de llamada a las que jQuery nos da acceso. Lo hemos hecho, fallamos y siempre. Estos son parte de jQueries promete interfaz. Por lo tanto, hecho la devolución de llamada hecha, se ejecutará siempre que una solicitud Ajax sea exitosa. Fail se ejecutará y esto es ya que cuando obtengamos una respuesta de error y siempre la devolución de llamada ahí siempre se ejecutará al final de una solicitud ajax. Entonces, en nuestro caso de uso, siempre vamos a querer restaurar el botón “Añadir al carrito” a su estado original. Entonces, vamos a poner eso en la siempre callback. Entonces, esto se ejecutará sin importar si la solicitud es un éxito o un fracaso. Entonces, ahorrando eso veamos el impacto que eso tiene en nuestras páginas. Entonces, refrescando nuestra página y configurando nuestras opciones de producto. Ahora, mira cuidadosamente cuando golpeamos “Agregar al carrito” aquí y puedes ver que el comportamiento es el esperado. Este es un buen comienzo pero aún tenemos que dar un poco más de retroalimentación cuando las cosas se agregan al carrito. Entonces, por ejemplo, el total del carrito en la esquina superior derecha no se está actualizando. Entonces, no estamos 100% seguros de que algo se haya agregado con éxito y también sería bueno hacer que aparezca un enlace de check out tan pronto como lo agreguemos al carrito. Entonces, solo para tranquilizar a los usuarios que se ha registrado su cambio además de alentarlos a dar un siguiente paso. Afrontar primero la actualización de la información del carrito en la barra norte. Cuando agregamos con éxito algo al carrito. Entonces, en la devolución de llamada hecha, realidad vamos a hacer una segunda solicitud Ajax al endpoint /cart.json que nos da una versión actualizada de todo lo que hay en el carrito en este momento. Cuando se complete esa solicitud Ajax, vamos a utilizar esa información del carrito para actualizar el elemento HTML del carrito nav-bar el cual podemos ver está aquí arriba en nuestro encabezado y vamos a actualizar eso con este texto, la palabra carro y luego una versión formateada del precio total del carrito. Eso maneja nuestro tema de actualización. Si bien estamos aquí también vamos a agregar rápidamente un poco de manejo de errores en el caso de falla. Entonces, esto va a ser muy básico solo agregando un mensaje de alerta con el error este regreso de Shopify. En un escenario real, querrías inspeccionar un poco más estos y proporcionar un mensaje útil al usuario. Hágales saber exactamente qué salió mal. Sobre nuestra siguiente tarea, que es hacer que ese enlace de pago aparezca cuando hayamos agregado con éxito un elemento. Entonces, vamos a añadir a ese enlace de pago como un elemento HTML debajo de nuestro botón “Añadir al carrito”. puede ver que es un DNI de check out link. Señala al check out y lo vamos a hacer inicialmente oculto con estilo display none. Volver a nuestro tema.liquid JavaScript y solo vamos a agregar la lógica aquí para que ese link check out sea visible al finalizar una operación exitosa de add to cart. Entonces podemos probar y ver si las cosas son un poco mejores. Entonces, refrescando nuestra página. Entonces cuando pasemos por el proceso de selección de nuestras opciones, agregando un mensaje. Como puedes ver, tanto el carrito en el nav-bar está actualizado y también tenemos ese link check out ahora que aparece. Esa es una manera realmente fácil de agregar un carrito Ajax progresivamente mejorado a sus páginas de productos como mencionamos antes en un escenario del mundo real, probablemente querrías proporcionar a los usuarios un poco de feedback extra tanto en escenarios de error y hacerles saber exactamente qué salió mal si algo sale mal. Pero también en el caso de éxito tal vez hacer que sea un poco más obvio aquí que algo se ha agregado con éxito a tu carrito y siempre pensando en los siguientes pasos que quieres usuario para tomar si eso es agregar otro producto, reconfigurar un producto o iniciar el proceso de pago. Habiendo pasado por el proceso de ver cómo habíamos configurado manualmente la funcionalidad del carrito Ajax, ahora vamos a ver una biblioteca que hace la mayor parte del trabajo por nosotros que es Cart.js. Ahora tengo que ofrecer un poco de descargo de responsabilidad aquí que Cart.js es un proyecto que yo mismo he escrito pero es 100 por ciento de código abierto y gratuito de usar para todos los desarrolladores de temas. Volver a nuestra página de producto, cual hemos restablecido al comportamiento Pre-Ajax. Todavía estamos pasando por el flujo de redirección de correo regular a carrito aquí y vamos a echar un vistazo a cómo implementaríamos la funcionalidad Ajax usando Cart.js. primer paso es dirigirse a cartjs.org y descargar la última versión de la biblioteca. Podemos hacer eso como archivo zip. Entonces una vez que hayamos hecho eso, solo queremos extraer el archivo zip y luego agarrar la biblioteca como un archivo javascript, un archivo javascript minificado y lo dejaremos caer en el directorio de activos de nuestro tema. Entonces, si solo revisamos nuestro editor de texto, podemos ver que eso ha sido copiado a través. Para empezar realmente a usar cartjs en nuestro tema, necesitamos agregar algo de JavaScript de inicialización al fondo de nuestro tema.liquid y también necesitamos incluir la biblioteca también. Entonces, lo vamos a hacer usando una URL de activo y una etiqueta de script y luego llamamos a estas funciones de inicialización y le pasamos el estado inicial de nuestro carrito. A partir de aquí, solo necesitamos agregar un poco de marcado a nuestro tema para indicar qué nos gustaría hacer con los cartjs. Entonces, podemos agregar un atributo de envío de carrito de datos a un formulario y eso va a emular la funcionalidad de envío de formularios que implementamos manualmente previamente. Entonces también podemos envolver un elemento de visualización con un atributo render de carro de datos. Simplemente vamos a emular la función de actualización que teníamos en el nav-bar. Entonces, con la adición de sólo esos dos atributos, en realidad hemos replicado mucha de la funcionalidad que acabamos de construir manualmente. Entonces, podemos ver aquí el envío del formulario es capturado y estamos actualizando automáticamente el carrito en la barra de navegación. Ese fue un recorrido bastante torbellino de cartjs. Hay un poco más en la biblioteca que eso pero para eso realmente tenemos tiempo en esta lección. Entonces, lo dejaremos ahí y si te interesa lo puedes echar un vistazo en la página de inicio de cartjs. Eso es todo para esta lección. Espero que tengas una buena comprensión de cómo empezar a aplicar estas técnicas Ajax a tu tema y también que entiendas la importancia de tomar ese enfoque de mejora progresiva donde construimos la funcionalidad básica primero y luego más tarde el Ajax encima de eso. 7. Mejores prácticas: Ahora es el momento de hablar sobre el tema favorito de todos, Mejores Prácticas. Sé que no es el más sexy de los temas pero puede ser realmente importante construir tus temas de una manera que haga que sea fácil para ti y para los demás mantenerlos. Entonces, si otro desarrollador viene a tus proyectos más adelante, quieren construir una integración con tu tema, o incluso solo si eres tú mismo regresando a tu tema seis meses después, y no tienes ningún recuerdo de lo que hacía tu tema o lo que hacía tu código, seguir estas mejores prácticas hace que las cosas sean mucho más fáciles de recoger y ponerse en marcha. Empecemos mirando el líquido que es una de las características más únicas y definitivas de Shopify. En este ejemplo, el tema con el que estamos trabajando tiene una página de producto la cual está escrita en líquido como lo son todas nuestras plantillas. Abajo en la parte inferior de esta página de producto, tenemos una sección de productos relacionados, y que utiliza un montón de líquido para generar una lista de productos relacionados. Algo útil que hacer cuando tenemos mucho líquido complicado grande, es extraerlo en un fragmento separado. Esto lo mantiene un poco más manejable para nosotros y también nos permite reutilizar ese código en otras secciones. Por lo que quizá queramos reutilizar este fragmento líquido en otro lugar. Entonces aquí lo hemos cortado de nuestra plantilla de producto, y estamos incluyendo ese fragmento, y vamos a volcarlo de nuevo en el fragmento de productos relacionados aquí. Ahora cuando se trata del código líquido real en sí, una cosa que veo que la gente simplemente no logra hacer con el líquido mucho del tiempo es agregar comentarios. Realmente no puedo recalcar lo útil que es agregar comentarios en líquido sobre todo cuando tienes cosas complicadas pasando. No sólo es útil para futuros desarrolladores que podrían recoger un proyecto después de ti sino también para tu futuro yo porque dentro dos meses si regresas y miras el código líquido que has escrito, no vas a recordar lo íntimo detalles de la misma. Dos, puntos rápidos finales. Es realmente útil asegurarse de que su código esté formateado bien tan sangrado, fácil de leer de nuevo por la misma razón que agregar comentarios es realmente útil. Tan solo una nota final y eso está en anidar fragmentos. Entonces, como se puede ver en la parte inferior de este fragmento, en realidad estamos incluyendo otro fragmento, el fragmento de producto. Yo diría que dos niveles es sobre el máximo que quieres ir con un tema de Shopify y fragmentos anidados. Más que eso y se vuelve un poco difícil razonar mentalmente sobre lo que está pasando en tu código, y se convierte en un problema de mantenimiento un poco complicado. Continuando, hablemos de Stylesheets. Muchas de las mejores prácticas para las hojas de estilo Shopify van a ser exactamente las mismas que serían en el desarrollo web regular. Entonces, agregar comentarios siempre útiles tanto para ti como para otros futuros desarrolladores. Algo que es único de Shopify aunque es su soporte para el preprocesador Sass. Por lo que vale la pena estar familiarizado con algunos de los trucos y métodos que puedes usar en ese idioma. Entonces, por ejemplo, la directiva @extend como estamos viendo aquí. Otra cosa única de los contextos de Shopify es que podemos usar líquido para generar valores de nuestra configuración temática dentro de nuestros archivos de hoja de estilos como lo estamos haciendo aquí. No obstante, podemos encontrarnos con un poco de problema con el líquido aquí porque las propias etiquetas líquidas no son realmente válidas Sass. Por lo que esto puede causar problemas si estamos usando un preprocesamiento externo o si simplemente estamos usando la validación de sintaxis. Entonces lo que podemos hacer es lo que estoy haciendo aquí y eso es agregar una función de escape de cadena la cual es válida Sass, pero bueno también aún renderiza tus variables de plantilla líquida dentro de tu archivo de hoja de estilos;. Entonces eso debería evitar los problemas que acabo de identificar. Pasemos ahora a JavaScript que en realidad es una de las áreas con las que más veo problemas en términos de mantenibilidad y rendimiento en temas de Shopify. Entonces si recuerdas cómo escribimos la mayor parte del JavaScript en lecciones anteriores, ponemos la mayor parte directamente en el fondo de nuestro tema.liquid. Esa no es realmente la mejor práctica. Entonces lo que realmente quieres hacer es extraer tanto de ese JavaScript como sea posible y colocarlo en archivos JavaScript separados en tu directorio de activos. Esto es mejor para mantener y también significa que los navegadores son capaces de guardar en caché tu JavaScript en lugar de tener que cargarlo con cada carga de página. También significa que sus archivos JavaScript están disponibles para realizar el preprocesamiento en, es posible que desee minificarlos o concatenarlos antes de entregarlos a producción. Ahora el inconveniente de extraer tu JavaScript en archivos de activos es que ya no eres capaz acceder al código líquido que está disponible para ti desde dentro de tus plantillas temáticas. El mejor modo que he encontrado alrededor de este problema es crear funciones de inicialización dentro tu JavaScript y pasar tus objetos líquidos en configuraciones a través de tus archivos de plantilla. Entonces para ver cómo podríamos hacer eso aquí, crearemos una configuración una función de inicialización de página de producto que espera un objeto json de un producto el cual ya no podemos renderizar desde líquido dentro de este archivo JavaScript, y luego nosotros solo hará un poco de limpieza de código para que esto funcione con nuestra nueva función de inicialización. Podemos ver aquí el código líquido que estábamos usando que ya no podemos usar, por lo que simplemente le pasaremos la variable de producto ahí. Simplemente limpiaremos un poco los de este código para que sea un poco más legible. A partir de aquí la tarea es simplemente poder pasar esa variable de producto a esa función de configuración desde el tema líquido. Entonces podemos hacer eso asegurándonos de que en primer lugar, hemos incluido nuestro nuevo archivo JavaScript que acabamos de crear. Una vez que hayamos hecho eso, solo podemos usar esta sola línea de JavaScript aquí en ahora plantillas líquidas para pasar ese objeto líquido a través de nuestra función de inicialización. Desafortunadamente, no tenemos el tiempo necesario en este curso para profundizar realmente en lo que hace JavaScript de mejores prácticas para un tema de Shopify. Pero creo que hay tres cosas clave en las que puedes pensar que te ayudarán a escribir JavaScript que es fácil de mantener y muy profesionalmente conocido. El primero de éstos es escribir tu JavaScript defensivamente. A lo que me refiero con eso es escribirlo de una manera que no haga suposiciones sobre la página en la que se está cargando. Por lo tanto, no asuma que un elemento DOM va a existir en la página porque su script podría estar cargado en la página del producto, o en la página de colección, o en una página de índice, y es posible que no necesariamente tenga control de eso . El otro aspecto de escribir JavaScript defensivo es asegurarse de que su guión se reproduzca bien con otras cosas de terceros que podrían instalarse en la página. Si algo sale mal con otro script, entonces ojalá puedas solucionar eso y escribir tu JavaScript de una manera que no dependa de que las cosas de otras personas funcionen correctamente 100 por ciento del tiempo porque simplemente no lo hace suceden. El segundo que creo que es realmente importante es escribir tu JavaScript de manera modular. Por lo tanto, desglose su JavaScript en componentes modulares que tengan sus propias áreas de responsabilidad individuales. De esa manera, no dependen el uno del otro, es mucho más fácil de mantener, es mucho más fácil para otros desarrolladores venir, entender qué está pasando, razonar y luego desarrollar aún más esos módulos. lo tercero de lo que quería hablar en torno a tu JavaScript es asegurarme de que esté escrito de una manera impulsada por eventos. A lo que me refiero con eso es que cuando por ejemplo eres variante cambia en una página de producto en lugar de tener una función larga que tenga una receta para todas las cosas diferentes para actualizar en la página, su lugar desencadenar un evento cambiado variante y luego podrás tener todos tus demás componentes enganchados a esos eventos y actualizar su propia área de responsabilidad de forma independiente. Entonces, por ejemplo, podría desencadenar un evento actualizado de variante y podría tener un componente que actualice el precio del producto, otro que actualice la imagen destacada del producto. De esa forma mantienes las cosas muy separadas como ventajas similares a cuando estás descomponiendo tu JavaScript en módulos. Este último punto, este evento en JavaScript, se vuelve realmente importante cuando comienzas a conseguir temas realmente complejos que podrían tratar cosas como diferentes monedas, diferentes idiomas, diferentes locales, porque puedes tener un montón de entradas diferentes y eso lo hace mucho más fácil si solo tienes que preocuparte por actualizar componentes individuales en una página, puedes razonar mucho más fácilmente. Otro tema que no tenemos tiempo para cubrir en profundidad es el rendimiento temático. Eso es un poco de pena porque creo que la performance es un tema que realmente no tiene suficiente protagonismo cuando estamos hablando de temas de Shopify. Sí, me di cuenta de la ironía de que estoy diciendo que no tenemos tiempo suficiente para hablar de ello cuando creo que es una lástima que no hablemos de ello lo suficiente. El hecho es que el rendimiento realmente afecta tus tasas de conversión. Por lo tanto, Google ha hecho un estudio y un aumento de un segundo en tiempos de carga de tu página puede resultar en hasta un siete por ciento de caída en la conversión. Entonces es algo realmente importante. Entonces se convierte la pregunta, ¿qué podemos hacer nosotros como desarrolladores temáticos al respecto? Lo primero que creo que es realmente importante tener es una forma de medir tu performance temática para que tengas alguna idea de si algo que estás haciendo realmente está marcando la diferencia. Hay dos herramientas que creo que son realmente geniales para esto. El primero es Google PageSpeed Insights. Esa es una herramienta realmente sencilla que Google te da. Puedes enchufar una URL, obtendrás un desglose de dónde están para ti los artículos de rendimiento de boletos grandes o los grandes temas de boletos. La segunda herramienta que es realmente genial es WebPageTest.org. Entra en mucha más profundidad. Obtienes gráficos de cascada, te da un desglose de todos los diferentes componentes individuales de tu página, y también tiene esta cosa llamada índice de velocidad. El índice de velocidad es una medida de la rapidez con que una página se vuelve utilizable para un cliente en lugar del tiempo que tarda toda la página en cargarse, y eso suele ser algo más importante porque lo realmente les importa a los clientes es la rapidez con que capaces de interactuar con tu página en lugar de cuando se carga el último widget de JavaScript. Ahora, en cuanto a lo que realmente puedes hacer prácticamente para mejorar tu rendimiento temático, hay un par de grandes puntos que empezaría abordando primero. El primero de éstos es JavaScript cargado de arriba. Entonces, mucha del tiempo si miras los temas, cargan muchas bibliotecas incluyendo decir jQuery en la cabeza del tema. Mover esas bibliotecas de aquí arriba al fondo del cuerpo de la página puede tener un enorme impacto en tiempos de carga ya que el navegador no tiene que descargar parse y ejecutar todo ese JavaScript antes de que incluso empiece a mostrar el contenido en la parte superior de la página. Otro gran asesino de rendimiento son las imágenes no optimizadas. Entonces si tienes JPEGS o GIFS o PNG en tu tema que no se han optimizado correctamente, puedes estar enviando muchas picaduras poco útiles por el cable. Puedes usar herramientas como ImageOptim o ImageAlpha para optimizar estas imágenes antes de que suban a tu tema, y también puedes empaquetarlas en un proceso de desarrollo de temas automatizado como veremos más adelante. Otra cosa a tener en cuenta es asegurarte de que estás sirviendo la imagen del tamaño correcto al tipo de dispositivos correcto. Por lo que no tiene sentido cargar una imagen de retina 3X a un teléfono móvil que no va a poder mostrar esos píxeles, y de igual manera, no tiene sentido servir una imagen de alta resolución a un dispositivo de escritorio que no tenga un alto pantalla de resolución. Por lo que hay un par de cosas que puedes hacer para asegurarte de que estás haciendo lo correcto ahí. Puede utilizar las bibliotecas de JavaScript para asegurarse de que se seleccione el tipo correcto de imagen, y para los navegadores más nuevos que es donde esto es más aplicable, puede usar el nuevo atributo de conjunto de fuentes en las imágenes. Por último, y esto es realmente lo más difícil de hacer con tu tema pero también lo más útil, y eso es solo para quitar cosas. Entonces, si hay componentes en la página que son realmente lentos para cargar o que ocupan mucha descarga o ancho de banda, entonces solo considera si puedes reemplazarlos por algo que sea un poco más ligero de peso. Un gran ejemplo de esto que digo todo el tiempo son carruseles. Por lo que los carruseles son horribles desde una perspectiva de usabilidad. Los usuarios simplemente no tienden a pasar a la segunda o tercera diapositiva, o se sienten frustrados por ellos cuando quieren ir al primer elemento de la diapositiva, y se desliza más allá de eso y luego quieren intentar volver a ella. Entonces, los carruseles son solo mala usabilidad, pero también cargan más imágenes de las que realmente podrías necesitar. Por lo que reemplazar un carrusel de JavaScript por una sola imagen puede ser una gran manera tanto de mejorar la usabilidad del tema pero también reducir drásticamente la cantidad que se necesita descargar para su tema en primer lugar. El 're son mis mejores consejos para el rendimiento y asegurarme de que tus temas se carguen un poco más rápido. Si realmente te interesa este tema, he escrito bastante sobre esto en mi blog, gavinballard.com donde me sumerjo específicamente en casos de uso alrededor de los temas de Shopify y la optimización del rendimiento. 8. Automatiza tu flujo de trabajo: En esta lección, vamos a estar hablando de automatización de flujos de trabajo. Entonces, el proceso de tomar tareas repetitivas y automatizarlas. Obtenemos muchos beneficios al hacer esto. El más obvio, es que nos ahorramos mucho tiempo. Entonces, no tenemos que realizar el mismo paso manual una y otra vez. Pero también hay un par de otros. Obtenemos más flexibilidad en cómo podemos estructurar nuestros proyectos. Entonces, en lugar de tener que empaquetar las cosas, cómo Shopify espera que sea el tema final, podemos estructurar las cosas de una manera que facilite el mantenimiento, dividir nuestros archivos JavaScript por ejemplo y compilarlos juntos. También hacemos que nuestro proceso de despliegue sea mucho más confiable, porque es automatizado, no tenemos que preocuparnos por olvidar un paso si estamos haciendo las cosas manualmente. Entonces, la ventaja final que obtenemos de esto, es que tenemos alguna forma de documentación de nuestro proceso de despliegue. Entonces, mientras que, antes realmente no teníamos ninguna manera de comunicar nuestro proceso de implementación a otro desarrollador, por ejemplo. Puede que acabara de estar escrito en un Google Doc o solo estamos tratando de recordarlo. Al automatizar el proceso, tenemos alguna forma de documentación de ese proceso en el propio código. En esta lección, vamos a estar buscando una herramienta específica para la automatización del flujo de trabajo llamada Grunt. Grunt se basa en Node.js, es un marco bastante popular y común y me gusta, porque tiene un ecosistema realmente grande de plugins. Entonces, si hay algún tipo de tareas que tal vez quieras hacer con tu tema de Shopify, ya sea concatenar archivos, acotar hojas de estilo o optimizar imágenes, probablemente ya haya un plugin para Grunt que haga eso. Estaremos tomando a Grunt en esta lección y viendo cómo podemos aplicarlo al proceso de construir temas de Shopify. El primero que hay que comprobar, es que tenemos instalado en nuestras máquinas tanto el gestor de paquetes de nodo como el nodo. Si no tienes esa configuración, entonces, puedes buscar en el sitio web del nodo y npm sobre cómo ordenar eso. Una vez, lo hemos hecho, podemos ejecutar este comando npm install para instalar la biblioteca cliente de Grunt. Eso nos dará acceso a las herramientas de la línea de comandos con Grunt. Una vez, esto está configurado, estamos en nuestro directorio temático. El primero que queremos hacer es ejecutar npm, en el que crea un archivo package.json. Si estás familiarizado con los proyectos de nodo, lo habrás visto antes. Si no, básicamente es solo una forma de enumerar todas las dependencias para nuestro proyecto en particular. Entonces, es donde vamos a meter todos nuestros plug-ins de Grunt y cosas así. Entonces, me estoy moviendo por los pasos de configuración con bastante rapidez. Si no estás siguiendo a lo largo del 100 por ciento, no estreses demasiado. Siempre puedes leer más sobre esto en la página web de Grunt y también en los materiales del curso. Entonces, en esta etapa con nuestro tema demo, tenemos instaladas nuestras dependencias para Grunt. Tenemos a Grunt y un paquete.json montado. Ahora, sólo tenemos que buscar algo que ver realmente con ello. Nuestro tema de demostración para esta lección es el tema LaunchPad, que viene por defecto con todas las tiendas Shopify. Si nos sumergimos en el directorio de activos para este tema, podemos ver que hay bastantes plugins de jquery que este tema tira por defecto y eso es algo bastante común de ver en muchos temas de Shopify. Pero el problema con esto, es que sí tenemos que cargar todos estos archivos JavaScript de forma individual, así que estamos haciendo solicitudes HTTP adicionales. Entonces, lo que vamos a estar viendo en esta lección, es cómo podemos usar la automatización del flujo de trabajo para mantener separados estos archivos en desarrollo, para que sea más fácil de administrar. Pero juntarlos todos, concatenarlos todos juntos, que sólo tengamos que entregar un archivo real al navegador. Afortunadamente, para nosotros, Grunt tiene un plugin, eso hace lo que queremos más o menos al bate. Se llama grunt-contrib-concat. Entonces, instalamos plugins de Grunt usando el comando npm install. Si tuviera save-dev al final como argumento ahí, eso asegurará que se añada a nuestro paquete.json, que, nuestras dependencias estén claramente listadas. Entonces, sólo tenemos que esperar un poco para que esa instalación se lleve a cabo. Entonces, si realmente inspeccionamos el contenido de nuestro paquete.json, veremos que ese nuevo plugin ha sido agregado a nuestra lista de dependencias. Ahora bien, si inspeccionamos el contenido de nuestra carpeta temática, podemos ver que instalar npm y node en Grunt ha agregado este directorio node_modules a nuestro tema. Si ejecutamos un status git, veremos que git lo está recogiendo como un directorio que quizá deseemos agregar a nuestro proyecto. Realmente no necesitamos la carpeta de módulos de nodo en nuestro proyecto, porque todo lo que contiene son las dependencias que se enumeran en package.json. Entonces, no es realmente un código relevante para nuestros proyectos, entonces, deberíamos agregar eso a nuestro gitignore. Entonces, que no estamos cometiendo cosas accidentalmente, que realmente no necesitamos serlo. Nosotros sí sin embargo, queremos asegurarnos de que los cambios al gitignore y al propio paquete.json estén documentados en nuestro gitrepositorio. Entonces, vamos a hacer eso ahora. Ahora, tenemos todos los componentes para ejecutar juntos tareas de Grunt. Pero aún necesitamos una forma de definir cuáles son esas tareas reales y cómo deben operar en los archivos de nuestro tema. Hacemos eso usando un archivo Grunt. Un archivo Grunt es un archivo JavaScript que se sienta en el nivel superior de nuestro directorio temático y es donde definimos todas las tareas automatizadas, que nos gustaría poder ejecutar sobre nuestro tema. Entonces, si echamos un vistazo a este archivo de ejemplo Grunt, podemos ver que se trata de un archivo JavaScript. Entonces, solo usa la sintaxis regular de JavaScript. Entonces, tiene una línea de exportaciones en la parte superior y luego, definimos nuestras tareas dentro de esta llamada Grunt.InitConfig. Entonces, puedes ver aquí, estoy pasando un hash que define algunas tareas incluyendo esta tarea concat. Le estoy dando un nombre a esa tarea y luego, estoy definiendo los archivos fuente que quiero concatenar juntos, y el archivo de destino para donde quiero que todo termine. Por aquí abajo, tengo dos líneas. Uno para cargar el plugin concat, y luego el segundo simplemente registra esa tarea concat que hemos definido como la tarea predeterminada. Entonces, ¿cómo funciona eso cuando queremos ejecutar estas tareas? Si volvemos a saltar a la línea de comando, podemos correr gruñido concat. Como puedes ver, nos dirá que ha corrido esa tarea y que se ha creado este archivo jquery plugins. Entonces, si queremos echar un vistazo a cómo se ve eso, podemos ver que se ha creado el archivo plugins y como se esperaba, es una concatenación de esos otros archivos de plugin jquery que definimos. Entonces ahora, todo lo que nos queda por hacer, es reemplazar esas importaciones individuales de esos plugins jquery individuales con la única importación de la sola llamada a una etiqueta de script para el archivo concatenado juntos. Una vez que hayamos hecho eso, podemos simplemente eliminar estas llamadas existentes. Lo que acabamos de hacer fue un caso de uso realmente simple para Grunt simplemente concatenar a archivos. Pero podríamos haber estado haciendo mucho más, podríamos estar midificando esos archivos antes de que fueran empujados a la producción. Podríamos estar realizando alguna comprobación de sintaxis en el JavaScript, para asegurarnos de que todo estuviera bien y libre de errores antes de entrar en producción. Podríamos estar optimizando imágenes y encima de eso, podríamos estar haciendo eso de una manera diferente dependiendo del entorno en el que estuviéramos. Entonces, si estuviéramos en desarrollo o en producción. Pero claro, Grunt no es la única herramienta que podemos usar a través de este tipo de cosas. Hay otras herramientas, cosas como Gulp o CodeKit, que efectivamente realizan el mismo proceso. Pero la elección real de herramienta que usas, no es realmente lo importante aquí. Es solo que tienes alguna forma de automatización del flujo de trabajo, para obtener todos los beneficios que enumeramos al inicio de la lección. 9. Implementa los temas de Shopify: Al igual que la lección anterior, esta lección final es todo acerca nuestro proceso de implementación y específicamente vamos a estar hablando de implementación, cómo obtenemos nuestro código de nuestras máquinas de desarrollo a producción, en Shopify en un profesional y eficiente. Empecemos por obtener una visión general de los métodos de despliegue y cómo hemos estado haciendo las cosas hasta la fecha. Cuando configuramos la gema temática en las lecciones anteriores de este curso, estábamos usando para desplegar esencialmente directamente a nuestro tema en vivo en nuestra tienda Shopify. Esto funciona bien para el desarrollo pero hay un par de temas cuando esto se convierte en una tienda de producción en vivo. El primero es que tus desarrolladores están empujando cambios directamente a la producción sin ninguna medida preventiva real para evitar accidentes. Realmente no estás teniendo ninguna manera de probar nuevas características. También tienes dificultades para saber en qué tipo de estado está tu tema en vivo en tu sitio de producción y realmente no sabes en qué versión del código se está ejecutando, y usar este tipo de método también hace que sea realmente difícil colaborar con otras personas en tu tema de Shopify, porque es muy fácil para múltiples desarrolladores sobrescribir los cambios de los demás y es muy difícil retroceder a un estado anterior si algo sale mal con eso. Entonces, una forma de tratar de resolver algunos de estos problemas es tener dos temas corriendo en la misma tienda, una versión en vivo y una versión de desarrollo. Entonces, seguimos usando la gema del tema para actualizar los cambios directamente al tema de desarrollo mientras nos estamos desarrollando y luego una vez que estamos contentos con los cambios que hemos realizado, pudimos desplegar esos cambios en el tema en vivo. Una forma de hacerlo sería duplicar la última versión de nuestro tema de desarrollo y publicarlo como un tema en vivo en la tienda Shopify y hacerlo a través del administrador de Shopify. Pero hay un par de problemas con eso. En primer lugar, sigue siendo un proceso muy manual por lo que, hay espacio para el error humano. También es muy difícil aún saber en qué estado se encuentra nuestra tienda en vivo, así que no estamos realmente seguros cuál de las últimas versiones de desarrollo se ha publicado y realmente no soluciona nuestros problemas de colaboración. Entonces, imagina que el mejor enfoque es seguir usando la gema del tema para subir directamente a la tienda de desarrollo, pero luego usar también la gema del tema para desplegar al tema en vivo una vez que estemos contentos con el estado del tema en nuestro local máquina de desarrollo. Este tipo de evita un poco el mucking alrededor con el proceso de despliegue admin de Shopify. Pero de nuevo, todavía tenemos estos problemas donde seguimos usando un proceso manual y aún tenemos problemas con la colaboración como donde subir nuestro tema directamente desde la máquina de un desarrollador a la tienda en vivo. Un enfoque mucho mejor que podemos usar es seguir usando la gema temática para subir a la tienda de desarrollo, ya que esa es realmente la forma más instantánea para podamos obtener retroalimentación sobre el desarrollo como lo estamos haciendo. Pero luego para introducir el concepto de un repositorio de terceros. Entonces, este sería un servicio de repositorio de código, así que algo como GitHub o Bitbucket o GitLab o tu propio servidor Git alojado internamente. Una vez que estemos contentos con los cambios que hemos realizado con nuestro tema localmente, solo podemos hacer un empuje de Git a ese repositorio. Entonces podemos usar un servicio de despliegue para tomar la última versión de nuestro código temático y empujarlo hacia fuera al tema en vivo en nuestra tienda Shopify. Entonces, traer en este concepto de un repositorio de terceros entre los desarrolladores y el entorno de producción nos da muchas ventajas. Entonces, instantáneamente obtenemos todos los beneficios de colaboración de usar un repositorio central de Git, por lo que cosas como tener la resolución de conflictos manejada para nosotros. Podemos usar cualquier mecanismo en particular el servicio de hosting de Git así por ejemplo. pull, solicitudes emergentes de pool y plantear cuestiones y cosas por el estilo. Estamos separando a los desarrolladores de implementar directamente al entorno de producción, lo que minimiza el riesgo de tener errores, y al tener este despliega el paso de servicio automáticamente desde nuestro repositorio de código al sitio en vivo. Abrimos la puerta para cosas como las pruebas automatizadas durante esa etapa y solo desplegamos si todas estas pruebas han pasado. Entonces, de manera realista, probablemente tendríamos tres o más temas en nuestra tienda Shopify. Entonces, un tema de puesta en escena también y luego un tema de Dev para cada desarrollador no son lo mismo, y entonces nuestro servicio de implementación estaría desplegando automáticamente la última versión de nuestro código al tema de puesta en escena donde se puede probar y luego una vez ha pasado un proceso de control de calidad podemos desencadenar una implementación manual a través ese trato de servicio de implementación al tema en vivo que los clientes están diciendo. Para ir un último paso más allá en un escenario realista. Porque es una mala práctica tener tu sitio de producción funcionando en la misma tienda Shopify que tus temas de puesta en escena y desarrollo, porque no puedes separar datos como pedidos y clientes. Lo que realmente quieres hacer es ejecutar dos tiendas Shopify separadas y así tu servicio de implementaciones aún puede estar implementando automáticamente al tema de puesta en escena en tu tienda de desarrollo y luego cuando estés activando ese despliegue manual, que va al tema en vivo en la tienda de producción. Hay bastantes servicios que te permitirán implementar código desde un repositorio de Git a un tema de Shopify, y por supuesto si tienes algunas tiendas de desarrollo de sistemas back-end siempre puedes rodar las tuyas propias. Hoy vamos a estar viendo una herramienta específica y es la que me gusta usar, se llama DeployBot. Eso lo puedes encontrar en deploybot.com. El motivo por el que me gusta el despliegue de tema de Shopify es que tiene soporte nativo incorporado para temas de Shopify. lo tanto, es realmente fácil ponerse en marcha y también tiene soporte para algunas características más avanzadas como ejecutar un script de compilación como parte del proceso de implementación. Veamos cómo podemos ir a implementar un tema usando DeployBot. Entonces, estamos de vuelta en nuestro tema demo y si saltamos a nuestra foto podemos ver que tengo una config gambles. Entonces, tengo el tema configuración de GM para subir a la tienda y también he colocado este tema bajo control de revisión de Git. Como primer paso para este ejemplo también he empujado este tema a GitHub, así que lo tengo alojado en un repositorio central. Ahora, veamos cómo encaja el DeployBot en la mezcla. Puedes crear una cuenta de forma gratuita con el DeployBot y usar hasta un repositorio con ese plan y luego una vez que hayas ingresado a tu cuenta se te presenta esto, lo que básicamente te guía por el proceso de conexión un repositorio a tu tienda Shopify. Entonces, como puedes ver aquí, puedes conectar GitHub, Bitbucket o tu propio repositorio de Git autoalojado. Voy a seleccionar el repositorio para este tema de demostración y golpear Connect. Entonces, del otro lado de las cosas, necesito crear un entorno, así que eso es engancharse a donde estamos desplegando a la que, en este caso, va a ser una tienda Shopify. Entonces, solo necesito darle una etiqueta a eso, especificar cómo quiero estar desplegando a ese entorno. En este caso, voy a dejar este manual. Voy a estar desplegando la rama maestra, y luego podemos ver que nos piden en un servidor. Entonces, tenemos esta opción de enlazar indirectamente con Shopify. Entonces, eligiendo eso, solo le doy un nombre y la URL a mi tienda Shopify. Entonces, podemos engancharnos directamente. Entonces, el webhook básicamente se configura como una aplicación personalizada dentro de nuestra tienda Shopify. Tan solo hay que darle un nombre a eso y luego podemos elegir en qué tema queremos desplegar. Entonces, tenemos uno ahí dentro llamado Personalización del producto que usaremos. Tenemos un montón de opciones avanzadas en las que no estábamos cavando todavía. Entonces, esa es en realidad toda la configuración que necesitamos configurar para que un servicio básico de despliegue sea operativo. Ahora podemos presionar el botón Deploy y DeployBot buscará la última versión de nuestro código de GitHub. Te da la oportunidad de revisar qué cambios realmente se van a implementar y luego podemos presionar el botón de inicio Deploy para presionar esa información, y empujar ese tema y esos archivos a nuestra tienda Shopify. Ahora bien, si actualizamos nuestra tienda Shopify en este momento, no vamos a ver ningún cambio porque por supuesto, estábamos empujando la versión más reciente de todos modos. Pero veamos cómo pasamos por el proceso si hacemos un cambio. Entonces, decidamos que queremos cambiar el color de nuestra barra de navegación y así hacemos ese ajuste nuestra hoja de estilo. Guarda esos cambios y pasa por el proceso de agregarlo a Git. Una vez hecho eso, podemos empujar esos cambios hasta nuestro repositorio de GitHub y solo comprobaremos y veremos que efectivamente se ha empujado ese cambio, que podemos ver que lo ha hecho. Entonces si dejamos caer en el DeployBot, veremos que si volvemos a pulsar el botón Deploy, comprobará una vez más los cambios recientes y nos dará una visión general de lo que va a cambiar y desplegar. Por lo que de nuevo, en cuestión de apenas golpear el despliegue de inicio y DeployBot empujará esos cambios a nuestro tema de Shopify. Ahora bien, si nos refrescamos veremos que efectivamente se ha producido ese cambio. Ahora, una de las ventajas de usar un servicio de implementación es que, si empujamos algo que está mal o no nos gusta, pudimos retroceder con bastante facilidad y Deploybot como puedes ver, hace de este un proceso bastante sencillo. Podemos revisar de nuevo lo que estamos retrocediendo y al instante el retroceso cambia si algo sale mal. Esa fue la introducción realmente rápida de cinco minutos al despliegue que es el tema final de este curso. Pero justo antes de terminar, vamos a echar un vistazo a un escenario de despliegue final que trae algunas técnicas más avanzadas específicamente, algunas de las cosas de automatización del flujo de trabajo de las que hablamos la última lección. Entonces, estamos de vuelta mirando el tema de desarrollo de la tienda de velas. Pero esta vez alrededor, tengo dos temas en mi tienda. Tengo un tema Live y un tema de Desarrollo. Entonces, subimos indirectamente al tema Desarrollo. En Desarrollo o usando el tema [inaudible] y luego estaremos desplegando a la versión Live del tema usando Deploybot y ya configuré ese flujo DeployBot de manera similar a lo que hicimos con el screencast anterior. Ahora, también he hecho algunos cambios bastante significativos la estructura de nuestro directorio temático también y eso es para encajar con algunas de las cosas de automatización del flujo de trabajo que discutimos anteriormente. Entonces, puedes ver ahora que tengo un directorio temático que contiene todos los archivos fuente para mi tema, y también he agregado un Gruntfile que está realizando un montón de tareas de compilación, así que minificación y concatenación, y construir todos esos archivos fuente en mi tema en el directorio.build, aquí en el nivel superior. Para ver eso en acción, saltemos a la consola y ejecutemos una compilación de Grunt, y veremos que compila nuestro tema en ese directorio.build. Entonces, si abro ahora, podemos decir una versión final lista para su despliegue a una tienda Shopify. Ahora, observe que el archivo config.yml está sentado dentro de este directorio de compilación, para que pueda ejecutar un reloj de tema aquí, y subir mis cambios en Desarrollo directamente a la versión de Desarrollo del tema en la tienda Shopify. Entonces, si cambio directorio en el directorio de compilación y ejecuto tema watch. Entonces vuelve a mi tema, haz un cambio en los archivos fuente originales de esos temas. Entonces, cambiando el título de mi página por ejemplo y luego ejecutar ese paso de compilación otra vez usando Grunt, podemos decir que Grunt será lo suficientemente inteligente para reconstruir solo cosas que necesitan cambiar y luego mi subida de tema recoge ese cambio y sube a la tienda. Ahora, si actualizo en nuestro navegador, inmediato no voy a ver ese cambio porque actualmente estamos viendo la versión Live de la tienda, y estábamos subiendo a la versión Development. Pero podemos por supuesto, previsualizar eso como hemos hecho aquí y se puede ver que ese cambio efectivamente se ha hecho. Ahora, no queremos tener que ejecutar una compilación de Grunt manualmente cada vez que hacemos un cambio a nuestro tema, pero afortunadamente también tenemos una configuración de tareas de reloj en nuestro Gruntfile. Entonces, esto significa que ahora podemos entrar en nuestros archivos de tema fuente, hacer cambios según nos parezca conveniente y luego en cuanto guardemos, Grunts va a cosechar, compilar lo que necesitamos y a su vez el reloj temático subirá ese cambio a la tienda. Una vez que estamos contentos con los cambios que hemos estado haciendo en Desarrollo, queremos empujar esos cambios hasta Git, que podamos desplegarlos en nuestro sitio Live. Entonces, para hacer eso, pasamos por el proceso estándar de adición de Git, y cambiaré esto a un Commit y luego empujaremos eso hasta nuestro repositorio de GitHub. Después podemos pasar por el proceso de ejecutar un Deploy con Deploybot de manera similar a lo que hicimos en nuestro screencast anterior. Entonces, pulsando el botón Desplegar, revisando los cambios que se deben realizar y luego ejecutando esa implementación. Si volvemos a nuestro navegador y ahora, podemos ver que ese cambio se ha desplegado en el sitio Live. Volvamos a nuestros archivos temáticos por un segundo para revisar lo que ese Gruntfile está haciendo en realidad por nosotros y cómo funciona eso con DeployBot. Entonces, dentro de nuestros archivos fuente temática, se puede ver que no estamos usando la estructura estándar de directorios Shopify. En realidad hemos roto nuestro JavaScript y nuestras hojas de estilo en archivos separados lo que nos ayuda con el Desarrollo y mantiene todo un poco más modular y fácil de razonar. En el directorio Build's, hay estos archivos se compilan juntos. Lo que es más de hecho, es que si saltamos a nuestro sitio Live en nuestro navegador y hacemos un poco de cavar en el CSS, ahí veremos que los activos que se están sirviendo desde el sitio Live no son en realidad sólo compilados juntos, pero también están minificados. Esto es posible porque DeployBot admite comandos Build. Entonces, si saltamos a los ajustes que están configurados para nuestro tema de Shopify, Veremos que DeployBot realmente es capaz de ejecutar una compilación de Grunt para nosotros antes de desplegar nuestro tema en la tienda Shopify. También te darás cuenta de que estamos pasando una bandera de producción a la tarea Build, y eso es decirle a Grunt que ejecute algunas tareas que no encontraríamos útiles ni demasiado caras para ejecutar en Development. Entonces, por ejemplo, al reducir esas hojas de estilo, también lo usaríamos aquí para minificar nuestros JavaScripts y también lo usaríamos para minificar y optimizar nuestras imágenes lo cual es una tarea bastante costosa. Toma un poco de tiempo que realmente no nos pueden molestar esperando en Desarrollo, pero nos gustaría ejecutarlo antes de que realmente empuje nuestro tema hacia la producción. Esperemos que ahora tengas una idea de algunas buenas técnicas para usar para obtener tu código de tu máquina de Development, a una tienda Shopify en producción y evitando todos esos problemas que identificamos al inicio de una lección. 10. Conclusión: Bueno, eso es todo. Ya estamos hechos. Muchas gracias por acompañarme en este curso. De verdad espero que te haya sido útil, espero que hayas aprendido algo que no sabías antes, y si sientes que puedes abordar algo más avanzado de Shopify desarrollar ahora. Siempre estoy muy feliz de hablar con estudiantes o con cualquier persona en general sobre Shopify, paso demasiado tiempo pensando y hablando de Shopify. Entonces, si quieres ponerte en contacto o hacer preguntas, dame algunos comentarios. Si te atascas en los proyectos, entonces ponte en contacto. Mis datos de contacto aquí en la página del curso de SkillShare. Aparte de eso, creo que lo único que queda es que yo diga buena suerte en tu desarrollo de cosa Shopify y feliz Kirti.