Programación temática de Shopify: Liquid, JSON y Javascript

1. Introducción: Hola. Bienvenido a Shopify Theme Programming: Liquid, JSON y JavaScript. Esta clase es la secuela de mi clase anterior, Shopify Theme Development, cómo construir y personalizar tu propia tienda online. Si esta es la primera vez que aprendes conmigo, me llamo Chris, y soy un maestro superior aquí en skillshare.com cubriendo temas como el desarrollo web, y el freelancing en línea. Mi primera clase sobre desarrollo de temas de Shopify abarcó temas como crear una tienda de desarrollo, usar Theme Kit, y entender la estructura del tema. Todos estos son fundamentales importantes para el desarrollo del tema Shopify. Pero en esta clase, vamos a profundizar en el código temático real, y obtener una mejor comprensión de cómo se programan los temas. Echaremos un vistazo más de cerca al lenguaje de creación de templaciones detrás de los temas de Shopify, discutiremos cómo crear sus propias personalizaciones utilizando esquemas JSON, y aprenderemos sobre algunas API que te ayudan a acceder a los datos almacenados, sin tener que recargar la página. Al final de la clase, tienes una sólida comprensión de cómo programar temas de Shopify, y la capacidad de crear tus propias secciones y fragmentos para acceder a todo el alcance de lo que se puede lograr con el desarrollo de temas Shopify. Si estás listo para llevar tus habilidades de desarrollo temático Shopify al siguiente nivel, click en el siguiente video, y te veré por dentro. 2. Herramientas y conocimientos necesarios: Al ser esta clase la SQL to Shopify theme development, cómo construir y personalizar tu propia tienda online, se aconseja que tomes esa clase primero ya esta clase asume que entiendes lo que es una historia de desarrollo, cómo themekit funciona, y la estructura de carpetas de tu tema Shopify. Entender la estructura temática es especialmente importante para esta clase ya que estaremos saltando directamente a los archivos sin hablar demasiado dónde encajan todos en la estructura de temas de Shopify. El enfoque de este curso está exclusivamente en los aspectos de programación de los temas de Shopify. Por supuesto, si necesitas más de ese conocimiento teórico en torno a temas, definitivamente echa un vistazo a la primera clase. Ahora, debido a que esta clase se trata de código, vas a necesitar un buen editor de código. El que usaré en esta clase será el editor en línea en el administrador de Shopify pero es muy recomendable que uses tu propio editor de código y uses themekit para descargar tu código de tema. En segundo lugar, obviamente necesitas un navegador web, y en tercer lugar, necesitarás tu propia tienda Shopify. Esta tienda no necesita ser una tienda real. Por supuesto, puede ser una tienda de desarrollo. En realidad no necesitas pagar a Shopify para trabajar en temas. Si no sabes de qué hablo, checkout lección 3 de la clase anterior. Ahora, mencioné antes, themekit, si aún no lo has hecho, dirígete a shopify.github.io/themekit y agarra eso ahora, lo recomiendo mucho. Eso es básicamente todo para las herramientas. Pero en términos de conocimiento, además de conocer temas, vas a necesitar tener una comprensión básica de HTML, CSS, y JavaScript. Estos son los tres idiomas importantes que componen la web, y no los estaremos cubriendo específicamente en esta clase así que si necesitas entender alguno de estos, simplemente echa un vistazo primero a algunas de mis otras clases. Esa fue toda la lista. Resumamos rápidamente antes de seguir adelante. En cuanto al conocimiento, vas a necesitar tener al menos una comprensión básica de la Plataforma Shopify, la estructura de los temas de Shopify, estoy hablando de diseños, plantillas, secciones, etc., y finalmente, HTML, CSS, y JavaScript. Para las herramientas necesitarás un editor de código, un navegador web y una tienda Shopify en la que trabajar, y Shopify Themekit si estás trabajando con tu código localmente. Si tienes todo eso, ya estás listo para saltar directamente a la siguiente lección así que te veré ahí. 3. Actualizaciones de Online Store 2.0: Oigan alumnos, sólo quería saltar aquí antes de empezar y asegurarme de que están tanto de algo que Shopify está llamando Online Store 2.0. Como probablemente puedas decir, este video fue grabado unos años después de que se publicara la clase original, pero pensé que era importante saltar aquí y hacerte saber sobre algunas actualizaciones. Si sabes de lo que estoy hablando aquí con Tienda Online 2.0, siéntete libre de saltarte este video. Pero para el resto de ustedes, solo necesito actualizarlos sobre algunos cambios en la experiencia de la tienda en línea desde que esta clase se puso en marcha por primera vez. Tan solo para atender a algunos de sus alumnos preocupantes, el contenido en esta clase sigue siendo todo relevante. El líquido sigue en esa misma forma. JSON todavía se utiliza para esquemas de sección y locales. Las API de JavaScript de las que hablo en esta clase aún existen al momento de la grabación, pero sólo tenemos un nuevo formato para los archivos de plantilla. Por lo que ahora las plantillas pueden ser de Liquid o JSON. Nos adentraremos más en esto en la clase. Probablemente ya deberías saber qué es una plantilla. Pero anteriormente, las plantillas estaban codificadas como solo Liquid y tenías que ocultar programa en las secciones. Ahora, con el fin de permitir secciones en todas partes, Shopify ha habilitado el uso de plantillas JSON. Entonces ahora en lugar de almacenar Liquid directamente en tu plantilla, almacenas un objeto JSON en tu plantilla, y ese objeto JSON tiene la lista de secciones que luego puedes reordenar en tu editor de temas, y esto te permite crea secciones reordenables en todas tus plantillas, no solo en tu página de inicio. Si quieres conocer más sobre las plantillas JSON, profundizaré en ello en la Lección 11 de la clase anterior. Acabo de agregar un nuevo video en esa clase para ustedes chicos para que puedan aprender qué son las plantillas JSON y cómo usarlas. Dicho esto, ahora va a cambiar tu herramienta de desarrollo si quieres usar plantillas JSON. En el siguiente video, mencioné Slate. No te recomiendo usar Slate a menos que estés recogiendo un proyecto heredado. Pizarra está bien caducada ahora. Shopify terminó oficialmente el apoyo para Shopify Slate en enero de 2020. No te recomiendo que lo uses a menos que por supuesto, tengas que hacerlo porque estás asumiendo un proyecto heredado. Pero incluso entonces, recomendaría migrar fuera de Slate. En el último video, mencioné una herramienta llamada Theme Kit, pero también hay una nueva herramienta ahora llamada Shopify CLI, y es importante destacar Shopify CLI aquí porque es la herramienta que vas a tener que usar si quieres para usar plantillas JSON. la razón que sea, Theme Kit no se ha adaptado para trabajar con las nuevas plantillas JSON. Entonces si quieres usar plantillas JSON, vas a tener que usar Shopify CLI. Esos son los principales cambios a tener en cuenta antes de entrar a clase. Como dije, Liquid sigue siendo el mismo, JSON sigue siendo el mismo, JavaScript API todavía existe. El último cambio de Shopify es que los archivos de plantilla ahora pueden ser de Liquid o JSON. Nuevamente, para conocer más sobre Tienda Online 2.0, puedes echar un vistazo a los tres nuevos videos que agregué a la clase de desarrollo temático Shopify, mencioné el uno de los Esquemas JSON. Si quieres aprender sobre la CLI, eso está en la Lección 6, creo, así que la Lección 6 de mi clase anterior, y también hay una intro a la Tienda Online 2.0 en esa clase también. También tengo una lista de reproducción de Tienda Online 2.0 en YouTube que puedes consultar para más información sobre Tienda Online 2.0. Pero con eso dicho, volvamos a la clase y aprendamos cómo podemos programar en el desarrollo temático Shopify. 4. Resumen de la programación temática: Para la mayoría de esta clase sobre programación temática Shopify, vamos a estar hablando de líquido. Liquid es el lenguaje de plantillas de los temas de Shopify, puedes pensarlo como el lenguaje de programación back-end de tu tema Shopify, y por lo tanto tu tienda online. Por supuesto, podemos crear escaparates en línea que enlazan con Shopify como datos de otras maneras. Pero la mayoría de las veces cuando alguien está usando Shopify para albergar una tienda en línea, están usando este canal de ventas de tiendas en línea de la manera en que personalices el aspecto y la sensación de tu tienda en línea es a través de un tema. Deberías estar bien familiarizado con esto si necesitas aprender más sobre el desarrollo del tema, ¿qué es un tema, y dónde se sienta en el contexto de tu tienda? Tengo una serie en YouTube y una clase anterior sobre desarrollo de tema Shopify aquí en Skill Share. Entonces esta clase va a estar principalmente preocupada por la programación temática de Shopify, como su nombre indica, y así vamos a estar aprendiendo más sobre patentes de programación, así que vamos a estar trabajando mucho con Liquid. Dicho eso, la última clase, trabajamos directamente con el tema Debut, que es un tema ya construido que se ve así, si no te resulta familiar, es un tema ya construido. Realmente no necesitas entrar y construir características básicas, menos que necesites crear algo que ya no existe. Porque si miras el código de este tema, ya está bastante lleno, así que si miro alguna sección dada, verás que está bastante lleno de código. En esta clase, lo que voy a hacer, es en lugar de empezar desde el punto de un tema real, lo cual es más práctico si realmente estás haciendo desarrollo de tema Shopify, voy a empezar con un tema muy desnudo llamado New Theme. Este tema de aquí mismo se puede ver es muy desnudo huesos. El homepage no tiene nada, si hago clic en Catálogo, me lleva a la colección donde veo todos los productos, y actualmente está paginando por dos productos a la vez. Ten en cuenta que para que pruebes y realmente programes un tema de Shopify, vas a necesitar algunos datos de la tienda, así que ya he puesto estos datos ficticios. Tendrás que poner algunos productos de prueba también si quieres que se muestre algo. Si hago clic en Blog, puedes ver que he copiado sobre algunas entradas de blog de la página oficial de Shopify. Ahora bien, si quieres codificar, y usar este tema exacto, la forma en que generé este tema, y la razón por la que se llama el Nuevo Tema es, porque utilicé un comando en Theme Kit, llamado, Theme New, así que para aquellos de ustedes que no están familiarizados con Theme Kit, no vamos a entrar en gran detalle, tengo una lección de 20 minutos en mi última clase aquí en Desarrollo de tema Shopify, todo sobre cómo configurarlo y configurarlo, pero esto es lo que soy hablando de cuando hablo de Shopify Theme Kit. Es básicamente una herramienta de línea de comandos que puedes usar para descargar tu tema, y luego puedes editarlo con tu propia computadora. Te recomiendo encarecidamente si estás haciendo el desarrollo de tema de Shopify en serio, usas el Kit de temas. Pero como esta clase no se trata realmente de flujo de trabajo de desarrollo y solo de programación, voy a estar usando el editor de código en línea, así que voy a hacer clic en Editar código aquí, y lo vamos a editar directamente desde aquí. Ahora debo mencionar otro marco y herramienta que puedes usar para crear temas de Shopify, se llama pizarra, así que si escribo Shopify Slate en Google, puedes aprender más al respecto. Como puedes leer en esta página de GitHub, pizarra está en bajo mantenimiento. Slate es un proyecto que Shopify ha creado pero en realidad no están manteniendo en este momento, eso podría cambiar en el futuro, y la pizarra es mucho más técnica y difícil de configurar, así que no vamos a estar enfocados en pizarra en esta clase también. Simplemente pensé que sería una negligencia de mi parte no mencionar, y de nuevo, si quieres aprender más sobre pizarra, hay un video bonus en la clase anterior sobre desarrollo temático Shopify, ve a checarlo. Es el segundo último video. Ahora, deshaciéndome de esa pestaña allá y volviendo a nuestro Nuevo Tema aquí, la razón por la que quería empezar con el Nuevo Tema es que está tranquilo desnudo, así que podemos ver aquí no hay mucho código Liquid, solo hay 10 líneas en el archivo de índice, solo hay un diseño, y si bajamos aquí a secciones y fragmentos, están completamente vacíos. Sólo hay un archivo de idioma y un archivo CSS, y un archivo JavaScript. Esto es bastante bare-bones, y nos va a permitir aprender los conceptos de programación Liquid más fácilmente sin tener que tamizar todo un montón de HTML y CSS que existirían sobre un tema totalmente construido. Como mencioné anteriormente, puedes considerar Liquid el lenguaje de programación back-end de los temas de Shopify. A lo que me refiero con eso es que todo este código se genera en el lado del servidor, y luego viene a través del lado del cliente en HTML y CSS. Tan sólo para demostrar que para aquellos de ustedes que el concepto no es particularmente claro, miren todas estas etiquetas líquidas, estas no van a pasar por el front end, se genera todo en el lado del servidor, y luego se pasa por el front end como solo HTML y CSS, así que si hago clic en esta página, que me lleva a la plantilla de colección, e inspecciono lo que está pasando aquí, no veré ningún código Liquid en absoluto. El código Liquid está todo en el lado del servidor, así que la razón por la que eso es importante es, porque cualquier cosa que quiera hacer que quiera en el lado del cliente, aún se tiene que hacer con JavaScript, y eso se convierte en un tema de cómo accedemos a esos datos usando JavaScript, luego trabajar con ellos en el front-end sin tener que volver a cargar la página. Deberías estar familiarizado con la diferencia entre el lado del servidor y el lado del cliente, si no, echa un vistazo a mi primera clase en Skill Share, tengo un video sobre la diferencia entre front-end y back-end. Pero eso es sólo algo a tener en cuenta. Liquid cubre la mayor parte de Shopify la programación, pero claro, si quieres más características interactivas, si quieres evitar recargar la página, vas a tener que usar JavaScript. Volver al código, se puede ver un montón de etiquetas Liquid, y se puede ver que incluso comienzan con un corchete rizado y un signo de porcentaje, y terminan con un signo de porcentaje corchete rizado, o solo hay dos llaves rizadas, y la diferencia entre estas dos etiquetas es, esto es para lógica, y esto es para salida. A lo que me refiero con eso es, si solo tiro título de punto de colección en medio de estas etiquetas de llaves dobles, solo saldrá de salida el título de colección. No hay operaciones ni lógica ocurriendo en él, a menos que por supuesto, use un filtro que está aquí abajo. Obviamente, hay muchos conceptos y sintaxis dentro de Liquid, y para eso, he creado mi propia documentación para eso. Esta es mi entrada de blog que actualmente no está fuera todavía, pero estará fuera para cuando estés viendo este video, así que sigo trabajando en ello. Pero esencialmente, este va a ser el libro de texto o referencia para esta clase, así que es un artículo muy largo, cubro todos los objetos, todos los filtros, todas las etiquetas dentro de Liquid, así que para esta clase, Pensé en pasar por toda la teoría, pero pensé que va a ser mucho mejor para ti leer realmente sobre estas cosas, y entonces realmente podemos practicarlo y verlo en acción en nuestro tema, así que voy a crear estos patrones y desglosen esto, pero para referencia, vamos a usar este documento. Este artículo va a ser en christhefreelancer.com/shopify_liquid_guide, así que definitivamente abre eso, ten una lectura, no tienes que leer todo el asunto. Definitivamente te recomiendo leer el skim-read una vez que llegue a los objetos, pero esta va a ser tu referencia. Además, hay otros dos recursos a los que quiero vincularte, y en realidad están vinculados en el artículo, la documentación oficial real, por lo que en áreas donde se pone en profundidad de hablamos de la lista de atributos, la referencia Liquid todavía va a ser un gran lugar para que aprendas todo sobre los diferentes objetos, etiquetas, y filtros dentro de Liquid, por lo que tiene una increíble cantidad de detalle, por ejemplo, si entro en, digamos el objeto de producto, verás todos los atributos, y puedes aprender todo sobre ellos, por lo que este artículo no pretende reemplazar la documentación, pero es un buen punto de partida, y creo que un buena visión general de cómo funciona todo, y enlaza a la documentación numerosos lugares. También está la famosa Hoja de Trucos, así que abre eso en otra pestaña, y esto de aquí está todos los objetos, etiquetas, y filtros en la misma página, por ejemplo, si quisiera averiguar cómo conseguir el título de un producto, podría Control-F producto, y luego me encuentro este pequeño acordeón aquí para el objeto producto, me da todas las mismas cosas que estábamos mirando antes en la documentación, pero en este apretado acordeón, y luego me da un poco de información sobre eso, luego puedo dar click Más información y me llevará directamente de vuelta a la documentación. Estos son los recursos que recomiendo tener abierto, o tener listo mientras tomas esta clase, la Hoja de Trucos para consulta rápida, obtuve la documentación para cualquier cosa detallada, y por supuesto mi artículo como resumen de Shopify Liquid, y si estás luchando por entender, cuál es una de estas cosas, dónde puedes encontrar estos objetos, mi guía es lo que se pretende ayudar a eso. Como he escrito aquí al inicio del artículo, “Si bien la referencia líquida de Shopify y la famosa Hoja de Trucos son geniales, siento que faltan muchos detalles y por eso he decidido escribir mi propia documentación”. Entonces como mencioné, hay algunas cosas de las que Shopify realmente no habla, los diferentes tipos de objetos, y donde están disponibles en el alcance de tu tema Shopify, esa es la razón principal por la que escribí este artículo, se puede ver aquí, no sólo se puede aprender más sobre los objetos, sino que también se puede aprender, ¿sostienen múltiples objetos? ¿ Dónde se puede acceder a ellos? ¿ Se puede recorrer a través de ellos? Entonces solo una referencia extra ahí para ti. Si tienes alguna pregunta, preguntas específicas sobre Liquid, por favor revisa primero la entrada del blog, y luego si sigues luchando, definitivamente deja un comentario en el recuadro de discusión. Ahora, mencionamos JavaScript antes como la forma en que vamos a hacer cualquier cosa interactiva en nuestro tema de Shopify, y una forma en que Shopify nos permite acceder y manipular datos de nuestro tema de Shopify usando JavaScript es, a través de la API Ajax, lo que si busco, Shopify Ajax API, puedes aprender más al respecto aquí. Pero vamos a tener una lección completa o dos sobre la API Ajax. No te preocupes. Simplemente haciéndote consciente de que tenemos una API para hacer solicitud del lado del cliente también. El otro código que vas a escribir cuando estás programando shopify themes es CSS o SCSS. Deberías estar familiarizado con CSS. Si no estás familiarizado con SCSS, es una forma de SASS, que es básicamente un lenguaje de programación para CSS. No se requiere conocer la sintaxis de SASS. SASS es retrocompatible con CSS y de hecho, una vez que el código llega al front-end, siempre se compila a CSS de todos modos. Si quieres poner en CSS específicamente aquí, puedes hacerlo como normal pero, si sabes usar SASS, puedes usarlo también. Para aquellos de ustedes que sí saben usar SASS, una advertencia es que shopify usa una versión más antigua de SASS. Creo que es 3.3 o algo así. Simplemente significa que todas las características de la última versión de SASS no estarán disponibles para ti cuando estés desarrollando temas shopify. Si te encuentras con algo un poco raro, eso es romper, esa es sintaxis perfectamente fina, podría ser porque estás usando una versión más antigua de SASS. Otra advertencia ahí. No te preocupes. Si no sabes nada de SASS, CSS está totalmente bien. La sintaxis final a la que tendrás que acostumbrarte con temas shopify, claro que tenemos Liquid, tenemos Javascripts, y tenemos CSS/SCSS. Pero también verás aquí tenemos archivos JSON. Si abro settings_schema.json, esto es JavaScript Object Notación, aka JSON. Es solo una forma de presentar datos fácilmente. Imita la estructura de un objeto JavaScript pero tiene algunas diferencias. Puedes leer más sobre JSON en Google, pero es bastante sencillo de entender. Aquí mismo tenemos una matriz abriéndose, y luego dentro tenemos un objeto. Si quisiéramos escribir otro objeto aquí dentro, lo haríamos así y podemos darle claves y valores aquí. Todas las llaves necesitan ser con una cotización doble. Esa es una de las diferencias clave con JSON y cualquier cadena obviamente con comillas también a menos que estemos poniendo un número para el que no necesitamos cotizaciones. Está bien. Las áreas que verá JSON en estos archivos settings_schema.json, el archivo settings_ data.json y sus archivos de configuración regional, en.default.json. De nuevo, vamos a repasar JSON y cómo todo eso funciona con estos diversos archivos en un video posterior. No te preocupes por eso. Tan solo te da una visión general rápida antes de saltar a las cosas líquidas. Eso cubre más o menos todas las áreas de tu tema Shopify. Debes conocer sobre temas estructura de la última clase. Tenemos maquetación, plantillas, secciones y fragmentos para estructurar nuestro tema shopify. Después tenemos nuestros activos los cuales contienen el CSS y JavaScript, config que contiene datos y las configuraciones que podemos cambiar y locales para almacenar el idioma. Lo último que necesito mencionar en este video introductorio es algo que es muy importante para Shopify Theme Programming, y esa es la idea de plantillas y alcances. Si vamos y previsualizamos nuestro tema y navegamos a ciertas páginas, puedes ver nuestra estructura de plantillas en la estructura de URL. Ahora mismo estamos en el dominio raíz. No te confundas acerca de este pequeño atributo extra ahí. Pero estamos en el dominio raíz, que es la plantilla de índice. Si vamos a aquí, se puede ver que la URL cambia a colecciones/todos. Esto significa que estamos en la plantilla de colección. Si cambio la colección real que estamos viendo a una que tengo en mi tienda llamada colección destacada, puedes ver todo luce igual, Es solo el título de la colección que se muestra aquí y los productos reales que aparecen en la página es diferente. Todo esto está controlado por la plantilla de una colección. Si hago clic en alguno de estos productos, verás que obtenemos productos y luego el nombre del producto en forma de mango, hablaremos más de mangos más adelante, se agrega a la URL. Ahora sabemos dónde en la plantilla de producto. Si vuelvo a mi página de colección y hago clic en este producto, verás que aparece casi la misma manera que el otro producto porque utiliza la misma plantilla. Cómo se ve esto en nuestro código, entramos en nuestras plantillas aquí, y aquí está el código que se mostrará para cada página de colección individual. El referente a la colección aquí realmente depende de qué colección estés. Pero es completamente dinámico para que cualquier colección en la que estás se alimente aquí a través del objeto de colección y puedes manipular cualquier colección que se pase de la misma manera que lo harías con otra colección. Cuando estás en la página del producto, estás en la plantilla del producto. Es el mismo código para cada producto que se muestra en tu sitio web a menos que uses plantillas alternas, que hablamos en la última clase, pero esencialmente, todo lo que va a cambiar en la página es el contenido dinámico y que se trae aquí con este objeto de producto. Hablo de esto en el artículo que llamo plantillas alcance específico. Si nos desplazamos hacia abajo, hablo de los objetos a los que se puede acceder desde cualquier lugar de tu tema como objetos globales. Si conoces el nombre real de tu producto, puedes acceder a él desde cualquier parte de tu tema mediante el uso de su mango. Lo mismo se puede decir para páginas, blogs, artículos, imágenes. Imágenes es a través del nombre del archivo ahí. Pero luego se llega a plantillas variables específicas si se desplaza hacia abajo, plantilla objetos específicos más bien. Estos objetos están disponibles cuando estás en la plantilla respectiva. Si estás en la plantilla de producto, tienes acceso al objeto de producto y ese objeto de producto es cualquier producto que estés viendo, y puedes verlo desde la URL. Estamos mirando bolsa de piel negra. Cuando hacemos cosas con el objeto de producto en la plantilla de producto, estamos mirando esa bolsa de cuero negra. Todas las plantillas que tenemos aquí tienen sus propios objetos los cuales deben etiquetarse igual. En la plantilla de colección, tenemos acceso al objeto de colección. En la plantilla de blog tenemos acceso al objeto de blog. Plantillas aquí mismo, y esto es algo que vamos a meter más en la codificación de plantillas y diseños en el siguiente video, pero las plantillas son básicamente los diferentes grupos de páginas que aparecen en tu sitio web. Secciones muy potentes y fragmentos geniales para reutilizar código. Hablaremos de ellos en la lección después de la siguiente. Pero creo que ya he hablado largamente sobre Shopify Liquid. Nuevamente, todas estas son grandes referencias. No quiero pasar por todo el documento porque es enorme. Pero en el siguiente video, vamos a saltar directamente a codificar un patrón común en shopify y aprender a usar diseños alternativos. Te veré en el próximo. 5. Programación de disposiciones y plantillas: En esta lección nos vamos a centrar en la programación, diseño y los archivos de plantilla. El template en el que nos vamos a centrar es el template collection.liquid. El motivo por el que decidí usar este es porque los productos son centrales para cualquier tienda Shopify, o al menos deberían serlo, porque esencialmente se configura una tienda de comercio electrónico para vender productos. Los productos son el recurso más importante en tu tienda Shopify, lo más probable es. Una de las formas en que las personas pueden navegar por diferentes productos es a través de una colección. Podemos ver aquí un bucle bastante simple aquí para la plantilla de colección, pero todavía hay un poco pasando aquí. Lo que quiero hacer es simplificar esto y abordar esta línea por línea. En primer lugar, voy a previsualizar esto en una nueva pestaña. Podemos ir a aquí y podemos asegurarnos de que estamos en una plantilla de colección comprobando que las colecciones están en la URL. Ahora tenemos nuestro front end, cómo se ve con nuestra plantilla que estamos editando. Lo primero que voy a hacer es quitar la paginación y despojar esto a solo un bucle simple. La paginación es útil, pero no quiero confundirte directamente, así que vamos a quitarla por ahora. Veamos qué pasa cuando hacemos eso. Si actualizo la página, verás ahora todos los productos de nuestra tienda se muestran en una sola página. Por lo general no quieres hacer eso porque podrías tener cientos o miles de productos y eso tardaría una eternidad en cargar una página. La paginación es muy útil, solo quitarla por el bien de la simplicidad. Ahora para que sea aún más sencillo, voy a quitar ese código y bajarlo aún más. Acabamos de conseguir este bucle ahora y echemos un vistazo a cómo se ve eso en el front end. Refrescando la página. Ya puedes ver ahora solo tenemos una lista de productos con un enlace para verlos. Si hago clic en la primera, zapatillas impresionantes, ahora estoy en la plantilla de producto mirando este producto, zapatillas impresionantes. Pero estamos enfocados en este bucle de colecciones aquí. Vamos a descomponer lo que tenemos pasando aquí. En líquido, como ya he mencionado antes, tenemos dos tipos de etiquetas. En realidad hay tres, y podemos poner en un guión aquí y aquí y eso solo reduce el espacio en blanco, realidad no cambia la funcionalidad en absoluto. No me preocuparé demasiado por eso. Pero esencialmente sólo tenemos dos tipos diferentes de etiquetas, la etiqueta de salida y la etiqueta lógica. Cuando sólo queremos sacar de salida algo a la página, sólo usamos la etiqueta de salida. En este momento estamos tomando un atributo sobre el objeto de colección de título. Aquí puedes ver, este es el título de las colecciones. Ahora es un poco diferente con la colección vieja porque es una colección auto generada por Shopify pero si vamos a una colección real que creé, colección destacada, ya puedes ver que el título de esa colección está aquí mismo. Si fuera a volver a mi back end, cambiar eso, lo cambiaría aquí y en cualquier otro lugar nos referimos a colección.title. Entonces entrando en un bucle ahora, lo que estoy haciendo es tomar el atributo de productos de la colección, que me da acceso a todos los productos dentro esa colección y estoy haciendo un bucle a través de ellos usando la palabra producto como mi gancho con el fin de acceder a los diferentes atributos de ese producto en particular. Esta palabra podría ser cualquier palabra que quisiera que fuera, pero producto tiene sentido. Hace que sea más legible. Para producto en colección.productos, vamos a hacer esto por cada producto. Ahora, algo que existe en for loops en Liquid, que no sé si existe en cualquier otro idioma, es que en realidad se puede tener una declaración else. Esto es si collection.products está vacío, no lo recorrerá y en su lugar dará salida a esto. El más en esta instancia es para cuando los objetos por los que estás buceando estén vacíos. Es sólo una taquigrafía para si iba a poner aquí una declaración if, comprobando si la longitud de esto era mayor que cero, y entonces si no apagando eso, podemos ahorrarnos algún código y escribirlo de esta manera. Por cada producto en colección.productos vamos a iniciar un div y dentro de este div vamos a tener un enlace. Para la dirección real de ese enlace, vamos a poner en el product.url, por lo que el enlace al producto real. Entonces tenemos esta pipa aquí. Esta tubería de aquí es lo que define un filtro en Liquid. Podemos quitar esto, va a funcionar bastante igual de bien sin eso. En primer lugar, veámoslo con ese filtro. Si voy a inspeccionar aquí y miro la URL, se puede ver que la URL tiene featured-collection y luego en los extremos, productos/awesome-sneakers. Pero si eliminamos ese código y golpeamos Guardar, ese filtro no aplicará y la URL que obtendremos en su lugar es solo productos/awesome-sneakers. Este filtro que tenemos aquí dentro de la colección, simplemente hace que la URL del producto se agregue a la URL en la que estamos actualmente para esta colección en lugar de recortar la colección. Eso es útil para si queremos tener lógica en la plantilla de producto y podemos hacer referencia a la colección a la que navegamos porque un producto podría formar parte de muchas colecciones diferentes. Volviendo a la página de colección aquí, la siguiente parte, muy sencillo. Acabamos de emitir el título del producto. Se puede ver que aquí, tenemos un enlace y dentro está el título del producto y el a href es el enlace a ese producto. Cosas muy sencillas. Añadamos en la siguiente línea que teníamos aquí. Voy a sumar todos ellos, eliminarlos todos excepto uno, y pegaré Save en eso. Lo que tenemos aquí es que ahora estamos sacando el precio también. Producto muy básico.precio y estamos usando otro filtro llamado dinero, que lo formatea en un bonito formato de moneda. Si fuera a volver a quitar ese filtro, ya verás que seguirá funcionando. Vamos a refrescar la página. Obtendrás el precio de todos estos productos viniendo en la forma de número puro. En Shopify, la forma numérica pura de un precio incluye los centavos. Se puede ver aquí esto va a ser de 8 mil centavos, esto son 11 mil centavos así sucesivamente, así sucesivamente. Obviamente eso no va a quedar tan bien para el usuario final así que lo que solemos hacer es filtrarlo con el filtro de dinero y eso va a transformar ese número en un formato de moneda mucho más bonito formateado. Ahora podemos ver que 8 mil centavos se convierten en 80 dólares y tenemos esos decimales. Podemos usar otros filtros de dinero para filtrar los decimales si queremos, pero el dinero es el estándar. Añadamos en la siguiente línea y eliminemos la línea final. Ahora hemos agregado en una declaración a menos. El tag a menos que sea básicamente lo opuesto a la etiqueta if. Se lee de una manera diferente. A menos que el producto esté disponible, vamos a hacer esto. Podemos fácilmente transformar esto en una declaración if, solo tenemos que cambiar la condición aquí. Creo que en esta instancia tiene más sentido que en términos de entender el código para hacer de esta una declaración if. Voy a quitar las palabras a menos que y lo que necesitamos hacer aquí, si el producto disponible es falso, o también podríamos hacer si el producto disponible no es cierto. Hagamos sólo falso. Tenemos que hacer para comparar signos dobles iguales o triples signos iguales, porque un solo signo igual es para asignación, no para comparación. Recuerden a esos chicos, ese es un error básico bastante común de principiante. Creo que esto lee mucho más bonito si el producto disponible es falso, ya que en el producto no está disponible, queremos mostrar agotado, y esto funcionará exactamente de la misma manera. Si voy a aquí, verás que ninguno de estos realmente agotado así que nada va a aparecer de todos modos. Pero si vuelvo a la vieja colección, he montado un producto que está agotado. Acabo de llamarlo producto sin imagen y sin stock y se puede ver aquí está agotado. Si voy y vuelvo a poner esto a cómo era antes y golpeo Save en eso, ya verás que obtenemos exactamente el mismo resultado. A menos que sea solo una forma de hacer que tu código sea más legible. En este caso, creo que tiene más sentido usar si pero han decidido usar a menos que aquí. Los ahorra de tener que escribir un operador de comparación. Supongo que por eso lo hicieron. La última línea dentro de este bucle es esta etiqueta de enlace. Estamos nuevamente creando un enlace con la misma etiqueta y filtro que aquí arriba. Esto va a enlazar a la URL del producto, el producto real. Vamos a incluir la imagen. El verdadero que hay que mirar aquí es la línea ocho, porque estamos construyendo aquí una etiqueta de imagen con algunos atributos y algunos filtros. Voy a golpear “Save” y rápidamente veremos cómo se ve eso. Ahora ya verás tenemos las imágenes incluidas aquí como antes. Vamos a descomponerlo. Quitemos primero este filtro aquí y veamos qué pasa. Ahora solo cargamos el producto fuente de imagen destacada en esta etiqueta fuente. La imagen también es un objeto. Por eso podemos encadenar otro punto aquí para obtener el src real de la imagen. Aquí puedes ver que estamos obteniendo un atributo diferente de la imagen aquí, la etiqueta alt, pero llegaremos a eso en tan solo un segundo. Si guardo y vuelvo a la página de colección. Ahora mismo verás que todos los enlaces están rotos. Si inspecciono uno de ellos, verás que tenemos una URL relativa, pero no va a funcionar en Shopify. Lo que necesitamos hacer pasar esa imagen a través de un filtro. El filtro que teníamos es la URL de la imagen. Aquí se puede ver un parámetro de grande, pero podemos eliminar ese parámetro y simplemente tener la etiqueta URL de imagen sin parámetro. Si volvemos, refresca la página, verás que aparecen imágenes, pero todas aparecen con un ancho de 100 píxeles. Ese es el comportamiento por defecto. Pero en realidad podemos cambiar esto por lo que quieras. A lo mejor queremos que sean 200 por 200. Podemos hacer algo así, o si queremos que sea del mismo ancho y altura. En realidad no necesitamos poner el valor después de x Podemos simplemente presionar “Guardar” en eso. Ahora deberíamos ver que nuestra imagen está siendo el doble de grande. Ahí vas. Creo que ese es un terreno medio bastante bueno entre esas imágenes realmente grandes y las que salen por defecto, que es un 100. Ahora esto es realmente útil tener esto ya que puedes poner una imagen realmente grande en tu panel de Shopify, pero mientras escribas código que limite el tamaño de esa imagen, entonces así es como de grande se cargará la imagen en el navegador. A lo que me refiero con eso es si realmente vamos y hacemos click en abrir imagen en nueva pestaña. Si la imagen original que subimos era de 1.000 píxeles de ancho o de 200 píxeles de ancho. Sólo se va a servir de los servidores de Shopify como una imagen de 200 píxeles por 200 píxeles. Eso es bueno para la optimización de imágenes. Entonces regla general aquí, si estás incluyendo una imagen, usa siempre parámetro aquí y especifica las dimensiones máximas que crees que esa imagen necesita ser. Porque no tiene sentido servir a una imagen que es mucho más grande de lo que la necesitas. Esta etiqueta final es para el atributo alt de tu imagen. Debe estar familiarizado con los atributos alt. Describen la imagen para robots y personas que realmente pueden ver la imagen. Aquí puedes ver alt zapatillas impresionantes Si quito el filtro de escape aquí, probablemente no te notaron una diferencia. Volver atrás, refresca la página. Ya verás que todavía obtenemos el mismo resultado. Pero lo que hace el filtro de escape es si hay algún HTML en este atributo, se asegura de escapar de él. Esto es algo que te puede atrapar en cualquier momento con la programación temática de Shopify y desarrollo de temas Shopify es HTML que viene de un objeto en Shopify, siendo inyectado en tu código y rompiendo todo. Sólo un consejo si ves algo realmente raro, estás páginas enteras rompiendo y no escribiste ningún código para que eso sucediera. El código podría en realidad estar viniendo de un valor que estás trayendo a través y líquido. Buena práctica sólo para estar a salvo, escapar de ella. Ahora no creo que vaya a haber HTML en tu etiqueta alt típicamente. Pero solo una opción segura ahí. No quieres que llegue ningún HTML en este atributo alt. Ahora bien, no es estilo muy bien. Necesitamos seguir peinando con CSS. Pero tenemos los puntos mayores llegando. Tenemos título, el precio y la imagen, y tanto la imagen como el enlace del título al producto real para que vayamos a comprobarlo. Volvamos a la página de colección. Ahora sólo necesitamos introducir de nuevo el objeto paginate. Por eso, porque no sé de arriba mi cabeza cómo hacerlo porque ya está escrito para nosotros la mayor parte del tiempo en Shopify. Voy a acceder al final de los docs. Esta es una buena oportunidad para seguir también porque esto es lo que vas a estar haciendo también. Si solo escribo líquido Shopify, lo que busco es la referencia líquida, digamos aquí mismo. ¿Qué buscamos? Estamos buscando la etiqueta paginate. Voy a entrar en etiquetas. Creo que estaría cerrado como etiqueta temática, y lo es. Puedes hacer click aquí, y ahí vas. Todo lo que tienes que hacer es envolver estas etiquetas alrededor de un for-loop y obtienes paginación. Bastante simple. La paginación es un dolor en el culo para mucha otra programación, pero Shopify lo hace realmente fácil para nosotros. Estamos en la plantilla de colección por lo que solo podemos copiar este ejemplo. Puedo volver aquí. Creo que cinco por página es un número todo correcto para nosotros. Podemos codificar la etiqueta final de mri también aquí y paginar. Voy a pegarle ahorrar en eso. Vuelve a entrar aquí, actualiza la página y verás que solo aparecen cinco elementos por página. Ahora, lo que no nos da es la navegación para realmente paginar. Porque nos falta una pieza de código desde el inicio de aquí. Para comprobar que realmente podemos ir y dar click aquí y mirar versiones anteriores. Echemos un vistazo al original antes de realizar algún cambio. Podemos ver aquí, tenemos este condicional. Yo sólo voy a copiar esto y volver a nuestra corriente. Al final del for-loop, voy a pegar ese código que tomé del código original. Ahora podemos acceder al objeto paginate, que está disponible dentro de la etiqueta paginate. Este es un objeto auxiliar que Shopify nos da para que realmente podamos comprobar cuántas páginas hay en esta paginación. Se revisan las páginas de códigos de atributo y nosotros comprobamos para ver si hay más de una página. Ahora podemos usar nuevamente el objeto paginate con un filtro fácil de usar, que transformará el objeto paginate en una paginación predeterminada. Aquí está pasando mucha magia detrás de bambalinas. Si deseas personalizar tu paginación, puedes acceder a los atributos de este objeto paginate y manipularlos como quieras. Pero para nuestros propósitos, sólo vamos a usar la paginación predeterminada. Refresco la página aquí después de guardar, y ahora puedes ver que tenemos esta paginación predeterminada. lo general, lo que harías, porque probablemente no estarías usando la paginación predeterminada en un tema adecuado porque te gustaría lucir bien y de acuerdo a tu estilo. Normalmente crearías un fragmento de paginación e incluirlo aquí. En el siguiente video, estaremos hablando de secciones y fragmentos. No mucho para aprender sobre los fragmentos, sino para terminar esta lección, necesito hablarles de los diseños. Podríamos haber empezado con un diseño, pero quería empezar con el archivo de 18 líneas en lugar de éste que es de 43 líneas. Para aquellos de ustedes que necesitan un poco de recapitulación sobre lo que es un layout, esto es lo que se sirve como envoltorio en todas sus plantillas. A menos que especifiques un diseño alternativo en una plantilla, este será el contenedor que recorra cada plantilla de tu tienda. Asumiendo que solo tenemos un diseño aquí, y está usando el nombre predeterminado theme.liquid, este va a ser el envoltorio que envuelve cada plantilla, y el punto que envuelve está justo aquí. Esta etiqueta especial, content_for_layout es donde se carga tu plantilla. Yo quiero mostrarles eso en la práctica ahora mismo. Podemos ver que esta etiqueta principal viene en el archivo de diseño, y luego dentro de eso, estamos cargando la plantilla. Vamos a volver a nuestra plantilla de colección, y veremos que empieza con un h1. Si miro aquí e inspecciono el código, ya tengo la inspect abierta, pero ya verás tenemos la h1 de la plantilla de colecciones, y luego tenemos principal. Todo lo de arriba aquí va a ser igual aparte del contenido dinámico que se carga en cada página. Si voy a la página del blog, verás la cabeza y el inicio del cuerpo es el mismo, y siempre tienes este principal aquí, luego dentro de la principal, tienes todo el código de la plantilla. Volviendo a la página de colecciones. Content_for_layout, ahí es donde se carga la plantilla de la página que estás viendo actualmente. Pero claro, tenemos todo este otro contenido a su alrededor. Aquí mismo hay una navegación. Aquí mismo hay un enlace a un carrito. Si las cuentas de cliente están habilitadas y un cliente está conectado, mostraremos un enlace para acceder a sus cuentas. Si no están iniciadas, pero las cuentas están habilitadas, les daremos un enlace de inicio de sesión. Vamos a trasladar eso a su propia sección en el siguiente video. Hay una muy buena razón para eso, pero eso conforma toda la sección del cuerpo de tu maquetación. Entonces tienes la sección de cabeza, cual solo necesitas preocuparte si vas a estar incluyendo activos extra. Se pueden ver todas las cosas estándar que tendrías en un cabezal HTML. El título, meta tags, estos objetos para SEO. El título de la página es cualquiera que sea el título de la página, no es lo mismo que page.title porque no es una página de Shopify que las que personalizarías aquí, es cualquiera que sea la página en la que estés, el sitio web, eso es el título de la página. Entonces page_description es tu descripción SEO, agregas tus datos SEO aquí y luego tienes esta etiqueta especial llamada content_for_header. Como dice aquí, esto es simplemente un gancho de encabezado para plugins. Este es un punto que plugins y yo creo código que pones o preferencias que pones aquí. Si entro en preferencias, básicamente cualquier cosa que quieras añadirle a la cabeza dinámicamente, se insertará donde está esa etiqueta. Creo que algo de esto, si lo agregas en un Pixel o en un Google Analytics, y el lugar donde lo insertaría en la cabeza está justo aquí, pero no tienes que editar eso en absoluto. De hecho, creo que el editor va a error, si intentas cambiar eso, eso es lo que es content_for_header. No es necesario cambiarlo, solo déjalo donde está. Entonces aquí mismo es cuando traemos nuestros activos. Aquí tenemos algunos filtros, y solo te mostraré lo que hacen estos rápidamente. Tenemos esta aplicación.scss.css y si solo generamos eso en el diseño por sí mismo, número uno romperá cualquier estilo que creamos que no lo hicimos, pero verás aquí, solo sale literalmente ese texto a la pantalla. Si creas una etiqueta de salida y simplemente pones literalmente una cadena ahí, básicamente no estás haciendo nada. Podrías quitar esto de cualquier lado y será el mismo resultado. Pero lo que estamos haciendo aquí es que estamos tomando eso y lo estamos filtrando, estamos encontrando la URL completa del activo de ese activo. Hagamos eso primero. Refresca la página y ahora puedes ver esto se convierte en una URL completa generada por el servidor de Shopify que te vinculará al activo. Entonces, por último, con el último filtro ahí, transforma esa URL en una etiqueta de hoja de estilo totalmente construida. Si presiono guardar, refresca la página, verás que la URL no aparece ahora porque está encapsulada en una etiqueta HTML. Si miro aquí abajo, hay un montón de etiquetas generadas ahí dentro. Se puede ver que uno ahora lo trae a nuestro proyecto para una etiqueta de enlace y no solo lo arroja en la pantalla. En realidad podemos simplemente copiar esa palabra HTML por palabra, ponerla aquí así. Entonces si quitamos eso, que genera la etiqueta de hoja de estilo y simplemente reemplazamos la href con ese valor, deberíamos obtener el mismo resultado. Ahora deberíamos verlo aparecer dos veces, en realidad. Por supuesto, porque le quité la etiqueta de la hoja de estilo de esta. Este solo está mostrando la URL del activo y éste es el enlace totalmente formado al activo. Lo que acabo de hacer eso con esta línea es esencialmente lo mismo que si usara el filtro de etiquetas de hoja de estilo allí. No es importante que entiendas en cuanto a editar esto porque probablemente no quieras tocar esto, pero es importante saber cómo funciona no estás confundido cuando dices, por ejemplo, que quieres incluir otra hoja de estilo solo tendrías que duplicar esto, ponerlo debajo, y entonces tal vez tu siguiente archivo se llame simplemente styles.css. Es así como incluirías un nuevo activo que incluiste aquí en tu tema de Shopify en todas partes que este layout esté incluido. Pero en términos de transformar eso en una URL de activo completamente en toda regla y luego crear una etiqueta fuera de ella, realmente no necesitas meterte con ella. Aquí sucede lo mismo con JavaScript, donde tomar el nombre del archivo, crear una URL de activo totalmente en toda regla desde Shopify y luego transformar eso en una etiqueta de script. Voy a guardar eso. Esto es más bien una cosa estructuradora temática. Pero solo para demostrarte, te voy a mostrar cómo hacer una plantilla alterna. Aquí podemos crear, solo lo voy a llamar alterna. Puedes llamarlo como quieras. Solo eliminemos todo este contenido de navegación y golpeemos guardar. Ahora tenemos este layout alternativo que podemos usar. Cómo haríamos realmente que ese diseño se aplicara a una plantilla determinada es que podemos ir a la línea de inicio de cualquier plantilla y usar la etiqueta de diseño. En lugar de teme.liquid, ahora va a ser tema alterno y si pongo esa etiqueta al inicio de nuestra plantilla, refresca la página, ya verás que no hay navegación. Está bien. Si lo quito y golpeo guardar, ahora verás que tenemos el mismo tema que antes. La mayoría de las veces, no es importante tener un segundo diseño, pero está ahí como opción. Simplemente voy a eliminar esa porque no queremos tener que hacer cambios múltiples diseños de tema para este proyecto y para esta clase, realmente solo necesitamos un archivo de diseño, pero la opción está ahí para crear diferentes diseños. A lo mejor quieres una página con menos contenido en ella. A lo mejor no queremos el encabezado o pie de página, por ejemplo. Podemos eliminar eso de un layout alternativo y luego usar ese layout en la plantilla. Esperemos que eso haya dejado muy claro lo que está pasando en una plantilla básica como aquí para la colección y tu archivo de diseño. Con lo que quiero dejarles antes de entrar en secciones y fragmentos, es esta parte de mi documentación, que es objetos específicos de la plantilla. Habló un poco al respecto en el video anterior. Pero solo quiero asegurarme de que entiendas plenamente esto. Empezamos con el archivo de diseño y luego la plantilla para la página donde actualmente mirando se carga dentro de este contenedor aquí porque hemos puesto esta etiqueta content_for_layout aquí. Ahora tenemos acceso a los objetos particulares que va con esa plantilla. Lo que quiero que entiendas aquí es cuando estamos en la plantilla de colección, no tenemos acceso a un producto porque no tenemos ningún concepto de qué producto estamos buscando. A menos que recorremos una colección y accedamos a sus productos, entonces podemos afectar a un producto en particular desde dentro de un bucle. Lo mismo se puede decir para si estamos en un blog. Cuando estamos en una plantilla de blog, estamos viendo un blog específico. Podemos usar el objeto del blog, pero en realidad no podemos acceder a un artículo a menos que recorremos los artículos de ese blog. Lo mismo con las colecciones y los productos. Pero entonces cuando entramos al producto o a la página del artículo, ya hemos visto la página del producto o la plantilla del producto. Echemos un vistazo a la plantilla de artículo. Podemos acceder al objeto artículo específicamente porque esta es la plantilla que se carga cuando se está viendo un artículo. Yo sólo quería dejar eso súper claro. Si aún no tiene sentido, dame un comentario en el cuadro de discusión de abajo, pero eso es el alcance de la plantilla y los objetos específicos de plantillas. Por eso las plantillas son realmente importantes. Pero al mismo tiempo, es posible que no quieras incluir mucho código en tu plantilla. Quizás quieras enlazar directamente a una sección y hay una muy buena razón para eso, que entraremos en el siguiente video. 6. Secciones, fragmentos y locales: En esta lección, estaremos hablando de secciones y fragmentos. Simppets es bastante básico y fácil de entender. Básicamente, si ponemos código en un fragmento, podemos incluirlo en múltiples lugares de nuestro tema. Nos permite reutilizar código, pero también organizar mejor nuestro código. Las secciones por otro lado son un poco más inteligentes y veremos por qué eso está en esta lección. Si volvemos a nuestro tema. disposición líquida, podemos ver una necesidad realmente obvia de una sección aquí. Es decir, tenemos todo este contenido de encabezado dentro de nuestro diseño. Ahora lo que normalmente harías en un tema de Shopify es tener una sección de encabezado y pie de página. Lo que voy a hacer es que voy a cortar todo esto para que eso esté en mi portapapeles. No quiero perderlo, y luego voy a sustituir eso por una llamada a una sección. Ir a escribir encabezado de sección. Ahora cuando golpee save, va a enlazar a esa sección que aún no hemos creado. Vamos a entrar, crear una sección con el mismo nombre, cabecera. El editor agregará automáticamente la extensión de punto líquido para nosotros, por lo que no necesitamos hacer eso, y además agrega automáticamente en un esquema, hoja de estilo y etiquetas JavaScript, muy útil. De acuerdo, nos meteremos en los esquemas en profundidad en la siguiente lección pero por ahora, lo que voy a hacer es pegar ese líquido y código HTML directamente aquí. Si golpeo guardar, refresca cualquier página porque cada página de un tema ahora mismo usa el mismo diseño, veremos que nada ha cambiado, ¿de acuerdo? En realidad algo ha cambiado, y es que ahora tenemos todo esto encapsulado en una etiqueta div generada por Shopify. Le da un ID de Shopify sección dash, y luego el nombre de la sección. También le da una clase de sección Shopify. Vamos a crear otra sección, y vamos a llamarla pie de página. Después del contenido principal, generalmente tenemos un pie de página y podemos poner eso en su propia sección. Si guardo eso, enlazará a un pie de página que aún no existe, por lo que necesitamos crearlo. Crearé este archivo footer.liquid en mis secciones. Subiré aquí y solo abramos una etiqueta de pie de página. Cierra la etiqueta de pie de página, y tal vez sólo pon algo de información de copyright allí copyright, Christopher Dodd. Hay una cosa que me olvidé de hacer y es nombrar realmente la sección en el esquema. Queremos cambiar esto a pie de página, y luego en nuestro encabezado, queremos que el nombre de la sección sea encabezado. Esto es lo que va a aparecer en el personalizador. Como dije, entraremos más en esquemas, pero básicamente todo esto es para el personalizador. Si vuelvo a alguna página porque todos usan el mismo diseño, podemos ver que tenemos una etiqueta similar generada para el pie de página también. Shopify dash, seccion, dash y el nombre de la sección que es pie de página, y por supuesto la clase Shopify sección. Ahora puedes ver aquí abajo, no está muy bien formateado, pero dentro tienes la etiqueta de pie de página con copyright Christopher Dodd. Ahora lo que quiero mostrarles es cómo se ve eso en el personalizador. Esta es una buena representación visual de lo que está pasando aquí. Todo lo que hice ahí fue hacer clic derecho en personalizar tema para ir al personalizador para este tema. Ahora verás en la página de inicio tenemos encabezado y pie de página. Estas son las secciones a medida que aparecen promulgan personalizador de temas. Si vamos a cualquier página, cualquier plantilla, porque estamos usando el mismo archivo de diseño, obtendremos encabezado y pie de página en cada página. Volver a la página de inicio. En realidad voy a eliminar pie de página de nuestro archivo teme.liquid. Solo para mostrarte cómo eso aparecería en el personalizador. Si voy al personalizador, actualiza la página, entonces sólo vemos el encabezado. Esto es algo que cubrí en la última clase así que eso debería ser solo una recapitulación para la mayoría de ustedes. Pero como se puede ver lo que este tema realmente lleva, hemos creado todas las secciones que existen en este tema. Si vamos a cualquier otra página, todavía no hay sección entre encabezado y pie de página para este tema. Si vamos a la configuración del tema, sólo tenemos la lista de checkout predeterminada de personalizaciones aquí. esto también podemos sumar. Aquí puedes ver la versión oficial de esto. Es el kit de tema, tema de plantilla. Nuevamente, este es solo el que se obtiene al ejecutar tema nuevo en kit de tema. De acuerdo, así que para crear nuestra siguiente sección, una cosa que podemos modificar, y esto es algo que es bastante común es tomar todo el código dentro de una plantilla y mover eso a una sección. Ahora eso podría sonar un poco raro al principio, pero vamos a explicar por qué eso es en tan solo un segundo. Voy a llamar a esta plantilla de colección de sección porque eso es esencialmente lo que es. Entonces voy a crear esa sección. Ahora y aquí tenemos un esquema, y solo voy a pegar exactamente el mismo código que teníamos en nuestra plantilla de colección. Voy a llamar a esta plantilla de colección en el esquema real. Ese es el nombre que aparecerá en el personalizador. Si vamos a nuestra página de colección, ahora veremos plantilla de colección, que es el nombre que definimos en el esquema para ser una sección aquí dentro. Como notan, porque no tenemos configuraciones en nuestro esquema, aquí dice no hay contenido ni configuraciones. En realidad podemos personalizar esto. El motivo por el que tendríamos un archivo de plantilla de colección básicamente vacío y un enlace directo a una sección con todo el código para esa plantilla ahí, es porque ahora podemos personalizarlo usando el personalizador. Si acabamos de dejar ese código aquí, se sentaría fuera de una sección y entonces no tendríamos acceso a un esquema para el que podamos editar con. Eso no es necesariamente cierto en el sentido de que hay un esquema de configuración para el tema en su conjunto, pero queremos segmentar los ajustes de esta plantilla en particular. Queremos trasladarlo a su propia sección. De acuerdo, ahora mismo no hemos hecho nada realmente porque no hemos establecido ninguna configuración. A lo mejor quiero crear un ajuste aquí y eso lo hacemos en el objeto de configuración. Qué es algo que podría querer personalizar como usuario sobre esta página. Bueno, a lo mejor quiero controlar la paginación. Recuerda cuando digo usuario, estoy hablando del administrador de la tienda que está usando este personalizador en este caso. A lo mejor quiero controlar la paginación. Lo que voy a hacer es abrir un objeto, y dentro de este objeto voy a estar escribiendo, todo esto es formato JSON por cierto, así que vamos a estar abriendo una cita doble, y lo que tenemos que hacer aquí es insertar un insumo. El lugar donde puedes aprender más sobre eso es si solo Google Shopify ajustes de entrada. Creo que es en configurar los ajustes del tema aquí mismo. Si busco ajustes de entrada, aquí podemos ver los ajustes básicos de entrada. Texto por ejemplo, este es el ajuste de entrada que pondríamos. También podemos poner como un recolector de imágenes, podemos poner en un conjunto de botones de radio, un desplegable, todas las cosas, casilla de verificación. Para la paginación, creo que tiene sentido usar un deslizador de rango. Aparecerá así. El motivo por el que un deslizador de rango sería bueno en esta instancia, es porque queremos restringir la entrada del usuario a algo razonable. No queremos paginar menos que decir dos, y no queremos paginar más que digamos 25. De lo contrario, tardará demasiado en cargar la página. Lo que podemos hacer es que podemos copiar este ejemplo aquí mismo, volver a nuestro código. ¿ Qué tabulador fue esa? De acuerdo, aquí vamos. En lugar de escribir esta palabra por palabra, sólo voy a copiarla y pegarla. Ahora tenemos un objeto que representa nuestro escenario. El primero que necesitamos es el tipo, y esto define que esto va a ser una entrada de rango. El ID es lo que podemos usar para acceder a él en líquido. Tenemos que cambiar esto por algo que tenga más sentido. Yo sólo lo voy a llamar paginación. Entonces aquí mismo, necesitamos insertar un valor mínimo. Porque esto es un número, voy a deshacerme de las comillas dobles y poner dentro digamos cinco. El máximo por el que pueden paginar, voy a decir es 25. El paso es el incremento que pueden utilizar. Yo solo quiero que sean capaces de hacer una selección en incrementos de cinco pasos. Unidades, podemos poner aquí como productos por página, pero desafortunadamente este atributo unitario tiene un límite de tres caracteres. Entonces simplemente no voy a usar la unidad en esta instancia. Etiqueta es lo que se muestra al usuario. Vamos a escribir aquí productos por página, y el valor predeterminado que voy a hacer es cinco. Si golpeo guardar aquí, no hay errores, afortunadamente, y luego puedo refrescar la página. Entonces una vez que entre en esa sección, realidad podemos encontrar aquí nuestro slider de rango y actualizarlo. Ahora por supuesto, hemos creado esta selección, pero en realidad no hemos hecho nada con ella. Vamos a necesitar volver a nuestra sección, y hacer referencia a este valor de configuración por su ID. En lugar de aquí donde dice por cinco, lo que voy a hacer es hacer referencia a esa identificación. El modo en que hacemos eso es a través del objeto de sección. Debido a que estamos en una sección, podemos acceder a los datos dentro un esquema de una sección a través de este objeto de sección. Empiezo por agarrar ese objeto de sección, y ahora esencialmente tengo acceso a esto y queremos entrar aquí. Lo que voy a hacer, put.settings. Ahora, tengo acceso a todos los ajustes, y dentro quiero acceder a éste, que el ID es paginación. Voy a escribir paginación, y eso debería ser todo lo que necesitamos para que esto funcione. Volviendo atrás, refrescando la página. Si entro en plantilla de colección ahora, y lo configuro en 10, debería ser 10 apareciendo por página. Esta colección solo cuenta con unos 10 productos. Vamos a la vieja colección. Ahora estamos en una colección que cuenta con más de 10 productos. Se puede ver aquí, está en mora a cinco, 1, 2, 3, 4, 5, pero puedo cambiarlo a 10, pulsa “Guardar”. Se actualizará la página, y ahora paginaremos por 10 en lugar de cinco. Entonces 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Esa es una forma en que podemos hacer que nuestra plantilla de colección sea personalizable, mediante el uso de una sección y dándole un ajuste de entrada en su esquema. En cuanto a esta sección, la plantilla de colección, la voy a dejar ahí, porque vamos a hablar más de esquemas, y añadir algunas opciones más en videos posteriores. Pero lo que quiero mostrarles es cómo podemos crear una lista dinámica de secciones en nuestra página de inicio, utilizando el contenido especial de la etiqueta para el índice. Ahora primero que nada, vamos a tener que crear una sección que quisiéramos poner en la página de inicio. Una buena idea, algo que es bastante común en muchos temas. Sólo vamos a la página de inicio, para que podamos echar un vistazo. Actualmente no hay nada aquí, entonces tal vez sería bueno tener una fila de productos apareciendo como una colección destacada en la página de inicio. De hecho, creemos esa sección ahora. Al volver a nuestro editor, voy a crear una nueva sección, y la voy a llamar featured-collection. El punto de extensión líquida se agrega automáticamente, por supuesto. Lo primero que voy a querer hacer es cambiar el nombre de la sección a “Colección Destacada”. Ahora con esta sección, no lo vamos a incluir específicamente en ninguna plantilla, o diseño como lo hemos hecho aquí. Pero vamos a poder incluirlo en la página de inicio, a través de este contenido dinámico para etiqueta de índice. Ya verás a qué me refiero en tan solo un segundo. Lo que voy a hacer es que voy a montar un bucle. Copiemos el bucle desde aquí, para nuestra colección destacada. Lo que tenemos que hacer porque ya no vamos a estar colocando esto en la plantilla de colección, es especificar una colección específica, y ahí es donde ahora vemos la etiqueta de asignación. Asignar nos permite crear nuestras propias variables. Lo que voy a hacer aquí, es seleccionar qué colección quiero ser los objetos de colección para esto. De nuevo, ya no estamos en la plantilla de colección. No sabemos qué colección recorrer. Vamos a especificar esto y podemos hacer eso usando el objeto de colecciones globales, y accediendo a su mango. Voy a acceder a la Colección Destacada, y terminemos con esa etiqueta. Yendo a golpear “Save”, y ahora deberíamos tener una colección destacada que nos permita mostrar la colección destacada dondequiera que la incluyamos. Desafortunadamente, no podemos incluirlo en nuestra sección de contenido para índice, sin whats llamado preajuste. Necesitamos escribir aquí una matriz preestablecida. Para eso, voy a volver a la documentación de Shopify. Creo que podría estar en una página diferente a ésta. Hay dos páginas que termino cambiando entre todo el tiempo cuando estoy programando secciones. No es éste, tecleemos, “Presets”. Creo que es en esta, secciones temáticas, ésta debería ser, si escribo presets, aquí podemos encontrar los detalles para presets. Lo que podemos ver aquí es cuando una sección tiene uno o más presets, cada preset se convierte en una sección dinámica emergente puede agregar a su página de inicio de tema, si el contenido para objeto índice ha sido incluido en index.liquid, por lo que lo dicen bien aquí, necesitamos establecer un preset al menos un preset, que podamos usarlo en nuestro contenido para el índice. Simplemente voy a copiar esta matriz que han establecido aquí, no necesitamos todos estos detalles. El propósito principal detrás de los presets es que podamos establecer algunos ajustes por defecto para la sección cuando se incluya en una página, pero para nuestros propósitos solo queremos cumplir con el requisito para que realmente podamos usarlo en nuestra página de inicio. Voy a deshacerme del objeto de configuración, solo necesitamos realmente categoría y nombre para este, y ahora nos falta el soporte rizado final creo, y nos falta la etiqueta de matriz final también. Aquí en categoría, voy a dejar eso como contenido personalizado, y voy a nombrar esta colección destacada, y ya verás donde sale este nombre más adelante. Está bien así que ahora que hemos creado esta sección y tiene un preset, ahora podemos incluirlo en nuestro contenido para índice, así que necesitamos crear esa etiqueta, voy a ir a la página index.liquid, remplazar todas estas con ese objeto especial, content_for_index, guarde eso, y ahora, cuando vayamos a nuestra página de inicio en el personalizador, podría necesitar refrescar la página. Ya podemos ver este botón para agregar una sección, interesante, vamos a darle click y veremos aquí nuestra categoría y nuestro nombre de nuestra sección aparece en este pequeño menú, así que si volvemos a la colección destacada, eso es lo que escribimos aquí, la categoría y el nombre aparece aquí, así que ahora podemos hacer clic en él, previsualizarlo, se ve bien, y luego podemos añadirlo justo dentro. Nuevamente no tenemos ninguna configuración para esto aún vamos a configurar algunos ajustes en el siguiente video, pero ahora tenemos esta colección de funciones y podemos agregar múltiples de ellas, momento hemos codificado la colección que queremos usar, pero también podemos reordenar estos, apagar y encender esto, y esto es realmente fácil de usar para la persona que va a estar trabajando con el tema y no tienen que tocar realmente el código, así que por eso las secciones son súper poderosas, voy a golpear “Guardar” en eso por lo que definitivamente se incluye en la página, eso debería terminar esta pequeña introducción a las secciones. Vamos a quitar todos estos por ahora y hablemos de fragmentos. Un fragmento como dije antes, es una pieza de código reutilizable, algo que es común en el desarrollo del tema Shopify para reutilizar varias veces es un producto que se muestra en una lista de productos, así que lo hemos hecho dos veces en nuestro tema hasta ahora, podemos entrar en esta colección destacada aquí, y dentro de este bucle en realidad podemos hacer de esto un fragmento, y de esa manera cuando estamos buceando a través de productos, tal vez no en una colección destacada tal vez en otro lugar y nosotros quieren usar el mismo código, solo podemos incluir este fragmento sin tener que escribir esto cada vez, así que voy a cortar esto para que vaya a mi portapapeles, y voy a escribir la etiqueta para incluir un fragmento, va a ser product-item, supongo que puedo llamarlo, y tocaré “Save”, ahora entraré en fragmentos y crearé product-item, pegaremos ese código directamente en, y ahora en cualquier lugar donde se incluya este fragmento, incluirá este código aquí. Ahora algo importante a notar con fragmentos y secciones, es que obtiene acceso a los objetos del producto todavía, y también obtendrá acceso a la configuración dentro del esquema aquí, por lo que de esa manera funciona el anidamiento en Shopify es que se alimenta de diseños hasta plantillas, hasta secciones, hasta fragmentos, pero los fragmentos se pueden incluir en cualquier lugar. A lo que me refiero con eso es, si pongo una variable aquí en teme.liquid, podría acceder a eso en cualquier parte de mi tema que use ese layout. Si estoy en una plantilla para página por ejemplo, e incluí una sección que pretendía incluir solo en páginas, podría hacer referencia a los objetos de página específicamente en esa sección, y lo mismo vale para los fragmentos, lo que para este fragmento, sabemos que podemos usar el objeto de producto en cualquier lugar donde tengamos acceso a él, por lo que si incluimos un artículo de producto justo aquí en el bucle donde hemos dado acceso a un producto específico, entonces se alimentará directamente en el snippet, ok, entonces si incluyes este fragmento en un lugar que no tiene un objeto de producto especificado se romperá, no funcionará, pero mientras podamos confiar en que este fragmento se use en un lugar donde hay un objeto de producto, funcionará bien, igual que en las secciones podemos confiar que tendrá acceso a una colección si está en la plantilla de colección, o podemos hacer lo que hicimos aquí y asignar la colección específicamente, así que eso es para fragmentos y un buena introducción a las secciones así ojalá. Solo quiero hablar de algunas cosas más para poner a prueba la programación temática de Shopify, y es decir, hablamos de CSS y JavaScript en video anterior, pero solo demostremos cómo agregaríamos algo de JavaScript a nuestra aplicación, Yo solo puedo lanzar una molesta alerta aquí mismo, “Has cargado la página”, pulsa “Guardar” en eso, ahora cualquier página a la que vaya en mi tema se cargará ese JavaScript, obviamente no el mejor ejemplo, pero se obtiene el punto, este JavaScript se carga en cada página, solo que lo demo rápidamente, y lo mismo para CSS, si quieres que una regla se aplique en todas partes dentro de tu tema, puedes ponerla aquí, así que a lo mejor queremos que el tamaño de la fuente de todo, el tamaño de la fuente del cuerpo sea algo ridículo , digamos 40 píxeles, es bastante ridículo si me preguntas, refresca la página, no ha pasado nada, veamos qué está pasando aquí en nuestra consola, en realidad no tenemos acceso a nuestra application.css.scss, echemos un vistazo a eso, creo que eso es porque se ha puesto el nombre equivocado, parece un bug con el nuevo tema, vamos a entrar en tema.liquid y cambia el orden aquí, así que se supone que es css.scss, guárdalo, actualiza la página, ahora verás que todo nuestro font-size se hace mucho más grande, obviamente ese es un ejemplo bastante tonto así que voy a quitar ese estilo. Hemos hablado de diseños, hablamos de plantillas, hemos hablado de secciones, y hemos hablado de fragmentos, y después hemos hablado de activos. Config de lo que hablaremos en el siguiente video cuando nos sumergamos más profundamente en JSON, pero los locales, solo por mencionar brevemente qué es eso, como se puede ver el título de este archivo es en.default.json, y lo que hace este archivo es mantener un lenguaje específico para usuarios de inglés, podemos crear otras configuraciones locales, y luego podemos llamar a la palabra correcta que necesitamos usar en una instancia específica. En realidad podemos editar esto en una interfaz de usuario también, podemos ir aquí y hacer clic en “Editar idiomas”, y veremos las mismas opciones no en forma JSON sino en una interfaz de usuario, ver aquí mismo, si en realidad iba a entrar y cambiar esto, tal vez digo, “Página no encontrada”, pulsa “Guardar” en eso, y voy aquí noto cómo va a cambiar esto, estos son los datos reales de lo que hemos establecido en esa interfaz de usuario, ahí vamos, página no encontrada, y funciona en ambos sentidos, si fuera a editarlo aquí en el archivo de datos, pulsa “Guardar” en eso, vuelve a la interfaz de usuario, actualiza eso, verás que es el valor al que acabamos de cambiarlo. Ahora, por qué esto es importante para nosotros entender es cuando vemos que estos atributos o estos objetos se llaman en el código del tema real, lo que éste es para la página 404, y define el lenguaje que estará en la página 404, así que vayamos a la página 404, y podemos ver aquí tenemos estas etiquetas especiales que se filtran con este filtro t, así que si solo elimino eso, ¿qué crees que va a pasar? Echemos un vistazo, por lo general aparece la página 404 si escribes una dirección que no existe así que voy a solo escribir en ja ja ja ja ja ja ja ja ja ja ja ja ja, y ahora en lugar de ver la versión traducida de eso solo verás el código, así que como yo dijo, si solo pones una cadena en una etiqueta de salida con comillas, es lo mismo es simplemente poner eso literalmente en la página, así que necesitamos esta etiqueta t y lo que eso va a hacer es decir: “Oye, busca este objeto y luego consigue el valor de la misma y lo ponemos en la pantalla”, así que si vemos general.404.title, entramos aquí, empezamos con general, luego cavamos en 404 objeto, y luego obtenemos la propiedad de título, así que ahora si yo refresca la página ahora que hemos reemplazado o puesto de nuevo en esa etiqueta t, se puede ver que el valor viene a través. Esto es importante tener en cuenta cuando estás pasando por editar tu tema y te encuentras con una de estas variables de lenguaje, tal vez quieras crear la tuya lo cual es totalmente genial, solo actualizas este archivo JSON aquí mismo, pero es importante tener en cuenta que cuando estás programando temas de Shopify. Creo que esta ha sido una lección bastante larga, algunas de estas probablemente van a ser lecciones largas, así que voy a terminar ahí. En el siguiente video vamos a profundizar en JSON, así que vas a aprender más sobre cómo funciona esto y cómo trabajar con JSON en el siguiente video, así que te veré ahí. 7. Esquemas JSON: En esta lección, vamos a aprender todo sobre JSON. JSON es una forma popular de representar datos y temas de Shopify, la forma en que representas todos tus datos y tu tema de Shopify es a través de archivos JSON. Vimos en el último video tenemos archivo de idioma aquí, cual se almacena en JSON. También podemos editar eso a través del editor del lenguaje temático, que también vimos en el último video. Esto es bastante básico. Tenemos acceso a las claves y atributos dentro de ese objeto, y solo podemos editar esto directamente por aquí, o podemos editarlo en el propio archivo de datos. De lo que quiero discutir más a fondo en esta lección son Esquemas JSON. Si doy clic a eso y entro en settings_schema, podemos ver el esquema para toda nuestra página web. Ahora, sé que no hemos mirado esto todavía, pero por supuesto, hemos mirado los esquemas brevemente ya que se relaciona con secciones individuales. Aquí mismo, el esquema que vemos aquí es muy similar a cómo opera aquí en nuestros settings_schema.json. Si quieres conocer más sobre el propio JSON, significa Notación de objetos JavaScript. Es una forma de representar datos que se parece a cómo representarías los datos en JavaScript, pero no es exactamente lo mismo. Algunas diferencias importantes incluyen tener comillas dobles alrededor de los nombres de las propiedades. Pero si quieres conocer más sobre JSON, una búsqueda rápida en Google, solo es J-S-O-N, y tienes un mundo de información abierto a ti sobre JSON. Es bastante sencillo. No es sumar estudiar todo un curso a menos que realmente quieras ponerte en profundidad con él. Pero para nuestros propósitos, todo lo que necesitamos entender en el esquema JSON tenemos matrices al igual que lo haríamos en JavaScript, y luego un objeto está representado por estos corchetes rizados. Entonces como vimos con el archivo de idioma, este es el objeto en general. Entonces dentro de este objeto podemos apuntar al objeto general. Entonces cuando estemos dentro del objeto general, podemos agarrar el objeto “404" y luego agarrar atributos u objetos anidados dentro de eso. Vimos eso entrando en nuestra salida aquí. Entrando en los locales, escogiendo el objeto general, entrando en el objeto “404" anidado y agarrando el título de eso. Muy bien, así que eso es un poco en JSON y la sintaxis detrás de él. Pero hablemos más de esquemas y cómo funciona todo en Shopify. Vimos el esquema ya que se relaciona con secciones específicas en videos anteriores. Pero quiero mostrarte settings_schema.json. Si volvemos a nuestro personalizador y vamos a cualquier página, ves que tenemos secciones en la primera pestaña aquí. Podemos ver nuestras secciones como vimos antes, y cualquier esquema dentro de esas secciones generará estos insumos. Pero también está este otro menú llamado ajustes de tema. Aquí podemos colocar grupos de configuraciones a las que podemos acceder a lo largo de nuestro tema. Aunque hay algunas limitaciones. Una de las características de una configuración en secciones es que podemos tener bloques que veremos muy pronto en la configuración general del tema. No podemos hacer bloques. Esa es una limitación, pero por lo demás funcionan más o menos igual. Vamos a entrar y mostrarles un ejemplo. Después de este objeto, voy a crear un nuevo objeto y darle a éste un nombre de, digamos, estilos generales. Esto es así como definirías una sección también. Entonces al igual que lo haríamos en un esquema de secciones, definimos una matriz de ajustes. Dentro de esta matriz de ajustes, podemos crear cualquier tipo de entradas que queramos. Para este video, ya he cargado las dos áreas de la documentación de Shopify que te ayudarán con la creación de estos Esquemas JSON. El primero es: @themes /desarrollo/secciones. El título es secciones temáticas. Este es útil para aprender sobre cómo estructurar tu esquema. Tienes las diferentes etiquetas que vimos presets en un video anterior. También aprenderemos sobre los bloques aquí hoy también. Por aquí en configurar los ajustes del tema, es frustrante que lo pongan en una página separada. Pero esta es la página donde aprenderás sobre todos los diferentes ajustes de entrada, por lo que texto, área de texto, picker de imagen, radio, seleccionar rango de casillas de verificación. Esos son los básicos y luego tienen unos avanzados aquí abajo, creo, sí. Podemos crear entradas para color, fuentes, colecciones, productos, blogs, páginas, enlaces, listas, URLs, montones de cosas diferentes. Si quieres ver si hay algo que puedas hacer una entrada de usuario, más probable es que vaya a estar aquí. Volviendo a aquí, necesitamos crear un escenario. Lo que voy a hacer sólo con fines de demostración es crear un ajuste para el color de los enlaces. Digamos sólo. Voy a usar el recolector de color. Sólo vamos a copiar el ejemplo. Entraré aquí y reemplazaré mi objeto vacío por el objeto de la documentación. El tipo ya está establecido va a ser de color. Sólo tenemos que darle a eso una identificación. Voy a llamar a este enlace color, y la etiqueta es lo que se muestra al usuario. Yo lo voy a llamar color de enlace. Estoy usando la ortografía americana solo para ser consistente y el valor predeterminado, solo diremos azul. Este de aquí info nos permite poner un poco extra de texto. No creo que sea necesario en esta instancia, pero sólo para mostrarte lo que hace para cuando sí lo necesitas, voy a escribir una descripción aquí. Esto es para el color del enlace. Si guardo eso, puedes ver que tenemos un error. ajuste con el valor predeterminado del color del enlace debe ser un color CSS. No podemos usar el azul, tiene que ser un valor HEX, así que déjame simplemente hacer negro. Prueba eso. Debe ser un color CSS. Ahí vamos. No es el mejor en ejecutar códigos hexagonales. Normalmente sólo los busco. Está bien, pero ahora tenemos este código hexadecimal que representa el negro. Si entramos ahora a nuestro personalizador y actualizamos la página todo parece igual, pero podemos entrar aquí. Ahora tenemos esta sección para estilos generales. Da click en eso, y tenemos color de enlace. El valor predeterminado se ha establecido en #000 y se rellena en los otros ceros. Podemos entrar, cambiar esto a ese color azul y golpear “guardar”. Ahora al igual que hicimos con la configuración en el esquema de sección, esto no va a hacer nada a menos que realmente hagamos referencia a ese valor. Para eso, por supuesto es el DNI. Vamos a seguir adelante y hacer todos los enlaces en nuestro tema de acuerdo a este color de enlace. Ahora, donde deberíamos poner un estilo que va a estar en cada página de nuestro tema está en nuestro archivo CSS global. Pero lo que queremos hacer es líquido de referencia en esta instancia porque vamos a necesitar acceder al objeto de configuración en líquido para poder acceder a este valor. Una característica de los temas de Shopify que quizás no te des cuenta es que también puedes usar líquido en tus archivos CSS. Lo que voy a hacer es cambiar este nombre de archivo y aguantar líquido hasta el final del mismo. Entonces, le pegaré a “Done”. Ahora va a tener una extensión ridículamente larga, pero, bueno. Ahora lo que voy a hacer es apuntar a todos los enlaces usando CSS, y cambiar el atributo de color basado en lo que se establece aquí. Como acabo de mencionar, la forma de hacerlo es a través del objeto de configuración global. Puedo crear una etiqueta de salida, acceder a mi objeto de configuración, y luego voy a entrar en la configuración con el ID de color de enlace. Voy a poner en color de enlace aquí, y luego lo voy a cerrar con punto y coma. Ahora, en realidad podríamos tener que cambiar el nombre de este tema interior.líquido, pero vamos a echar un vistazo y ver si eso funciona ahora. Voy a sacar a la luz las DevTools. No hay errores en la consola. Bajemos a donde traemos el enlace. Si abro el archivo CSS, abro en una nueva pestaña, verás que tenemos nuestro CSS, pero en lugar de la etiqueta líquida, que recuerda se genera todo en el lado del servidor, tenemos la salida real. Al igual que calculamos líquido en el back-end con todos estos, y simplemente escupe HTML y CSS, tenemos lo mismo pasando aquí. Podemos poner un.líquido al final de esto, luego Shopify aquellos para pausar cualquier líquido dentro de aquí. Entonces para cuando llegue al front end, como vimos, es sólo un archivo css.scss. No hay extensión líquida, y calcula todo el líquido y pone en el valor real. Muy cool. Por lo que podemos afectar programáticamente nuestra hoja de estilo. Voy a volver al personalizador aquí y vamos ver si podemos conseguir que nuestras etiquetas de enlace cambien. Voy a refrescar la página para asegurarme de que todo esté al día. Entra en estilos generales, y cambia esto por algo realmente obvio, como el rojo. Voy a golpear “Guardar”, y ahora mismo no se está actualizando. Echemos un vistazo dentro del tema, oh, espera. Aquí vamos. Ahora podemos ver que por defecto, todos los enlaces son rojos, porque acabamos de establecer eso aquí mismo en nuestra configuración general. Si actualizamos el personalizador, deberíamos obtener el mismo resultado aquí también. A lo mejor es el almacenamiento en caché un poco. No estoy seguro de por qué no está afectando en el personalizador, pero definitivamente lo está afectando en el front end aquí. Ese es un gran ejemplo de crear ajustes de tema y ponerlo aquí. Esto es para cualquier cosa general, colores de enlace, colores de encabezamiento, fuentes, cualquier cosa por el estilo que quieras afectar a todo el tema iría en la configuración del tema. Pero lo más común es que vas a estar configurando ajustes en tu sección. Voy a volver y cambiar esto porque no se ve demasiado bien ser rojo. Pulsa “Guardar” en eso, y entra aquí y actualiza la página. Ahí vamos. Ahora tenemos el color que fijamos. Enfriar. Está bien. Ahora vamos a entrar en una de nuestras secciones y veamos la sección de featured-collection. Lo primero que queremos hacer es permitir que el usuario elija realmente la colección que se presenta en lugar de codificarla duro. Voy a ir en mi configuración aquí, abrir eso. Como siempre, voy a entrar y comprobar qué insumos tengo disponibles. Recuerda que vimos uno para colección. Voy a dar click en esa. Aquí tenemos un ejemplo el cual puedo simplemente copiar palabra por palabra. Lo estoy haciendo rápido, porque no quiero quedar atrapado en la teoría. Pero si quieres leer sobre lo que estamos haciendo aquí, todo está en la documentación. Vuelve atrás, reemplaza aquí nuestro objeto vacío con los atributos que necesitamos editar. El tipo ya está establecido para nosotros. Voy a cambiar el DNI a cobranza porque sólo tiene más sentido. Llame a la colección de etiquetas, y realmente no necesitamos una línea de información aquí, porque es bastante simple. Entonces aquí arriba, podemos configurar la colección en, en lugar de featured-collection, realmente podemos hacer referencia a la configuración. Entonces voy a agarrar este objeto de sección, entrar en su configuración y encontrar colección. Entonces voy a ahorrar. Ahora, esto lo romperá porque no tenemos un conjunto por defecto que entonces podemos ir fácilmente y actualizarlo. Si entro a la página de inicio donde esta esta esta sección de colecciones destacadas, dice que no hay coincidencias porque en realidad no hemos insertado nada. Ahora el contenido no está apareciendo. Echemos un vistazo. ¿Qué hemos hecho mal aquí? Todo se ve bien. A lo mejor nos olvidamos de actualizar o actualizar nuestro personalizador. Hagámoslo ahora mismo. Todavía no deberíamos conseguir partidos porque aún no hemos establecido una colección. Pero ahora podemos ver que la colecta es ahora un insumo. Ahora podemos, como usuario, tener esta encantadora interfaz de usuario para seleccionar una colección que queremos traer aquí. Entonces a medida que lo seleccionamos, debe ser utilizado por nuestra sección. Entonces voy a pegarle a “Guardar” y aún tenemos un problema. Déjame ir y comprobar en el front end si también está errando. No hay partidos. Entonces volvamos otra vez, echemos un vistazo. Lo que creo que estamos viviendo aquí es un tema que encuentro con los temas de Shopify, donde llamar a un objeto de recurso nos da su nombre, pero no el objeto en sí. Tan solo para confirmar esto, voy a crear una etiqueta de salida y ver si solo obtenemos el nombre de la colección si pongo nuestra colección. Sospecho que este definitivamente será el caso. Si actualizo la página, se puede ver el mango de la colección aparece. Si realmente estuviéramos accediendo al objeto de colección, obtendríamos un resultado diferente. Esto es algo frustrante dentro de Shopify. Se pensaría que si vinculáramos aquí una colección y luego la codificamos, obtendríamos el objeto de colección, pero en cambio, obtenemos el mango de colección. El modo en que podemos sortear esto es mediante el uso de las colecciones globales. Voy a ir a “colecciones” y luego puedo usar este valor dinámico como mango. A lo mejor esto parece un poco complicado, pero confía en mí, no es tan complicado como podrías pensar. Esto es esencialmente lo mismo que hacer featured-collection, que es exactamente lo que teníamos antes. Acabamos de reemplazar ese mango con el mango que obtenemos del usuario aquí abajo. Voy a darle a “Guardar” y a ver si obtenemos un resultado diferente. Ahora puedes ver que realmente estamos obteniendo el objeto de colección y somos capaces de recorrer los productos en ese objeto de colección. Ahora me alegra mucho que nos hayamos topado con ese problema porque esto es algo que no es particularmente obvio en la programación temática de Shopify, y es algo que me hace subir bastante también. Pero por experiencia, sabía que a veces esperas un objeto pero recuperas algo más en Shopify. Recuerda cuando pusimos esto antes de que obtuviéramos el mango de recolección. Ahora pongamos colección y veamos qué obtenemos en su lugar. Esto es lo que esperábamos obtener cuando sacamos este objeto o lo que creíamos que era un objeto. Si volvemos atrás y actualizamos la página, podemos ver que aparecen palabras llamadas CollectionDrop. Ahora esta es una terminología especial en líquido, que básicamente dice que este es el objeto de colección. Entonces si fuera un objeto vacío , diría gota vacía. Si se tratara de un objeto de producto, diría gota de producto. Desafortunadamente, no podemos generar todo el objeto como lo haríamos tal vez en JavaScript. Simplemente nos dice que se trata de un objeto de colección. Entonces ahora lo sabemos porque antes, recuerda que tomamos la colección aquí de nuestra configuración de sección y que también salimos de ahí. Si los rompo con una etiqueta de break, se puede ver que el primero es el mango de la colección y el segundo es el objeto de colección real. De acuerdo, probablemente me fui demasiado apagado en una tangente ahí, pero algo que realmente te tropiezo en programación temática Shopify y algo que he aprendido de la manera difícil es cuando seleccionas recursos en tu personalizador, a veces simplemente consigues el mango y no el objeto real. En ese punto, en realidad hay que usar un global, hacer referencia al mango, y luego elegirlo del objeto global real. Entonces eso es lo que hemos hecho aquí, y lo tenemos funcionando. Por lo que ahora el usuario puede seleccionar qué colección se muestra en esa sección de colecciones destacadas. Está bien. Si refresco la página aquí, deberíamos obtener el mismo resultado. Sí. Por lo que podría agregar cualquier tipo de otra configuración aquí. Podría mostrar el precio de venta, mostrar dondequiera que se agote en no, show vendor. Básicamente personaliza casi cualquier cosa sobre esta sección para estos ajustes de sección. Entonces eso es lo que hacemos aquí mismo. Está bien. Ahora, lo último que hay que tapar con esquemas es la cuestión de dónde se almacenan realmente los datos? Recuerda dije que todos los datos en Shopify se almacenan en temas de Shopify específicamente se almacenan en formato JSO N. Entonces, ¿dónde encontramos eso? Bueno, todos los datos para tu tema de Shopify, se almacenan en settings_data.json, sin importar de dónde provenga, settings_schema, o viene de una sección específica. Entonces aquí tenemos esquemas, y cada uno de estos. El valor real que se almacena, todo entra aquí. Por lo que puedes ver este objeto actual en la parte superior, y en nuestro objeto actual tenemos el color del enlace almacenado. Está bien. Entonces si iba a entrar, cambia de nuevo ese color de enlace. Está bien. Quiero que noten que este valor aquí es el mismo que ese valor allá. Ahora bien, si lo cambio de nuevo a rojo, creo que este es un tono ligeramente diferente de rojo, y actualizamos este archivo de datos. Quiero que miren lo que le pasa al archivo de datos. Como puede ver, el valor del color del enlace ha cambiado en el archivo de datos, y al igual que hicimos en el archivo de idioma, realidad podemos cambiar este valor y cambiará también en la interfaz de usuario. Se trata de los datos de back-end que se vincula a la interfaz de usuario. Por lo que esto lo cambiará en el personalizador y cambiará el valor dondequiera que haga frío en el tema. Entonces si entras aquí, el color del enlace vuelve al negro porque lo cambié en estos datos. Ahora esto es importante porque siempre que estés migrando temas o copiando temas o tratando de fusionar dos temas juntos, necesitas cuidar este archivo de datos. No voy a hablar demasiado de puesta en escena porque sí tengo un video en YouTube sobre eso. Simplemente busca desarrollo de tema Shopify en YouTube y ojalá encuentres mi canal. Si estoy haciendo mi SEO, correcto. Pero esto es algo que sólo hay que estar al tanto con tu archivo de datos. Todo se almacena aquí, así que ten mucho cuidado con el archivo de datos. Trata de evitar tocar esto. Pero si necesitas fusionar datos de dos temas, así es como lo harías. Muy bien, con esa nota al margen fuera del camino, quiero llamar su atención sobre algunas cosas más en este documento settings_json, y es que tenemos el objeto de esta sección aquí mismo. Ahora puedes ver todas las secciones que tenemos. Contamos con cabecera, plantilla de colección, pie de página y este es referenciado por su ID. No estoy seguro de por qué se hace referencia por su ID en lugar de su nombre, pero sin importar, tenemos una colección destacada aquí, y se puede ver en nuestra configuración, tenemos un valor clave de colección con el mango de colección destacado. Entonces si entro y cambio esto por un mango diferente, eso lo actualizaría en la selección que tengo aquí para mi colección destacada. De acuerdo, de nuevo, esto es sólo una interfaz de usuario encantadora para cambiar lo que está escrito aquí. La otra cosa que quiero que notes es el contenido para matriz de índice. Toma todas las ID de las secciones que están en uso y lo pone aquí. Entonces si solo elimino esa identificación y golpeo “Guardar”. Ahora cuando vamos a nuestra “Página Principal”, esa sección que la ID referenciada ahora falta en nuestra Página Principal. Está bien. Pero siempre podemos añadirlo de nuevo. Agregar en la colección destacada. Elige una colección que queramos contar. Acabo de llamar a la mía colección destacada. Guarda eso de nuevo, y si actualizamos el archivo de datos, verás que ese archivo de datos en el contenido para matriz de índice está de vuelta ahí. Está bien. Por lo que settings_data.json almacena todos los datos que se generan a partir de todos tus esquemas en un solo lugar. Ahí está, por supuesto, tu foto local, pero esto es todo solo para locales. Esto es separado de los esquemas, ¿de acuerdo? Todos los ajustes que configuras en tu settings_schema.json, y los esquemas dentro de tus secciones individuales. Todas esas selecciones, la propia selección entra en este archivo aquí mismo, settings_data.json, y eso es básicamente para esquemas JSON. Ya has visto cómo agregar un ajuste en tu configuración general del tema. Entonces lo vimos aquí, y hemos visto otro ejemplo de insertar un ajuste en particular en una sección justo aquí al permitir al usuario elegir qué colección llega a ser destacada. ¿ De acuerdo? También, solo para recapitular, nos enteramos de un poco de gotcha en Shopify Liquid. Si selecciona un recurso como una colección, el valor del objeto solo será un identificador, no el objeto en sí. Por lo que aún necesitamos buscar eso usando un objeto global como colecciones, como todos los productos, todos los objetos globales que puedes encontrar aquí mismo en la entrada del blog. A ver cómo, si me desplaza hacia abajo hasta “Colecciones”. Este solo te muestra cómo puedes recorrer las colecciones, pero accedemos a una colección en particular a través de su mango. Se puede hacer lo mismo con el objeto de productos antiguos. Se puede acceder a un producto a través su mango específico y entonces eso se convierte en el objeto del producto. Está bien. Entonces deberíamos ser bastante claros en los Esquemas JSON. Recuerda, probablemente no vas a saber de memoria qué ajustes poner aquí. Por lo tanto, asegúrate de hacer referencia a la documentación. Esta página tiene todas las diferentes configuraciones de entrada que puedes poner ahí. En esta página, secciones temáticas, puedes aprender sobre cosas como preajustes y bloques. Bloques es algo sobre lo que vamos a aprender en el siguiente video donde realmente creamos nuestra propia sección. Por lo que espero con ansias ese video. Te veré en el próximo. 8. Programación de secciones personalizadas: Muy bien chicos, en esta lección vamos a armar todo lo que hemos aprendido hasta ahora sobre Shopify Liquid y JSON Schemas para practicar la creación de nuestra propia sección. Lo que voy a hacer es crear una sección de galería, que será una sección que podemos incluir en la página de inicio para contenido, para índice o en una página específica y solo mostrará una galería de imágenes que especifique el usuario en el personalizador. De lo que voy a hacer, cabeza por encima de las secciones, añadir una nueva sección, y lo voy a llamar galería. Como de costumbre, Shopify nos da un Esquema y solo necesitamos cambiar el nombre de la sección a galería. Golpea “Guardar” en eso. Voy a montar un div con una clase de galería y ahí tienes. Ahora bien, cómo va a funcionar esta galería es, voy a permitir que el usuario especifique cuántas columnas quieren por fila, y luego también la altura de la imagen, y luego voy a permitir inserten bloques que son van a ser las imágenes que vamos a incluir. Pasando a la documentación y mirando la sección sobre bloques dentro del documento en secciones temáticas, volvamos a desplazarnos hacia abajo otra vez para los bloques. Aquí se puede ver que podemos poner en bloques que son contenedores de configuraciones y contenido, cuales se pueden agregar, quitar, y reordenar con intersección, y eso es ideal para lo que estamos haciendo aquí. Queremos que puedan sumar tantas imágenes como quieran y reordenarlas, y solo necesitamos la misma configuración para cada una. Voy a saltar por encima de la matriz de ajustes por ahora y crear una matriz de bloques, y en esta matriz de bloques, voy a abrir un bloque. Ahora, para un bloque, lo que necesitamos es un tipo y un nombre, como aquí dice, un bloque debe tener un nombre y un tipo. El tipo de bloque puede ser cualquier valor establecido por el desarrollador del tema. Entonces el tipo no es algo que sea específico en Shopify, es solo algo que nos pusimos. Yo voy a hacer el tipo y la imagen, y ya verás más adelante podemos agregar en diferentes tipos y luego revisar el tipo dentro de nuestra sección. Voy a darle un nombre y llamarlo bloque de imagen. Esta va a ser la etiqueta que se le muestre al usuario. Ahora, creo que solo podemos crear una matriz de ajustes al igual que haríamos en el objeto padre aquí. Voy a agregar una matriz de ajustes, abrir esa hacia arriba y por dentro empezar con el primer objeto, que va a ser una entrada de imagen. Por eso, vamos a cambiar a esta parte de la documentación llamada configuración de los temas y voy a buscar imagen. El tipo de ajuste de entrada para una imagen es el picker de subrayado de imagen y podemos simplemente copiar el valor de ajuste aquí. Va a ser picker de imagen, solo necesitamos un tipo, ID, y la etiqueta. Volviendo a nuestro código aquí, pegando eso, vamos a cambiar el ID a imagen, y sólo vamos a poner imagen aquí, muy básica. Entonces esa es la configuración que tendremos para cada bloque. Si golpeo “Guardar” en eso, veamos si hay algún error, no, no lo hay. Lo que puedo hacer ahora es que puedo crear un bucle a través de todos los bloques en sección OWL. Voy a crear este bucle y voy a decir, “para bloque en section.blocks”, y luego voy a entrar al bucle. Vamos a dar formato a esto, hacer que esto se vea un poco más bonito en un poco, pero por ahora solo saquemos este contenido en la página. Ahora, podemos referenciar bloque directamente y solo voy a crear una etiqueta de imagen con la imagen que se establece, así que bloque.settings.image. Recuerda cómo accedemos a diferentes atributos es solo navegar por este objeto JSON. Entonces en la parte superior aquí, encontramos bloques en el objeto de sección y ahora estamos buceando a través un bloque individual y luego tenemos acceso a lo que hay aquí, al objeto de configuración, y luego dentro de eso, podemos acceder al atributo usando su ID. Eso es lo que está pasando aquí. Si acabo de emitir esto, lo que obtendré es solo la dirección de la imagen. Antes de que realmente podamos mirarlo, sin embargo, necesitamos incluirlo en algún lugar y lo que voy a hacer para eso es crear una plantilla alterna para plantilla de página, y luego vamos a usar la plantilla definitiva para mostrar esta sección. Afortunadamente, hay algunos pasos involucrados en hacer esto. Tenemos que ir primero a nuestra carpeta de plantillas y agregar una plantilla de página alternativa. Sólo voy a llamar a esta galería, crear la plantilla. Algo que es frustrante con Shopify es que vamos a tener que crear esto también sobre el tema actual. Entonces si actualmente estás trabajando en el tema que estás previsualizando y en realidad no vives en tu sitio web, tienes que crear la misma plantilla en tu tema actual también de lo contrario, no podrás seleccionarla. Pero por ahora lo que voy a hacer es incluir esta sección aquí. Entonces voy a despojar todo esto y en esta plantilla de página personalizada, solo llama a la sección de galería, y voy a golpear “Guardar”. Ahora como dije, para que lo seleccionemos de la lista, voy a tener que entrar en el tema en vivo actual, que es debut y crear la misma plantilla que quizá ya haya hecho aquí. Ya hay una plantilla con el nombre page.gallery. Si eso no existiera, solo puedo eliminar esa, entrar en agregar página, exactamente igual que lo hemos hecho antes para el otro tema, y lo que haremos insertará el mismo contenido que la plantilla de página normal. Por lo que no tienes que preocuparte si cambias esto dentro de la página, todavía va a mostrar la misma plantilla de página sobre este tema, si eso tiene sentido. Ahora bien, si entro a páginas y agrego una página, llámala galería, puedo usar esa plantilla específica que acabamos de crear seleccionándola aquí. Si guardo la página, ahora podemos ver cuál es la dirección de la misma. Va a ser @pages /galería. Entonces volvamos al código. Como vimos, ya hemos incluido la sección sobre esa plantilla alterna. Ahora, sólo tenemos que ir a la página que acabamos de configurar. Galería de páginas. En este momento no hemos agregado ningún contenido así que nada va a aparecer. Lo que queremos hacer es abrir esta página en el personalizador. Vamos a tener que refrescarnos primero porque hemos hecho cambios en nuestros códigos temáticos ya que teníamos esto abierto y ahora deberíamos poder ver que podemos editar la plantilla de galería. Plantándose en eso. Ahora podemos ver la sección para Galería. Simplemente tomándolo un poco más lento, estamos en la página para galería y como está usando esta plantilla alterna específica, se va a vincular directamente a esta sección y luego dentro de esa página ahora para el personalizador, podemos ver la sección apareciendo aquí. Por lo que en la galería, ahora se puede ver que va a haber esta sección de contenido y se puede agregar un bloque de imagen. Eso es todo de los ajustes que configuramos en nuestra sección de galerías. Entonces ya no necesitamos esto, sólo necesitamos esa etiqueta. Podemos empezar a trabajar directamente desde la sección de galerías aquí mismo. Pero recuerda, lo llamamos bloque de imagen y así aquí en el personalizador, es agregar bloque de imagen. Si hay múltiples tipos, podríamos hacer clic en esto y nos da diferentes opciones, pero solo tenemos la opción única por ahora. Como puedes ver, ahí está nuestra configuración de imagen que tenemos aquí. Ya podemos añadir una imagen. Tenemos hombres al frente y podemos añadir otra imagen, bloque, el tipo con el traje y aquí puedes ver qué pasa cuando hago eso. En lugar de la imagen real, tenemos una sección URL. Lo que está pasando aquí es que la imagen que se está seleccionando en realidad no te va a dar una etiqueta de imagen. Entonces para conseguir la etiqueta de imagen, lo que voy a hacer es usar el filtro de etiqueta de imagen aquí mismo. Ahora bien, puede que tengamos que especificar un camino distinto también, echemos un vistazo, así que ahí tienes,se están apareciendo y como echemos un vistazo, así que ahí tienes, no agregamos un parámetro están apareciendo bastante pequeños, esto debería ser de 100 por 100. Si tenemos una mirada, por lo que el ancho es un 100 y entonces la altura es relativa al ancho en cuanto a su relación de aspecto. Vamos a necesitar hacerlos un poco más grandes. Voy a agregar un parámetro para esta etiqueta de imagen de, digamos 500x. Entonces ahora van a ser cinco veces más grandes, cinco veces más grandes, más bien. He cometido un error aquí y veo que el parámetro, en realidad representa la etiqueta alt. Si quieres poner en valor alt, ahí es donde lo pones. Lo que necesito hacer es encadenar otro filtro aquí. Voy a filtrar esto por URL de imagen como antes y ahí es donde puedo especificar la dimensión de la imagen. Voy a guardar eso, refrescar la página, y ahora la imagen es cinco veces más grande. Lo que tenemos aquí es que tenemos, si solo refresco la página en el personalizador, tenemos esta galería. Por lo que podemos agregar otro bloque de imagen. Si la imagen aún no está puesta, Shopify solo inserta un portavocajes, que no es muy bonito, pero nos muestra que al menos se supone que hay una imagen ahí y puedo agregar en otra imagen, y básicamente lo que va a pasar es que todos van a tener 500 de ancho y solo van a apilar a través del espacio horizontal y vertical de nuestra página. Si refresco la página, tal vez esto sea lo suficientemente bueno para tu galería, pero quiero hacer de esta manera más receptiva. Lo que voy a hacer es darle a esto un ancho responsive y crear una altura que el usuario pueda cambiar. Lo que voy a hacer es aquí dentro, en lugar de solo sacar una imagen, lo que voy a hacer es crear un envoltorio de imagen y en esta etiqueta de envoltura de imagen, le voy a dar una imagen de fondo de la imagen que ponemos aquí. El beneficio de hacer esto si no te resulta familiar, es que podemos controlar la altura y el ancho del div y luego la imagen encajará dentro eso y recortará en base a las dimensiones de esta etiqueta div aquí mismo. Lo que voy a hacer es agregar un atributo de estilo y tener URL de imagen de fondo y ya no necesito la etiqueta de imagen, y puedo insertar esto aquí. Ahora tenemos que darle algunas dimensiones. Tan solo para darle algo de inmediato, le voy a dar un ancho de 500 píxeles y una altura de 500 píxeles, y luego le voy a dar un [inaudible], crear algo de espacio aquí. Aquí vamos. Entonces le voy a dar un tamaño de fondo de cubierta. Guarda eso. Vea qué sucede cuando actualicemos la página. Ya verás, si echamos un vistazo, estas ya no son etiquetas de imagen, en realidad son divs, y por eso se están apilando uno encima del otro porque estas están configuradas por defecto para mostrar bloque, como se puede ver aquí en los valores calculados. Queremos que se muestren uno al lado del otro, por lo que inline-block. Ahora bien, podemos configurarlo en nuestro archivo CSS principal o podemos hacerlo en la sección real refactorizando esto al estilo, no a la hoja de estilo y poniendo aquí nuestros estilos. Ahora, en este caso, lo voy a poner en la sección real y hay una buena razón para eso, porque cuando usamos estas etiquetas de estilo, podemos ver las cosas actualizadas en vivo en el personalizador. Siempre podríamos simplemente lanzar estilos usando HTML. Pero si hacemos esto, si hay un estilo generado por el usuario dentro de aquí, como algo que pusieron en el personalizador y eso cambiamos. No va a aparecer de inmediato. Por lo que usando estas etiquetas líquidas, realidad podemos almacenar nuestros estilos en la sección y eso va a hacer que sea más fácil encontrarlos. Pero también vamos a conseguir la capacidad de ver esos live update si usamos personalizar un dato aquí dentro. Entonces te mostraré lo que quiero decir con eso en tan solo un segundo, pero primero voy a crear una regla de estilo aquí para image rap y lo que voy a hacer es poner todas las envolturas de imagen para mostrar bloque en línea y si vamos a nuestra página, incluso el personalizador o por aquí y refrescar la página. Ya veremos que ahora están apilados uno al lado del otro. Si vamos por aquí, veremos que tenemos bloque en línea de display. Esto es un poco mejor porque si cambiamos el tamaño de la ventana, así que voy a mover esto hacia un lado y ver cómo cambia el tamaño de la ventana. Se va a derribar a la nueva línea si no hay espacio. Pero para que sea un poco más sensible, lo que voy a hacer es que voy a establecer el ancho en un valor relativo. Volviendo a aquí, vamos a poner rap de imagen a ancho del 33 por ciento. De esa manera conseguimos tres seguidas. Entonces voy a eliminar este valor aquí mismo y en realidad vamos a mover estos valores a la clase sólo para que sea un poco más limpio. Aquí mismo, estos van a ser los mismos para cada rap de imagen, así que vamos a poner esto aquí abajo en la fila de estilo real aquí. Refresca la página y ahora puedes ver nuestras imágenes son responsive. Entonces otra vez, si iba a redimensionar, puede ver que siempre van a haber tres seguidas y van a redimensionar para lograrlo en cualquier tamaño de pantalla. Ahora, para el usuario, tal vez quieran elegir cuántas imágenes están arriba para una fila y también podrían querer poder cambiar la altura de las imágenes, porque, como dije, con imágenes receptivas, recortan automáticamente. Como vimos antes, si reduzco esto, siempre van a ser tres en cada fila, así que ahora estamos perdiendo partes de la imagen. Entonces tal vez queremos que esto sea menos alto si estamos usando muchas imágenes por fila. De todos modos. Por lo que quiero darle la opción al usuario para poder afectar este valor y también la capacidad de afectar este valor. Porque esto va a pasar a toda la grilla, esto va a ser una configuración aquí, no en un bloque específico. El primer ajuste que quiero hacer es que creo que voy a tener un selecto. No hemos usado selecto antes. Entonces vamos a entrar en los diferentes tipos de entrada que tenemos disponibles para nosotros y mirar selecto. Voy a agarrar el ejemplo como punto de partida y reemplazar estos objetos vacíos por el ejemplo. Entonces tenemos el tipo de selecto, voy a establecer esto en, por fila y se va a mostrar al usuario productos, oh lo siento, imágenes por fila, y luego para nuestras opciones, no necesitamos un grupo, nosotros solo necesitas un valor y una etiqueta. En nuestro array de opciones, voy a tener tres valores diferentes y estos van a ser los anchos. Si eligen dos por fila, va a ser del 50 por ciento. Entonces dos por fila y si eligen tres por fila, va a ser 33 por ciento, tres por fila. Tenemos que duplicar eso a través, termina este 44 por fila, va a ser de 25 por ciento. Hagamos sólo cinco por fila también. Agrega en otra opción y haremos de este cinco por fila. El default, tiene que ser uno de estos. Hagamos el predeterminado tres por fila. Eso va a ser 33 por ciento y la información que no necesitamos, realmente necesitamos. Voy a presionar “Guardar” aquí y he agregado deliberadamente un error, o he dejado deliberadamente un error en mi esquema JSON. Ahora, desafortunadamente, en Shopify en su editor de código y cuando estás usando el kit de tema también, solo dicen error JSON inválido y si tienes un esquema grande, te podría llevar una eternidad averiguar cuál es el problema. Entonces sé lo que he hecho mal, pero tal vez no puedas elegirlo ahora mismo. Por suerte, porque es solo un objeto JSON, en realidad podemos ponerlo a través de un JsonLinta y ver cuál es el problema.Así que solo quiero mostrarte cómo hacer eso ahora mismo. Sé que el tema aquí mismo es que aquí tenemos una coma al final. Entonces recuerda que quitamos ese valor. El último valor no puede tener una coma después, pero tal vez no lo sepamos así que una cosa que podemos hacer es usar un JsonLinta en línea, así que acabo de copiar todo el objeto JSON y voy a ir a un sitio web llamado jsonlint.com creo. Voy a pegar en nuestro objeto JSON, no importa que represente datos de Shopify. Todo esto hace es tomar el formato del JSON y comprobar si está correctamente formateado. Entonces aquí mismo, tenemos un mensaje de error mucho más detallado, que es que tenemos un error en la línea 24. Esperaba una cuerda consiguió un corchete rizado de cierre. Entonces eso todavía podría tomar un poco de descifrar para averiguar cuál es el tema aquí. Pero al menos obtenemos un número de línea específico y podemos decir, oh, tengo esta coma aquí. Entonces si vuelvo, quítate esa coma, toca guardar, ahora verás que no tenemos errores. Entonces lo siguiente que necesito hacer es realmente hacer referencia este valor que se ha establecido en el personalizador aquí. Entonces en lugar de 33 por ciento voy a, como lo hemos hecho numerosas veces a lo largo de esta clase, referencia al objeto de sección, entrar en su configuración y agarrar por fila. Voy a golpear guardar en eso y volvamos a nuestro personalizador y refresquemos. Muy bien, así que ahora voy a entrar a la sección de galerías y se puede ver que ahora tenemos un desplegable para seleccionar cuántas imágenes por fila. Si cambio esto a dos, no funciona con 50 lamentablemente pero si cambio esto a cuatro, se puede ver esta actualización en vivo. Desafortunadamente, hay algunos márgenes que están afectando cuántos pueden caber por fila por lo que solo necesitamos cambiar eso. Pero se puede ver que esto es actualización en vivo. Entonces va a pegarle ahorrar en eso, se puede ver si miramos esto en el navegador, estos van a ser cada uno del 50 por ciento. Esto es un poco de un problema con inline-block, pero si lo reducimos en 0.5 por ciento, eso debería sortear el tema de los márgenes y ahora se puede ver que tenemos una cuadrícula de dos por dos. Entonces sólo voy a volver a nuestro código aquí. Cambia dos por fila, dale un porcentaje de espacio de meneo. Lo mismo aquí, y lo mismo aquí. Eso esperemos que evite ese tema. Ahora si actualizamos la página en ambos, hagámoslo en el personalizador para que podamos realmente actualizar esto en vivo. Cámbiala a tres por fila, cámbiala a dos por fila, cuatro por fila y no tenemos cinco, pero si sí tuvimos una quinta, aparecerá aquí. Muy bien, bastante guay. Ahora, como mencioné, si estamos mostrando dos por fila, entonces tenemos una buena relación de aspecto pasando aquí. Pero si lo ponemos en cuatro por fila, vamos a perder mucha de la imagen porque recuerden que recortan automáticamente para seguir respondiendo. Por lo que también quiero darle al usuario la capacidad de especificar la altura de todas estas imágenes. Entonces, sumémoslo ahora. Voy a añadirlo como otro selecto. Entonces, whoops, vamos a copiar de nuevo ese ejemplo de la documentación y reemplazar este objeto vacío por eso. Esta van a ser las alturas, y voy a llamarla altura de imagen. No necesitamos grupo, como mencioné antes, el valor predeterminado va a ser, digamos, qué tenemos en este momento, 500 píxeles. Digamos que van a ser 500 píxeles. No necesitas información. Por lo que haremos los últimos 1500 píxeles y estos 1300 píxeles. Ahora probablemente queremos hacer más opciones. Así que vamos a crear una opción extra, probablemente quieras algunos más también, pero es el mismo proceso para cada uno. Entonces, solo pongamos esto en algún lugar entre 400. Ahora antes de golpear guardar en eso, realidad voy a insertarlo. Entonces al igual que he hecho aquí, en lugar de codificar o codificar duro en una altura, voy a hacer referencia a este ajuste así que ponlo ahí como altura. De nuevo, tenemos un error en el esquema JSON. Sé que solo de la última tenemos la misma época tenemos esta coma aquí. Si no recogiste eso, siempre puedes ponerlo para la JsonLinta. Entonces ahora si miro esto en el personalizador, tenemos un problema aquí. Echemos un vistazo a lo que podríamos estar haciendo mal aquí. Olvidé poner el punto y coma al final, refrescar la página. Por lo que ahora deberíamos poder, como usuario en el personalizador, cambiar la altura de la imagen. Ahí lo tienes. Entonces si estamos haciendo un cuatro imágenes por fila, probablemente queremos que la altura de la imagen se haga más pequeña también. Para que podamos establecer una altura de imagen más pequeña. Podemos ponerlo en 400, son 500 así que una buena combinación, tal vez en dos por fila lo tenemos establecido en 500. Pero si estamos haciendo cuatro por fila, lo ponemos a algo un poco más corto, como 300. Ahora, sé que este video probablemente ya es bastante largo, pero quiero mostrarte otra cosa, y es, podemos agregar en diferentes tipos de contenido en esta galería. No hace falta que solo sean fotos, realidad podemos agregar en videos incrustados también. Para esto, no quiero estar escribiendo muchos códigos, voy a estar copiando a través de algo, pero debería ser bastante sencillo de entender sin importar, lo que voy a hacer primero porque vamos a usar un tipo diferente, se pone en un condicional. Voy a decir tipo de bloque, recuerda, ahora tenemos acceso al bloque individual porque estamos buceando, y si el tipo de bloque es imagen, entonces sé que voy a tener un ajuste de imagen. Cerraré eso, y si ahora porque todo nuestro bloque hasta ahora, el tipo de imagen, nada debería cambiar cuando actualicemos la página. Ahora, todo es normal, pero aquí podemos sumar un tipo diferente. En lugar de donde lleguemos aquí, voy a añadir en otro bloque para un video embed. Yo sólo voy a copiar y pegar para que esto sea un poco más rápido, y este en lugar de imagen va a ser un bloque de video, y esta va a ser la etiqueta que se le muestre al usuario, y para la configuración, yo voy a, creo que se llama URL de video, y así el ID de eso va a ser URL de video es que solo se llama URL de video también, y la etiqueta va a ser URL de video. Creo que hay algunos atributos más que tengo justo aquí para mirar, podemos poner en lo que acepta también. Podemos hacerlo excepto YouTube y Vimeo. Vamos a necesitar quitar esa coma del final, de lo contrario, obtendremos un error. Si presiono Guardar en eso, ojalá no haya errores, y ahora cuando actualice la página y nuestro personalizador, y voy a la galería, en lugar de agregar bloque de imagen, solo va a decir agregar contenido. El motivo es que cuando hago clic en esto, ahora me va a dar la opción de agregar en los diferentes tipos. Puedo agregar en otro bloque de imagen como antes, o puedo agregar en un bloque de video. Aquí puedo pegar un enlace de YouTube o Vimeo. Para eso, solo necesito encontrar un video de YouTube, voy a encontrar rápidamente uno de mi propio canal de YouTube. Qué mejor video usar entonces, uno de mis videos de mi serie sobre desarrollo de tema Shopify, usemos eso como el video de ejemplo aquí mismo, y vamos a golpear save. Ahora, a pesar de que hemos guardado este bloque de video, necesitamos realmente enviar algo a la pantalla. Lo que voy a hacer es copiar a través de alguna lógica aquí, pero lo que voy a hacer es porque va a ser un código diferente para el bloque de video en lugar del bloque de imagen es que voy a poner el condicional en seguida. Este valor aquí es lo que creamos aquí, así que tenemos tipo, imagen, tipo video, esto es lo que estamos comprobando en este momento. Ahora, voy a copiar y pegar en algún código, para ahorrarnos un poco de tiempo. Para explicar brevemente este código, lo que tenemos pasando aquí es si el tipo de bloque es video, sabemos que este es un bloque de video, y si la URL está en blanco, vamos a poner en un video de placeholder con estos diferentes atributos. Si no está en blanco, entonces definitivamente tiene un valor, por lo que solo comprobamos si el tipo es YouTube, si es así, usamos el link embed de YouTube, si no, verificamos Vimeo, y si es Vimeo, usamos el enlace de inserción de Vimeo, y luego agarramos el ID de la URL del video. Esto es un poco más complicado porque en realidad sacamos un objeto de esta URL de video, y así tenemos un ID y un tipo en ese objeto. Por eso copié y pegué este código porque es un poco más complejo y no es muy común que usaras esto de todos modos, pero este es un buen ejemplo aquí de tener diferentes tipos. Lo que vamos a necesitar hacer para terminar esto es también tener este efecto nuestro iframe. En cada uno de estos escenarios, el iframe va a contener el video, así que acabo de agregar el iframe aquí también. Va a tener display ancho y altura de bloque en línea que hemos establecido en el personalizador. Este no va a tener ningún sentido para el iframe, pero ojalá siga funcionando, si entro ahora en, echemos un vistazo en el personalizador. verás que tenemos mi video apareciendo, desafortunadamente, el ancho no es correcto, así que actualicemos la página, veamos qué está pasando. Aquí tenemos nuestras envolturas de imagen, envolturas de imagen, envolturas de imagen, y luego tenemos el iframe aquí, que no tiene ningún estilo atribuido a él, así que solo está haciendo ancho y alto. Déjame ver lo que podría haber hecho mal aquí, y puedo ver que he puesto un punto frente al iframe, presumiendo que es una clase, pero estoy apuntando al elemento en sí, así que no necesito usar ese punto. Si actualizo la página, ya verás que se ajusta a nuestra cuadrícula que hemos configurado. Personalicemos eso en el personalizador, tal vez vamos a ponerlo en cinco por fila. Hagamos cinco por fila, y ahora se puede ver que el video embed es el quinto elemento de esta fila y en realidad podemos reordenar el contenido. Ahora, el usuario puede entrar, agregar cualquier número de bloques de imagen y bloques de video, tal vez algunos lindos videos y fotos de moda femenina, y eso pasará a la nueva línea. Podríamos necesitar jugar con estilos móviles, cambiar la cuadrícula para que sea diferente en el móvil, así que vamos a necesitar algunas consultas de medios, pero eso es quizás un proyecto para ti mismo para asumir, solo quería dar nos alguna práctica con esquemas y líquido, y qué mejor manera de hacer eso es a través de una sección. Si queremos poder poner esto en la página de inicio, no lo olvides, necesitamos insertar un preset aquí. Hagamos eso solo para terminar la lección, así que pondremos una matriz de presets, y de nuevo, voy a volver a la referencia numerosas veces presets aquí mismo, solo necesitamos uno con una categoría y un nombre. Volviendo aquí, poner un objeto, he puesto ese objeto. Tenemos categoría de cómo llamamos al otro. Creo que fue contenido personalizado, así que puedes conseguir que aparezca en la misma categoría, y le vamos a dar un nombre de galería, pulsa Guardar en eso. Ahora, esta sección podrá ser incluida también en la página de inicio. Si voy a la página de inicio, agrego una sección, tenemos un problema aquí. Eso es correcto. No he recargado, un personalizador todavía, siempre recuerda hacer eso chicos. Ahora cuando agrego en una sección, verás que la galería está aquí, y no va a contener los mismos datos que el lugar de aquí, porque cada vez que se incluye una sección, tiene sus propios datos. Podemos entrar y crear diferentes galerías. Ahí vamos, pongámoslo en otro bloque de imagen, la moda de la mujer, y hagamos de la última un video, veamos si me dieron el sumar. No tengo el enlace de video, pero ahí se puede ver el marcador de posición ahí. Tenemos nuestra sección de galería personalizada, podemos ponerla en nuestra página de inicio ahora, podemos usarlo en páginas específicas, y por ahora, deberías tener una comprensión bastante sólida de un líquido Shopify y esquemas. Ahora por supuesto, cuanto más experiencia obtengan con el líquido Shopify, mejor lo lograrán, pero creo que esto debería ser una buena base para ustedes chicos. Recuerda la documentación, la referencia líquida aquí mismo, ¿dónde está? Referencia líquida ahí vas. Este es tu libro de texto, esta es tu documentación, también tienes mi artículo, cual te recomiendo encarecidamente darte una perspectiva diferente sobre el líquido Shopify, y luego tienes la hoja de tramposos también, pero eso es más bien como una referencia rápida. Para cualquier cosa que ver con aprender todas las diferentes partes, tal vez haya un área de líquido del que no conoces demasiado y quieres aprender más sobre. O echa un vistazo a la entrada del blog o echa un vistazo a la documentación oficial. Búscalo, mira si puedes ganar un entendimiento de esa manera, porque ahora vamos a estar pasando de líquido para hablar de la API Ajax. Recuerda, dije que Shopify liquid es como el lenguaje de programación back-end con Shopify. Si queremos hacer algo puramente en el lado del cliente, vamos a necesitar usar JavaScript, y por suerte, dentro de nuestro tema, tenemos esta API llamada la API Ajax para permitirnos hacer ciertas cosas. Aprenderemos todo sobre eso en la siguiente lección y tal vez dos lecciones si es particularmente larga, todos modos, estoy emocionado por la siguiente, nos vemos ahí. 9. La API AJAX de Shopify: Bienvenidos de vuelta chicos. En esta lección vamos a estar hablando de todo sobre la API de Shopify ajax. Actualmente estoy en la documentación oficial de Shopify, encontré esta página solo por buscar una API de Shopify ajax y Google debería ser el primer resultado o uno de los primeros resultados y esta es la página en la documentación para el Shopify ajax API. Es bastante bueno, cubre casi todo lo que puedes hacer con la API ajax. Hay algunas gemas ocultas dentro de Shopify. Básicamente, la API de Shopify ajax es principalmente para agregar artículos al carrito, actualizar cantidades en el carrito, básicamente hacer cualquier cosa con el carrito sin una actualización de página, como dice aquí, tengo un ejemplo aquí de una tienda Shopify corriendo el tema del impulso. Impulse es un tema premium de Shopify que es bastante moderno. Quiero que echen un vistazo a lo que sucede cuando estoy en esta página de producto, selecciono una varianza y hago clic en “Añadir al carrito”. Aquí puedes ver que hay este carrito lateral o cajón lateral que sale con el carrito, y en realidad puedo aumentar la cantidad aquí y el precio se actualiza, y puedo disminuir la cantidad y puedo ponerla a cero y ahora el carrito está vacío. Todo el tiempo que estoy haciendo esto, no estoy recargando la página. Como se puede ver desde aquí arriba, no se está cargando nueva página, simplemente se está abriendo este cajón que ya está en la página. ¿ Cómo está haciendo esto? Está haciendo esto a través de la API de Shopify ajax, y puedo demostrarlo abriendo mis herramientas de desarrollador, por aquí en la pestaña Red, puedo ver todas las solicitudes de red. Añadamos un artículo al carrito y verás el primero que surgió, add.js, y puedes ver aquí el endpoint que va a ser cart/add.js, y está enviando a través, un montón de información. Ahora puedes ver la respuesta, es un montón de información de corte para esta variante de producto en particular. Ya verás aquí que también tenemos una solicitud de get to cart.js, y puedes ver aquí que tenemos el carrito completo aquí en este objeto. Tenemos una matriz para artículos, y puedes entrar y ver ese elemento que acabamos de agregar, así que esta es la API de Shopify ajax en acción. Esto de aquí, es un endpoint de la API de Shopify ajax, y la razón por la que lo sé es porque lo puedes encontrar aquí mismo. Aquí están los diferentes puntos finales, y como puedes ver aquí, si hago una solicitud get a este camino dentro de una tienda Shopify, puedo usar esto para conseguir el carrito y vuelve en formato JSON de nuevo. Tan solo una cabeza arriba, esto podría ser un poco avanzado para algunos espectadores usando API y lo que es JSON, sí aprendimos sobre JSON en un video anterior, pero aquí realmente estamos enviando solicitudes a un servidor y regresando objetos en forma JSON si realmente queremos usarlos en nuestro proyecto, vamos a tener que analizar estos objetos JSON. Este puede ser un tema bastante largo y probablemente necesites un poco de conocimiento de JavaScript para evitar esto. Nuevamente, esto no es un curso de JavaScript, todo se trata de Shopify, por lo que deberías tener algunos fundamentos en HTML, CSS, y JavaScript. Si no, sí tengo una clase aquí en skillshed.com en JavaScript. Si quieres echar un vistazo a eso o a cualquier otro lugar que quieras aprender al respecto. Pero esto es lo que vamos a estar haciendo, vamos a estar consultando estos extremos y haciendo lo que está pasando aquí. Ahora desafortunadamente, no tengo tiempo para construir un carrito lateral y toda esta interfaz de usuario en esta lección, lo que vamos a querer hacer es que te voy a mostrar las solicitudes solo en JavaScript, y luego te voy a mostrar un ejemplo que he hecho hasta que os voy a dar también chicos, donde he rentado un carrito a la pagina y soy capaz de actualizarlo, quitarle artículos, actualizar cantidades justo en la pagina. Mostraré un ejemplo de cómo se podría implementar realmente la interfaz de usuario y lo que se llama los oyentes de eventos al final de este video. Pero antes que nada, lo que quiero hacer es cerrar esto, voy a volver a mi tienda de pruebas, y voy a entrar en el nuevo tema en el que estamos trabajando. Porque vamos a estar recuperando datos puramente a través de JavaScript, realidad no necesito abrir mi editor de código, realidad puedo hacerlo todo a través de la consola, lo que voy a hacer es abrir un producto esa manera en realidad podemos agregar este producto al carrito y luego voy a abrir mis Herramientas de Desarrollador e ir a la pestaña Console . El tema va a ser más agradable a ver si vamos aquí abajo, y vamos a escribir nuestra primera solicitud, que es una básica, que se va a conseguir el carrito, si estás iniciando en un proyecto en blanco, deberías tener un carrito vacío, pero aún así conseguirás un objeto de carrito antes de que empecemos sin embargo, lo va a hacer mucho más fácil si tenemos algo llamado jQuery instalado, si no sabes si jQuery está en tu tema, está en muchos temas, puedes escribir un comando básico jQuery y ver si sale indefinido, tengo indefinido para la versión $ sign de jQuery y tengo jQuery no está definido. Lo que voy a tener que hacer es incluir jQuery en mi proyecto.Tendré que hacer una modificación de código solo para traer jQuery. jQuery es una biblioteca que sólo nos va a facilitar hacer estas solicitudes Ajax. Voy a escribir jQuery en google y encontrar un enlace a la CDN, aquí mismo, y solo puedo agarrar la versión minificada de la última versión. Voy a copiar esa etiqueta de script, entrar a mi archivo de diseño, y sólo voy a pegar eso en. Golpea “Guardar”. Ahora si actualizo la página, puedo comprobar si tengo jQuery instalado haciendo el mismo comando, y ahora puedes ver que me devuelven una función. Puedo probar lo mismo con la palabra clave jQuery en sí, y obtengo lo mismo. No hay ningún error diciendo qué es jQuery, así que sabemos ahora tenemos jQuery y ahora tenemos algunas funciones más agradables que hacer para obtener solicitudes con. El primero es una solicitud para cortar JS para conseguir el carrito, por lo que esta es una muy sencilla. Voy a usar la función get en jQuery, y voy a poner como primer parámetro, los puntos finales, que es simplemente /cart.js, y luego voy a poner en mi función de devolución de llamada. Lo que va a pasar aquí es que voy a hacer una solicitud a este punto final y luego voy a acceder a los datos que regresen, así que lo que voy a hacer es registrar la consola los datos para que podamos verlo aquí mismo en nuestra consola. No estoy seguro de por qué me sale este error aquí, pero como pueden ver, tengo los datos de vuelta. El problema con él, sin embargo, es que está en una cadena gigante, así que lo que voy a tener que hacer es analizar esto, porque esto es solo una cadena JSON, pero somos fácilmente capaces de lo que se llama analizar esto, y recuperaremos un objeto JavaScript con el que podamos trabajar. En lugar de solo poner datos, voy a envolver eso en un análisis, y ahora puedes ver que recuperamos un objeto JavaScript que realmente podemos navegar y mirar dentro. Ahora parece que ya tengo un artículo en mi carrito, y para verificar que esa es la información correcta, realidad solo voy a ir a la página de mi carrito, y veo, sí, tengo tres de estas zapatillas impresionantes en mi carrito. Quitemos ese producto de mi carrito. Ahora el carrito está vacío, volvamos a esa página de producto, cualquier página de producto, y voy a volver a ejecutar ese “Comando”. Ahora, puedes ver en nuestro carrito, tenemos carrito de artículos cero y tenemos la matriz de artículos que actualmente está vacía, tal y como esperábamos. Lo que está pasando aquí es sin tener que entrar en nuestro código back-end, soy capaz de recuperar el carrito de nuestra tienda Shopify todo en el navegador. Desde una perspectiva práctica, esto es lo que nos permite hacer las cosas puramente en el front end y en Shopify el lugar donde más sentido tiene tener esta funcionalidad es con el carrito. Porque el carrito es el principal punto de interacción con tu tienda Shopify. La gente está navegando por productos la mayor parte del tiempo, están mirando contenido. La interacción principal ocurre cuando la persona está lista para comprar. Ponen el artículo en el carrito y luego convierten ese carrito en un checkout y completan su checkout. No es de extrañar que Shopify te proporcione esta API para que realmente hagas cosas como esta con tu carrito. Corremos por el siguiente. Vamos en realidad, añadir un artículo a nuestro carrito. Voy a desplazarme hasta arriba y este es el que busco. Usa esto para agregar una variante al carrito. Recuerda, es una variante que se agrega al carrito, no al producto. Lo que vamos a necesitar hacer es agarrar la selección de variantes de este formulario y luego enviarla al carrito usando esta solicitud de post. Podemos hacer esto de dos maneras. Podemos especificar la ID de variante y la cantidad que queremos agregar al carrito. Pero el problema con esto es que aún no conocemos la variante hasta que una persona pone en su selección y la variante se determina a partir de esta selección. Lo que podemos hacer es en cambio serializar la forma y lo que eso va a hacer es tomar todos los datos del formulario y va a salir como un objeto aquí para nosotros. Usemos ese ejemplo aquí mismo. Voy a volver aquí. En tanto tengamos un formulario en nuestra página con la acción de carrito slash add, esto va a funcionar. Voy a darle a “Enter” en eso. Ahora volvamos a cargar el carro, y veamos qué pasó. Si abrimos nuestro carrito, ahora podemos ver el conteo de artículos es uno. En nuestro array tenemos un ítem, y el ítem es la varianza de nuestra selección aquí. Voy a hacer clic en esto para limpiar un poco esto. Quiero ejecutar el add al carrito Ajax solicita una vez más y quiero echar un vistazo en una pestaña de red a lo que realmente está pasando aquí. Recuerda, serializamos nuestro formulario y enviamos esos datos fuera a Shopify y puedes ver aquí, lo que eso se hace nos da un objeto con el ID de la variante que queremos agregar y cuántos de ellos queremos agregar. No necesariamente necesitamos una forma de producto si somos capaces de encontrar la variante a través de otros medios al igual que un FYI allí. En realidad podríamos, en lugar de serializar el formulario, si conociéramos el ID de variante para algún otro medio, podemos simplemente poner un objeto aquí con el ID de variante, copiarlo desde aquí, y luego la cantidad y luego eso hará exactamente lo mismo. Si despejo la consola y vuelvo a ejecutar el get cart, ya verás que tenemos tres de estos zapatos ahora en nuestro carrito. Apenas unas cuantas cosas más puedes hacer con la API Ajax. Podemos despejar el carrito. Podemos hacer una solicitud de post al /carrito /clear.js, establece todas las cantidades de todos los artículos de línea en cero, por lo que borra tu carrito. Volvamos aquí, hagamos una solicitud de post usando jQuery y los endpoints estaba claro el carrito y no necesitamos enviar más datos con él, así que solo podemos escribirlo así. Ahora, si volvemos a ejecutar get cart, verás que nuestro carrito está completamente vacío. Lo último que probablemente querrás hacer con tu carrito usando la API Ajax es actualizar la cantidad. Aquí puedes usar la solicitud de post al carrito barra de cambio endpoint, y puedes cambiar la cantidad de un artículo que ya está en el carrito. Lo que vamos a hacer es volver a agregar una variante al carrito. Simplemente copiando y haciendo otra vez la misma solicitud. Ahora, puedo crear una solicitud de post a este endpoint y poner en un objeto igual que antes. Yo lo puedo quitar de aquí y tal vez quiera actualizar la cantidad a cinco. Ahora, puedo enviar esa solicitud de post. Despejemos la consola y abramos el carro. Acabo de añadir otra. Ahora, deberíamos tener seis es el que busco y como pueden ver, tenemos seis de este artículo. Tenemos sólo una línea de pedido porque todo es la misma variante, pero la cantidad es de seis. Tiene toda la información aquí sobre la variante. Ahora, en forma de artículo de línea, como verás en el carrito. Muy bien, genial. Esas son las principales cosas que te gustaría hacer con tu carrito. En el ejemplo, vimos y el ejemplo, te mostraré en un seg. Para eso estamos usando la API Ajax. El API de Shopify Ajax hace que sea realmente fácil usar estos endpoints para recuperar datos sobre tu carrito y modificar tu carrito. El verdadero reto proviene del envío de oyentes de eventos y el manejo de esa respuesta para actualizar tu interfaz de usuario. Desafortunadamente, esa es una lección muy pesada de JavaScript y no particularmente específica para Shopify. Por eso solo te voy a mostrar un ejemplo, ahora y correrlo, pero no lo vamos a codificar desde cero en esta lección. El motivo por el cual es, es el conocimiento general de JavaScript de cómo hacer esto. Si quieres aprender más sobre JavaScript, de nuevo, tengo una clase sobre compartir habilidades, o puedes aprender sobre JavaScript en otro lugar. Esto sólo se refiere a Shopify, pero sí quiero darles un ejemplo de, cómo sería. Si cierro esta vista previa y volvemos a la tienda, realidad he configurado un tema con un ejemplo de carro reactivo. Aquí mismo, tengo este tema llamado Ajax API Demo, y está basado en el nuevo tema. Básicamente, lo único que he cambiado es que he agregado Bootstrap, que es un framework CSS. Ya verás que los estilos son un poco diferentes y tenemos estos botones, estilos justo fuera de la puerta. Si entro en un producto, puedes ver que el carrito está sentado justo al lado del producto, y si agrego un artículo al carrito, no necesito ir a la página del carrito para ver mi carrito actualizando. Puedo incluso cambiar cantidades y todas las diferentes partes de mi carrito se actualizarán. Como dije, normalmente tendrías que ir a la página del carrito y verla allí. Pero incluso desde aquí, no se pueden actualizar cantidades sin tener que recargar la página. Para poder hacer un carrito como el que acabamos de ver, así que volviendo a la plantilla de producto, debemos usar JavaScript y la API Ajax. Tan solo para demostrarte que esto está usando la API Ajax, voy a abrir mis Herramientas de Desarrollador y voy a echar un vistazo en la pestaña Red. Lo primero que quiero hacer es en realidad antes de que busquemos en la pestaña Red, solo quiero despejar el carrito por completo. Yo también voy a despejar esta consola. Ahora, vamos a añadir un artículo al carrito. Como puedes ver, tenemos una solicitud a add.js. Si miro ahí adentro, podemos ver lo que estamos enviando es un DNI y una cantidad. Estos son los datos del formulario. Lo que está haciendo en realidad es serializar el formulario, agarrar estos datos y luego lo está enviando a la API Ajax. En realidad antes de esto, antes incluso añadimos un artículo al corte, si solo actualizo la página. Ya verás que estamos recibiendo el corte de la API Ajax. El motivo por el que se puede decir eso es que si miramos aquí, podemos ver una solicitud get a cart.js. Si abro eso, sólo voy a tener que mover esto a través de un poco.Ya puedes ver que no hemos enviado nada porque solo estamos pidiendo llegar al carrito, no estamos publicando nada. Ya verás la respuesta que obtenemos de vuelta es todo el carro como objeto. Recuerda que vimos esto antes cuando apenas estábamos trabajando en nuestra consola. Pero la diferencia ahora es que la carga de la página en realidad está desencadenando esto. Entonces lo que está pasando es que estamos tomando estos datos y lo estamos representando en la página. Echemos un vistazo a lo que sucede cuando agrego otro artículo al carrito. Hacemos una solicitud a add.js. Aquí puedes ver lo que recuperamos es una línea de pedido. No recuperamos todo el carrito, pero recuperamos un artículo de línea, y eso nos da la información necesaria para actualizar nuestro carrito. Ahora bien, si yo aumento la cantidad, se puede ver que estamos haciendo una solicitud a change.js, que es otro punto final. Se puede ver aquí que change.js. Lo que estamos haciendo es que estamos enviando el DNI y estamos enviando a través de la cantidad a la que necesitábamos cambiar. Lo que eso hará es que se lleve los datos y luego volverá a devolver todo el carro. Se puede ver aquí, si vamos a mirar dentro del artículo, podemos ver cantidad en algún lugar aquí. Ahí vamos, son tres, y luego el recuento total de artículos es de tres ahí. Si agregamos otra línea de pedido, por lo que sólo tenemos que seleccionar una variante diferente, añadir eso al carrito. Ahora puedes ver agregamos esa línea de pedido y ahora tenemos todos sus datos aquí. Si fuera a cambiar la cantidad sobre eso, mira la siguiente solicitud. Ya verás que tenemos cinco artículos repartidos en dos líneas. El primer renglón tiene una cantidad de dos y el segundo renglón tiene una cantidad de tres, para un total de cinco. Entonces, puedes ver que tenemos el precio total y todo. Quería mostrarte cómo funciona la API Ajax además de actualizar la interfaz de usuario en la página. Ahora, como dije antes, hay algunas partes a esto. En primer lugar, los oyentes del evento. Ciertas cosas suceden en la página llamada eventos. Entonces esos eventos están configurados para desencadenar solicitudes a la API Ajax. Ahora, por supuesto, cuando los datos regresen, necesitamos realmente hacer algo y entonces eso algo está actualizando nuestra interfaz de usuario. Echemos un vistazo al código ahora mismo. Si vuelvo a este tema y hago clic en Editar código, aquí hay bastante código, y no voy a explicar línea por línea. Pero lo que he hecho aquí es que he usado un bigote de código de biblioteca de plantillas, justo ella. Lo que eso me permite hacer es crear estas plantillas. Por lo que esta es la plantilla para todo el carrito. Esta es la plantilla para la línea de pedido. Si quieres conocer más sobre el bigote, mustache.js es donde puedes aprender más al respecto. Plantillas de lista lógica, puedes leer el manual aquí. No es la documentación más sofisticada, pero esencialmente se puede pensar en bigote como una versión JavaScript de líquido. En realidad usa los mismos delimitadores, razón por la cual necesitamos cambiar realmente los delimitadores los personalizados para que en realidad no entren en conflicto. Entonces como puedes ver aquí en esta plantilla, igual que lo haríamos en líquido, insertaríamos una URL como esta. Pero, claro, porque estamos en líquido y el motor líquido va a interpretar eso como líquido, necesitamos usar delimitadores personalizados para diferenciar estas variables de plantilla de las que están en líquido. Tenemos las dos plantillas aquí mismo y tenemos todo un montón de JavaScript que incluye a nuestros oyentes de eventos y luego ahora Ajax API solicita, y luego manejamos la respuesta. También tenemos algunos estilos aquí para darle estilo al carrito. Como dije, no voy a pasar línea por línea de este documento porque aquí pasa mucho. He escrito extensos comentarios sobre todas las diferentes funciones. Definitivamente tendría una lectura de este expediente, y si tiene alguna pregunta, hágamelo saber. Se puede acceder a este archivo a través de mi página de GitHub, tengo un repositorio llamado skillshare donde se puede acceder a recursos para todas mis clases en skillshare. Aquí mismo puedes ver product.liquid es uno de esos recursos. Esta en realidad es un poco más agradable de mirar porque hace resaltar la sintaxis en estas plantillas de JavaScript. Pero en realidad necesitarás mover esto a tu tema para poder interactuar realmente con este código y ver qué está haciendo. Una cosa más antes de pasar un poco por el código, es que necesitarás jQuery instalado en tu tema. Por lo que si no lo tienes ya, necesitarás instalarlo descargándolo e incluirlo en tu carpeta de activos. O la forma sencilla es simplemente incluir un enlace a través de una etiqueta de script a la CDN. Entonces puedes simplemente, cómo obtuve este enlace, fue fui a jQuery, jQuery CDN, y encontré la URL. Entonces al igual que hacíamos antes cuando estábamos haciendo nuestras peticiones en la consola, necesitamos realmente incluir ese script en nuestro tema.liquid. O si ya existe, eso es genial. Pero hay algunas partes aquí donde estamos usando jQuery. Como mencioné, aquí tenemos nuestras dos plantillas. Antes de eso. Tenemos la página del producto como normalmente aparece. Entonces aquí es donde está nuestro código normal de plantilla de producto, que tengo por aquí. Tenemos un div aquí para el carrito lateral. Aquí mismo tenemos este div con una identificación de carro va aquí. El div del carrito va aquí, ID es lo que usamos para decirle bigote dónde poner la plantilla. Cuando se cargue la página, se va a cargar esta plantilla aquí mismo en este div. Ahora, este otro artículo de una línea es para cuando agregamos una nueva línea de pedido al carrito. Entonces es una sección del carro. Lo que eso va a hacer es que va a anexar a una parte específica de esta plantilla. Esto es básicamente todo solo maqueta con los datos apropiados colocados en diferentes partes de esta maqueta. Aquí está la verdadera magia. Entonces pasar por este código de una manera similar a lo que te mostré aquí. Recuerda que teníamos, así que solo pondré eso de nuevo a uno, refresca la página y verás que se genera ese carrito. Ahora bien, si vuelvo a actualizar la página, se puede ver que esto renderiza primero y luego esto renderiza, eso es porque esto es renderizado por líquido. Esto viene del back-end y esto en realidad se está renderizando en el front end usando bigote. Entonces, ¿qué hace eso es esta función aquí, corre get cart. Cuando se carga la página, ahí es cuando ejecutamos esta función get cart/si buscamos aquí, lo que hace get cart es que envía una solicitud a la API AjaX para obtener el carrito, pasa esos datos, y luego lo envía a este que maneja los datos. He hecho este manejo de los datos en unos pocos lugares diferentes, razón por la que he movido eso a una función diferente. Entonces puedes ver la función aquí arriba. Lo que esto hace es que actualiza el total del carrito y los artículos en base a lo que regrese de la API, la API tiene todos los precios en sentido, lo que tenemos que hacer es dividirlos todos por 100 para poder obtener el precio en $, y luego renderizamos el carrito con bigote. Este es el método del bigote con el fin de tomar nuestra plantilla, tomar nuestros datos, y combinarlos juntos para crear nuestra salida. Entonces, como pueden ver aquí, estamos tomando el elemento que tiene el ID de carro va aquí, y estamos poniendo esa salida de bigote justo ahí. De acuerdo, entonces eso es lo que está pasando cuando primero cargo la página. Está haciendo esa solicitud Ajax y luego renderizando esa plantilla usando Bigote. ¿ Y cuándo agrego un producto al carrito? Así que vamos a elegir esta variante talla nueve y hago clic en Añadir al carrito. Ah, ya tenemos talla nueve, así que eso sólo va a aumentar la cantidad. Si entro aquí y miro el enviar Event Listener para agregar al carrito, estamos haciendo un montón de cosas diferentes aquí donde evitar que el formulario haga un formulario estándar enviar, para que podamos manejar el formulario usando JavaScript. Estamos haciendo lo que hacíamos antes. Estamos serializando el formulario para que podamos obtener sus datos. Entonces lo estamos pasando a la API Ajax para una solicitud de post. Vamos a pasar la respuesta, actualizar el total del carrito. Entonces vamos a recuperar la respuesta del servidor y manejarlo. Recuerda que la respuesta para agregar un artículo al carrito en la API Ajax es el artículo. Entonces no es todo el carro como con cart.js o este, cart/change.js. Las respuestas para esos son todo el carro, pero la respuesta para esta solicitud en particular es la línea de pedido. Por eso, el total del carrito, tenemos que descifrarnos porque no está regresando en los datos. Entonces eso es lo que he hecho aquí. Es bastante fácil de descifrar, es este va a ser el total de carrito anterior más sea cual sea el precio de ese artículo. Entonces realmente necesitamos ir a buscarlo en la interfaz de usuario y actualizarlo, dividiéndolo por 100 con el fin de conseguirlo i $. Esto aquí mismo, comprobaremos si el artículo ya existe en el corte. Recuerda agregamos otro ítem de la misma variante. Eso significa que no necesitamos una nueva línea de pedido, solo necesitamos actualizar la cantidad de esa línea de pedido. Si entro aquí y elijo una variante diferente, verás que obtenemos una nueva línea de pedido. Eso es lo que hace este condicional. Comprueba si ya existe una variante. Se puede ver la función aquí arriba. Devolvemos un array basado en si se ha encontrado una coincidencia. Si ya hay una coincidencia, entonces en lugar de ejecutar bigote para renderizar una línea de pedido completamente nueva, solo tenemos que actualizar algunas cosas sobre la línea de pedido existente. Simplemente agarramos el artículo del DOM usando esto y luego actualizamos la cantidad y el precio. Aquí puedes ver si agrego otra, las cosas que cambian son la cantidad y el precio aquí, y por supuesto, el total, que ya hemos manejado aquí arriba. Pero si se trata de un artículo completamente nuevo, lo que vamos a hacer es empujar ese elemento en nuestra matriz de artículos. Vamos a tomar los datos, los precios y los vamos a dividir por 100 otra vez para obtener valores en dólares. Entonces vamos a renderizar la plantilla de ítem de línea. En cualquier momento estamos renderizando una nueva pieza de HTML, he optado por ir con bigote en lugar de hacer jQuery. Si estás escribiendo mucho mark-up, ayuda tener un lenguaje de plantillas. Pero si solo estás actualizando algunas cositas como un número aquí, entonces no necesitas preocuparte realmente. El último, que es el que acabo de hacer, es actualizar la cantidad. Si voy en alguno de estos y actualizo la cantidad, si la vuelvo a poner a cero, como pueden ver aquí, si la nueva cantidad es menor de uno, lo que voy a hacer es simplemente ocultar ese artículo justo después de la solicitud de post. Retrocediendo un poco, lo que voy a hacer es configurar oyentes de eventos aquí en estos botones de ajuste de cantidad. El “Plus” se va a ajustar la cantidad por uno positivo. El botón “Menos” va a ajustar la cantidad por uno negativo. Eso se va a pasar aquí junto con el evento, y vamos a encontrar la cantidad actual y el ID de variante del artículo, aplicar el ajuste a la cantidad actual para obtener una nueva cantidad, y luego aquí enviamos el post solicitud. El motivo por el que necesitamos encontrar la cantidad y el ID de variante es porque son lo que se requiere para enviar la API. Entonces la respuesta que obtenemos de vuelta es todo el carro, así que podemos pausar eso y luego si estamos quitando un artículo del carrito, entonces solo lo vamos a ocultar, y luego vamos a actualizar esas variables. Si no, vamos a manejar un objeto de carro completamente nuevo. Simplemente hace que sea más fácil aparentar que estamos recuperando todo el carrito de la API. Todo lo que tenemos que hacer es pasar esos datos de nuevo a esta respuesta del carrito de mango y luego volverá a renderizar todo el carro. Si presiono esto, estamos re-renderizando todo el carro con todos los datos. Como se puede ver, esta cantidad se está actualizando y este total también se está actualizando. Eso es mucho código y estoy usando mucho ES6 aquí. Se trata de algunas cosas de nivel avanzado. Definitivamente esto no es cosa de principiante. Definitivamente, no te preocupes si no entiendes completamente esto. Esto requiere bastante conocimiento de JavaScript y necesitarás saber también sobre la sintaxis de ES6. Por ejemplo, lo que he hecho aquí con la función de flecha, el equivalente en JavaScript tradicional es así. Estoy usando ES6 sólo porque creo que se ve más bonito, pero tal vez te sea confuso. Nuevamente, esto es un poco una lección de niveles avanzados. Lo principal que quiero que te quites de esto es lo que aprendimos aquí con la API Ajax. Quiero que entiendas que si estamos creando carros que no requieren recargas de página para poder actualizarlos, entonces estamos usando la API Ajax. Recuerda, cualquier cosa que se quede del lado del cliente e implique programación, obtener acceso a datos de back-ends, si no estamos recargando la página y haciendo una nueva solicitud de servidor de esa manera, entonces estamos usando Ajax, y la API Ajax y Shopify es cómo podemos acceder a esos datos. Eso es lo principal que quiero atravesar en este video. Esto debería abrirte a nuevas posibilidades con Shopify, pero es posible que no estés listo todavía para aprovechar plenamente esto. Hay mucha profundidad a JavaScript y a la API. Pero aquí mismo, creo que es un ejemplo que realmente lo resume. Si vas, de nuevo, echa un vistazo al carrito, pasa algún tiempo mirándolo, ver si lo puedes averiguarlo. De no ser así, trabaja en tus habilidades de JavaScript. Si es todo también, no te preocupes. Siempre tienes tu página de carrito estándar. En realidad muchas tiendas Shopify, incluso algunas realmente grandes, no tienen un carrito totalmente del lado del cliente. Había una tienda que vi, en realidad me sorprendió que no tuvieran esto cuando estaba haciendo investigación para esta clase. Luxy Hair es una tienda Shopify realmente grande. Si realmente vamos a un producto, aquí estamos. Tenemos este producto aquí. Si hago clic en “Agregar a la bolsa”, que es el equivalente de agregar al carrito, nos redirigen a la página del carrito, y si elimino un artículo, toda la página se recarga también. Incluso en un sitio web importante de Shopify, no están usando un carrito totalmente del lado del cliente. No es un gran trato si aún no estás listo para implementar eso. Muchos temas ya tienen eso. En cuanto a tus conocimientos de programación temática Shopify, depende de qué tan lejos quieras llegar con él. Pero si quieres codificar tu propio carrito del lado del cliente, o quieres poder manipular un tema actual con esa característica dentro de él, entonces necesitarás saber sobre esta API Ajax y conocer JavaScript. Pero no es esencial crear una tienda exitosa. Siempre puedes usar la página de tu carrito. No tienes que tener necesariamente un carrito del lado del cliente o un carrito lateral que salga. Esta lección, creo que fue una muy grande, pero es un tema bastante grande. No es un tema obligatorio. No creo que se pueda crear un curso sobre programación temática Shopify sin hablar de esta característica impresionante y de esta API. Si te interesa, aquí te presentamos la documentación en la página oficial. Consulta mi código de ejemplo si quieres ver mi implementación. Pero ahí es donde te dejaré en la API Shopify Ajax. En la siguiente lección, vamos a volver al líquido Shopify y aprender algunas patentes más avanzadas dentro de Shopify. Te veré en esa. 10. Patrones líquidos avanzados: En esta lección vamos a voltear nuestra atención hacia el líquido Shopify, y vamos a hablar de algunas de las limitaciones y peculiaridades dentro del lenguaje templador. Voy a volver a mi nuevo tema, yendo al código, y voy a abrir la plantilla de índice. Iré por aquí, haga clic en Índice. Lo que voy a hacer para esta lección es que voy a copiar y pegar ejemplos y luego vamos a trabajar a través de ellos. Lo que he hecho es que he pasado por el lenguaje y escogido un montón de peculiaridades de limitación y las formas a su alrededor. Tengo aquí este párrafo inicial. Esto es sólo un comentario, algo para que leamos, y luego voy a traer los ejemplos específicos. Lo que he escrito aquí es que si bien se puede pensar en el líquido como un lenguaje de programación, en realidad es solo un lenguaje de plantillas. Ciertas cosas que deberían ser un dado como poder recorrer un listado global de artículos o productos simplemente no son posibles en Shopify líquido. Muy frustrante cuando buscas esa consistencia y convención. Este es el lenguaje de las templaciones de Shopify. Se toman muchas libertades y desafían la convención en múltiples áreas. Además, los únicos tipos de datos que puedes crear y líquidos son las primitivas y las matrices, incluidas las matrices de matrices y primitivas, y lo que quiero decir con primitivas son básicamente solo cadenas y números. Las cadenas por supuesto son solo pedacitos de texto, si no estás familiarizado con ese término. Otra cosa que debería mencionar de frente, voy a estar usando mucha terminología de programación. Básicamente voy a estar tomando un programa es acercamiento al líquido y mostrando cómo podemos hacer más de las cosas de programación avanzada en este lenguaje de templación, que es un lenguaje muy limitado. Aquí te dejamos algunas de las limitaciones. Como acabo de mencionar, no se puede crear un objeto en líquido. Verás que en tan solo un segundo, puedes recorrer ciertos objetos parecidos a una matriz. Es muy frustrante, pero en realidad no puedes recorrer todos los artículos de tu sitio de Shopify, y tampoco puedes mirar a través de todos los productos de tu sitio de Shopify. El único modo de hacerlo es a través de la Colección all, que muestra todos los productos. No hay manera de que realmente miremos a través de los productos nosotros mismos usando líquido. Muy raro. Pero tal vez tienen una razón detrás de ello. Tampoco puedes crear tus propias funciones. Esto es algo que harías en cualquier lenguaje de programación, pero no puedes crear funciones en líquido. Hay una solucion para esto. Diga, por ejemplo, si quería usar una función para reutilizar código, y tenía algún código que simplemente tomó una variable de entrada e hizo lo mismo cada vez, todavía puede lograr algo así como una función usando un fragmento, y con fragmentos, en realidad puedes pasar parámetros, y esa es una forma en que podrías imitar ciertas funciones que encontrarías en otros lenguajes de programación. Lo último que he señalado aquí es que puedes crear un booleano que es un valor verdadero o falso. Pero no se puede asignar el resultado de una comparación a una variable y luego enfriar ese booleano. Ya verás a lo que me refiero en tan solo un segundo. Hablemos del primer ejemplo, que es la concatenación de cadenas. Voy a copiar y pegar en un comentario aquí para concatenación de cadenas y un encabezado, que podamos verlo en nuestro front end. Lo que he hecho aquí es que he hecho dos variables. Uno es mi nombre_ nombre y el otro es mi último nombre. Ahora tal vez quería crear una nueva variable con mi nombre completo. En JavaScript u otros lenguajes de programación, podrías hacer esto todo en una sola línea. Si abro mi consola, la borro, creo un FirstName, creo un LastName, y luego para crear el FullName, podría simplemente usar lo que se llama concatenación de cadenas. Puedo agregarme cadenas entre sí así. Usaría la variable en lugar del explícito Christopher. FirstName más un espacio entremedio más el apellido, y ahora cuando llamo para un FullName, tengo el FirstName más un espacio más el Apellido. Supongo que solo puedo usar más y menos para sumar cadenas. En Shopify, no funciona así. Echemos un vistazo a cómo haríamos eso. El modo en que hacemos eso en Shopify es a través de la etiqueta de captura. Lo que hace la captura es que captará básicamente todo dentro de las etiquetas de captura. Podemos correr un bucle aquí dentro. Podemos hacer todo tipo de cosas. Todo lo que voy a hacer es un ejemplo muy sencillo. Voy a generar el nombre_nombre, luego un espacio, luego la salida last_name. Ahora hemos creado una variable llamada FullName. Lo que puedo hacer es generar esa variable, full_name, y sólo para que sepamos dónde viene en el front end, voy a poner full_name delante de ella también. Ahora, abramos nuestro adelanto en una nueva pestaña y veremos que tengo un encabezado, Concatenación de Cuerdas, Nombre Completo, Christopher Dodd. Desafortunadamente, también tengo mi pie de página aquí, lo que hace que se vea feo. Permítanme simplemente quitar eso del pie de página brevemente porque esta será la última lección que hagamos sobre líquido. Si vuelvo a aquí, ya no tenemos ese texto de pie de página. Ahora puedes ver los resultados de FullName ha salido. Ahora este es un ejemplo muy básico, pero puedes imaginar lo que podrías hacer aquí. Podrías poner todo tipo de operaciones aquí. Puedes crear un bucle completo y en realidad veremos en un ejemplo posterior en este video cómo estamos poniendo un bucle completo dentro de una captura con el fin de hacer una matriz. Echemos un vistazo al siguiente ejemplo. Para el siguiente ejemplo, voy a copiar y pegar el código directamente en porque hay bastante aquí y no quiero reescribirlo. Básicamente, este ejemplo está en subcadenas. Subcadenas, como sugiere el nombre, una parte de una cadena. Digamos, por ejemplo, que queríamos agarrar la parte del ID de video real de una URL de video de YouTube. En otros lenguajes de programación como JavaScript, podríamos usar una función llamada subcadena, y podríamos seleccionar dónde queremos que comience y termine la subcadena, y luego podríamos asignar eso a una nueva variable. Bueno, es un poco diferente en el líquido Shopify porque no hay función o método de subcuerdas dentro del líquido Shopify. Lo que necesitamos hacer es realmente crear una matriz a partir de la cadena, y luego vamos a encontrar la parte que estamos buscando tomando uno de los elementos de la matriz. Tenemos esta URL de video de YouTube almacenada en esta variable, y antes que nada, vamos a comprobar si contiene reloj de slash youtube.com. Este es un paso opcional. No necesariamente es relevante para el ejemplo, pero esto es lo que querrías hacer. Te gustaría comprobar si realmente tiene esto en la URL, y luego si lo hace, lo que vamos a hacer es que vamos a dividir la cadena alrededor de la v es igual y luego tenemos acceso a lo que hay a ambos lados de la misma. Ahora es aquí donde se vuelve confuso porque tenemos que hacer esto en múltiples pasos, y dificulta etiquetar correctamente tus variables. Este ejemplo, tenemos video_id aquí, y luego lo estamos reasignando a algo completamente diferente aquí abajo. Aquí video_id no necesariamente tiene sentido como nombre de variable. Pero lo que estamos haciendo aquí es solo crear una matriz con el fin de acceder a nuestro id de video Si puedo hablar un poco a través de él, lo que estamos haciendo es que estamos creando una variable donde estamos tomando la URL y vamos a dividirla por v es igual. Si recordamos lo que hace split, crea una matriz. Ahora tenemos esta matriz video_id y tiene dos artículos. Tiene todo antes de que la v sea igual, y después de la v igual. Vamos a poner un cheque extra aquí. Nuevamente, no es obligatorio, pero si tienes un segundo argumento en tu URL de YouTube, vas a querer comprobarlo. Si ese es el caso, nos vamos a dividir de nuevo porque no queremos la parte después del final. Digamos por ejemplo, fui por aquí y tal vez puse en un tiempo, creo que el código es t en YouTube, t o s, creo que déjame simplemente guardar eso porque estamos filtrando aquí y sacando la parte después del final, deberíamos estar bien de todos modos. Ahora lo que estoy haciendo es tomar esa matriz aquí arriba, encontrar el segundo valor en esa matriz, que será la parte después de v es igual, y luego lo voy a dividir de nuevo para este fin. Voy a dividirlo de nuevo, y en la misma línea, voy a tomar el primer elemento de la matriz resultante. Tengo esta cadena que vamos a convertir en una matriz. Entonces lo estamos dividiendo con esto como el primer elemento de la matriz, y luego esto como el segundo elemento de la matriz. Entonces lo que tenemos que hacer es hacer exactamente lo mismo en este apartado. Este va a ser el primer elemento de la matriz, y esto del otro lado del final, que es este carácter dividido, es lo que va a ser el segundo elemento de la matriz. Entonces solo llamamos primero, para obtener el primer elemento en la matriz, no nos importa el segundo. Lo que pasa es que obtenemos nuestro video_id final y luego podemos insertar eso directamente en un enlace Embed. Comprobemos si eso funciona. Vamos a ir por aquí y refrescar la página. Ahora podemos ver que aquí tenemos mi enlace de video. Lo que acabamos de hacer fue convertir esta URL de YouTube en una URL de inserción de YouTube, que toma el mismo id de aquí. Ahora sé que se trata de muchas líneas, y como dije, los nombres de las variables son confusos porque tenemos que darle múltiples pasos. Es posible que quieras ponerle algo más a esto. A lo mejor quieres llamar a esto url_parts de video y luego referirlo como partes de video_ aquí. Hagámoslo solo por ejemplo para que sea más fácil. Tenemos partes de video y luego llamarlo video_parts aquí. Ahorra que aún debe funcionar, y resulta que sí. Eso es solo un consejo si quieres que sea más legible para ti y sí suena confuso, puedes etiquetar la variable otra cosa, pero muchas veces lo vas a ver así. Acabas de reciclar un nombre variable. El siguiente ejemplo es probablemente el más complicado de los ejemplos de los que voy a hablar en esta lección avanzada de líquidos, y eso es crear matrices de objetos. Puso objetos entre comillas dobles aquí porque como mencionamos antes, no podemos crear objetos y líquidos y no podemos crear nuestras propias matrices de objetos como vimos antes. La única forma en que podemos crear una matriz es tomando una cadena y dividiéndola en función de algún valor delimitador. Entonces tenemos un elemento para cada una de las partes de la cadena que están entre esos valores de división. Entonces eso significa que en realidad no podemos crear matrices de objetos. Entonces como escribí aquí, Shopify líquido no permite hacer objetos y tampoco se pueden crear matrices de objetos. Puede, sin embargo, hacer matrices de cadenas y números, así como matrices de matrices usando Capture y split. Entonces, ¿cómo quiero explicar esto, para aquellos de ustedes que tal vez no consiguen del todo lo que estoy diciendo aquí es mostrarles un ejemplo en JavaScript primero. Por lo que en JavaScript, podría crear dos objetos. Vamos a crear objetos de dos personas Voy a tener persona1, que va a tener un nombre y apellido de Christopher Dodd. Entonces se me ocurrió un nombre de persona aleatoria para person2, que va a ser Michael Jordan. No sé por qué elegí a Michael Jordan. Su nombre acaba de llegar a mí no haciendo ninguna comparación allí en absoluto. Entonces lo que podría hacer es crear una matriz de personas. Podría almacenar ambos objetos en esta matriz. La forma en que creas una matriz en JavaScript, abre un corchete cuadrado, coloca tu primer objeto, poniendo tu segundo objeto o valor. Entonces ahora si produzco matriz de persona, se puede ver que tengo esta lista de objetos. Lo que esto me permite hacer, como lo hemos hecho con bucle a través de productos en una colección, es que puedo recorrer este array y agarrar el nombre de cada persona, por ejemplo. Ahora desafortunadamente, no podemos hacerlo nosotros mismos en Shopify líquido. El equivalente de lo que acabo de hacer si existiera en Shopify liquid, sería crear una matriz llamada, llamémoslo colecciones No creo que ya estemos usando eso. Podría simplemente no usar corchetes en líquido, pero estaría bien si pudieras crear algo como esta colección, colección2 y luego terminamos así. Por lo que ahora hemos creado esta matriz de colecciones. Entonces si guardo eso, vamos a conseguir un error líquido aquí arriba. Error de sintaxis líquida esperado final de cadena pero encontró coma en colección, colección2. Entonces nos está diciendo que no podemos hacerlo y de hecho, si intentamos hacer referencia al primer ítem en este. Entonces si traté de hacer colecciones, toma el primer elemento de la matriz y di título, si produzco que nada va a salir en la pantalla. Acabamos de tener el rumbo de esta sección. Pero en realidad no tenemos el título de la primera colección porque en realidad no podemos hacer esto. Para que eso pueda ser frustrante a veces en líquido, hay momentos en los que podríamos querer crear nuestras propias colecciones, supongo. Pero la forma obvia de evitarlo es realmente crear tu colección en Shopify y luego puedes recorrerla como normal. En Shopify, no puedes crear objetos en líquido, pero por supuesto puedes crear colecciones en tu tienda y ese es un objeto con una variedad de productos ahí dentro. Hay algunas soluciones para esto. Yo sólo voy a copiar y pegar en algún código más para pasar si ustedes ahora. Este primer ejemplo es un poco complicado, pero una vez que te pones la cabeza alrededor de él, debería tener sentido. Lo que vamos a hacer es que vamos a usar esa etiqueta de captura antes para crear una lista de productos. ¿ Cómo vamos a limitar cada uno de estos diferentes atributos? ¿ Es que vamos a usar un símbolo de pipa, y luego al final de ese producto vamos a poner un doble colon. Caminemos por lo que está pasando aquí. Por lo que estamos capturando el resultado de esto en una variable. Entonces lo que vamos a hacer es recorrer un conjunto de productos en una colección y luego vamos a agarrar las macetas a las que queremos tener acceso. Por lo que tenemos título de producto. Después ponemos un carácter para que dividamos eso con el siguiente valor, que es la URL del producto, dividirnos que es la URL del producto de nuevo y dividirnos de nuevo usando estos valores que hemos sacado del objeto del producto. Entonces éste pone un delimitador para terminar el producto siempre y cuando no sea el último. Porque no queremos confundir aquí nuestro filtro split para pensar que hay otro artículo después de eso. Entonces si es el último, eso es todo. No se requiere más escisión. Al final de esto, lo que vamos a tener es una cuerda con toda esta información dividida por tuberías, y al final del producto, estas dos columnas. Creo que va a tener más sentido si acabo de salir en la página. Entonces si acabo de emitir productos, enumerar, guardar, y veremos los resultados en nuestra vista previa. Entonces si miramos hacia abajo, tenemos el título, entonces tenemos una pipa para separarlo de la URL de ese producto y tenemos otra pipa para separarlo de la descripción de ese producto. Entonces tenemos otra pipa para separarla de la URL de la imagen, y luego podemos ver aquí tenemos los dos puntos para separarlo del siguiente producto, y luego tenemos lo mismo otra vez. Entonces esto no es demasiado útil porque todo esto es solo una cadena, sino porque tenemos esos caracteres ahí para indicar cuándo dividir, ahora podemos usar el filtro split para convertir esto en una matriz. Entonces ahora voy a crear una matriz de producto a partir de esa lista de productos y dividirla por este delimitador. Entonces ahora voy a tener justo esta parte. Voy a tener un array con artículos que solo tienen esta parte. Pero de nuevo, quiero dividir eso más una vez que esté dentro de él y quiero dividirme por esta pipa. Entonces ahora voy a recorrer todos los productos y la matriz de productos y luego crear otra matriz llamada product_vals y vamos a dividirpor esto ahora. Ahora, puedo hacer referencia a los valores dentro de esta matriz por su posición. Entonces desafortunadamente, por supuesto que no estamos creando un objeto aquí. En realidad no puedo decir, dame el título del producto. Entonces no es un código muy legible pero de nuevo, es una solucion. Por lo que realmente puedo usar esto para encontrar el primer valor y si sé que el primer valor siempre va a ser título del producto, entonces esto me dará el título del producto. Esto me va a dar el tercer valor. Entonces si miro este y luego voy aquí al número tres, me va a dar la descripción del producto. Entonces si guardo eso, creo que el código se estaba ejecutando antes de todos modos, actualizamos la página. Ya verás que tenemos el título y la descripción de todos estos productos dentro de esa matriz. Entonces este no es un ejemplo muy práctico, pero te está mostrando una forma en que realmente puedes hacer cosas para las que usarías un objeto, pero hazlo en Shopify líquido donde no puedes crear objetos. Voy a hacer un ejemplo más y luego vamos a seguir adelante. Este ejemplo podría realmente tener más sentido para ti. Entonces este ejemplo que tomé de raisedbyturtles.org, definitivamente checarlos y darles un grito por mí. Entonces lo que estamos haciendo aquí es que estamos creando múltiples matrices. El primer array va a describir lo que es este objeto y luego la segunda matriz y matrices después de eso tendrán valores, atributos básicamente dentro de esa matriz. Entonces si puedes ver lo que estoy haciendo aquí o lo que ha hecho el autor al criado por turtles.org. Hemos creado esta matriz de elementos y nos dividimos por este símbolo hash. Entonces vamos a tener en nuestros artículos array dos artículos, item1 y item2. Entonces en esa matriz de colores, vamos a tener azul y verde. Entonces la forma en que podemos vincular estos juntos es por su posición en la matriz. Entonces mientras escribamos el primer elemento en nuestra matriz de colores para que coincida con el primer elemento en nuestra matriz de ítems, entonces podemos referirlos por el mismo índice y eso es lo que estamos haciendo aquí. Entonces lo que estamos haciendo aquí, e ignorar estas líneas aquí. Eso es sólo para reducir el espacio en blanco hace exactamente lo mismo que eso. Pero básicamente lo que estamos haciendo aquí es que estamos corriendo a través de cada elemento de la matriz de ítems, y si es el primer elemento, vamos a obtener el atributo de color haciendo referencia al índice del bucle. Entonces, solo eliminemos este condicional y lo que obtendremos es que obtendremos una matriz de artículos dando salida al color que le pertenece. Entonces si golpeo guardar, refresca la página, y me desplaza hacia abajo, nos pondremos azul y verde. Incluso podemos venir aquí y si queríamos agregar el nombre del elemento asociado a ese color, lo que podríamos hacer es porque ya estamos dentro del ítem y la matriz de ítem, solo podemos dar salida al ítem y luego voy a poner una etiqueta de ruptura para romper estos. Deberíamos ver artículo uno artículo azul a verde. Refresca la página y verás el elemento un elemento azul a verde. Ahora, siento que necesito decir algo aquí y eso es si no entiendes completamente la aplicación práctica de esto ahora mismo, no te preocupes. Se trata de cosas líquidas avanzadas. Por eso lo llamé la lección líquida avanzada. Esencialmente lo que estoy tratando de hacer aquí es una vez que te metas más profundo en tu viaje de programación líquida de Shopify, y comiences a dominar más el lenguaje. Vas a necesitar saber cómo hacer las cosas al margen y así de eso se trata esta lección. Usando las referencias que ya te he mostrado, usando tu práctica de brazo con programación temática Shopify, y luego llegando a un punto donde hay ciertas cosas que quiero hacer en el lenguaje de programación. ¿ Cuáles son las limitaciones y cómo puedo sortear eso? Entonces si aún no estás en esa etapa, no te preocupes demasiado, solo pensé que lo mencionaría ahora mismo porque este es un área donde podrías estar pensando, ok, Chris, ¿por qué necesito hacer esto? Bueno, si aún no necesitas hacerlo, no te preocupes. Pero esto son cosas una vez que te metes realmente profundamente en líquido Shopify de las que vas a querer estar al tanto. De acuerdo, como es el programa, nos gustaría pensar que hay una forma consistente y convencional de hacer las cosas. Pero lo frustrante con el líquido Shopify es que es un lenguaje de plantillas desarrollado por Shopify, y ahí hay muchas peculiaridades y diferencias. Desafía la convención de muchas maneras. Entonces esta lección es como el antídoto a eso. Entonces otra vez, esto es algo avanzado. No te preocupes demasiado. Si esto no es algo que puedes usar de inmediato. Pero tal vez sea algo a lo que volver en una fecha posterior. Dicho esto, pasemos a nuestros ejemplos finales. El siguiente ejemplo se trata de almacenar valores booleanos. Entonces como mencioné arriba, déjame dividir esto. Llama a esto creando booleanos. Como mencioné arriba aquí. Podemos crear un booleano, pero sólo asignándolo explícitamente verdadero o falso. En realidad podemos asignar el resultado de una comparación a una variable. A lo que me refiero con eso es, de nuevo, te voy a mostrar un ejemplo en JavaScript. 11. Extra: la aplicación Storefront API: Muy bien todos, bienvenidos a esta lección extra en la API de escaparate. Hasta ahora, hemos estado trabajando justo con el canal de ventas de la tienda en línea. Si miro en mi tienda Shopify, puedes ver una lista de canal de ventas y tienda online es la que viene preinstalada con tu cuenta de Shopify. Por supuesto, la forma de personalizar tu canal de ventas de tienda online es a través de temas. Hemos estado haciendo todo desde dentro de un tema. Bueno, la API de escaparate en realidad nos permite acceder a los datos de nuestra tienda desde cualquier lugar de la web. Pensé en la mejor manera de explicar esto y creo que probablemente la mejor manera es que ustedes lo vean de inmediato. Lo que voy a hacer es mostrarte una app que creé. Llamo a esta app la app Shopify customer storefront. He alojado en un host de aplicaciones gratuito llamado Heroku app. Para poder usar esta app, voy a tener que insertar algunos detalles de la Tienda. Tengo el token de acceso que he creado ya listo para ir y el dominio de la tienda está aquí mismo. Si golpeo submit, se va a conectar con mi tienda y luego de repente estás viendo un escaparate personalizado que he construido sobre una dirección completamente diferente a Shopify. Aquí mismo, esta aplicación está hecha con un marco JavaScript llamado view JS, que recientemente aprendí y es realmente genial para hacer aplicaciones interactivas del lado del cliente. Lo que puedes hacer con esta app es que puedes navegar por las colecciones dentro de una tienda en particular, en este caso mi tienda, la tienda de pruebas Chris. Se puede navegar por las diferentes páginas de contenido, se puede hacer clic en un artículo en particular, se puede seleccionar una variante, se puede agregar la variante al carrito, y todo esto se hace en el lado del cliente. Como puedes ver, no hay ninguna actualización de página en absoluto porque he hecho esto completamente con un framework JavaScript llamado view JS. También podrías usar esta API para crear aplicaciones en angular o reaccionar, es una gran manera para que utilices los datos de tu tienda de una manera completamente del lado del cliente. Ahora si hago clic en checkout aquí, va a la caja real de mi tienda, y así se remonta a Shopify, pero toda esta experiencia de compra aquí incluyendo mirar blogs, está todo en esta plataforma de hosting de terceros. Cada vez que hago clic en algo y carga datos, está llegando a través de la API de escaparate. Abramos mi pestaña de red y en realidad podemos ver estas solicitudes entrando. Voy a ir a mi pestaña Red y hacer clic en la pestaña de XHR. Actualicemos mi app. Se puede ver que aquí hemos hecho tres peticiones. El API de escaparate utiliza algo llamado GraphQL, que es todo un tema en sí mismo. Si no has estado familiarizado con la forma de hacer las API de GraphQL, pero esencialmente tenemos GraphQL, hay un solo endpoint en lugar de múltiples endpoints, y envías una consulta a ese endpoint y te devuelve el datos exactos que estás buscando. Si ya has usado API de descanso antes, tal vez haya un endpoint API donde solicitas todo, digamos las colecciones en tu tienda, pero en este caso solo quiero la imagen, quiero el título y quiero el enlace al colección. Bueno, en una API de descanso, es posible que no puedas seleccionar solo esos datos, y entonces lo que harías es solicitar toda la información sobre las colecciones. Eso significa que es posible que tengas que hacer múltiples solicitudes de API o simplemente hacer solicitudes que sean más grandes de lo que necesitan ser. Nuevamente, este es un tema un poco más avanzado, pero solo quería que obtuvieras el concepto y tal vez puedas usar la API de escaparate para tus propios propósitos por la pista. Volviendo a esta pestaña de red aquí, si hago clic en la primera solicitud, si entro en cabecera, se puede ver la consulta que envío a través la API y esta consulta aquí mismo es una consulta GraphQL. Básicamente dice que quiero el objeto de la tienda y quiero estos atributos en el objeto de la tienda. Eso es sólo alguna sintaxis GraphQL. Aquí puedes ver lo que recuperamos de la API. Obtenemos los datos de la tienda y obtenemos cosas como código de moneda, el nombre de la tienda, dominio primario y la razón por la que existe esta solicitud es porque estoy usando el nombre de la tienda aquí mismo. Echemos un vistazo al siguiente. Parece que éste está accediendo a las colecciones. Como se puede ver aquí, esta es la consulta GraphQL. Sé que es bastante grande, si no entiendes GraphQL, no te preocupes, no vas a entender esto, pero el punto que estoy haciendo es que recuperas algo de la API de escaparate. Se trata de todos los datos de recolección, pero no más de lo que solicitaste. En mi caso, lo que he hecho es que he solicitado cada colección y quiero saber su mango, es ID, y quiero el primer producto de cada colección y la primera imagen de cada producto de esa colección. El motivo es que si la imagen es nula, quiero poder acceder a la primera imagen del primer producto en su lugar, así que por eso he accedido profundamente a esta colección. Entonces tienes la tercera petición. El tercer requerimiento como se puede ver aquí, es acceder a las páginas con en mi tienda. Donde uso esto es justo aquí abajo para proporcionar algunos enlaces a diferentes páginas. Estoy usando el nombre de la página y luego estoy usando el mango para crear un enlace único a esa página también. Si hago click sobre nosotros, puedes ver esto saca los datos de la página sobre nosotros. Si hacemos click aquí, podemos ver otra solicitud para obtener más información que de hecho es la misma información. Si hacemos un poco más dando vueltas, si hago clic en el blog, puedes ver que hacemos otra solicitud de API de escaparate. Si cavo aquí, puedes ver que tenemos una lista de artículos. Entonces por supuesto estos datos se están representando en la página usando vista JS. Entonces para darte un poco de un vistazo a la app si te interesa, tengo aquí mismo, la carpeta de servicios es donde hago todas mis solicitudes de API. En mi servicio base, tengo la configuración para la solicitud API de escaparate. Entonces creo esta función de llamada API, que utiliza un eje de código de biblioteca para realmente consultar la API de escaparate y expongo esa función al servicio del producto y aquí están todas mis consultas GraphQL. Ahora de nuevo, esto está entrando en muchos conceptos diferentes como view JS, con los que podría no estar familiarizado, GraphQL, con los que podría no estar familiarizado y tal vez ni siquiera tenga mucha experiencia con las API, así que no te abrumes aquí mismo. No vamos a pasar mucho tiempo pasando por esto, pero lo que quiero hacer en esta lección es mostrarte un ejemplo de cómo podemos usar estos datos en nuestro tema. Esta clase por supuesto, se trata de programación temática Shopify y es posible utilizar la API de escaparate en tu tema si así lo deseas. Entonces en eso nos vamos a centrar en esta lección, pero para la mayoría de la gente, la API de escaparate va a ser más útil cuando necesites acceder a los datos de tu tienda Shopify. Pero quieres poder hacer eso de una manera completamente personalizada, por ejemplo, creando un escaparate personalizado o quizás una aplicación telefónica que utilice los datos de tu tienda. El almacén para una API se trata de acceder a los datos que el cliente ve. Entonces nada de esto tiene que ver con acceder a cosas como agregar productos, agregar clientes, crear descuentos. Eso es todo a través de la API de administración, que es lo que usas para construir aplicaciones que van justo aquí en tu sección de aplicaciones. Nuevamente, no quiero hablar demasiado de todo eso porque eso está fuera del contexto de la programación temática de Shopify, pero lo que quiero hacer en esta lección es mostrarte un ejemplo de cómo realmente podemos usar la API de escaparate en un tema en nuestra propia tienda. Lo que vamos a necesitar hacer es si vuelvo a mi app y he enviado aquí una opción para desconectarme. Podemos ver que necesito un dominio afilado y necesito una tienda para un token de acceso. Como ya vieron antes, ya tenía un token y lo puse dentro, pero vamos a recrear un token para que ustedes puedan ver cómo harían esto ustedes mismos, así que si entro en aplicaciones, entonces entro a administrar aplicaciones privadas. Deberías estar familiarizado con este proceso si ya has configurado el kit de temas antes, porque como puedes ver aquí, tuvimos que crear una aplicación privada para poder usar el kit de temas. Como puedes ver aquí abajo, tengo esta aplicación API de escaparate. Voy a borrar eso y recrear para ustedes para que podamos ver cómo podemos crear una aplicación API de escaparate nosotros mismos. Aquí arriba hay un botón para Crear una nueva aplicación privada, voy a hacer clic en eso y nombrar a esta app algo apropiado. Sólo voy a llamarlo aplicación API de escaparate. Esta es básicamente la interfaz que te permitirá conectarte a la API de escaparate. Vamos a poner en el correo electrónico del desarrollador de emergencia. Como puedes ver aquí, podemos establecer algunos permisos de API de administración. No necesitamos eso. Lo que necesitamos son algunos permisos de API de escaparate. Aquí mismo, todo lo que tenemos que hacer es marcar esta casilla de verificación y luego podemos personalizar qué permisos vamos a habilitar esta API. Los que ya está comprobado deberían ser lo suficientemente buenos pero vamos a revisar todo por si acaso. Si golpeamos “Guardar”, nos va a advertir que cualquiera que tenga estas credenciales puede hacer solicitudes a la API así que ten cuidado con quién compartes esta API. Voy a dar clic en “Entiendo, crear la app”. Ahora puedes ver que se crea la app y si me desplace hacia abajo, me da el token de acceso de escaparate. Voy a dejar esta página abierta para poder acceder a ese token más tarde, y voy a abrir mi canal de ventas de tienda online en una nueva pestaña. Lo que voy a hacer es volver a entrar en nuestro nuevo tema y vamos a editar la plantilla de índice. Tenemos todo este código aquí de nuestra lección avanzada de líquidos, vamos a quitar eso. Lo que voy a hacer en su lugar es poner un div que va a contener nuestro contenido. En realidad le voy a dar una identificación porque sólo va a haber una y voy a abrir algunas etiquetas de guión. Debido a que estamos utilizando una API que puede acceder a datos desde cualquier parte de Internet, podríamos hacer esto en cualquier plantilla. No tiene que estar en la plantilla index.liquid, podría estar literalmente en cualquier lugar. Para este video, con fines de demostración, sólo tiene sentido hacerlo en la plantilla index.liquid. Lo que voy a hacer es agarrar algunos datos usando la API de escaparate y luego representarlo en la página a través de jQuery insertando ese contenido en este div. Voy a copiar y pegar el código API porque sí toma algo de configuración. Esta es una función que creé antes, obviamente. Lo que hace es que toma una consulta y luego envía esa consulta a la API de Ajax. Entonces con esa respuesta, en realidad podemos acceder a los datos que regresan. Pasemos por esto muy rápido. Estamos usando la función de fetch incorporada dentro JavaScript para hacer una solicitud al endpoint de la API de escaparate, que es solo tu nombre de tienda/api/graphql.json. Si estuviéramos haciendo esta solicitud fuera de Shopify, por supuesto tendríamos que incluir el nombre de la tienda. Si cambio a mi app y voy a la configuración en mi APICAll aquí, ves que hemos tenido que establecer el nombre de la tienda aquí. Pero como ya estamos en la propia tienda aquí mismo, solo podemos usar la URL relativa y enviar una solicitud a /api/graphql.json. Entonces abrimos aquí este objeto. Nos aseguramos de que el método sea post y tenemos que enviar estos encabezados. Tenemos que asegurarnos de que el tipo de contenido sea GraphQL, tenemos que permitir el origen de control y por supuesto, necesitamos nuestro token de acceso. Esto es lo que generamos antes. Si vuelvo a mi aplicación privada, recuerda que quería mantener esto abierto, voy a tener que bajar aquí, copiar ese token de acceso, y reemplazar el token de acceso aquí por el mío propio. A continuación estamos configurando el cuerpo de la solicitud a la consulta que se va a pasar aquí. Entonces con la respuesta, lo vamos a codificar con json. Tenemos que hacer esto para que realmente leamos los datos. Las dos cosas que vamos a necesitar es que vamos a necesitar una consulta real. Simplemente voy a configurar una consulta en blanco aquí arriba. Entonces tenemos que llamar realmente a la API. Voy a configurarlos ahora, yendo a la consulta API, y luego voy a usar esa promesa. Voy a decir respuesta, consola, respuesta de registro. Todo esto va a hacer, una vez que enviemos la consulta es registro de consola lo que obtenemos del servidor. Para crear esta consulta, una herramienta útil está en la documentación de la API de escaparate. Creo que es en empezar o en la primera página de referencia API. Sólo para tener en cuenta, aquí hay mucha información si quieres hacer tu propia investigación sobre la API de escaparate. Esto es más un pequeño espectáculo práctico y contar cómo se puede usar realmente la API. Pero si vas a esta página, la página de referencia de API para la API de escaparate, puedes desplazarte hacia abajo y obtienes este interactivo GraphQL Explorer. Esto te ayuda a crear consultas GraphQL. Como se puede ver aquí, tenemos uno muy básico que agarra el objeto afilado y luego obtiene el nombre de él. Si corro eso, puedes ver lo que recuperaremos es algo como esto. Solo usemos esto para probar si nuestra llamada API está configurada correctamente. En esta consulta, voy a enviar a través de esta consulta GraphQL. Si golpeo “Guardar” en eso, y luego previsuo el tema, deberíamos ver nada que aparezca en la página aparte del encabezado. Pero si abro mi consola, veremos que tenemos un error, tenemos un corchete faltante después de una lista de argumentos. Sólo volvamos atrás. A lo mejor hubo un error en alguna parte de aquí. Sí, me he olvidado de poner ahí un soporte extra. Vamos a refrescar esta página. Ahora que tenemos esta consola abierta, podemos ver que tenemos un objeto que regresa de la API de escaparate. Podemos verificar que esto es de la API de escaparate pasando a nuestra pestaña de red, y puedes ver aquí hay una respuesta de la API. Podemos ver la consulta que enviamos y podemos ver la respuesta. Ya que la consola registramos ese objeto, ahora lo tenemos disponible en nuestra consola también. Tenemos el nombre de nuestra tienda, que es algo que podríamos hacer fácilmente dentro de un tema de todos modos. Hagamos algo un poco más involucrado. Lo que voy a hacer, volver a aquí, y voy a copiar a través de una consulta GraphQL que tenía en mi aplicación de escaparate personalizado. Si paso a mi código de proyecto, solo voy a agarrar el código API aquí por agarrar los primeros 20 productos de la tienda y voy a actualizar nuestra consulta aquí. Guardemos eso y veamos si eso funciona. entrar aquí, tenemos un objeto volviendo con todos estos productos. Entonces si abrimos todo esto, podemos ver que tenemos todos los datos que pedimos. Si entramos en la pestaña Red, todo sigue bien. Tenemos lo que enviamos a través en nuestra consulta GraphQL, y tenemos el resultado de vuelta. De nuevo, no voy a pasar mucho tiempo enseñándote GraphQL porque ese es todo un tema en sí mismo. Pero sólo quiero mostrarles lo que podemos hacer aquí. Tenemos todos estos datos, lo cual es precioso. Pero en realidad queremos usar estos datos. Lo que podemos hacer es usar jQuery para actualizar nuestra página. La mayoría de los temas tienen jQuery ya instalado. Si estás trabajando en un tema existente, definitivamente comprueba si ya tienes jQuery porque este es el nuevo tema y es muy básico. Voy a tener que importar realmente jQuery desde la CDN. Si solo busco jQuery en Google, debería haber un enlace aquí al jQuery CDN, y esto nos da un enlace a una versión minificada de jQuery. Puedo agarrar eso, y usando mi conocimiento de etiquetas líquidas, puedo poner en eso como una cadena y luego usar el filtro de etiquetas de script para crear realmente una etiqueta de script fuera de eso. Lo que voy a hacer para probar si jQuery está funcionando, es usar una función jQuery que no debería funcionar si jQuery no está instalado, pero debería funcionar si jQuery está instalado. Lo que voy a hacer, este solo registro de consola listo cuando el documento esté listo. Si presiono “Guardar” en eso, refresco la página, abro la consola primero en lugar, y luego refresco la página, verás que tenemos listos y luego datos. Sabemos que definitivamente tenemos instalado jQuery ahora. Voy a deshacerme de esa función lista. Ahora lo que tenemos que hacer es manejar nuestra respuesta de manera diferente. Lo que voy a hacer es poner aquí algunos corchetes rizados, y voy a mantener la respuesta del registro de la consola porque voy a hacer referencia a ella. Pero lo que vamos a hacer es en realidad recorrer los productos aquí y tener algo que salga en la pantalla. Estoy usando lo que hay en el registro de la consola para averiguar cómo navegar por estos objetos. Tenemos un objeto de datos, después tenemos productos, luego tenemos bordes dentro de eso. Los bordes es una matriz. Entonces vamos a recorrer esa matriz, encontrar el nodo de cada uno de estos elementos de matriz, y entonces esos son los datos de cada uno de nuestros productos. Volveré a entrar aquí, y voy a tomar la respuesta, luego voy a navegar a los datos, luego voy a navegar a los productos, luego bordes. Sé que aquí hay muchos puntos. Entonces aquí es donde iniciamos nuestro bucle. Entonces puedo decir por cada uno y puedo agarrar el producto, y entonces lo que vamos a hacer por cada producto es que solo quiero asegurarme de que estamos mirando lo correcto. Voy a realmente sólo registro de consola product.node. Echemos un vistazo si eso funciona. Voy a golpear “Save', refresca la página por aquí con la consola abierta. Como puedes ver, tenemos el registro de consola inicial, que tiene toda la respuesta que obtuvimos de vuelta. Después puedes ver un registro de consola individual para cada uno de los productos con sus atributos que obtuvimos de nuevo en ese objeto de datos. Ahora estamos dentro de este bucle, realidad podemos traducir estos datos en contenido en la página real. Lo que voy a hacer es crear una plantilla. Voy a llamar a esta plantilla const, y en esta plantilla, voy a construir algo de HTML. Digamos clase div, producto. Dividamos esto en otra línea para que tengamos algún espaciado agradable, lo haga un poco más legible, y luego voy a hacer un encabezamiento para cada uno. Usando la interpolación de cadenas, voy a navegar a ese nodo de producto, por lo que product.node, y el atributo que busco es título. Voy a agarrar el título del producto, luego debajo, ¿qué debemos mostrar? A lo mejor la descripción del producto, product.node.description, una cosa más, tal vez la imagen. Va a haber múltiples imágenes para un producto en particular. Bueno, la posibilidad al menos de un múltiplo de imágenes para un producto en particular, así que éste va a ser un poco más complicado, pero vamos a llegar. Lo que voy a hacer es abrir una etiqueta de imagen HTML, y para conseguir el src, la dirección real a la imagen. Lo que voy a tener que hacer es navegar a nuestro nodo de producto, y luego desde dentro de nuestro nodo, necesito acceder a estas imágenes, objeto, y luego dentro de los bordes. Voy a hacer este poco paso a paso, así imágenes, bordes, y quiero la primera imagen del listado de imágenes disponibles en este producto. Voy a seleccionar eso usando su índice cero. Ahora, vamos a estar dentro de éste, y queremos conseguir el nodo, y luego dentro del nodo, el TransforMedSRC, node.TransforMedSRC. Si te estás preguntando qué es TransforMedSRC, en realidad podemos en nuestra solicitud QL gráfica, especificar qué queremos que sean los MaxWidth y MaxHeight de la imagen, como lo que hicimos con las etiquetas URL de imagen o filtros en Liquid. Esperemos que hayamos navegado correctamente nuestros objetos, me he perdido un paso final aquí, y es decir, en realidad tengo que anexar la plantilla a este div aquí arriba. Voy a abrir un selector jQuery, apuntar a ese div, y luego voy a anexar la plantilla. Esto se va a agregar por cada producto en el bucle a este contenido div aquí arriba, así que voy a golpear “Guardar” en eso, refrescar la página. Ahora verás que tenemos los datos que obtuvimos de aquí en nuestra API de Storefront representada en nuestra página. Tenemos el título, tenemos la imagen, tenemos la descripción, y lo puedes ver, están saliendo todos los primeros 20 productos de nuestra tienda. Ahora, todo esto es a través de JavaScript, no estamos usando ningún Liquid aquí, esto es todo lado del cliente. Tal vez puedas ver esto en una conexión más lenta o tal vez si solo actualizo la página, verás que hay un ligero retraso antes de que todo se cargue, y luego se carguen los productos, y sus nombres, e imágenes. Básicamente lo que está pasando es, primero se genera el código del lado del servidor, se obtiene la página de vuelta, la página termina de cargarse, y luego poco después, obtenemos la carga asíncrona en JavaScript. Nuevamente, no está del todo claro quizás por qué usaríamos la API de Storefront para acceder a estos datos cuando ya podemos acceder a ellos en Liquid. Pero este es un ejemplo de cómo podrías usar realmente la API de Storefront en tus temas. Nuevamente, el mejor uso de la API de Storefront es si quieres crear una aplicación totalmente del lado del cliente. Si acabo de lanzar en mi tienda un token de acceso a esta aplicación de nuevo, esto de aquí es un ejemplo perfecto de una aplicación puramente del lado del cliente, y tiene sentido que usaríamos los datos usando una API JSON, lo que no nos hace volver a cargar el página cada vez. Aquí se puede ver que todo esto se hace en el lado del cliente, lo que significa que nunca tenemos que volver a cargar la página. Supongo que eso sería un gran beneficio de usar la API de Storefront. Nuevamente, por eso esta es una lección extra, y es una lección extra porque probablemente no vas a usar la API de Storefront, pero quería dejarte con una breve lección sobre esta API para mostrarte lo que es posible. Quizás realmente quieras crear un Storefront personalizado, o tal vez realmente necesites acceder a algunos datos que están disponibles en la API que no está disponible en Liquid. En realidad sé de algunos ejemplos donde la API de Storefront te da datos que Liquid no, así que tal vez quieras usarlos para esos casos flecos. Si quieres conocer todo sobre los diferentes objetos en la API de Storefront, aquí es donde puedes hacerlo. Al igual que vimos en la documentación de Shopify Liquid, podemos ver los objetos disponibles en la API de Storefront a través de este menú aquí. me tomó un tiempo averiguar cómo leer realmente esto correctamente, pero si echamos un vistazo a lo que hicimos para la lección de hoy con productos, puedes ver aquí que esto te muestra todos los, lo que se llama conexiones. Se trata de otros recursos a los que se puede acceder desde un producto como punto de entrada, y luego aquí abajo, son todos los atributos. Por ejemplo, si quisiera acceder al mango del producto, así es como lo harías. La descripción en HTML, la fecha createDat aquí mismo, y el metacampo almacenado en ese producto. Por último, aquí mismo está lo que se llama QueryRoute, que es el punto de entrada para consultas, esto es lo que usamos para acceder a todos los productos. Como se puede ver en la QueryRoute, podemos acceder a artículos, blogs, colecciones, páginas, y productos como lo hicimos. Entonces, una vez que estés dentro del producto, puedes hacer clic aquí para conocer la conexión del producto y navegar por esta documentación de API como si estuvieras navegando una respuesta QL gráfica. Esto imita lo que vimos aquí en el sentido de que aquí mismo estamos en la QueryRoute. Entonces volvemos a QueryRoute, y en nuestra QueryRoute, nos vamos a meter en productos, así que aquí abajo, productos. Si hago clic en conexión de productos, ya verás que podemos hacer bordes o página infur, aquí vamos. Cantos. Si entro en aristas, cada borde va a tener un nodo y cursor si lo pedimos. Como puedes ver, cada uno tiene un nodo, y luego si hacemos click en “Nodo”, nos da un producto, y luego puedes ver las conexiones en ese objeto y los campos disponibles. Como puedes ver, accedimos a algunos de esos campos, accedimos a la descripción, manejamos ID, y accedimos también a las conexiones a las imágenes y etiquetas. Esta definitivamente es una lección más avanzada, y me tomó un tiempo averiguar cómo usar la API de Storefront yo mismo. Definitivamente no es algo que puedas aprender en una lección de 20 minutos, pero por eso es una lección extra. Es un poco abridor de ojos mostrarte otra forma en que puedes representar los datos de tu tienda en un Storefront personalizado, o tal vez de una manera única en tu tema en línea. Hay, por supuesto, una API más que mencioné antes, que es la API Admin, y si quieres entrar en Shopify App Development, esta es la API que vas a necesitar aprender. En realidad he creado una App Shopify yo mismo usando esta API, fue una experiencia bastante cool, pero definitivamente no algo que pudiera cubrir en un video de 20 minutos alguna vez. Ese es quizás un tema para otra clase. Pero eso es más o menos eso chicos, eso debería cubrir una bastante buena visión general de todo lo que ver con Shopify Theme Programming. Si lo has llegado hasta aquí, quiero agradecerte y felicitarte por quedarte con ella. Hay mucho que Shopify Theme Programming, y si quieres conocer más al respecto, la entrada del blog está fuera en mi página web, Christhefreelancer.com/Shopify-Liquid-Guidea/. Son más de 10 mil palabras en Shopify, así que si te sientes aburrido o aventurero y quieres tener una larga lectura sobre todo, Shopify Liquid, obviamente no podemos cubrir 10 mil palabras de contenido en una sola clase de habilidadcompartir, pero aquí es donde iría a conocer más sobre las diferentes macetas. Si tiene alguna pregunta, como siempre, déjalas en el recuadro de discusión a continuación. Muchas gracias chicos, y los veré en el próximo. 12. Conclusión: Entonces que más o menos concluye esta clase sobre programación Shopify Theme. Para tu proyecto de clase, quiero que crees tu propia sección de plantillas, fragmento, o tema entero si te sientes aventurero. Como hemos visto en esta clase, combinar código líquido y esquema JSON nos permite crear nuestras propias plantillas y secciones personalizables. Ahora es tu oportunidad de crear algo que desees existiera y compartirlo con la clase si así lo deseas. Si deseas conocer más sobre el desarrollo de temas y la programación temática de Shopify, 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 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 de mis otras clases.