‫Instructor: Ahora llenemos cada uno de los elementos de
‫la tarjeta con los datos correctos para cada uno de los recorridos.
‫Entonces, solo como un resumen rápido.
‫En un último video, comenzamos creando este elemento principal y dentro
‫de un elemento de contenedor div, luego dentro de ese
‫contenedor queremos uno de
‫estos elementos de tarjeta para cada uno
‫de los recorridos que vienen en la matriz
‫que pasamos a esta plantilla.
‫Y para eso usamos una matriz Pug que
‫funciona así.
‫Entonces, ¿cuál es cada palabra
‫clave aquí y el resultado de hacer eso se veía así, bien?
‫Entonces, lo que vamos a hacer ahora
‫es, básicamente, llenar cada una de estas tarjetas aquí con los datos reales.
‫Y comencemos aquí con el nombre de la gira.
‫Entonces, recuerde cómo colocamos el valor de una variable dentro
‫de un elemento.
‫Bueno, usamos Igual y luego en este caso Tour.
‫Entonces, el nombre de
‫la variable en la iteración del ciclo actual, a la derecha.
‫Y ese es un documento de viaje y luego el nombre del punto, recuerda.
‫Entonces, veamos eso en la brújula muy rápido.
‫Entonces, aquí tenemos cuatro recorridos
‫y estos son
‫todos los datos que vamos a necesitar ahora, está bien.
‫Y comenzando con el nombre aquí, está bien.
‫Entonces, si ahora recargamos nuestra página, eso
‫debería reflejarse aquí.
‫Y aquí es donde comienza la magia y funcionó.
‫Y esta es la primera vez que realmente vemos
‫que los datos de la base de datos se muestran
‫realmente en el sitio web.
‫Entonces, aquí tenemos el nombre del recorrido para cada uno de
‫los recorridos y nuevamente, eso ahora está saliendo directamente de nuestra base de datos.
‫Entonces, fantástico, eso es realmente
‫genial, así que ahora sigamos construyendo esta tarjeta.
‫Entonces, aquí sobre la imagen ahora.
‫Pongamos también el texto alternativo al nombre del tour.
‫Ahora no podemos simplemente poner un nombre de punto de recorrido
‫aquí porque estamos dentro de una
‫cadena y eso no funciona.
‫Ahora, al
‫mismo tiempo, si lo
‫hacemos así, tampoco va a funcionar porque aquí este
‫Alt realmente espera una cadena, está bien.
‫Entonces necesitamos algunas citas aquí sobre esta variable.
‫Entonces, la forma más fácil
‫de hacerlo es usar cadenas de plantilla ES6, de acuerdo.
‫Entonces, así y nuevamente, eso es porque esto
‫en realidad aquí espera que ingrese una cadena y, por
‫lo tanto, con esto, por supuesto, estamos creando una cadena.
‫A continuación, especifiquemos la imagen aquí, está bien.
‫Entonces, echemos un vistazo a la brújula
‫nuevamente para ver cómo se ve bien esa imagen de portada.
‫Y entonces tenemos una propiedad llamada imagen cubierta
‫y luego aquí solo tenemos el nombre de la imagen en sí.
‫Entonces, no el camino a la imagen. = y
‫de modo que realmente tendremos que especificar manualmente, está bien.
‫Entonces, pero lo que importa aquí es que se
‫llama portada de imagen.
‫Así que deshagámonos de todo esto.
‫Comience creando una cadena de plantilla y
‫luego recorra la cubierta de la imagen del punto y ahora
‫tenemos que averiguar
‫la ruta completa a esa imagen, está bien.
‫Y como ya sabemos, los datos de la imagen
‫están dentro de la carpeta pública.
‫Entonces, la carpeta desde la que se
‫servirán todos los
‫activos estáticos y aquí tenemos imágenes.
‫Y luego tenemos una carpeta.
‫Uno para recorridos y otro para usuarios, está bien.
‫Y así, dentro de cada uno de
‫estos recorridos, tenemos las tres fotos y una foto de portada.
‫Entonces, se verá algo así.
‫Entonces, el camino aquí es recorridos de puntos de imagen o recorridos de barra
‫y luego barra el nombre de la imagen, genial.
‫Así que eso debería hacer que los
‫sitios web completos se vean aún mejor ahora, sí.
‫Ahora realmente está comenzando a cobrar vida.
‫Entonces, eso es fantástico.
‫Esto me hace sentir muy bien
‫cada vez que funciona.
‫De todos modos, ahora ocupémonos del resto de los
‫datos que, por supuesto,
‫todavía se ven iguales en todas estas tarjetas, de acuerdo.
‫Y ahora usemos los datos de nuestra colección
‫para construir esta cadena aquí.
‫Entonces, ve que esto en realidad es
‫una combinación de datos diferentes.
‫Entonces, tenemos la dificultad y la duración del recorrido, por
‫lo que ahora creemos una cadena de plantilla.
‫Entonces, básicamente asigne esta cadena de plantilla a este elemento.
‫Y entonces comenzamos aquí con la dificultad del punto del recorrido,
‫recuerde, luego el espacio y luego la duración del recorrido, el recorrido
‫del día de duración del punto del recorrido, está bien.
‫Entonces, esa es la traducción de este contenido.
‫Luego, lo que tenemos aquí es el resumen de la gira, está bien.
‫Entonces, resumen de puntos de recorrido igual, de acuerdo.
‫Luego, a continuación, tenemos la ubicación de inicio, por lo que este
‫recorrido, por ejemplo, comienza en Banff,
‫Canadá, por lo que nuevamente echemos un vistazo a la
‫brújula aquí solo para ver cómo se
‫ven los datos o, en realidad, no
‫necesitamos estar siempre cambiando de un lado a
‫otro. a la brújula.
‫También podemos abrir o importar datos aquí.
‫Entonces, en los recorridos, simplemente podemos usar estos datos aquí
‫en lugar de ir siempre a la brújula.
‫Entonces, antes de usar el resumen,
‫sigamos adelante y usemos la ubicación de inicio que
‫en realidad está aquí.
‫Entonces, ahora queremos comenzar la descripción del punto de ubicación, está bien.
‫Por lo tanto, descripción del punto de la ubicación de inicio del punto de recorrido.
‫Y ahora comienza
‫a ver por qué tenía sentido
‫crear todos estos datos diferentes que creamos aquí.
‫Bien, lo siguiente que usaremos para comenzar las fechas, así
‫que tenlo en cuenta.
‫Que esto es una matriz, está bien.
‫Porque ahora lo que queremos en nuestro resumen
‫es básicamente la fecha en la que comienza la próxima gira.
‫Entonces, eso es lo que significa aquí el ícono con un
‫calendario en este caso.
‫Entonces, ese es básicamente
‫el primer elemento de esa matriz de fechas de inicio.
‫Entonces, comience las fechas en la posición 0.
‫A continuación, tenemos este dato que dice cuántas paradas
‫hay en estos recorridos.
‫Básicamente, eso
‫significa cuántas ubicaciones tenemos y,
‫de nuevo, usaremos las ubicaciones y esta vez
‫no la ubicación de
‫inicio, sino realmente estas ubicaciones y,
‫por lo tanto, si desea especificar cuántas ubicaciones tenemos.
‫Bueno, entonces tenemos que contar la longitud de esta matriz, está bien.
‫Y así de simple también.
‫Entonces, igual y luego configúrelo en esta
‫cadena de plantilla porque también queremos
‫agregar esta parada y recorrer las ubicaciones de los puntos, la longitud de
‫los puntos y finalmente la cantidad de personas
‫que forman parte de cada uno de los grupos.
‫Por lo tanto, las personas que pueden participar en un recorrido y
‫por lo que se almacena
‫en el recorrido pero el tamaño máximo del grupo, recuerde.
‫Y luego la gente.
‫Genial, esa parte ya está lista,
‫así que regresemos a nuestro sitio web
‫y probémoslo.
‫Y sí, hermosa, al menos casi hermosa, porque esta cita se
‫ve un poco rara aquí.
‫Entonces, realmente solo queremos el veintiuno de junio, así que no necesitamos ser
‫tan específicos aquí en
‫esta descripción general, de acuerdo.
‫Entonces, lo que queremos es que se vea nuevamente en junio de 2021
‫y ahora mismo es todo este lío, así que
‫arreglemos eso y, afortunadamente,
‫eso es realmente muy fácil
‫con JavaScript, que incluye un par de
‫funciones muy agradables para trabajar con fechas.
‫Y tenga en cuenta que cada una de estas fechas
‫de inicio aquí realmente es un objeto
‫de fecha en o una base de datos, por
‫lo que ahora podemos usar una función como esta para la cadena local, de acuerdo.
‫Entonces, básicamente convertirá esta fecha en
‫una cadena legible agradable
‫y aquí ahora podemos pasar una opción para el idioma.
‫Y eso es inglés para EE. UU.
‫Y luego también un objeto con algunas opciones, por
‫lo que aquí ahora podemos especificar que queremos que
‫un mes sea largo.
‫Entonces, en lugar de solo una abreviatura como la
‫que teníamos aquí.
‫entonces, un abril, un
‫agosto, ahora lo imprimirá así.
‫Entonces, realmente el nombre del mes completo y está bien y
‫luego también decir que el año debe ser numérico y si desea
‫obtener más información sobre esta
‫función aquí, simplemente continúe y busque en Google, está bien.
‫Entonces, intentémoslo de nuevo
‫y ahora se ve realmente bien, increíble.
‫Entonces, sigamos avanzando y terminemos esta última parte aquí con el
‫precio y los detalles de la calificación.
‫Y eso es aquí en el pie de página de
‫la tarjeta y aquí es solo el precio.
‫Entonces, es igual a dejémoslo allí porque ahora todavía necesitamos una
‫cadena de plantilla porque el precio no
‫es solo este número, sino que en realidad necesitamos un signo
‫de dólar adicional aquí para el precio
‫en dólares.
‫Entonces, este, correcto.
‫A continuación, tenemos la calificación promedio aquí.
‫Entonces, eso es esto y, por lo
‫tanto, ya sabemos que esto se llama calificación promedio de puntos de recorrido.
‫Entonces, lo usamos tantas veces al menos, creo.
‫Confirmémoslo para que en realidad sea el promedio de calificaciones y luego
‫también la cantidad de calificaciones.
‫Entonces, copiemos esto.
‫Entonces, calificaciones promedio
‫y ahora aquí queremos cantidad de calificaciones.
‫Está bien, pero, por supuesto, esto debe ser
‫una cadena de plantilla y
‫luego establecerlo en igual y luego, por supuesto, interpolar el nombre de la variable
‫aquí y ahora finalmente tenemos que construir la URL
‫a la página de detalles, está bien.
‫Entonces, recuerda eso cuando hacemos clic en una de las tarjetas.
‫Luego nos lleva a la
‫página de detalles y, por supuesto, aquí ahora debemos especificar
‫ese enlace porque, por supuesto, eso dependerá de cada recorrido.
‫Por lo tanto, queremos enlazar para que sean recorridos de
‫barra y luego recordar cómo mencioné
‫antes que para renderizar estas páginas en realidad
‫querremos consultar recorridos por su slug y
‫no por su ID.
‫Cómo lo hicimos en la API, está
‫bien, porque eso hace que la URL se vea mucho mejor, está bien.
‫Y entonces usemos eso aquí ahora.
‫Entonces, recorra punto slug y tan solo para explicarle
‫por qué comenzamos
‫esta URL aquí con una barra.
‫Esto se debe a que la creación de una URL como
‫esta, por lo que comenzar solo con la barra se llama una URL relativa
‫y lo que hará
‫es que luego se agregará en esta parte de la URL
‫después del nombre de host.
‫Entonces, ese host ahora es de uno a siete punto cero cero uno, pero
‫no es necesario especificarlo aquí porque
‫nuevamente al escribir una URL relativa como esta, agregará
‫lo que tenemos aquí a ese nombre de host, está bien.
‫Entonces, recarguemos eso de nuevo y ya
‫casi terminamos aquí, no del
‫todo listos.
‫Entonces, aquí se ve
‫indefinido y probablemente hicimos algo mal allí.
‫Y también ves que aquí no hay espacio
‫entre el precio y el
‫por persona y también aquí lo mismo ahora.
‫Si coloca el mouse sobre este botón
‫aquí y luego hacia abajo, en la esquina izquierda.
‫Entonces, aquí abajo verá la URL que
‫acabamos de construir.
‫De hecho, puede
‫hacer clic en él y luego
‫nos dará este error porque, por supuesto, aún
‫no definimos esta ruta, pero verá
‫que se ve muy bien aquí con los recorridos que cortan
‫al excursionista del bosque en lugar de tener esa identificación fea allá arriba, de acuerdo. .
‫Pero de todos modos, ahora arreglemos esto indefinido
‫en este espacio faltante.
‫Entonces, echemos un vistazo a este.
‫Bueno, en realidad parece correcto las calificaciones, la cantidad pero, por
‫supuesto, nos falta este punto de la gira, está bien.
‫Probablemente ya lo estabas viendo.
‫Ahora sobre ese espacio que falta.
‫Hay algo nuevo que necesito mostrarte sobre el barro amasado,
‫que es el llamado carril de tubería vacío o
‫una línea, en realidad.
‫Entonces, siempre que necesitemos un espacio
‫real entre dos elementos de bloque
‫en línea que son estas bandas, entonces
‫necesitamos crear manualmente
‫ese espacio usando esta línea entubada aquí como esta, de acuerdo.
‫Y lo mismo aquí abajo
‫porque de lo
‫contrario, como acabamos de ver,
‫simplemente pegará todos estos elementos, de acuerdo.
‫Entonces, ahora todo eso debería arreglarse
‫y ese espacio todavía no está allí y
‫eso es en realidad porque olvidamos algo.
‫Entonces, volvamos
‫atrás y realmente necesitamos agregar
‫manualmente ese espacio vacío aquí y aquí.
‫Entonces, esta tubería vacía aquí básicamente crea un
‫espacio para nosotros donde luego podemos crear contenido fuera
‫de un elemento y
‫eso es básicamente lo que es este espacio.
‫Entonces, este espacio aquí que acabamos de poner aquí.
‫Entonces, este espacio vacío es contenido que no está
‫dentro de ninguno de estos dos elementos.
‫Y, de nuevo, para poder hacer eso,
‫para eso necesitamos esta tubería.
‫Entonces, estas dos tuberías.
‫Entonces, inténtelo de nuevo y
‫ahora, de hecho, aquí
‫va el espacio que acabamos de crear, perfecto.
‫Y con eso terminamos esta conferencia y este
‫primer sitio web de aspecto asombroso o
‫parte del sitio web que acabamos de construir aquí juntos.
‫Entonces, un momento para apreciar lo genial que
‫es esto realmente y también
‫cómo funciona todo este código que escribimos juntos, de acuerdo.
‫Y luego, regrese para que podamos
‫construir juntos la página de descripción general del recorrido.