Transcripciones
1. Introducción: Hola y bienvenidos a Shopify Theme Development con Vue.js. Yo soy Christopher Dodd. Soy desarrollador web freelance y maestro superior aquí en SkillShare.com, cubriendo todas las cosas desarrollo web y freelancing online. En la clase de hoy, vamos a aprender a integrar el JavaScript Framework Vue.js en las páginas de producto y carrito de un tema de Shopify. Esta clase es ideal para aquellos de ustedes que han tomado algunas de mis otras clases sobre desarrollo temático
Shopify aquí en SkillShare.com y están listos para llevar sus habilidades de desarrollo temático al siguiente nivel. Con Vue.js, somos capaces de llevar las estructuras de datos de Shopify al front-end y permitir que el usuario viva elementos de
actualización sin recargar el navegador. Usando Vue.js sobre otras bibliotecas JavaScript como jQuery, podemos crear una experiencia más óptima tanto para nosotros como desarrolladores, así
como para los usuarios finales de nuestra tienda de comercio electrónico. Si estás listo para empezar da click en el siguiente video y te veré por dentro.
2. Conocimiento necesario: La clase de hoy al usar Vue.js dentro de los temas de Shopify es un tema avanzado y por lo tanto, requerirás algún conocimiento previo para
poder entender y sacar el máximo provecho de esta clase. Antes de tomar esta clase, debes entender la diferencia entre front-end y back-end cuando se trata de desarrollo web, esto también se conoce como cliente y lado servidor. Si no estás familiarizado con por qué necesitaríamos transferir
datos de Shopify Liquid a JavaScript,
por ejemplo, entonces te recomiendo echar un vistazo a la Lección 4 de
mi clase anterior de Skillshare, Entendiendo el Desarrollo Web. En segundo lugar, vas a necesitar conocer JavaScript. Si necesitas un refresco, puedes echar un vistazo a mi clase de Skillshare, Fundamentos de Desarrollo
Web: JavaScript. tercer lugar, debes tener al menos cierta familiaridad con la API Ajax y Shopify. En esta clase, lo estaremos enchufando a la vista y usándolo para actualizar nuestro carrito sobre la marcha. Si quieres un refresco de la API Ajax, echa un vistazo a la Lección 8 de mi clase, Shopify Theme Programming. Por supuesto, por último pero no menos importante, deberías tener alguna experiencia general con desarrollo del tema
Shopify y la escritura del código Shopify Liquid. De no ser así, definitivamente recomiendo mis dos clases anteriores de Skillshare sobre el tema, Shopify Theme Development y Shopify Theme Programming. Aparte de eso, aunque seas nuevo en Vue.js, deberías tener los conocimientos suficientes para continuar con los siguientes videos.
3. Por qué usar Vue: Antes de empezar, hablemos de por qué querríamos usar Vue dentro de los temas de Shopify. En pocas palabras, Vue.js es útil para cualquier área de nuestro sitio web de Shopify que requiera o fomente la interacción del usuario fuera de simplemente navegar a páginas nuevas. Pensemos por un segundo sobre cómo un usuario podría interactuar
comúnmente con un sitio web de comercio electrónico. Podemos dividirlo en tres conductas principales. Uno, navegar o encontrar productos específicos para comprar dos, agregar y quitar productos hacia y desde su carrito de compras, y tres, llevar esos productos a la caja y completar su pedido. En el punto 1, navegar o encontrar productos específicos para comprar, mayoría de las veces esto sucede a través de la navegación. Simplemente haga clic en la colección o categoría que desea navegar y se le presenta una lista de opciones. Esto no requiere interactividad más allá de navegar por páginas. Pero ¿qué pasa cuando llegas a la página del producto y te presentan algunas opciones para modificar el producto a tu gusto antes de añadirlo al carrito. Aquí, cuando actualices tu selección, la imagen del producto, el precio del producto y otros detalles podrían cambiar. Preferentemente, el usuario no debe tener que navegar a una nueva página o actualizar la página para poder ver esos cambios menores. En segundo lugar, después de que un usuario haya terminado de navegar y agregar artículos a su carrito, tal vez les gustaría quitar productos de su carrito o agregar unidades adicionales del mismo producto. Nuevamente, sería preferible que la actualización se grabara al instante en lugar de tener que esperar a que se actualice una página. Por suerte, ambas interacciones que podemos manejar en el front-end usando JavaScript. Pero usando JavaScript o jQuery en el marco en absoluto, vamos a tener que especificar qué secciones de la página están destinadas a cambiar y en qué situaciones. Esto da como resultado que tengamos que escribir códigos desordenados, tanto actualizar los datos como después hacerlo para que los datos actualizados se reflejen en la página. Vue.js resuelve este problema para nosotros a través de algo llamado reactividad. Te animo a leer en profundidad sobre la reactividad en la página web de Vue, pero por ahora así es como la voy a explicar. En pocas palabras, Vue nos permite crear una estructura de datos e insertar valores dinámicos en nuestra estructura HTML front-end. Cuando los datos cambian, también lo hacen los valores de la página. Por lo tanto, se consideran reactivos. Al escribir Vue.js, no tenemos que
decirle explícitamente a la interfaz de usuario que actualice, en cambio, la interfaz de usuario reaccionará a lo que se hayan actualizado los datos enlazados a ese elemento. Pongámoslo en términos de las dos áreas donde estaremos usando Vue en la clase de hoy, la página del producto y la página del carrito. En la página del producto, si el producto tiene más de una variante, entonces se requiere alguna selección del usuario. A continuación, la selección determina la variante actual, que puede llevar consigo un precio,
imagen, y/o nivel de stock diferente . En la página del carrito, la mayoría si no todo
el contenido de la página procederá de lo que actualmente se almacena en el carrito, como los diversos artículos en el carrito, sus imágenes, títulos, precios, y la combinación de esos precios, que componen el precio total. Cuando un artículo o unidad se retira del carrito, esto produce un efecto de goteo hacia abajo en la matriz de artículos, el precio de línea del artículo, y/o el total del carrito. En Vue.js, podemos abrir nuestras herramientas de desarrollador para
ver claramente nuestra estructura de datos y cómo los valores de la página se mantienen sincronizados con la estructura sin tener que escribir manualmente líneas de código para actualizar los valores como se ve en la página. Para resumir, Vue.js es más útil en estos entornos, estas situaciones en las que no se desea tener que
actualizar la página cada vez que se produce una actualización. En las tiendas de comercio electrónico específicamente, Vue.js es particularmente útil cuando se trata de selecciones de
variantes e interacciones de carros de compras.
4. Cómo usar Vue en los temas de Shopify: Vue.js es un framework que se puede utilizar para crear una aplicación web de una sola página, o puede ser dejado caer en cualquier página web única. La instancia de Vue, como se le llama, se enchupa a su estructura HTML existente, y mediante el uso de etiquetas personalizadas, atributos y sintaxis de plantillas, habilita el enlace de datos y eventos desde el HTML a la instancia de Vue. En la clase de hoy, vamos a crear dos apps o instancias Vue, una Una la página del producto y otra para la página del carrito. Para la página del producto, vamos a utilizar Vue para realizar un seguimiento de la variante seleccionada actualmente. Esto se determinará por la combinación de opciones seleccionadas por el usuario a través de este formulario. Importaremos la lista de variantes desde el back-end de Shopify y usaremos los valores de estos drop-downs para determinar la variante actual. Para la página del carrito, vamos a importar los datos del carrito de nuestro back-end Shopify a nuestra instancia usando el carrito AJAX API. También vamos a importar una colección específica para ofrecer upsells debajo del carrito, así
como agregar estados de carga de transición para los botones add to cart y la tabla cart dado que estaremos realizando llamadas asíncronas a la API AJAX. Esa es la visión general de para qué vamos a usar Vue en nuestro tema de Shopify. Tenga en cuenta que las instancias de Vue y las plantillas de Shopify tienen una relación uno a uno aquí. medida que empezamos a construir y luego terminamos de mirar a Vue, debería empezar a quedar más claro por qué lo estamos haciendo de esta manera. Al concluir esta clase, posible
que desee explorar qué otras plantillas su tema de Shopify podrían beneficiarse de una instancia de Vue. Un ejemplo en el que se me ocurre fuera de la cabeza es la plantilla de colección. La tienda Shopify está con muchos productos individuales, posible que
desee crear un sistema de filtrado más sofisticado donde el usuario no necesitará
actualizar la página después de agregar o eliminar diferentes parámetros a filtrar una lista de productos. Esto implicaría que se actualicen muchos datos en base entrada
del usuario y sería una buena oportunidad para usar Vue. Por ahora, centrémonos en las dos áreas más comunes donde Vue.js tiene sentido en la mayoría de los sitios de Shopify, que en mi opinión serían selecciones variantes en páginas de productos e interacciones de carros.
5. Cómo configurar nuestro proyecto: Vamos a empezar la parte de screenshare de esta clase
dentro de mi habitual campo de pruebas para los temas de Shopify, Chris Testing Shop. Obviamente, vas a necesitar una tienda Shopify en la que trabajar. Este es el caso en cualquiera de mis otras clases de desarrollo temático Shopify. Tengan en cuenta aquí, chicos, que nos estamos enfocando en un área muy particular del desarrollo temático Shopify usando Vue.js. No estaremos cubriendo cosas como CSS, cómo funciona Shopify, o las otras cosas que van de la mano con el desarrollo del tema Shopify. Se espera que sepas usar Theme Kit. Se espera que entiendas CSS, HTML, un poco de JavaScript. Nos vamos a centrar específicamente en Vue en esta clase. Por eso he creado un proyecto de inicio para que podamos trabajar en esta clase, ya que no queremos construir un tema desde cero, pero también queremos usar un tema lo más simplificado posible. El modo en que vamos a acceder a este tema es yendo a mi cuenta de GitHub. Entonces github.com, y creo, es sólo “Christopher Dodd”. Aquí vamos. Dentro de los repositorios populares, se
puede ver Skillshare, pero hay uno nuevo que he creado aquí llamado “vue-class-theme”. Volveremos al repositorio de Skillshare en tan solo un segundo. Pero lo que quiero hacer aquí es agarrar este “punto de partida” en mi repositorio vue-class-theme aquí y traer eso a nuestro editor de código, que para esta clase, va a ser VS Code. Por supuesto, puedes usar cualquier editor de código que quieras, solo
prefiero usar VS Code. Es gratis y es poderoso. ¿Por qué no? Voy a abrir VS Code, haga clic en “Nueva ventana” aquí, y ejecutar una Nueva Terminal. El modo de obtener este repositorio es agarrar la URL aquí y luego “git clone”. Ahí vamos. Eso será en algún lugar de nuestra estructura de archivos, donde sea que tengamos nuestra terminal lista para ir. Para mí, va a ser aquí en mis cuentas de usuario. Ahí puedes ver, solo voy a mover eso
al escritorio solo para que sea un poco más fácil. Entonces ahora, puedo abrir esto. Yo sólo voy a abrir, dirigirme a esa carpeta, y aquí está. Ahora, como es el caso con todo el desarrollo de tema de Shopify, vamos a tener que configurar un archivo config.yml. Eso he cubierto un par de veces diferentes en los diferentes videos de YouTube que he hecho. Ha sido cubierto en la primera clase sobre desarrollo temático Shopify aquí en Skillshare, así que no vamos a pasar por Theme Kit. Lo que tengo ya dentro de la carpeta compartida aquí, tengo mi config.yml. Yo sólo voy a traer eso. Por supuesto, el archivo config.yml tiene todos los detalles de autenticación y el ID del tema con el fin de realmente iniciar sesión en la tienda. Voy a cerrar esa una vez que tengamos eso. El siguiente paso para nosotros será subir este tema a nuestra tienda Shopify. Lo que voy a hacer para eso es comprimir esto, hacer Comprimir en un Mac. Ahora está comprimido, va a volver a mi tienda de pruebas, haga clic en “Subir tema”. Seleccione el archivo zip. Golpea “Subir”. Eso tardará un poco de tiempo en subir y luego lo veremos subir. Yo sólo voy a quitar esa V. mayúscula Ahora, deberíamos poder hacer click en “Vista previa” y ver una vista previa de nuestro tema. En la página principal, no hay nada, pero lo que tengo aquí son dos enlaces, uno para comprar el tee o comprar zapatos. Ahora, hablaremos de los datos de la tienda en tan solo un segundo, pero echemos un vistazo a lo que tenemos hasta ahora. Tenemos nuestra camiseta aquí y después
tenemos nuestra página de colección donde tenemos una gama de zapatos. Ahora, por supuesto, todo esto se basa en datos de la tienda. Menciono esto en casi todas las clases, esto es jalando de la información que tienes dentro de tu tienda. No vas a tener exactamente la misma información que yo, pero he tratado de que sea lo más simple y fácil para que
empieces y pongas esto en funcionamiento en tu tienda lo más posible. Lo que he hecho es que he exportado todos estos productos. Tan solo hay que volver a GitHub, entrar en el repositorio de Skillshare. Aquí zapatos y camisa CSV, si importamos eso a Shopify, entonces vamos a tener todos estos productos en nuestra tienda. Aquí tienes un pequeño video de cómo se
ve cuando estás importando esa información a una nueva tienda. Ahora, deberías tener tu tema subido y
deberías tener estos productos subidos también. Si quieres seguir adelante, solo
puedes usar los productos que tengas en tu tienda ahora mismo si quieres, eso depende de ti. Pero ahora tenemos el tema aquí. Conectemos nuestro Kit Temático. Como lo hago normalmente, va a abrir,
personalizar, agarrar el ID del tema de este tema. Entra en nuestro archivo config.yml, actualiza el ID del tema aquí. Para confirmar que eso funciona, voy a abrir una nueva terminal y ejecutar reloj temático. Ahora, puedes ver que estamos conectados a ese tema y ahora estamos viendo cambios. El siguiente paso es conseguir que nuestro entorno esté configurado para Vue. Pero antes de que hagamos eso, solo
quiero familiarizarte con el proyecto ya que no lo hemos hecho hasta ahora. Es uno muy sencillo. Esto se basa en un tema de inicio que está bastante desnudo. Verás que no hay muchos activos, aquí no
hay fragmentos. De hecho, tampoco hay secciones. Este es un tema muy sencillo. Obviamente, si tienes un tema de producción, tendrías más carpetas y archivos aquí. Simplemente lo estamos manteniendo simple para esta clase. Lo primero que quiero llamar su atención, es el archivo theme.css. Ya he creado estas reglas de estilo. No quería pasar tiempo en esta clase creando CSS, así que ya he puesto todo esto en un archivo CSS para nosotros. Aquí hay un archivo JS temático. Podemos poner en nuestro JavaScript general para el tema aquí, pero estamos usando Vue y enchufándonos para almacenar datos. Realmente no se requiere para esta clase y en realidad
no vamos a estar usando este archivo en esta clase. Pero esta es una opción también para tu JavaScript general. También tengo un logotipo de sitio aquí. Esto es sólo Chris Testing Shop. No importa cuál sea tu tienda, si estás usando este tema, tendrás el mismo logotipo a menos que cambies este archivo. Tengo un icono de basura para la página del carrito, y tengo este guión aquí, que puedes encontrar aquí en GitHub si lo deseas. De lo contrario, ya está incluido en el proyecto. Es una forma de hacer el formato de dinero en Shopify a través de JavaScript. De lo contrario, estás atascado con el formato de dinero líquido Shopify y eso no va a funcionar cuando estamos usando JavaScript y Vue.js. Esa es tu carpeta de activos. Quiero llamar su atención junto al archivo de maquetación. Tenemos un archivo de diseño bastante básico aquí. Ya veo que he incluido slider slick, que se ha quitado. Eso se eliminará para tu versión del tema. Básicamente, lo que tenemos es el tema CSS incluido, ese es el único CSS extra que tenemos incluido. Estamos incluyendo este script de dinero de Shopify para que pueda formatear los valores de dinero de Shopify. También he incluido jQuery. jQuery es útil para hacer nuestras solicitudes AJAX. De lo contrario, si usamos JavaScript Vanilla, el código termina luciendo desordenado, y simplemente es mucho más fácil usar jQuery. También he incluido jQuery ahí. Esas son algunas dependencias. Vamos a necesitar shopify-money para formatear los valores del dinero y jQuery para las solicitudes AJAX. De nuevo, podemos usar Vanilla JS, pero jQuery es un poco más agradable. De eso se trata para dependencias. Ahora, es hora de realmente traer Vue.js. El modo en que podemos hacerlo como se indica en los docs es, después de nuestra etiqueta jQuery aquí, agregar en esta etiqueta de script que trae en Vue. Ahora bien, si te preguntas de dónde saqué
eso, está en la Documentación Vue. Esta es una buena oportunidad ahora para mostrarte dónde puedes encontrar la documentación para Vue. lo que realmente necesitas tener en cuenta es que en esta clase voy a estar usando Vue 3. Hay tres versiones diferentes; Vue 1, Vue 2, Vue 3. A lo mejor si estás viendo esto en una fecha mucho más tarde, hay más versiones después de eso, pero al momento de grabar, actualmente
está en la Vue 3. Aquí puedes ver que estás navegando por la documentación de Vue 2 por defecto. Es necesario dar click aquí para la documentación de Vue 3. Como puedes ver, el sitio se ve prácticamente exactamente igual, pero tu URL aquí es diferente. Haga clic en “Comenzar”. Esta es tu referencia para cualquier cosa Vue a lo largo de la clase si te quedas atascado. Como se puede ver aquí abajo, justo el anterior bajo instalación, aquí está la etiqueta de script que obtuve. Eso es exactamente lo mismo que lo que tenemos aquí. El siguiente que queremos instalar es Vue DevTools. Confía en mí, esto es tan útil a la hora de desarrollar para Vue. Vue DevTools agrega una pestaña extra aquí en nuestras DevTools dentro de Chrome. Seguro que también hay versiones para otros navegadores, pero te recomiendo que sí uses Chrome al hacer este desarrollo web. Vamos a añadir aquí una pestaña extra que nos permitirá inspeccionar nuestra capa de datos Vue y también nuestras propiedades computadas y todo tipo de cosas. Ayuda mucho a averiguar qué datos y cosas están sucediendo en Vue mientras estamos desarrollando. Para eso, voy a buscar la tienda de extensiones de Chrome, Chrome Web Store. Lo que hay que señalar aquí es que si estamos usando Vue 3, entonces tenemos que usar la versión beta aquí. Este es el que funciona perfectamente en Vue 1 y Vue 2, pero necesitamos usar la beta si vamos a estar usando Vue 3. Obviamente, esto cambiará dependiendo de cuándo estés viendo esta clase. Pero actualmente para inspeccionar Vue 3, vamos a necesitar usar esta versión aquí mismo, la beta. Voy a hacer clic en “Agregar a Chrome”, pulsa “Agregar extensión”, y puedes ver que se ha agregado a Chrome. Ahora abramos nuestro tema y previsualicemos el tema. Estoy bastante seguro de que para que funcione ese Vue DevTools, vamos a tener que crear una aplicación Vue real. Dice que Vue.js no se ha detectado. He incluido el paquete, pero aún no hemos creado una app. Sólo para demostrar que todo esto está funcionando, lo que voy a hacer es entrar en la primera plantilla. Vamos a estar trabajando en la plantilla de producto y abrir algunas etiquetas de script. Entonces dentro de aquí, voy a crear una app de Vue. Recuerda, en la sección de teoría de esta clase, hablamos de cómo estamos haciendo una relación uno a uno entre las apps y las plantillas en nuestra tienda Shopify. Vamos a crear una app llamada ProductPage para ir junto con esta plantilla. Vamos a abrir un objeto y luego vamos a crear una app a partir de ese objeto. Debajo de este objeto, vamos a escribir vue.createapp, luego cargar en nuestro objeto ahí. Entonces lo vamos a montar a nuestro DOM especificando el ID de los elementos. Ya lo he puesto aquí en product-page. Usando la sintaxis CSS con el hash, poniendo en la página del producto allí. Ahora, chicos, sólo para señalar aquí que esta es la sintaxis de Vue 3. Si estás viendo ejemplos en línea, la sintaxis podría ser diferente porque esa persona podría estar usando Vue 1 o Vue 2. Sólo ten eso en cuenta. Esta es la sintaxis más reciente para Vue 3. Si estás viendo ejemplos antiguos, se verá un poco diferente a esto. Pero tu punto de verdad aquí es que siempre puedes volver a la documentación, asegúrate de estar en la versión 3. Entonces si bajamos a la introducción, se
puede ver aquí que este es el mismo formato. En realidad podríamos obtener un error si no incluimos un objeto de datos. Simplemente comprobaré eso primero. Vamos a nuestra plantilla de producto. Vayamos a la consola. No parece ser ningún tema hasta ahora. Enfréntate a la pestaña Vue, y aquí vamos. Tenemos este elemento raíz aquí. Ahí lo tienen, chicos. Acabamos de crear nuestra primera app Vue. Podemos inspeccionarlo ahora en el Vue DevTools, va a ser la pestaña final probablemente en tus DevTools por aquí en Chrome. Ahora estamos en el asiento de caja para empezar a crear nuestra primera app Vue. Sin más preámbulos, te veré en el siguiente video donde construimos esta app de página de producto y agregamos algo de interactividad a esta página. Como puedes ver, aquí podemos cambiar la variante, pero no la está cambiando en ninguna parte de la página. Si hago clic en “Agregar al carrito”, solo
va a agregar la primera varianza. Tenemos que arreglar eso y lo haremos en el siguiente video. Te veré ahí.
6. Cómo usar Vue en la página de productos: En esta lección, vamos a refactorizar la página del producto aquí para usar Vue.js. Si miramos el código ahora, el contenido y todos los valores dinámicos vienen del líquido Shopify. Lo que eso significa es, que se renderiza en el lado del servidor una vez cuando se carga la página. No importa lo que hagamos, la variante actual va a ser blanca pequeña
porque esa es la variante que se selecciona en la carga de página, y no importa lo que hagamos aquí para actualizar nuestro color, el color en la imagen del producto no va cambiar, y esa es una mala experiencia de usuario, por supuesto. Actualmente, ni siquiera tenemos esta configuración para cambiar la variante id Cuando hacemos clic en “Añadir al carrito” se va a añadir la pequeña
T. blanca Voy a despejar mi carrito rápidamente ejecutando fetch. También puedes hacer esto. Este es sólo el punto final del carrito Ajax API para despejar el carrito. Basta con buscar carrito clear.js, y que refresquen la página que despejará el carrito. Volver a esta página aquí mismo. Si entramos en el código, estamos renderizando todo este líquido Shopify en la página, pero por supuesto queremos actualizar ciertas cosas dependiendo de la selección aquí en la selección de varianza. Es por ello que queremos usar Vue. Lo primero que voy a hacer es configurar los datos. Eso ya lo vimos antes. Vamos a tener que crear una función de datos dentro de este objeto, y luego dentro de esta función, devolvemos un objeto que contiene nuestros datos. Pensemos en algunas de las cosas que queremos rastrear en esta app. Por supuesto, queremos rastrear el id de variante actual porque eso es lo que se va a agregar al carrito cuando hacemos clic en “Añadir al carrito”. Voy a empezar con ese id variante actual, y el valor inicial de nuestra id variante actual va a ser igual a lo que actualmente tenemos aquí en nuestro valor. Como mencioné antes, el valor que se ha
insertado en este campo oculto, y por lo tanto, lo que se agrega al carrito al hacer clic en “Añadir al carrito” es la variante seleccionada o primera disponible. Vamos a mover este valor aquí, nuestra instancia de Vue, y eso va a asegurar que el
id de variante actual en la carga de la página se establezca con ese valor. Pero entonces podemos actualizarlo a medida que interactuamos con nuestra app Vue. Ahora lo que voy a hacer aquí es algo muy sutil pero muy importante. Voy a poner dos puntos delante del valor, y eso va a transformar ese campo en un campo Vue dinámico. En lugar de poner un valor explícito ahí como aquí, el valor va a ser uno, podemos poner un nombre de variable ahí desde nuestro objeto de datos y se actualizará dependiendo de lo que pase con estos datos. Aquí es donde entra la reactividad. Aquí, vamos a poner el nombre de la variable aquí. La idea es que si esto cambia con el tiempo, esto también cambiará automáticamente. Pero por ahora deberíamos ver exactamente los mismos resultados. Voy a refrescar la página. Pasemos a nuestra pestaña Vue, y puedes ver aquí llegamos a inspeccionar los datos y podemos ver nuestro id variante actual Si inspeccionamos el formulario y buscamos ese campo oculto, puedes ver ese es el valor. En realidad lo que podemos hacer es entrar aquí y editar esto sobre la marcha. Si pongo esto como 1, 2, 3, 4, 5, por ejemplo, he cambiado el valor, y entonces se puede ver aquí se ha cambiado también en el DOM. Tienes este enlace de datos sucediendo aquí. Es bastante guay. Si actualizo la página, ese valor se volverá a cargar. Eso es bastante guay. Lo siguiente que quiero capturar, las diferentes variantes disponibles para este producto en particular. El modo en que voy a hacer eso es haciendo un bucle líquido. Este no es el código más limpio, pero es sólo la forma en que tenemos que hacerlo en Shopify líquido. Voy a crear una matriz de variantes aquí, y dentro de esta matriz, voy a usar Shopify líquido para darnos nuestras variantes. Vamos a poner aquí un bucle for, variante en variantes de producto. Básicamente lo que estoy haciendo aquí es transferir los datos del líquido
Shopify a nuestra instancia de Vue para que podamos interactuar con ella dentro de Vue, todo en el front end sin tener que depender del líquido Shopify. Por cada variante en variantes de producto, voy a tener un objeto con una coma. No olvides la coma, lo contrario no habrá separación entre variantes, y voy a copiar a través de algunos de los datos del líquido Shopify. En primer lugar, variante id, vamos a necesitar saber si la variante está disponible. Podemos establecer eso sin cotizaciones para que solo pueda insertar como valor booleano ahí, y luego vamos a agarrar sus valores de opción. Dentro de las tres opciones que tenemos a nuestra disposición en Shopify, ¿cuál es la selección? Si no estás familiarizado con alguno de estos objetos, siempre
puedes buscarlos en la documentación líquida de Shopify. Podría mostrarles eso ahora mismo justo como punto de referencia rápido, referencia líquida Shopify. Si alguna vez te confundes sobre qué atributos tienes sobre un objeto en particular, solo
puedes entrar en la referencia, bajar. Mira variante es la que estamos buscando, y luego puedes ver explicaciones de todos estos atributos que estoy poniendo a nuestros datos Vue. Podría simplemente mantener ese abierto por si acaso, y volvamos atrás y construyamos la opción 2 de descanso y la opción 3. Entonces voy a poner en el precio variante, asegurándome de filtrar eso a través del filtro de dinero en Shopify líquido, lo contrario va a salir como sentido sin formato. Siguiente Voy a agarrar la imagen para esa variante, y voy a agregar aquí un paso extra para comprobar si la imagen de variante está en blanco. Porque en Shopify, si la imagen variante está en blanco, todavía carga una imagen, es solo la imagen equivocada. Voy a crear una variable aquí primero, y verás lo que estoy haciendo en tan solo un segundo, agarra esa URL de imagen usando todos los filtros disponibles en Shopify liquid. Nuevamente, revisa la referencia si hay algo aquí que te resulte confuso. Entonces aquí lo que voy a hacer por imagen se pone en salvo declaración. A menos que la URL de la imagen no contenga ninguna imagen, que es la imagen que aparece cuando no hay ninguna imagen establecida en esa variante en particular. Voy a dar salida a esta URL de imagen que he establecido en esta variable justo arriba, y no hay otra declaración allí. Si lo es, una imagen no, sólo
va a aparecer como en blanco. Barrido. Ahora, justo en el tema de las imágenes, lo que también voy a hacer es crear una imagen de retroceso. En caso de que la variante no tenga una imagen, que van a ser muchas instancias, solo
voy a usar la imagen destacada del producto. Voy a hacer imagen de producto de reserva va a ser destacada imagen, que es una variable que hemos configurado aquí. Puedo tomar esa imagen destacada y luego agarrar la URL de esa imagen destacada, asegurándome de poner eso entre citas. Ahora echemos un vistazo dentro de nuestro Vue DevTools, asegúrate de que no hemos hecho ningún error de sintaxis. Refresca por aquí. Parece que podríamos tener token inesperado. Aquí vamos, disponible. He escrito en varian en lugar de variante. Actualicemos la página. No hay errores de JavaScript, dirígete a Vue. Aquí puedes ver tenemos una matriz con todas las variantes y esos datos que se configuraron. Tenemos nuestra imagen de producto de respaldo. Tenemos nuestro id de variante actual. podemos utilizar toda esta información ahora dentro de nuestra app Vue. Podemos vincularlo a elementos de la página o podemos usarlo en cálculos. Ahora en realidad solo hay un poco más de datos que quiero agregar aquí, y eso es para capturar nuestra selección aquí. Vamos a justo por encima de variantes, poner en nuestra selección de variantes, y vamos a vincular esto a nuestra forma. Asegúrate de que la coma esté ahí dentro. Esta es solo la opción 1 va a igualar el valor seleccionado de nuestras opciones con valores, valor seleccionado. Aquí lo que estamos haciendo, si entramos en la documentación, miramos producto. Aquí hay un atributo llamado opciones con valores, y devolverá una matriz. Dentro de la matriz le dará los valores y el nombre de la opción de todas las opciones. Aquí tienes nombre y valor. Aquí puedes echar un vistazo a ese objeto en particular. Nombre, puesto, valor seleccionado, valores. Estamos utilizando el valor seleccionado de la primera opción de producto en nuestros productos. Esa va a ser la opción 1. Asegúrese de poner eso entre comillas allí. Yo sólo voy a copiar para los próximos dos. Para este 1, 2, y 3, solo
necesitamos actualizar la posición en la matriz y eso debería estar todo bien. Ahora volvamos a nuestra página aquí. Se puede ver que ahora tenemos nuestra selección de variantes, cual es pequeña y blanca. Tenemos esta selección de variantes aquí cargada en Vue en carga de página. Pero lo que no tenemos actualmente es enlace de datos para que cuando esto se actualice, nuestros datos en la instancia de Vue también se actualicen. Hagámoslo ahora mismo. Pasemos a nuestro código. Voy a arrastrar esto hacia abajo porque no necesitamos eso tan grande. Lo que voy a hacer es vincular estos valores a estos selectos aquí mismo. Como podemos ver aquí, estamos
recorriendo las opciones con atributos de valores en el producto, que por cada elemento de la matriz nos da el nombre de la opción de producto, los valores que están disponibles, y el seleccionado valor. Podemos usar esta lógica para averiguar cuál
es la selección actual y crear un select para que el usuario cambie eso. Lo que necesitamos hacer es vincular este valor del selecto a nuestro modelo de datos aquí. El modo en que podemos hacerlo es agregando un atributo aquí de v-model. Agregamos esto al selecto porque ese es el que está llevando el valor. Dentro de aquí podemos comenzar en la raíz del objeto de datos. Vamos a hacer variante. En realidad, podría valer la pena tener este lado a lado. Se puede ver ambos lados. Aquí está nuestro objeto de datos aquí mismo. Aquí está el código HTML. Queremos entrar en la selección de variantes y sacar la opción correspondiente. Voy a ir variante de subrayado opción de selección. Entonces lo que voy a hacer para seleccionar el número en particular que quiero es usar el atributo dentro de este bucle en los objetos de opción de producto de posición. Product_Option.Position. Eso va a insertar un número de uno aquí dentro, y eso lo va a vincular con esto. Ahora tenemos modelo Vue en nuestro elemento. Podemos volver a la página por aquí, refrescar. Si cambio una de estas opciones, puede ver que se actualiza en los datos. Eso está todo bien y bien. Estamos actualizando nuestra selección de variantes. Pero lo que necesitamos hacer es convertir esa selección de variantes en una variante real. Aquí tenemos nuestra lista de variantes. Lo que necesitamos hacer es calcular qué variante está seleccionada
actualmente por la selección que tenemos almacenada aquí. Esto es algo que tendríamos que hacer dentro de cualquier tienda Shopify, ya sea que estemos usando Vue o no. No pasaré demasiado tiempo pasando por ello. Lo que vamos a hacer es crear nuestro primer método sin embargo. Esto es algo nuevo que aún no hemos cubierto, es agregar un método. En nuestra instancia, tenemos aquí nuestro objeto de datos. Pero vamos a crear un método que es básicamente una función en nuestra instancia de Vue. Cómo hacemos eso es asegurarnos de poner una coma ahí y definimos un objeto de métodos. Dentro del objeto de métodos, creamos nuestro primer método. Voy a llamarlo variante desde opciones. Dentro voy a buscar la variante en base a las opciones de variante. Donde voy a hacer esto es voy a copiar y pegar algún código, y luego sólo voy a explicarlos. Lo que estoy haciendo aquí es usar el método find en esta matriz de variantes para encontrar una coincidencia. Cuando la opción de variante 1 es igual a la opción de selección de variante 1, entonces esa es una coincidencia en esa en particular. Empezaremos a revisar para ver si está en blanco. Porque si está en blanco, entonces ni siquiera deberíamos buscar un partido por defecto va a ser cierto a menos que nos topemos con un falso. Entonces al final mismo, vamos a ser devueltos con un partido. Eso va a devolver el método de hallazgo aquí. Lo que vamos a hacer con ese valor, si creo una nueva línea, es actualizar el id de variante actual para que sea igual a la variante que se selecciona en esta sentencia find y tomar el ID de eso. Ahora que hemos creado este método, aún
necesitamos conectarlo a nuestro elemento de la página. Vamos a usar otro atributo aquí en Vue.js, empezando por el símbolo @ y después escribiendo el evento que buscamos. Esto básicamente está diciendo onchange. Entonces onchange, vamos a ejecutar variante de opciones. Tenemos el enlace, y luego cuando lo cambiemos,
no solo lo estamos cambiando aquí en nuestra selección de variantes, vamos a recalcular el id de variante actual de
nuestra selección de variantes aquí, o aquí más bien. Refrescando la página. Quiero que se den cuenta por aquí. En nuestra instancia de Vue, si cambio la selección, verás que nuestra variante actual se vuelve a calcular. Si selecciono Negro medio y hago clic en “Agregar al carrito”. Ahora deberíamos ver una camiseta mediana negra que se está agregando al carrito. Simplemente voy a ejecutar de nuevo ese comando Fetch para deshacerse del carro. Volvamos a la página de productos de la tienda Tee. Eso está todo bien y bien ahora tenemos nuestra selección de variantes funcionando. Pero qué pasa si cada una de nuestras variantes tiene un precio diferente, un estado agotado diferente, una imagen de variante diferente. Queremos que eso se actualice en la página. Además, hay algo en Shopify donde el id de variante se almacena en la URL. Si comparte esa URL o actualiza la página, se selecciona
la misma variante, por lo que tenemos que añadir eso también. Las tres áreas que vamos a hacer es la imagen de variante, el precio de variante, y el estado histórico en nuestra URL. Volvamos a nuestra app Vue. Si realmente vamos a encontrar cuál es la imagen de variante actual, el precio de variante actual y el ID de variante actual es, bueno, ya tenemos el ID actualizando aquí. Vamos a necesitar entender qué variante está
seleccionada actualmente y agarrar eso como un objeto de esta matriz variantes. Si vuelvo a los datos dentro de Vue, lo único que tenemos en la variante actual es su ID. Eso nos permite buscar la variante, pero en realidad no nos permite acceder a los atributos de datos de la variante. Lo que vamos a hacer es usar esto para buscar el objeto variante relevante dentro de esta matriz. El modo en que vamos a hacer eso es a través de algo llamado propiedad computada. Las propiedades computadas existen en Vue.js porque no queremos
poner funciones y lógica dentro de nuestra estructura HTML. Simplemente agregamos un objeto extra aquí con nuestras propiedades computadas. Entonces podemos tratar la propiedad computada como si
se tratara de un atributo de datos aquí y colocarla en nuestro HTML. Lo que vamos a hacer dentro de nuestra propiedad computada, vamos a crear nuestra propia propiedad llamada variante actual. Esto lo verás reflejado en nuestras Vue DevTools en tan solo un momento. Las propiedades computadas son básicamente solo funciones que devuelven un valor. Vamos a hacer retorno y luego vamos a
buscar la variante usando el método find. Variante, y todo lo que necesitamos buscar es el id de variante igual a este id de variante
actual.Eso debería darnos el objeto variante relevante de esta matriz. Volvamos aquí, refrescamos la página. Ya verás bajo datos que tenemos computados ahora. Si miramos en variante actual, se
puede ver que tenemos un objeto con la variante id, las opciones, la imagen, el precio. Si entro aquí y cambio esto, entonces esto se actualizará. Si el precio es diferente, eso se actualizará. Ver aquí, la imagen se actualizará si se supone que debe actualizarse. Todo esto está sucediendo sin que tengamos que activar un método porque una propiedad computada es reactiva. Si algo de esto cambia, entonces se volverán a computar todas las propiedades computadas. Si lo ponemos en un método, entonces tendríamos que volver a computar explícitamente. Esa es la belleza de los métodos computados. Podemos unir datos y tener que también sean reactivos. Ahora que tenemos nuestra propiedad computada variante actual, ahora
tenemos acceso a nuestra imagen y precio variantes actuales. Asegurémonos de que nuestra interfaz de usuario se actualice en respuesta a eso. Voy a volver aquí, y voy a subir a,
vamos a hacer el precio primero. Voy a deshacerme de esto, y voy a añadir un atributo sobre el elemento en sí, código V-HTML. En cualquier momento que veas v dash, eso es muy probable un atributo Vue. Voy a añadir V-HTML. Dentro de V-HTML, puedo poner en el atributo que buscamos. Va a ser current_variants.price. Entonces aquí arriba para la imagen, voy a reemplazar esto. Voy a hacer esto dinámico poniendo el colon delante y luego
voy a poner en la imagen variante actual. Ahora bien, si la variante actual no tiene imagen, vamos a necesitar usar el respaldo. Voy a usar la sintaxis de doble tubería aquí. Si esto viene como falso, nulo, o indefinido, creo que la lista lo es, entonces vamos a por defecto al valor que viene a continuación, que va a ser imagen de producto de reserva. Eso va a ser muy importante en productos que no tienen ningún conjunto de imágenes de variante. Volvamos a nuestra parte delantera aquí, y cambiemos esto a negro. Como puedes ver, la imagen variante se actualiza no es particularmente
suave en este momento vamos a añadir un poco de transición sobre eso pero como puedes ver, cuando actualizamos el color, la imagen variante cambia también, cambiando ese color. Si actualizamos el tamaño, se
puede ver que el precio está cambiando. Como siempre, puedes usar las herramientas VUE-DevTools para comprobar si esto se alinea con los datos, cual por supuesto lo hace. El tercero que quería vincular es el estado histórico, que no estamos actualizando actualmente. Eso es importante si compartes este enlace con alguien, o refrescas la página. Si actualizo ahora, lo
verás solo por defecto a la primera selección. Vamos a crear un método para actualizar el estado histórico también. Dentro de los métodos objeto después de esta variante del método de opciones, voy a crear un método de estado de historial de actualización. Voy a poner en el argumento de una variante, y luego aquí algún código, “Si la historia reemplaza el estado”. Este es el código que copié de un tema anterior porque va a ser el mismo independientemente de si estás usando vista o no. Simplemente lo estoy cargando en una instancia de vista en esta ocasión. Simplemente escribiré el resto del código y podemos hablar de lo que está haciendo en tan solo un segundo. No es esencial que entiendas al cien por ciento exactamente lo que está pasando aquí, obviamente ayuda si lo haces, pero básicamente lo que estamos haciendo aquí, si no hay “historia reemplazar estado”, y no hay “variante” entonces sólo vamos a regresar. Pero si lo hay, vamos a crear una nueva URL. Vamos a tomar el protocolo, que probablemente será HTTPS, luego agregar estas dos slashes, luego el host, luego el nombre de ruta, luego vamos a agregar en este parámetro de consulta de variante igual y luego pasar en el ID de variante. Después vamos a actualizar nuestro historial de ventanas a la nueva URL. Siéntase libre de copiar y pegar este código. Todo lo que está haciendo es actualizar la URL en un navegador usando JavaScript. Ahora por supuesto, no se va a desencadenar sin lo
enfriemos en algún lugar así que lo que quiero
hacer después de que se haya calculado la variante a partir de estas opciones, quiero actualizar el estado histórico. Para activar un método desde la misma instancia, solo
hacemos esto.updatehistorystate, y luego tenemos ese objeto variante para que podamos simplemente colocar eso ahí dentro. Eso encontrará el ID de variante de este objeto y lo colocará después de este parámetro de consulta en nuestro navegador. si actualizo la página por aquí, seleccionemos una variante diferente y veamos qué sucede. Aquí puedes ver que nuestro ID de variante se agrega o actualiza en nuestro navegador. Si actualizo la página, obtendré la misma selección. Esas son las tres áreas que queremos ser reactivas. Queremos que el precio reaccione, queremos que la imagen del producto reaccione, y queremos que el estado histórico reaccione. Eso es básicamente todo para nuestra instancia Vue. Lo único que voy a hacer antes de que sigamos adelante es, esto sí se ve un poco glitchy. Es decir, podría ser una mejor experiencia de usuario así que voy a usar algo que viene estándar en Vue, que son transiciones. Si vuelvo a donde está esa imagen, y luego voy a envolver la imagen en un elemento Vue llamado transición, voy a llamarla fade, que le dará la transición de desvanecido,
y luego copiarla de nuevo ahí. Hay dos cosas que necesitamos para que esto funcione. Una es que necesitamos el CSS. Lo que esto va a hacer es agregar algunas clases a este elemento mientras está cambiando. Necesitamos realmente poner en nuestro CSS lo que queremos que haga cuando se agreguen esas clases. Simplemente te mostraré dónde está eso en nuestro tema. CSS, aquí mismo. Se va a agregar y quitar estas clases. Simplemente necesitamos definirlos en nuestro CSS. Lo puedes encontrar en los ejemplos de qué hacer aunque en la documentación del Vue. Si entramos en “Transiciones” “Enter & Leave”, puedes ver que este es básicamente el mismo código exacto de la documentación así que aquí está la referencia. Otra cosa que vamos a necesitar es, necesitamos agregar una clave a este elemento, porque Vue no va a saber que ha cambiado a pesar de que este SRC ha cambiado. Necesita saber que el elemento ha cambiado. Una forma en la que podemos obligarla a entender eso es dándole una clave al elemento. Vamos a hacer:clave, y luego vamos a hacer que la clave sea igual exactamente igual que aquí en el SRC. Ahora si refresco la página, y cambiemos este atributo, puedes ver que tenemos este bonito pequeño desvanecimiento entre los diferentes colores. ¿ Qué tan bueno es eso? Ahí lo tienes. Tenemos nuestra página de productos aquí. Si selecciono alguna variante, el precio, la imagen de variante, y el ID de variante en la URL se van a actualizar a su lado, o dentro de unos pocos milisegundos, y va a guardar el ID de variante actual basado en el selección. Al hacer clic en añadir al carrito, si he seleccionado una camiseta roja grande, se va a añadir una camiseta roja grande a mi carrito. Como puedes ver aquí sin embargo, esto no tiene interactividad, si subo la cantidad, no
va a funcionar, si hago clic en la basura, no va a funcionar. Estas ventas ascendentes de aquí abajo no están vinculadas. Si estás listo para saltar a la siguiente lección, realidad
vamos a conectar esta página hasta Vue, y Vue va a manejar todas estas interacciones y sincronizar todos esos datos. La página del carrito, por supuesto, es un gran candidato para Vue.js. En la siguiente lección, realmente enganchemos esta página del carrito.
7. Cómo usar Vue en la página de tu carrito: En la última lección, conectamos la funcionalidad para
la selección de variantes en la página del producto. Ahora si cambias esto va a cambiar todos
los elementos de la página que están vinculados a esa selección. Suba ahora la ante y trabaje en la página del carrito. Como puedes ver aquí, hay bastantes interacciones posibles. Una, deberíamos poder actualizar la cantidad, para que podamos agregar más camisetas a nuestro pedido, agregar menos camisetas a nuestro pedido, deberíamos poder quitar un artículo de línea del carrito, haciendo clic en este botón de basura. También deberíamos poder agregar cualquiera de estas
ventas hasta al carrito y tener el carrito live update. En esta lección, eso es lo que vamos a construir usando Vue. Simplemente refrescamos la página, asegurarnos de que todo esté sincronizado. Pasemos de nuestra plantilla de producto aquí y abrimos nuestra plantilla de carrito. En esta lección, vamos a tener que refactorizar algunos de estos bucles que se habían creado en JavaScript, porque estaremos actualizando estas listas usando Vue. Va a ser mucho más dinámico aún más
que lo que hicimos en la plantilla de producto anterior. Como hemos hecho antes, abramos una etiqueta de script en la parte inferior del archivo de plantilla aquí, y usando la misma convención, voy a llamar a esta aplicación Vue CartPage. Entonces voy a poner ese objeto en un método de app create Vue, así que vue.CreateApp CartPage.mount, y lo voy a montar al elemento que tiene el ID de CartPage. Ahora, una de las mayores diferencias entre esta instancia de Vue en esta plantilla en comparación con la plantilla de producto es que no vamos a usar Shopify Liquid para cargar en los datos. El motivo por el que es que tenemos una API llamada el carrito Ajax API que nos
permite usar solicitud Ajax para recopilar información del carrito y actualizar el carrito. En realidad no necesitamos usar Shopify Liquid en absoluto. Creo que valdría la pena mencionar que en realidad podríamos usar la API Ajax en nuestra plantilla de producto también. En lugar de esto donde estamos creando los objetos de datos usando diferentes etiquetas Shopify Liquid, lo que podríamos haber hecho en su lugar, y solo pegaré en algún código en este momento, es en lugar de esto aquí mismo, solo comentar esto, así que no es distraer, en cambio lo que podríamos haber hecho se inicia con un objeto de producto vacío y luego trajo la información del producto a través de la API Ajax también. Opté en contra de eso, y la razón es que queremos los objetos que poblan en la carga de la página, esto puede causar problemas adicionales, si esto está vacío en la carga de la página y eso se carga, solo lo hace un poco más duro. Pero esta es una opción también en tu aplicación de página de producto, si querías evitar usar Shopify Liquid. Simplemente pondré este código de vuelta a donde estaba antes. Mucho el mismo concepto que en la página del producto a la página del carrito, podríamos cargar en el carrito información usando Shopify Liquid. Pero para poder actualizar el carrito sobre la marcha, vamos a necesitar usar también la API Ajax. Lo que vamos a hacer es trabajar sólo con el objeto de carro a través de la API Ajax. En esta aplicación en particular, no
vamos a tener que usar Shopify Liquid. Esa es una gran diferencia. Como se mencionó anteriormente en la clase, espero que entiendas un poco sobre la API Ajax. Si no lo haces, hay una lección que voy a enlazar en la descripción de una clase mía anterior de Skillshare. El API Ajax es una forma para que podamos reunir información sobre el carrito especialmente a través de JavaScript. No tenemos que usar realmente líquido Shopify. Esto es perfecto para crear interacciones de carritos front-end, que vamos a estar haciendo aquí mismo usando Vue. Carguemos en realidad algunos datos del carrito de la API Ajax ahora mismo. Como te mostré antes con el objeto de producto, vamos a tener que empezar con un objeto de datos vacío o un objeto de carro vacío aquí. Sabemos que dentro del objeto de carro van a ser artículos. Aquí podemos definir una estructura básica, pero hasta que regrese la solicitud Ajax, en realidad no
podemos poblar estos datos todavía. Simplemente vamos a empezar con artículos de carrito como una matriz vacía. Pero lo que vamos a hacer en el gancho del ciclo de vida creado es actualizar este objeto aquí mismo. Acabo de mencionar un nuevo concepto aquí, ganchos de ciclo de vida. Es básicamente diferentes partes
del proceso de creación y proceso de montaje de una instancia Vue, podemos desencadenar ciertas cosas. igual que lo harías cuando estás escribiendo, digamos, jQuery o cualquier otro JavaScript, esperarías a que se cargara la página, a que se cargara el DOM
para poder ejecutar algún JavaScript. Con Vue, podemos conectarnos a diferentes lo que se llama métodos del ciclo de vida. Tan sólo una rápida búsqueda de lo que es esto. Si hay una búsqueda aquí, ganchos de
ciclo de vida, tenemos BeforeReate, creado, BeforeRemount, montado, BeforeUpdate, actualizado. Pero básicamente los principales comunes están montados y creados. Lo que voy a hacer es en cuanto se haya creado la instancia Vue, quiero activar esa solicitud Ajax y actualizar nuestro objeto carrito. Vamos en realidad a nuestra página del carrito y vamos a
agregar ese gancho del ciclo de vida justo después del método de datos allí. Es solo un método en la raíz de la instancia de Vue, así que diremos cuando se cree la instancia, vamos a crear una solicitud get, y esto está usando jQuery. Deberías estar familiarizado con esta sintaxis. Estamos usando jQuery para golpear el extremo cart.js, luego vamos a canalizar una.then, tratar la respuesta. Vamos a JSON analizar la respuesta, así que eso se va a convertir en un objeto JavaScript entonces. Entonces vamos a tomar ese objeto JavaScript que va a ser nuestro carrito y luego aquí vamos a establecer el objeto carrito en los datos de esa instancia al objeto carrito que se devuelve de la API. Si voy por aquí, refresca y abre Vue DevTools. Se puede ver que el objeto carrito de la API Ajax está poblando nuestro.data ahora. Se puede ver tanta información toda desde el carrito Ajax API, tenemos toda esa información ahora dentro de nuestra instancia de Vue. Si alguna vez quieres revisar
la solicitud de Ajax API como siempre puedes entrar a la pestaña Red, actualizando la página, aquí debes verla. Debería ser uno de los primeros ahí, cart.js. Ya puedes ver que estamos haciendo esta solicitud GET código de estado 200. Está todo bien. Esto es lo que vuelve. Impresionante. Ya tenemos nuestro carrito. Lo que queremos hacer es usar nuestro objeto de tarjeta dentro Vue para renderizar esta parte ahora en lugar de Shopify Liquid, porque vamos a estar actualizando el carrito en base a si eliminamos un producto o agregamos un nuevo producto al carrito. Va a haber productos agregados y eliminados de esta lista sobre la marcha, y no queremos tener que esperar a que Shopify Liquid haga una carga de página con el fin de actualizar esta tabla. Lo que voy a hacer es introducir algunas cosas nuevas que no hemos visto antes en esta clase que es un bucle, y algunos condicionales también dentro de Vue. Como puedes ver aquí, tenemos si el número de artículos en el carrito es mayor que cero entonces queremos recorrerlos y mostrarlos. Ya no queremos hacer eso con Shopify Liquid. Vamos a refactorizar esto para usar Vue. Lo que voy a hacer es deshacerme de eso y usar lo que se llama etiqueta de plantilla. Una etiqueta de plantilla es básicamente una etiqueta que no se va a renderizar en Vue, pero solo se usa para lógica y bucles. Podría hacer un div aquí y envolver todo esto en un div y luego hacer mi v-if, pero en realidad no quiero renderizar un div. Solo voy a div-template, y verás en solo un segundo que no renderizará un elemento, pero renderizará lo que hay aquí si la sentencia if-es verdadera. Para poner aquí un condicional dentro de nuestro Vue HTML, podemos usar v-if, y lo que quiero hacer es similar a cómo lo acabamos de hacer en Shopify Liquid. Voy a mirar cart.items.length y comprobar si es mayor que cero. Si es así, vamos a recorrer, contrario, lo que voy a hacer, terminar esa plantilla, crear una nueva para lo demás, y todo lo que haces es v-else, y poner en tu carrito está actualmente vacío. Yo me desharé de eso. Terminar if-statement ahí y refrescar la página por aquí, debería tener el mismo aspecto. Pero una cosa que debes notar en realidad es que cuando actualizamos la página, hay un ligero fallo antes de que aparezca porque estamos calculando si debe mostrarse o no en base a JavaScript. Hay una fracción de segundo donde el objeto de carro está realmente vacío. Esto en realidad es falso por una fracción de segundo antes de que se cargue la información del carrito, y entonces esto se hace realidad. Es un poco glitchy, pero lo arreglaremos más adelante en esta lección. Ahora queremos reemplazar este Shopify Liquid for loop por un Vue for loop. Para esto solo podemos poner el bucle for directamente sobre este elemento en sí. Voy a deshacerme del principio-por-y del final. Cambiemos la sangría aquí. Podemos hacer v-for y lo que podemos hacer aquí es por artículo en cart.items. A ver si entramos en los temas haciendo eso. Como puedes ver, tenemos una posición,
pero esto ha
roto, por supuesto, todos estos porque con nuestro código anterior creamos este objeto de ítem dentro de nuestro bucle para que pudiéramos agarrar estos atributos. Vamos a tener que refactorizar eso también. entrar aquí, no quiero la versión Shopify Liquid del título del artículo. Lo que voy a hacer en su lugar v-html como lo hicimos antes, y hacer item.title. Usando la información dentro de Vue para la imagen src, solo
veamos nuestro objeto de datos aquí, veamos el título que viene a través de ahora. Es entrar en nuestros artículos. Echa un vistazo. Tenemos esta imagen aquí así que sólo podemos ir a deshacernos de eso. Ponga dos puntos porque es un valor dinámico y estamos insertando una variable aquí, item.image. Veamos si eso funcionó correctamente. Sí. Entonces aquí abajo para el precio de la línea final del artículo, vamos a dar formato a este valor en tan solo un segundo, pero por ahora, solo pongamos el valor explícito. Haremos artículo, línea, precio. Comprueba dos veces que eso funcione. Sí. De nuevo, es en sentido y no está formateado, pero lo arreglaremos en tan solo un segundo. Entonces aquí dentro valor, queremos arreglar eso a la cantidad real del artículo. Como siempre, si estamos poniendo aquí una variable, valor dinámico, necesitamos hacer que ese campo sea dinámico poniendo ese colon. Creo que eso es todo. Aquí no hay más Shopify Liquid. Deshacernos de algo de este espacio en blanco y traigamos esta sangría. Ahí vamos. En realidad aquí en la barra lateral, tenemos una. Simplemente vamos a quitar ese v-html y en lugar de entrar en un artículo específico, sólo
vamos a hacer el precio total del carrito. Upsell todavía tenemos un bucle Shopify Liquid aquí, pero lo arreglaremos en tan solo un segundo. Voy a refrescarme aquí, y como pueden ver, toda esta información viene ahora de nuestra instancia de Vue en lugar de Shopify Liquid. Aquí aún lo genera Shopify Liquid pero llegaremos a eso después de trabajar en arreglar esta cantidad, formatear los precios, y permitir que un usuario retire un producto del carrito usando este ícono. En primer lugar vamos a enganchar este selector de cantidad para que
en realidad actualice la cantidad de la línea de pedido en el carrito. Para eso, vamos a crear un método, es similar a cómo lo hicimos en la página del producto cuando se cambia la selección, necesitamos realmente activar un método en ese evento, y en este caso, vamos a ser enviando una solicitud Ajax al carrito Ajax API para actualizar la tarjeta en el back-end. En realidad vamos tras nuestro gancho de ciclo de vida creado aquí y creamos el objeto de un método, y dentro vamos a crear este método de carrito de actualización. Ahora los métodos que he creado en esta instancia de Vue, o voy a crear en esta instancia
de Vue basado en las diferentes funciones dentro del carrito Ajax API. Tenemos los principales es conseguir el carrito, agregar un artículo al carrito,
actualizar cantidades, y luego aquí está el cambio. También se pueden actualizar cantidades y propiedades. También tienes Clear, si quieres borrar el carrito, no
vamos a tener un botón para borrar todo el carrito, pero vamos a activar este endpoint API con el
fin de habilitar la eliminación de una línea de pedido del carro o reduciendo su cantidad. Ambos van a utilizar el mismo punto final y por lo tanto el mismo método. Volviendo al código, los dos atributos que voy a estar poniendo aquí, variante id y cantidad. Eso se basa, por supuesto de lo que ponemos por aquí. Tenemos un id de variante y la cantidad, y luego lo enviamos a través en el objeto de una actualización. Lo que voy a hacer id y quantity, y luego dentro de este método, voy a iniciar la solicitud de post usando jQuery y va al carrito update.js punto final. A continuación pondremos en el cuerpo de la solicitud, y para ello, podemos hacerlo así, o podemos hacerlo como una cuerda. Creo que esto es un poco más fácil, así que lo voy a hacer de esta manera. Esencialmente todo lo que necesitamos hacer es tener actualizaciones entre corchetes, poner la variante id, y luego es igual a seguida de la cantidad. Yo sólo voy a hacer eso,
actualizaciones, y por cierto, estas garrapatas traseras, si no te resulta familiar, nos
permiten poner estas variables dentro la cadena sin tener que salir y entrar en la cadena una y otra vez. Con los ticks de atrás establecidos, voy a poner id con esta sintaxis ahí dentro, y luego después de los iguales poner la cantidad. Entonces vamos a encadenar a.entonces, igual que lo hemos hecho con get cart, toma la respuesta, JSON analizar la respuesta, y luego nos van a devolver al objeto carrito al que vamos a poner nuestro propio carrito objeto igual a. Ahora, tenga en cuenta que no todas las solicitudes de AJAX devolverán el objeto de carrito. Algunos de ellos sí devuelven un artículo de una sola línea, pero en este caso, el extremo update.js sí devuelve el carrito. Lo mismo, obviamente, para get cart, con add to cart. Creo que solo devuelve el artículo. Ya veremos eso en tan solo un segundo cuando construyamos eso en nuestras ventas superiores. Pero por ahora, podemos confiar en que el
endpoint del carrito update.js nos va a devolver el carrito. Obviamente, esto no se va a ejecutar, menos que lo adjuntemos a nuestro selecto. Entonces, pasemos a ese método de cambio. Al igual que hicimos con la plantilla de producto, voy a poner dentro de este @change, actualización de corte. Para el ID de variante, lo tenemos establecido en el artículo. Ahí vamos, variante ID. Entonces el segundo argumento, la cantidad también se establece en el artículo, es solo cantidad. Ahora, si dejamos esto como está y luego volvemos aquí y ponemos esto arriba, verás que se remonta a uno, y eso es porque aquí no hemos puesto V-model. Entonces, al igual que hicimos en la página Productos, necesitamos cambiar esto a V-model para obtener ese enlace de datos bidireccional. Ahora actualicemos la página y veamos si esto funciona. Como puedes ver, cuando ponemos la cantidad,
vemos el precio de la línea y la actualización del precio total. Comprobemos todas las piezas individuales están funcionando. Debería ser si está consiguiendo ese resultado, pero déjame refrescar nuestra pestaña Red por aquí, borrar la pestaña Red, hacer clic en esto, y verás que estamos golpeando ese endpoint update.js. Se está volviendo verde. Ahí se puede ver lo que le estamos enviando, y aquí se puede ver lo que recuperamos. Se trata de un objeto de carro completamente nuevo. Eso, como hemos establecido en nuestra opinión, va a actualizar esto. Si entro en mis artículos y me desplaza hacia abajo hasta donde tiene cantidad. ¿ Dónde está la cantidad? Ahí está. Si hago clic en esto, tomará un segundo, pero luego una vez que regrese de la API, lo actualizará también en nuestra instancia de vista. Shopify por defecto precios de salida como este, en centavos, sin formato, así que vamos a tener que formatear nosotros mismos en JavaScript. Pero si recuerdas, incluimos este archivo shopify-money.js, y dentro de ese archivo shopify.money.js, tenemos este método de formato dinero en el objeto Shopify. Vamos a usar eso ahora. Lo que voy a hacer es crear un nuevo método para que podamos usarlo en diferentes puntos de nuestra aplicación. Aquí está el objeto de métodos. Voy a revisar cuidadosamente dónde termina eso, y luego antes de que termine, voy a agregar en otro método aquí llamado precios de formato. Dentro de este método, hay dos precios que quiero actualizar. Deseo actualizar el precio de la línea y quiero actualizar el precio total. Esos son los dos que podemos ver en nuestra interfaz de usuario aquí. Pero en realidad no voy a actualizar los valores ellos mismos, voy a crear un nuevo valor llamado precio de línea formateada y precio total formateado. De esa manera, retenemos a esos viejos. Puedes hacerlo de la manera que quieras, puedes anularlos, pero voy a dejar el original en su lugar y solo crear uno nuevo. Voy a crear un bucle aquí, bucle a través de los diferentes artículos de nuestro carrito. Para cada artículo, voy a crear un nuevo atributo, precio de línea formateada, que va a ser igual al precio de la línea de artículo, pero con una diferencia que lo estamos ejecutando a través del método monetario de formato Shopify. Voy a envolver eso en formato dinero. Eso es para el precio de línea de ítem. Entonces para el carrito en general, voy a crear un nuevo atributo, precio total formateado, y eso va a ser igual, de nuevo, al resultado del formato Shopify dinero (esto.cart.precio total). Ahora, por supuesto, no vamos a correr esto a ninguna parte, así que vamos a ejecutar esto después de poner el carro. Ahí hay dos lugares donde hacemos eso. Lo voy a ejecutar aquí después de que actualicemos el carrito, y lo ejecutaremos aquí cuando primero carguemos el carro. Ahora, refrescando la página, verás que todavía tenemos los mismos valores aquí. Pero si entramos en nuestro objeto aquí, se
puede ver que tenemos un precio de línea formateado, y en el carrito, deberíamos tener un precio total formateado. Lo que tenemos que hacer es entrar en nuestro HTML y actualizarlos. Entonces en lugar de precio de línea, precio línea
formateado, y en lugar de precio total, precio total formateado. Entonces usará la versión formateada en lugar de la otra versión que viene directamente de Shopify. Ahí lo tienes. Ahora tenemos trabajando nuestros selectores de cantidad, y está actualizando nuestros precios de línea y precio total. Ahora bien, usted puede haber notado aquí que realmente no estamos escribiendo código DRY cuando tenemos esto.cart es igual a carrito y est.format precios dos veces duplicados. Lo que voy a hacer es mover ambos a un nuevo método que voy a llamar set cart. Se va a llevar un objeto de carro y luego va
a poner ese objeto de carro en el carrito y luego formatear precios. En lugar de esto, lo que voy a hacer es poner este carrito de set, y luego podemos hacer lo mismo para el carrito de actualización. Eso solo hace que nuestro código sea un poco más SECO para que podamos reciclar código. Ahí tienes, todavía funciona. Ahora que tenemos esa función de carrito de actualización funcionando y estamos golpeando con éxito la API, debería ser bastante fácil habilitar este botón para funcionar. Todo lo que voy a hacer es crear otro método después de los precios de formato llamado remove from cart. Todo esto se va a llevar es un ID de variante. No necesita saber la cantidad porque la cantidad está implícita. La cantidad, por supuesto, va a ser cero si la estamos sacando del carrito. Lo que puedo hacer es simplemente hacer esto, actualizar carro, poner en el ID, y luego para el segundo argumento, la cantidad, sólo poner en cero. Ahora vamos a enlazar esto en el evento onclick para este botón. Voy a usar esa sintaxis de símbolo @, y escribir aquí, “Eliminar del carrito item.variante ID. Ahora vamos a comprobar si eso funciona. Perfecto. Acabamos de retirar un artículo de nuestro carrito. Si vuelvo a la camiseta, sumémosle una pequeña camiseta roja. Ya verás que está ahí. Podemos actualizar la cantidad, podemos sacarla del carrito, y todo está funcionando. Esa es nuestras principales funciones dentro de la mesa del carrito. Tomemos un breve descanso, y en realidad codificemos estas ventas ascendentes aquí. Vamos a agregar en otra función aquí para agregar al carrito, así
como para actualizar y eliminar artículos que ya están en el carrito.
8. Animaciones y aumento de ventas del carrito: Por supuesto, no todas las tiendas van a tener ventas superiores en la página de su carrito. Pero es una buena oportunidad para aumentar el valor promedio del pedido al ofrecer una manera fácil para que los clientes agreguen productos adicionales a su carrito. Usando Vue.js, podemos hacer que esta interacción sea bastante suave y sin fisuras. Si volvemos a entrar en nuestro editor de código, puedes ver que estamos trayendo estos valores a través Shopify Liquid y estamos haciendo nuestros loops y condicionales a través de Shopify Liquid. Al igual que hemos hecho aquí arriba, vamos a necesitar refactorizar esto. Lo primero que tenemos que hacer es obtener estas ventas ascendentes dentro de una matriz en una instancia de vista real. Después del carrito, lo que voy a hacer es crear una matriz llamada upsell. Aquí vamos a cargar en esa colección que estamos incluyendo aquí arriba, pero en nuestra vista datos para que podamos hacer de esta sección un poco más interactiva y verás por qué necesitamos hacerlo en tan solo un segundo. Al igual que hicimos en la página del producto por varianza, voy a crear aquí un bucle Liquid para traer productos de una colección en particular. Voy a usar la colección de zapatos. Recuerda, este valor aquí necesita que coincida con el mango de una colección en tu tienda si has importado los zapatos y después has creado una colección con esos zapatos, luego verificar que el mango sea zapatos entonces debería funcionar. De lo contrario, tendrás que hacer eso. Obviamente, vamos a tener que poner productos al final aquí. Voy a cerrar eso, endfor, y luego dentro de aquí, abrir un objeto y vamos a copiar algunos valores de Shopify Liquid. Tan marea. Siguiendo este mismo formato, creo que voy a simplemente pasar por estos
ahora mismo porque ya hemos visto esto antes y simplemente estoy
copiando básicamente los datos del back-end de Shopify usando Shopify Liquid en nuestro front end aquí. Voy a adelantar un poco a través de esto. Asegúrate de terminar los objetos con una coma aquí para que tengas separación entre esos objetos. Como puedes ver aquí, estamos trayendo el título,
el mango, la imagen,
el ID del producto; que quedará claro por qué lo estamos haciendo en tan solo un segundo, y por supuesto la variante ID. Porque la variante ID, como sabemos, es lo que realmente se agrega al carrito. Actualicemos nuestra página y solo verifiquemos que los datos se encuentren. Como puede ver aquí, realidad no
tenemos nada en nuestra matriz upsell, vamos a comprobar por qué ese podría ser el caso. Veo aquí que nos olvidamos de un s en colecciones. Hit save en eso. Ahora puedes ver que la matriz de ventas ascendentes tiene toda la misma información que tenemos
aquí abajo y ahora podemos recorrer esto en lugar de usar Shopify Liquid. Vamos a entrar y refactorizar este código ahora. Voy a entrar aquí hacer un v-for o v-if más bien. Si upsells.length es mayor que cero. Podemos deshacernos de este entorno si declaración ahora. Ese es algún código que no debería estar ahí. Yo sólo voy a quitar eso. Entonces dentro del bucle, en lugar de hacer este bucle, lo que vamos a hacer es ponerlo aquí. Voy a hacer una plantilla, v-for upsell en upsell. Ponemos esto alrededor de aquello para reemplazar el for-loop. Para imitar este límite, te
mostraré en tan solo un segundo cómo lo hacemos,
vamos a tener que sumar el atributo extra aquí de índice. Esto rastreará el índice del ítem y la matriz, y entonces podemos hacer el índice v-if es menor a cinco. Refrescando la página, puedes ver que hemos perdido nuestras ventas ascendentes generadas por Shopify Liquid. Eso se debe a que en realidad necesitamos entrar aquí y actualizar estos atributos. Al igual que hicimos con la tabla de carrito de arriba, voy a reemplazar estos por atributos de vista. Título de venta ascendente, y luego para este, el src, vamos a poner el colon delante de él, quitarle esto y usar imagen de upsell. Creo que eso es todo. Refrescar la página por aquí, ver que aún no funciona. Creo que nuestro tema aquí es que necesitamos mover índice al elemento debajo. Esta es la diferencia entre Vue 2 y Vue 3, puedes hacer esto en Vue 2 pero no en Vue 3. Refresca por aquí. Ahí vas. Ahora podemos ver que los productos están ahí dentro. Sólo necesitamos hacer que este índice menos de cuatro y sin embargo ahora sólo tenemos los cuatro productos ahí dentro. Ahora que estamos usando Vue para mostrar estas ventas ascendentes ahora en lugar de Shopify Liquid, estamos en el siguiente paso que es habilitar estos botones de “Añadir al carrito” para que funcionen. Lo que voy a hacer, dirígete al código y vamos a crear un nuevo método para agregar al carrito. Tenemos nuestro remover del carrito aquí. Podría simplemente ponerlo antes del remove to cart. Agregar al carrito. Para poder agregar cualquier producto al carrito, vamos a necesitar conocer su ID de variante. Como siempre, aquí podemos referirnos a la referencia en la documentación oficial de Shopify. Acabo de encontrar esto por cierto,
al buscar la API de Shopify Ajax. Debería estar en la API de Carrito justo ahí. Por lo que no es demasiado difícil de encontrar con un poco de Google. Aquí vamos. Necesitamos enviar a través de una matriz de artículos con el ID de variante del producto y la cantidad de cuánto queremos agregar. Actualmente, nuestro sitio web, no tenemos la opción de agregar más de una cantidad al momento de agregar el producto al carrito desde la página del producto. Pero si tuviéramos eso, podríamos usar ese valor para ponerlo como opción aquí pero en nuestra instancia, sólo
vamos a poner uno por este valor. Todo lo que necesitamos es la variante ID del producto, del cual vamos a añadir uno al carrito. Vamos a abrir aquí una solicitud de post. Va a ser carrito add.js. A continuación, vamos a tener la matriz de elementos y dentro vamos a tener otro objeto y sólo estamos agregando un elemento. ID va a ser igual a ID. Esta sintaxis significa que no tenemos que hacer esto, sólo
podemos hacer eso, y la cantidad va a ser una como lo hemos mencionado antes. Entonces una vez que recuperemos una respuesta de la API, vamos a hacer lo que siempre hacemos JSON pausarlo para que podamos tenerlo como un objeto JavaScript y luego tomar el elemento que devuelve. ¿ Qué vamos a hacer? Vamos a la consola registrarlo porque en realidad no
podemos actualizar nuestro carrito como lo haríamos normalmente porque la solicitud de agregar al carrito Ajax realmente devuelve un artículo en lugar de un carrito. Volvamos a aquí. Abramos la pestaña Red, cerremos o despejemos la actividad de red anterior. Añadamos un artículo al carrito. En realidad, antes de hacer eso, en realidad
tenemos que vincular esto. Entonces voy a tener que agarrar add to cart, ponerlo en el evento click aquí. Voy a tener que poner upsell.variante ID. Vamos a refrescarnos aquí, despejemos la pestaña Red, y haga clic en “Agregar al carrito” y veamos qué sucede. Si entramos veremos que nos devuelvan una matriz de artículos. En realidad no es artículo, sus artículos. Aquí puedes ver los datos que se están pasando. Voy a cambiar esto por artículos. Pero sin importar, cuando entramos a la consola, deberías ver que obtenemos esa respuesta de vuelta en nuestra consola porque nuestra consola la registró aquí. Si actualizamos la página, verás que hemos agregado ese producto a un carrito. Como mencioné sin embargo, en realidad no
recuperamos los objetos del carrito. Entonces, ¿cómo vamos a asegurarnos de que este carrito actualice después de añadir un producto al carrito? En esta situación, lo que podemos hacer es simplemente solicitar de nuevo el carrito. Podemos hacer lo mismo que hicimos en creado. Agarrando esto y configurando el carrito. Pero eso sería código muy seco porque nos estaremos repitiendo teniendo exactamente el mismo código en dos lugares diferentes. Lo que voy a hacer es crear un nuevo método con este llamado get cart. Esto va a ser al inicio de nuestra lista porque es central para nuestra instancia de vista aquí. Perdón lo llamé get start, get cart. Entonces en lugar de ejecutarlo aquí, solo
voy a llamar a este get cart. Exacta el mismo código, pero ahora podemos tomar esto y ejecutar el mismo código en este método. Vuelven los artículos, pero acabamos de ejecutar get cart. Cuando estamos ejecutando Ajax add to cart, en
realidad está ejecutando dos solicitudes Ajax. Ya verás que ahora, lamentablemente tenemos un error. Olvidé poner una coma aquí después del método. Refrescando la página se puede ver aquí. Lo que vamos a hacer es que me voy a quitar esta camiseta, y vamos a añadir zapatos locos al carrito. Como se puede ver, hay un poco de falla ahí con la imagen, pero se puede ver que los zapatos locos ahora se han agregado al carrito también. Lo que hicimos, agregamos el producto al carrito usando la API Ajax y luego ejecutamos otra solicitud a la API para buscar todo el carrito. Es más fácil de esa manera que tratar de agregar en el ítem al objeto de tarjeta existente y luego actualizar el total. Me parece que es más fácil volver a conseguir el carrito después de actualizar el carrito o agregarlo. Ahora hemos enganchado todas las interacciones principales. Podemos actualizar la cantidad de artículos en el carrito. Podemos retirar un producto del carrito. Podemos agregar un nuevo producto a partir de estas ventas ascendentes al carrito pero aquí hay algunas cositas que podríamos hacer para que la experiencia del usuario sea más agradable y suave. Número 1, si agrego un producto del carrito upsell al carrito, entonces debería quitar ese producto del carrito upsell, o al menos, indicar que ese producto ya ha sido agregado al carrito. Si solo vuelvo a hacer clic en “Añadir al carrito” en el mismo producto, todo lo que va a hacer es actualizar esa cantidad, lo cual puede estar bien, pero creo que definitivamente podría mejorarse. El otro es que cuando estás esperando a que suceda ese add al carrito, no
hay comentarios para el usuario. Por lo que de repente haces clic en el botón, no pasa nada y luego unos segundos después, una vez terminada la solicitud asincrónica, entonces de repente aparece en tu carrito. La otra cosa es que estas no tienen ninguna transiciones lindas. Todo es rápido y un poco demasiado rápido, y queremos suavizarlo un poco. Eso es lo que haremos en la parte final de este video aquí. Lo que voy a hacer primero es crear una matriz filtrada de ventas ascendentes. Como mencioné, si se agrega un upsell particular al carrito, quiero quitarlo de la matriz upsell y no mostrarlo en esta lista de ventas ascendentes. Para hacer eso, lo que voy a hacer es usar una propiedad computada. Voy a crear una propiedad computada. A mí me gusta hacer esto por delante de los métodos. Vimos propiedades computadas en la última lección sobre la plantilla de producto. Lo vamos a utilizar de nuevo aquí para crear una propiedad computada llamada upsells filtrados, que sólo va a ser una versión filtrada de las ventas ascendentes. Lo que voy a hacer, esto va a ser un poco de código complicado. Pero lo que estamos tratando de hacer es encontrar la intersección de artículos en el carrito y en la matriz upsell. Si está en el carrito, retírelo de esta matriz filtrada de ventas ascendentes. Lo voy a descomponer en dos pasos. En primer lugar, voy a conseguir el listado de productos en el carrito. Voy a llamar a estos productos en un carrito. Pero como vamos a estar buscando a través de la variante ID,
esa es la forma en que vamos a identificar, vamos a usar una función de mapa en JavaScript. En lugar de decir esto.cart.items, que te dará la lista de objetos, voy a transformar esto en una matriz dirigida valor específico
del ID del producto del artículo. Te mostraré lo que esto hace en tan solo un segundo. Voy a convertir eso en una cadena usando el método de dos cadenas. No podemos hacer un registro de consola, desafortunadamente dentro de una propiedad computada. Lo que me gusta hacer es solo con fines de depuración, es sacarlo de la propiedad calculada a algo así como creado. Entonces se ejecutará en carga de página. Si vamos ahora estoy actualizando la página, desafortunadamente, está regresando con una matriz vacía. Creo que eso es en gran medida porque seguimos esperando en el carrito para llegar desde la API Ajax. poco de un hackeo, pero voy a poner un tiempo de espera aquí para que se ejecute un poco más tarde, como tal vez dos segundos después de lo que era antes. Vamos a conseguir que este código se ejecute dos segundos después de que se haya creado. Como puedes ver, tenemos una matriz con todos los ID de variante. Si agregamos otro producto al carrito, tenemos zapatos gnarly ahí dentro. Vamos a refrescarnos. Dos segundos después, veremos un array con todos nuestros ID de variante. Mover eso de nuevo a la propiedad computada, lo que voy a hacer es tomar esa matriz de identificadores de variante que representan los productos que ya están en el carrito, y luego voy a filtrar las ventas ascendentes en base a eso. Ir a filtrar las ventas superiores, tomar cada suceso individual y si no, los productos en el carrito incluyen los productos de venta ascendente ID. Esta es una pieza de código un poco larga. Pero básicamente lo que estamos diciendo aquí es que esto volverá verdadero si los productos en carros o array de identificadores de variante que se relacionan con los productos en el carrito, incluye el ID de producto del upsell. Básicamente si el upsell está en el carrito. De no ser así, queremos devolver esas ventas superiores. Básicamente está filtrando cualquiera de las ventas ascendentes que ya están en el carrito. Lo que podemos hacer ahora es en lugar de correr por ventas ascendentes, aquí podemos poner en filtered_upsells, dándole tiempo suficiente para cargar y refrescar nuestra página por aquí. Deberíamos empezar a ver ahora que ninguno de estos productos ya está en el carrito. Si añado Old School Kicks, verás que la lista de ventas ascendentes aquí abajo se actualiza. Hemos filtrado las ventas ascendentes que ya se han agregado al carrito. Si elimino esto, verás que Insane Shoes vuelve a la matriz de ventas ascendentes. Ahora resolvimos ese tema con las ventas superiores. No queremos revender un producto que ya se ha vendido. Queremos quitarlo si ya está en el carrito. Lo que quiero hacer, sin embargo, cuando agrego un producto al carrito es proporcionar algunos comentarios al usuario. Lo que podemos hacer es usar una declaración if para eso. Lo que voy a poner aquí en el botón Agregar al carrito, voy a poner otro botón delante de él. Ya verás por qué lo estoy haciendo en tan solo un segundo. Voy a darle a esto la clase de upsell-atc. En realidad, ahorrarme algo de tiempo. Sólo puedo copiar esto. Lo que voy a hacer también es agregar una clase modificadora aquí, upsell-button—add. Lo que estoy a punto de hacer aquí es cambiar el estado del botón. En lugar de agregar al carrito, va a decir agregar, y ese estilo ya debería estar configurado en el archivo CSS del tema. Refrescando la página por aquí, verás que cada uno de ellos tiene este estado de adición, pero queremos alternar entre ellos en función si se está agregando un producto o no lo es. Cómo hacemos eso es agregar otro atributo a nuestros datos. Podemos entrar aquí y crea un estado de carga. Cuando la página se carga por primera vez, esto está vacío y luego después de un tiempo, las solicitudes asíncronas a la API de Ajax devolverán el carrito y lo actualizarán. cargar la página, hagamos que la carga sea verdadera. Pero después de cada solicitud de Ajax donde hemos terminado algo, vamos a poner la carga en falso. ¿ Cuáles son esas situaciones? Si nos desplazamos por aquí, posiblemente
podríamos ponerlo aquí después de get_cart. Pero como puedes ver, golpea el set_cart. Lo que voy a hacer es bajar a set_cart y luego después de format_prices, voy a poner en esta carga igual a false. Por supuesto, cargar va a ser verdad cuando primero carguemos la página, pero luego una vez que esté configurada en false, necesitamos la oportunidad de volver a configurarla en true. Para eso, lo que vamos a hacer es cuando estamos agregando un producto al carrito, vamos a establecer esta carga igual a verdadera. Cuando estamos retirando un producto del carrito, vamos a establecer esto.loading es igual a true. No lo vamos a hacer por carrito de actualización porque esto está bien para mí, no
vamos a poner en animación para esto específicamente. Pero para sacar del carrito, quiero que haya un estado de carga. Puede que no quede claro exactamente ahora mismo mientras estamos haciendo esto, pero pronto verás cómo ese atributo de carga nos
permitirá crear unas transiciones más agradables. Echemos un vistazo a si elimino esto ahora, vamos a refrescarnos aquí. Vuelve a empezar eso. Si hago clic en
esto, irá cargando por una fracción de segundo, y luego una vez que haya terminado de cargar, se volverá falsa. Lo mismo con Agregar al carrito. Una vez que lo agrego al carrito, irá cargando true por una fracción de segundo y luego irá a false. Vamos a usar eso en tan solo un segundo pero antes de que lo hagamos, quiero agregar un estado de carga más y eso es en estos artículos en particular. Vamos a tener que hacerlo sobre una base de artículo individual aquí. No puedes hacerlo en el objeto de carro general. Lo que voy a hacer es pasar a nuestra matriz upsell aquí y poner en un estado de carga en cada uno de los artículos de venta ascendente. De la forma en que voy a hacer eso, voy a llamarlo agregando, conseguir realmente específico aquí, y llamarlo adding_upsell. Por defecto, eso se va a establecer en falso porque cuando estamos cargando la página, no
estamos agregando un upsell. Pero cuando estamos haciendo esto Agregar al carrito aquí, queremos establecer el atributo de venta ascendente en el sumando en particular como verdadero. Lo que vamos a tener que hacer para que eso acceda al objeto real es encontrar primero el upsell porque en este momento, sólo
tenemos el ID de variante upsell. Vamos a tener que buscar ese objeto de venta ascendente real. Voy a crear un const upsell aquí, y luego encontrar dentro de la matriz upsell el upsell con la variante ID que ha pasado en upsell.variant_id es igual a id Nuevamente, ahora que tenemos el objeto variante, podemos ir aquí y hacer upsell.adding_upsell es igual a true. Entonces, cuando termine de cargar, podemos establecer el atributo adding_upsell en el upsell particular en false. Volvamos a cambiar a nuestra aplicación front-end ahora. Observemos la matriz upsell a medida que agregamos en un producto al carrito. En ocasiones esto sucede tan rápido que ni siquiera tiene tiempo para actualizarse. Haré clic en “Agregar al carrito” aquí y
ya verás, sigue diciendo falso. Si me vuelvo un poco más rápido, entonces verás que cambia a verdadero antes de que pase a falso. Ahí vamos, verdaderos o falsos. Se puede ver tanto la tabla del carrito se estaba cargando entonces y el estado de sumando de venta ascendente también fue cierto. Lo que podemos hacer ahora es agregar una transición a la tabla del carrito, y luego también intercambiar estos botones dependiendo qué estado esté la venta ascendente en cuanto si está agregando o no al carrito actualmente. Volvamos a entrar. Todo lo que tengo que ver con estos dos elementos, los
tengo lado a lado, pero ahora, sólo puedo ponerles v-ifs. Voy a hacer v-if=product.adding_upsell, entonces vamos a mostrar esto. De lo contrario, vamos a mostrar el habitual botón Agregar al carrito. Eso debería ser todo lo que se requiere para la interacción con el producto upsell, parece que he cometido un error aquí agregando upsell. He nombrado este producto en lugar de upsell, upsell.adding_upsell. Refresh. puedes ver ese botón no se muestra porque actualmente no estamos sumando ventas ascendentes. Pero si hago clic en esto, verás que los botones se conmutan brevemente para darle un estado de carga antes de que se agregue al carrito, y luego el artículo desaparece porque ahora ha sido filtrado de nuestra matriz de ventas ascendentes. Yo también puedo hacer eso con Gnarly Shoes. Como puedes ver, tiene un estado de adición antes de agregarlo al carrito. Ahí vamos. Hemos dado upsell un poco de estado de carga ahí, y ahora, vamos a envolver la tabla del carrito en un poco de un elemento de transición. Aquí mismo, dentro de la tabla del carrito, voy a añadir un elemento de transición como lo hicimos en la plantilla del producto. Ponga todo esto dentro de los elementos de transición llamados los elementos de transición nombre fade. Por último, un paso más, lo que vamos a tener que hacer es comprobar ese estado de carga. Vamos a cortar todo eso pero tenerlo aún en mi portapapeles. Crea un div y pon un atributo en su código v-show. Si no está cargando, se va a mostrar. Eso podría sonar un poco redundante, pero va a dar esa funcionalidad de desvanecimiento y desvanecimiento al no mostrar cuándo se está cargando. Cuando no está cargando, no se mostrará y eso activará la transición. Entonces cuando vuelva a encenderse, la transición lo desvanecerá. Echemos un vistazo a cómo funciona eso. Como pueden ver, cuando refresco la página, el carrito se desvaneció. Si añado un producto al carrito, el carro se desvanece. Si saco un artículo del carrito, se desvanece. El motivo por el que está haciendo esto, la forma en que lo tenemos para actuar así es porque estamos estableciendo este estado de carga cuando estamos agregando un producto
al carrito aquí abajo y también estamos actualizando ese estado de carga cuando estamos retirando productos del carrito también. También estamos en carga de página, tenerlo configurado para cargar hasta que el set_cart se termine de procesar y luego cargar va a false. Eso hace que el estado de carga de nuestra mesa de carrito sea un poco más bonito. Seguro que podrías mejorar mucho más sobre esto. No soy necesariamente un diseñador, pero esta es la funcionalidad central y los principios a la vista para que esto suceda. Ahí lo tienes. Si cerramos nuestras Herramientas de Desarrollador, ahora
tenemos nuestra página de producto trabajando con algunas transiciones agradables. Puedo añadir una Camiseta roja mediana a mi carrito. Ve por aquí, sube a vender con unos zapatos locos. Ir a Checkout si quiero o aumentar la cantidad. A lo mejor poner esto hasta tres. Esto está todo sincronizado con nuestro carrito Ajax API. Si estuviera en una tienda de producción real, podría golpear “Checkout” aquí y echar un vistazo. En realidad, creo que en realidad podría dejarme echar un vistazo. Ahí vas. Aquí tienes, esa es mi selección. Sí, eso es más o menos para la página del carrito. Sé que este es un video bastante largo o conjunto de videos para que esta página del carrito funcione. Pero esta es la mayor área de interacción dentro de un sitio de Shopify con mayor frecuencia. Piensa en cuando vas de compras, las cosas se quedan en los estantes hasta que las
recojas y las metes en tu carrito o las vuelvas a poner. La interacción principal del usuario con su sitio que tiene sentido
usar Vue con al menos son las interacciones del carrito. Obviamente, también, la variante cambiando muy útil para tener Vue para eso. Como mencioné antes, si quisieras filtrar tu página de recolección, podrías tener algunos filtros agitados aquí. Si tuvieras muchos productos dentro de tu tienda y muchos atributos diferentes para filtrar, podrías hacer de esta una app Vue también. Pero el principio principal es cada vez que tienes algunas interacciones que necesitan suceder en vivo en el front end, al menos
querrás usar JavaScript y te animaría a usar Vue o algún otro tipo de marco. Obviamente, has aprendido Vue en esta clase así que eso es lo que recomendaría pero este debería ser un buen punto de partida para que empieces a incorporar a Vue en tus proyectos. Dependiendo de cuándo estés viendo esta clase, el siguiente video podría ser un video extra sobre el uso Vuex en caso de que estés compartiendo datos entre diferentes partes. Hemos utilizado el carrito y la página del carrito aquí, pero tal vez quieras actualizar el carrito en una página diferente y sincronizar esos datos. Estaremos aprendiendo sobre la tienda Vuex en el próximo video, dependiendo de cuándo estés escuchando esto. De lo contrario, te veré en la conclusión, y espero que empieces en tu propio proyecto de clase.
9. Extra: almacenar los datos del carrito con VueX: Bienvenido a este video bonus en Vuex. Quería cubrir esto como un bono en esta clase ya que es un concepto en Vue que anteriormente he utilizado usando Vue en desarrollo de tema
Shopify y algo que podría ser valioso para que aprendas también. En esta clase hasta el momento, hemos creado dos apps en nuestro tema Shopify, una para la página del producto y otra para la página del carrito. Actualmente, estos son muy separados. Cada uno lleva sus propios datos, propiedades y métodos, y éstos son exclusivos de cada instancia. Para compartir datos entre múltiples instancias y componentes en nuestro tema Shopify, podemos utilizar una biblioteca llamada Vuex. Si busco Vuex en línea, el primer enlace es lo que es Vuex. Como afirma aquí, Vuex es un patrón de administración estatal y biblioteca para las aplicaciones Vue.js. Sirve como tienda centralizada para todos los componentes en una aplicación. Tenemos reglas que aseguran que el Estado sólo se pueda mutar de manera predecible. Esencialmente, Vuex nos permite crear un almacén centralizado de datos al que puedan acceder todas las Instancias y componentes de Vue. Ahora bien, ¿por qué necesitaríamos esto específicamente en el desarrollo del tema Shopify? Bueno, hay un ejemplo claro y eso es si tuviéramos que permitir interacciones de carritos
front-end fuera de esta página del carrito. Por ejemplo, una característica que podría haber notado en un sitio de Shopify antes es un carrito lateral. Al igual que en esta tienda, por ejemplo, si agregamos un producto al carrito aquí, verás que tenemos un poco de interacción aquí. Tenemos alguna información del carrito aquí, pero también podemos ir a la página del carrito real y ver esa misma información. Si fuera a añadir uno de estos upsales al carrito, eso se refleja también en este carrito lateral. Eso significa que los datos se comparten entre el carrito lateral y la página del carrito. Básicamente viene del mismo lugar, viene del objeto carro. Todo esto necesita estar sincronizado. Entonces cómo podemos hacer esto es a través de una tienda Vuex. Ahora nota cada vez que me refiero a una tienda Vuex, me refiero a una tienda centralizada de datos, no a la propia tienda Shopify. En ocasiones puede ponerse un poco confuso hablar de las tiendas Vuex en las tiendas Shopify. Por lo tanto, me aseguraré de referirme a la tienda Vuex como la tienda Vuex o Vuex para abreviar. Muy bien, entonces en este video, vamos a mover los datos y
métodos del carrito a una nueva tienda Vuex. Actualiza nuestra página del carrito, y luego te mostraré cómo podemos usar esta nueva fuente de verdad para actualizar otras áreas de nuestro tema. Suena bien? Empecemos. Está bien, entonces lo primero que vamos a hacer es incluir el guión para Vuex. De acuerdo, así que voy a volver a esta documentación en vuex.vuejs.org, haga clic en instalación, y lo que vamos a tener que hacer es asegurarnos de que la versión que estamos usando sea compatible con la versión que estamos usando de Vue. Entonces en esta clase, usamos Vue 3. Entonces si estás siguiendo lo mismo que esta clase y usando Vue 3, entonces vas a tener que usar la versión cuatro de Vuex. Entonces da click en V4 aquí
mismo, pasa a esa documentación, ve a la instalación, y voy a agarrar este enlace CDN de Vuex 4. Copia eso, dirígete a nuestro código. En nuestro tema.liquid después de nuestra etiqueta de script Vue, voy a agregar en Vuex. Entonces solo asegurarnos de que estamos usando Vuex versión 4 si estamos usando Vue versión 3. Entonces ahora que hemos incluido la biblioteca para Vuex, ahora
podemos crear nuestra tienda Vuex. Lo que me gusta hacer es ponerlo dentro de un fragmento. Como puedes ver, este tema no tiene fragmentos en este momento. Por lo que realmente voy a crear la carpeta de fragmentos. Dentro de la carpeta snippets, voy a crear un archivo llamado store.js liquid. En realidad no vamos a usar variables líquidas aquí. Entonces una alternativa podría ser ponerlo en theme.js, o crear un archivo js y activos e incluirlo. Pero esto nos permite incluirlo en páginas específicas usando la palabra clave include, que te mostraré en tan solo un segundo. Entonces lo que vamos a hacer es hacer eso de inmediato. Lo vamos a utilizar en la página del carrito. Entonces voy a hacer algo de espacio aquí arriba y vamos a incluir ese fragmento. Incluir store.js. No necesitamos la parte líquida porque eso está implícito cuando usamos declaraciones include. Está bien. Por lo que dos partes para conseguir todo esto enganchado. Uno, vamos a tener que crear una tienda aquí. Entonces vamos a tener que vincular esa tienda a las instancias que la van a utilizar. Entonces sólo voy a usar la convención estándar aquí. No olvidemos abrir nuestras etiquetas de script porque estamos en un archivo.liquid. El estándar de sintaxis y convención de nomenclatura estándar es simplemente llamar a nuestra tienda, tienda. Entonces podemos usar el método create store del objeto Vuex así. Dentro de aquí crearemos nuestra tienda Vuex. Todas nuestras opciones para la tienda irán justo aquí. Antes de hacer eso, sólo quiero vincularlo en nuestra instancia Vue aquí. Lo que voy a hacer es cambiar esto a un nombre más apropiado porque es el objeto de opciones. Voy a cambiar el nombre de esto a opciones de página del
carrito, opciones de página del carrito, y luego voy a almacenar esto en una variable. Entonces vamos a llamar a esta página del carrito. Por lo que esto almacenará ahora la aplicación real en lugar de las opciones. Entonces lo que voy a hacer es montar la página del carrito y añadir otro paso aquí por usar nuestra nueva tienda Vuex. Entonces lo que hacemos es hacer uso y luego ponemos el nombre variable de nuestra tienda Vuex, que acabamos de llamar tienda. Idealmente, solo deberíamos tener una tienda para toda la página web. Por lo que tiene sentido llamarlo tienda y luego simplemente podemos incluirlo así. Voy a volver a la tienda aquí y justo en mi editor de código, cambiar la detección de idioma a HTML. Eso se deshará de esas líneas astutas. En realidad, hay un paso más y eso es entrar en nuestras opciones aquí y solo asegurarnos de que agregamos en tienda a las opciones. De acuerdo, este es el equivalente de tienda: tienda. Por lo que sólo podemos ahorrar algo de espacio y simplemente ponerlo como tienda. Entonces eso ahora nos permite hacer referencia a la tienda dentro de esta instancia. De acuerdo, entonces lo que vamos a hacer es mover los datos de
nuestro carrito a nuestra tienda recién creada. Entonces voy a cortar esto. Voy a dejar ahí las ventas superiores. Dentro de nuestra tienda, voy a crear una función estatal. Entonces al igual que hacemos cuando estamos devolviendo datos dentro de una instancia de Vue, voy a copiar y pegar esto en nuestro estado aquí. Creo que aquí podemos traer alguna sangría. Sí. Está bien. Ahora, un poco de la teoría de Vuex. Aquí tenemos algunos conceptos básicos. Estado, que básicamente son getters de datos, que nos permiten acceder a esos datos que acabamos de establecer en el estado de la tienda. Mutaciones, que son la única forma de cambiar datos en una tienda Vuex. Por lo que las mutaciones significan en cualquier momento cambiamos datos. Acciones que enviamos para cometer mutaciones, y luego módulos que no estamos usando en esta lección. Pero esencialmente lo que vamos a hacer es que vamos a usar getters para obtener los datos. Entonces vamos a usar acciones y mutaciones para establecer los datos. ¿ De acuerdo? Ahora bien, si quieres conocer en profundidad por qué usamos
mutaciones y acciones con el fin de cambiar datos y no solo uno u otro, puedes leer al respecto aquí en la documentación. No voy a entrar en la teoría de acciones y mutaciones en este video en particular, pero toda la información está ahí si quieres mirarla. Muy bien, así que volvamos a nuestra tienda aquí mismo, nuestra tienda Vuex. Pensemos en qué mutaciones podríamos necesitar hacer. Básicamente, la única mutación que tenemos que hacer aquí es actualizar el carrito. Recuerda cada vez que estamos cambiando el carrito, solo
estamos obteniendo un objeto de carro fresco de la API Ajax y configurando esos nuevos datos. ¿ De acuerdo? Entonces sólo necesitamos una mutación. Se puede elegir si hacer esto o no. Pero me gusta usar la convención capitalina al nombrar mutaciones. Entonces voy a abrir un objeto de mutaciones. Aquí, voy a crear una mutación de carro conjunto. El primer argumento va a ser estatal. Esto es estándar cuando se ejecutan mutaciones. Entonces lo siguiente va a ser la carga útil, que va a ser el carro. Entonces eso es lo que vamos a pasar. Entonces todo lo que vamos a hacer es hacer carro estatal igual a carro. De nuevo, esto podría parecer un poco redundante, pero hay algún método a la locura con Vuex. Está siguiendo un patrón específico. Nuevamente, si quieres leer más sobre esto, puedes hacerlo en la documentación. Pero después de que hayamos creado esa mutación, lo que voy a hacer es crear algunas acciones. Aquí es donde empezamos a transferir algunas de estas funciones asíncronas desde nuestra página de carrito a nuestra tienda Vuex. Pero antes de eso, quiero crear algún código de trabajo y mostrarles que esto realmente está funcionando. Entonces lo que voy a hacer es cerrar esto y abrir esto en una pestaña dividida. Vamos a deshacernos de todas las otras pestañas aquí. Lo que vamos a hacer es refactorizar esto, mover, algo de este código hacia aquí. Ahora, lo primero que sucede cuando cargamos la página, claro, es que conseguimos el carrito. Entonces recreemos eso usando esta tienda Vuex. ¿ De acuerdo? Entonces lo que voy a hacer es antes de las acciones en realidad, voy a abrir un objeto getters aquí. Aquí podemos poner a nuestros getters. De nuevo, esto va a parecer un poco redundante. ¿ Por qué no podemos simplemente acceder directamente al estado? De nuevo, hay teoría detrás de ella de que se puede buscar arriba en la documentación. Pero cómo funciona esto es con el fin de llegar al objeto carrito, necesitamos escribir una función igual a esta, y solo va a devolver state.cart. Entonces para obtener esos datos de nuestra tienda Vuex,
recuerda que ya incluimos la tienda aquí arriba, solo
necesitamos crear una nueva propiedad computada que solo saca esos datos de la tienda Vuex. Entonces todo lo que voy a hacer es reemplazar ese objeto de carro que acabamos de quitar con la propiedad computada. Aquí vamos, solo voy a llamarlo carrito y aquí es donde traemos los datos de nuestra tienda Vuex, voy a primera tienda de referencia.state.cart. Ahora por supuesto, cuando cargue por primera vez la página, vamos a tener estos datos. Entonces por eso en created, ejecutamos get_cart, pero ahora lo vamos a estar haciendo a través de Vuex. Lo que vamos a hacer es poner esto en acción. Entonces aquí abajo, voy a crear una acción llamada get_cart, y desde el primer argumento, voy a sacar el método commit. Esta es una práctica estándar con acciones, y aquí no tenemos una carga útil, así que eso es todo lo que necesito y entonces lo que voy a hacer es imitar aquí la acción get_cart. Voy a agarrar todo esto, traerlo,
y en lugar de ejecutar este método set cart, realidad
voy a ejecutar la mutación set cart y el término para eso se llama comprometer. Lo que hacemos aquí es en lugar de esto hacemos store.commit, después ponemos el nombre de la mutación set_cart, y luego como segundo argumento, ponemos la carga útil ahí, que es lo que nos devuelven de la API. Entonces eso va a establecer el valor del carrito a lo que obtenemos de la API. De nuevo, esto es casi exactamente lo que tenemos por aquí. Sólo lo estamos poniendo en Vuex. Entonces en creado en lugar de esto.get_cart, vamos a enviar en su lugar la acción que tenemos aquí. Entonces lo que voy a hacer es store.dispatch get_cart. Ahora, si ejecutamos este código ahora, volvamos a nuestro carrito de compras, abran nuestras DevTools, actualicen la página; verán que cuando vayamos y busquemos aquí, nuestra mesa de carros está ahí, pero es actualmente configurado para mostrar ninguno. Puedes ver que tu carrito está vacío, pero no está mostrando como puedes ver aquí. El motivo es porque ahora hemos perdido esa parte
del código aquí donde pusimos carro y cambiamos la carga a false. Entonces lo que vamos a tener que hacer es conseguir esta acción devuelva una promesa y luego cuando esa promesa se resuelva, entonces vamos a volver a poner la carga en falsa. Entonces lo que tenemos que hacer para esto es aquí, donde comienzan las solicitudes de get, necesitamos simplemente poner el retorno delante de él. Entonces ahora podemos poner un punto luego por aquí. Entonces cuando la acción get_cart haya terminado de despachar, termine de ejecutarse, entonces vamos a establecer la carga en false. Muy bien, ahora vamos a refrescar la página, y ya puedes ver ahora tenemos ese valor por venir. Ahora si vamos a comprar la T y agregamos, digamos una pequeña camiseta negra al carrito, verás que aparece no de los datos de nuestro carrito que se almacenan en la instancia de vista, sino de una propiedad computada de carro que está jalando de nuestra tienda . Entonces tenemos los inicios de nuestro refactor aquí, y podemos ver que eso ahora está tirando de nuestra tienda Vuex. Volvamos al código y sigamos trabajando en esto. Por lo que moviéndose hacia abajo en nuestras ventas ascendentes filtradas, puedo ver este.cart. Ahora estamos usando carrito como propiedad computada, tirando de este valor, así que voy a reemplazar esto.cart por store.state.cart. Ese es el primer cambio, y luego a medida que
bajamos, ya no necesitamos get_cart porque eso ahora es una acción de Vuex. Nosotros sólo vamos a comprobar dónde nos referimos a eso. Como puedes ver, lo estamos usando en add to cart también. Solo eliminemos eso y luego refactoraremos agregar al carrito cuando lleguemos a él. En set_cart, lo estamos haciendo a través de la mutación ahora,
así que puedo quitar eso, pero lo que voy a tener que hacer es que hay este paso extra aquí para los precios de formato. Entonces saquemos esta lógica de aquí, y pongámosla en la mutación real. Voy a eliminar precios de formato y dentro de esta mutación aquí, tomemos el objeto carrito que se envía como carga útil, y vamos a actualizarlo antes de ponerlo en nuestro estado. Para eso, todo lo que tenemos que hacer es simplemente quitar este punto porque ahora estamos usando el carro que se ha pasado, en esta carga útil. Entonces esto va a crear esos nuevos precios de línea formateados,
y precio total formateado, luego insertarlo en state.cart. Muy bien, así que volvamos a las acciones aquí. Vamos más abajo. Ya podemos deshacernos de set_cart, y vamos a tener que crear un nuevo método o una nueva acción para éste aquí mismo, el carrito de actualización. Para este, voy a asumir que la única vez que estamos actualizando carrito lo estamos haciendo
solo para una línea de pedido así que vamos a mantener esta sintaxis. Entonces lo que voy a hacer es agarrar este código asíncrono aquí y vamos a crear un método de carrito de actualización aquí y por supuesto, el primer argumento va a ser commit, y luego el segundo argumento va a ser un objeto con esos mismos dos argumentos; ID y cantidad. Entonces en el interior podemos hacer esa solicitud de post y para que podamos hacer que devuelva una promesa, ponemos retorno frente a la solicitud del Ajax. Eso por supuesto nos permite encadenar un punto entonces en el despacho como hemos hecho aquí. Deshaznos de este código y por supuesto, esto.set_cart necesita ser reemplazado por store.commit set_cart, y luego en nuestro método de tarjeta de actualización aquí, todo lo que tenemos que hacer es activar esta acción o usar el Vuex terminología, despachar la acción. Entonces lo hacemos desde el objeto de la tienda, despacho, carrito de actualización, y luego un objeto con los dos parámetros, ID y cantidad, y eso es todo lo que necesitamos hacer. Porque en nuestro método de carrito de actualización solo estamos usando eso para actualizar cantidad como puedes ver aquí, no
necesitamos actualizar estados de carga por lo tanto, no
necesitamos encadenar un punto entonces al final. Pero para add_to_cart, definitivamente vamos a tener que usar promesas. De hecho, vamos a tener que encadenar algunas promesas juntas. Te mostraré cómo hacemos eso ahora mismo. Entonces después de update_cart, vamos a poner add_to_cart, y vamos a usar la misma sintaxis que antes. El primer argumento vamos a sacar del método commit y luego la carga útil va a ser ID. Vamos a sacar esta petición ajax dentro aquí como lo hice antes para que podamos lidiar con la promesa a medida que vuelve de la acción, poner un retorno delante de ella, y desafortunadamente el sangramiento está todo loco aquí, así que déjame arreglarlo rápidamente. Está bien, eso va a servir. Ahora para refactorizar este código, tenemos que reemplazar este método por otro despacho. Entonces esto lo vamos a tratar una vez que la promesa regrese de Vuex a nuestra instancia. Solo eliminemos eso y lo haremos dentro de la instancia un poco más tarde. Lo que voy a tener que hacer para despachar una acción desde dentro de otra acción es solo sacar el método de despacho aquí mismo en este objeto, y así en lugar de esto.get_cart, voy a ejecutar despacho get_cart, y entonces eso es todo lo que tenemos que hacer. Porque vamos a manejar la promesa dentro de nuestra instancia, no
necesitamos hacer nada más después de eso en la tienda Vuex. Entonces hagámoslo ahora mismo. Vamos a entrar aquí, en add_to_cart, y hagamos nuestro despacho, tienda,
despacho, add_to_cart con nuestra carga útil de ID, y luego podremos manejar la promesa así y primero actualizar el estado de carga a false, y luego suplir, sumando venta ascendente, falso. Tiene sentido actualizar estos estados de carga porque esto se relaciona con
la interfaz de usuario que estamos tratando en la propia página, por lo que dentro de esta instancia en particular, pero todo lo que tenga que ver con los datos del carrito debe estar centralizado dentro de este Tienda Vuex. Esperemos que eso explique por qué estamos manejando algunas promesas dentro Vuex y algunas promesas dentro de la instancia de Vuex. Todos estos atributos de carga tenían que ver con la interfaz de usuario en la propia página del carrito, no con los datos del carrito. Por último, tenemos este método remove from cart, que está activando esto.update cart. Lo que voy a hacer aquí es reemplazar este método del carrito de actualización por la acción del carrito de actualización en nuestra tienda Vuex. Como hemos visto antes, store_dispatch, misma carga útil que antes. Basta con ponerlo en forma de objeto, ID y cero, entonces vamos a establecer este punto de carga en falso después de que regrese. A ver si eso va a funcionar. No estoy seguro de si el valor explícito aquí va a errar. Sí. Como puedes ver, no le gusta el cero ahí. Lo que voy a hacer es simplemente hacer const cantidad igual a cero, y luego reemplazar eso por cantidad. Golpea “Guardar” en eso. Refresca la página por aquí. Como puedes ver, tenemos un error, “No se puede leer la propiedad total_price de indefinido”. Si me desplazo hasta aquí, ves que aquí tengo una referencia a esto. Sólo hay que quitar eso, porque no tenemos acceso a esto. Esto por supuesto, se refería a la instancia de Vue, la app de Vue, pero ahora estamos dentro de nuestro carrito, así que solo necesitamos mirar lo que hemos pasado, y el objeto de la tienda. Voy a arreglarlo,
refrescarme aquí, y ahora podemos ver venir nuestra camisa negra. Si estoy para actualizar la cantidad aquí, se
puede ver a pesar de los errores en nuestra consola JavaScript, esto ahora está funcionando. Si golpeo la papelera aquí, sacará ese producto del carrito, refrescante para demostrar que esto es legal. Si golpeo “Añadir al carrito” en uno de estos, ahora funciona. Ahora, todos estos datos vienen de nuestra tienda Vuex. Si entro aquí, desafortunadamente, con esta última versión de Vue DevTools, no
creo que podamos realmente mirar la tienda en sí, no
hay una pestaña Vuex como había en las versiones anteriores de ti Vue DevTools pero lo que podemos ver es que estamos obteniendo los objetos de carro de computados en lugar de datos aquí, y eso nos deja claro que estamos tirando ese objeto de carro de otro lugar que no sea la instancia. Si elimino eso, verás que ese objeto de carro se está actualizando de acuerdo con lo que hay en la tienda Vuex. Ahora, claro, lo que ven aquí es exactamente lo mismo que lo que teníamos antes. Podría no estar claro para ti por qué esto es diferente o mejor, así que pensé que podría mostrarte cómo podríamos usar este nuevo punto centralizado de verdad para interactuar con el carrito en cualquier otra página de nuestro sitio web de Shopify. Lo que voy a hacer es realmente poner el recuento de artículos en nuestro carrito aquí arriba, y tener esta actualización en vivo cuando agreguemos un nuevo producto al carrito, actualmente sólo podemos hacerlo desde la página de producto aquí. Por supuesto, podemos hacerlo en la página del carrito, pero ya estamos en la página del carrito, por lo que realmente no tiene mucho sentido hacerlo pero tal vez queremos agregar
al carrito y hay que haber retroalimentación de inmediato sin volver a cargar el página. Ahora, podemos usar esos datos del carrito para actualizar algo en nuestro encabezado para indicar que hemos agregado un producto al carrito sin tener que ir a la página del carrito. Te mostraré un pequeño ejemplo de eso ahora mismo. Lo que voy a hacer es crear una instancia de Vue para el encabezado, y desafortunadamente, no tenemos un archivo de sección para el encabezado. Podríamos ir y crear eso ahora mismo, no
sería demasiado difícil pero solo mantengamos el código en nuestro tema.líquido. Voy a cerrar esta página de carrito aquí. Lo que voy a hacer es incluir el mismo fragmento por aquí, justo encima de nuestro encabezado. Vamos a hacer incluir store.js, y así ahora estamos incluyendo esa tienda Vuex en nuestro archivo de diseño de tema también. También voy a agregar un ID de cabecera a este elemento aquí para que podamos identificarlo claramente en nuestra instancia de Vue. Entonces como hemos hecho a lo largo de esta clase, voy a crear una instancia de Vue debajo de este código HTML aquí. En primer lugar, vamos a crear a opciones objetos, opciones de encabezado. Vamos a abrir un objeto vacío por ahora, y luego voy a crear otra variable que
va a contener nuestro encabezado de aplicación, Vue.CreateApp, inserte esas opciones de encabezado, y luego voy a montar eso usando el ID que acabamos de agregar al encabezado, y luego voy a conseguir que esa instancia de Vue use la tienda Vuex. Ahora bien, si refresco la página por aquí, deberíamos ver aquí abajo que tenemos dos apps. Ya verás que la información que teníamos aquí ya se ha ido, porque está sentada debajo de la App 1 por aquí. Déjame sólo ver si puedo alejarme y mostrarte. Aquí vamos. Como puedes ver, App 1 y App 2, realidad no los
hemos nombrado, por lo que es un poco confuso. Vamos a entrar y en realidad hagamos eso ahora mismo. Voy a darle a esta instancia un nombre de “Encabezado”, y vamos a entrar y nombrar nuestras otras instancias en la página del carrito. Voy a poner un nombre en las “Opciones”,
“ Carrito”, y luego “Página del producto”, “Nombre”, “Productos”. Eso sólo le va a dar un nombre en el Vue DevTools para que podamos identificarlo fácilmente. Retrocedamos, actualicemos, veamos las DevTools, y podemos ver que podemos cambiar entre la app Encabezado y la app Producto aquí. Estamos ejecutando dos aplicaciones en una página. Por supuesto, si vamos a la página del carrito, verás que tenemos Encabezado y Carrito ahí también. Volvamos a la página del producto. Ahora podemos cambiar entre las diferentes apps. Añadamos esos datos del carrito al encabezado. Entonces lo que voy a hacer es traer esa tienda, y luego como hemos hecho para la página de Carrito, voy a crear una propiedad computada que saca el carrito de la tienda Vuex. Esto va a ser carrito, exactamente como lo hemos hecho en la página de Carrito, store.state.cart. Entonces para poblar ese carrito en carga de página, lo que voy a hacer es aprovechar el gancho del ciclo de vida que hemos creado, y luego en este gancho de ciclo de vida, despachar la acción get_cart. Vamos a refrescar la página ahora con nuestras DevTools abiertas. Parece que tenemos un error, “Identificador inesperado, tienda”. Eso es porque olvidé la coma aquí. Vamos a “Guardar”, “Refrescar”. Vuelve a nuestras Vue DevTools. Sí, tenemos cabecera y producto. Si hacemos click en el encabezado, podemos ver que tenemos nuestro objeto de carro viniendo de la tienda Vuex ahora. Cómo podemos usar esto es que ahora podemos entrar aquí, vamos a crear un span, y dentro aquí en el v-html, podemos agregar en el recuento de artículos desde nuestro carrito. Voy a hacer cart.item_count. Esto es, por supuesto un atributo en el objeto carrito, se
puede ver aquí. Si “Guardar”, “Refrescar” la página de aquí, se
puede ver que tenemos un artículo en el carrito. Por supuesto, podríamos haber logrado el mismo resultado usando shopify.liquid pero lo que vamos a hacer ahora es actualizar la página del producto para
enviar la variante ID a través de Vue en lugar de a través del
medio estándar Shopify que termina procesando el “Añadir al carrito” y trasladarte a la página del carrito. Como puedes ver aquí, ya
tenemos esa interacción ocurriendo entre el encabezado y la página del carrito. Tan solo para completar esto, volvamos a la página del producto. Vayamos al código de la página del producto, aquí mismo. Lo que vamos a hacer es justo aquí, agregar en un manejador de eventos, realidad
podríamos eliminar este formulario por completo y solo tener un botón que haga esto también, pero vamos a quedarnos con el formulario por ahora y hacerlo más fácil. Vamos a adjuntar esto al evento de envío, y como modificador extra, podemos poner aquí llamado prevenir, y eso va a evitar la funcionalidad de envío por defecto, que es, por supuesto, lo que queremos. Aquí, podemos poner un método que va a manejar el Añadir al Carrito. Sólo voy a crear eso ahora. Bajemos después del método final y creemos una función handle_atc. Todo lo que va a hacer es tomar el ID de la variante que hay que agregar al carrito, y solo vamos a despachar la acción “Añadir al carrito” con la carga útil de ese ID. Entonces vamos a subir aquí. ¿ Dónde estaba? Aquí mismo. Para handle_atc, y como argumento en ese método, vamos a poner el ID de variante actual. Esto hace que los campos ocultos sean un poco redundantes, pero aún así debería funcionar. Vayamos por aquí, actualicemos la página, y veamos qué pasa cuando hacemos clic en “Añadir al carrito”. Ya puedes ver que la página no se actualiza, pero algo sí cambió. El número en el carrito actualizado. Podríamos agregar en otras interacciones como podríamos hacer que apareciera aquí diciendo, “Recientemente agregado”, aún
podríamos redirigir al carrito, podríamos tener un carrito lateral pop fuera como vimos antes. Podríamos hacer todo tipo de cosas pero el punto es, ahora
tenemos sincronización de datos entre nuestro encabezado y nuestra página de carrito. Como puedes ver, el número en nuestro encabezado se está actualizando cuando actualizamos los artículos en nuestra página de carrito, pesar de que están en aplicaciones separadas, y la razón por la que estamos compartiendo datos entre ellos usando Vuex. Eso es un pequeño bono en Vuex para ustedes. Si estás construyendo un carrito lateral con todas las funciones mientras tienes una página de carrito completamente destacada, entonces vas a querer compartir datos entre ellos, y Vuex es la solución ideal para hacer este trabajo en Vue. Espero que hayas aprendido algo de esta lección. Si deseas incorporar un carrito lateral y usar Vuex en tu proyecto de clase, te animo a hacerlo. Te daré más detalles sobre tu proyecto de clase en el video final que viene a continuación. Gracias por ver. Te veré en esa.
10. Extra: adaptar a las plantillas de JSON: En esta breve lección extra, te
voy a mostrar cómo mover nuestras aplicaciones Vue a archivos de
sección en lugar de dejarlas en archivos de plantilla líquida. El motivo por el que te estoy mostrando esto es por la Tienda Online 2.0. Si no estás familiarizado con Tienda Online 2.0, te animo a que revises mi primera clase aquí en Skillshare, Shopify theme development: Cómo construir y personalizar tu propia tienda online. He agregado tres videos adicionales ahí para dar cuenta de los cambios de la Tienda Online 2.0. Esencialmente, lo que ha cambiado es que los archivos de plantilla ahora pueden ser JSON o Liquid. Para adaptarte a esta nueva forma de hacer temas, quiero mostrarte cómo podemos mover nuestros archivos de intersección de aplicaciones,
para luego transformar esas plantillas en archivos JSON en su lugar. Voy a cavar en el tema aquí, sólo te
voy a mostrar lo que quiero decir. Aquí bajo Plantillas, tienes todos los archivos de plantilla codificados como Liquid que, por supuesto, nos
permite insertar código líquido HTML, CSS JavaScript, todo en este archivo de plantilla, y eso es lo que se utiliza como nuestra plantilla. Pero si haces click en esto hoy en día, verás que hay una opción para una plantilla JSON. Lo que voy a hacer es que he duplicado el tema para mantenerlo intacto,
y aquí dentro, voy a dar clic en “Editar código” en el duplicado, y empecemos a refactorizar nuestro proyecto aquí. Primero lo primero, queremos crear una nueva sección para albergar. Hagamos primero la plantilla de producto, así que voy a crear una nueva sección, y sólo voy a llamarla Plantilla de producto. No tienes que poner el.liquid ahí porque eso va a ser automático, y ahora solo vamos a tener que poblar el nombre de la sección, solo lo voy a llamar Plantilla de Producto o Producto Principal, algo así porque quizá queramos poner algunas otras cosas en él. Plantilla Principal de Producto. Ahora sólo voy a golpear “Save” en eso, y voy a pasar a nuestra plantilla product.liquid. Aquí es donde tenemos nuestra app Vue para la página del producto. Voy a copiar todo el código usando Comando A en un Mac. No estoy seguro de qué es en un Windows, luego Comando C. Entonces voy a ir por aquí, crear algo de espacio en la parte superior, y pegar en nuestro código allá. Ahora que tenemos nuestro código pegado y guardado, podemos eliminar este archivo de plantilla, y esto nos dará el espacio para crear una plantilla JSON. Voy a dar clic en “Añadir nueva plantilla”, y bajar al producto, y aquí puedes ver ya podemos crear una plantilla Product.JSON ahora. Ir a golpear “Crear plantilla” y ahora
tenemos la base de nuestra plantilla de producto. Está bien. Voy a ir más a fondo en esto en Lección 11 de Desarrollo de tema Shopify: Cómo construir y personalizar tu propia tienda en línea. Voy a pasar un poco por esto, pero esencialmente lo que tenemos que hacer aquí es agregar los campos requeridos para poder usar esto. No me permite ahorrar a menos que haga un cambio, pero verás que si no incluyes esto, se equivocará. Tenemos que incluir estos campos obligatorios. En primer lugar, necesitamos darle un nombre a esta plantilla de producto, y sólo voy a darle el nombre sencillo de Plantilla de producto. Ahora dentro del objeto de nuestra sección, necesitamos enlazar esa plantilla de producto que acabamos de crear. Voy a empezar llamándolo Main-Product, y vamos a abrir un objeto como el valor de eso. Entonces todo lo que necesitamos es poner un tipo, y el tipo tiene que ser igual al nombre de la sección;
el nombre de archivo de la sección menos el.liquid. Eso sólo va a ser producto-plantilla. Está bien. En nuestra matriz de pedidos, necesitamos poner en el nombre que coincida con esto, por lo que principal producto. Esto parece redundante en este punto porque sólo tenemos una sección, pero si tuviéramos múltiplo, podemos definir un orden diferente para ellos aquí en esta matriz de órdenes. Voy a pegarle a “Save” en eso. Como se puede ver, no hay errores. Entonces voy a golpear “Personalizar tema”. Ahora que estamos dentro de nuestro editor de tienda, necesitamos hacer click aquí arriba para cambiar a la plantilla de producto que acabamos de crear. Simplemente van a ser productos por defecto porque no tiene un punto tras producto, solo es product.JSON. Si fuera producto dot algo más, entonces surgiría como un alterno como éste. Yo solo voy a dar click en eso, y aquí puedes ver que todavía tenemos nuestra plantilla de producto. Si voy a Shop the Tee, puedes ver que tenemos nuestra app, y sigue funcionando. Eso se debe a que aquí hemos incluido nuestro archivo de sección, no tiene secciones editables, pero se ha vinculado. Ahora esta no es la lección más emocionante porque no
hemos agregado ninguna funcionalidad nueva en absoluto, excepto por el hecho de que ahora podemos agregar otras secciones y reordenarlas. Debido a que se trata de un proyecto de huesos desnudos sin otras secciones, en realidad no
tenemos la capacidad de agregar otra sección aquí porque literalmente no hay otras secciones. Pero usando el sistema Online Store 2.0, si estuviéramos usando un tema moderno, en realidad
podríamos ahora mover esto, agregar nuevas secciones si quisiéramos. De eso se ha tratado esencialmente este video, adaptándose a la Tienda Online 2.0. Podría estar usando un tema más nuevo que tenga todas sus plantillas como JSON. En ese caso, necesitamos adaptar nuestras prácticas
un poco para adaptarnos a este nuevo cambio. Todo lo que hemos hecho aquí es simplemente mover el código Liquid a un archivo de sección, e incluir ese archivo de sección dentro de nuestra plantilla de producto JSON. Todavía podemos hacerlo a la antigua manera, aún
podemos tirar o mantener este código en una plantilla product.liquid, pero ahora nos estamos moviendo en esta dirección con Online Store 2.0. Yo sólo quería lanzar este video aquí para aquellos de ustedes que están trabajando con temas modernos, o que han abierto un tema moderno, y se preguntaron qué diablos. Esperemos que este video te haya proporcionado algún contexto. Cualquier pregunta, como siempre, siéntete libre de dejarlas en el recuadro de discusión de abajo, y te veré en el video final para la conclusión.
11. Conclusión y proyecto de clase: Con esto concluye esta clase sobre el uso de Vue.js en temas de Shopify. Para tu proyecto de clase, te animo a integrar Vue.js en cualquier tema de Shopify en el que estés trabajando actualmente. Ten en cuenta que la mayoría de los temas de nivel de producción ya usan una cantidad justa de JavaScript, por lo que es probable que tengas que refactorizar parte de ese JavaScript para hacer espacio para Vue.js. Como he mencionado a lo largo de esta clase, este tema es bastante específico dentro del desarrollo del tema Shopify, por lo que si no estás seguro de nada con respecto a los temas fundacionales de HTML, CSS, JavaScript, Shopify liquid, puedes encontrar un montón de lecciones sobre todo eso aquí en mi canal de Skillshare. Todo lo que tienes que hacer es hacer clic en mi nombre y luego echa un vistazo a mis otras clases de desarrollo web. Como siempre, si te gustaría conocer más sobre programación temática de
Shopify y el desarrollo de temas, sígueme en línea y echa un vistazo a mi canal de YouTube para tutoriales adicionales. Por último, si necesitas algún consejo o orientación sobre lo que hemos cubierto en la clase de hoy, asegúrate de dejar un comentario en el recuadro de discusión de abajo, y haré todo lo posible para señalarte en la dirección correcta. Gracias como siempre por ver y espero volver a verte en algunas mis otras clases.
Christopher Dodd, Web Developer / Educator
