Nuxt.js | Consumo y presentación de datos ( Parte 2)

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

    Es inevitable sentirnos satisfechos de lo mucho que hemos aprendido en tan poco tiempo, ya hemos logrado instalar y configurar los primeros pasos de un proyecto utilizando en framework Nuxtjs, paralelamente, vamos aplicando estilos de Bootstrap, para lograr una web responsiva, y lo más importante, que podremos reutilizar en cualquier otro desarrollo en un futuro próximo.

     Hoy vamos a continuar con la importación de datos, desde un archivo local, en este caso, para que podamos entender todo el proceso, antes de pasar a las siguientes etapas, cuyo objetivo final, será el uso de API, para conectarnos con alguna web externa y obtengamos los mismos resultados.  

     Antes de continuar, sería muy recomendable que, basándote en los ejemplos explicados, intentaras obtener las imágenes e informaciones de los productos, y mostralas dentro de los componentes correspondientes, que será nuestro propósito fundamental, en este ejercicio. De esta forma, podrás confirmar tus conocimientos y experiencia acumulada y reforzarás aquellos puntos débiles que descubras durante el proceso.

   Consumo y presentación de datos dinámicos (Parte 2)

     Paso 1 - Imágenes de productos  

     Lo primero que tendríamos que hacer, es descargarnos o buscar las imágenes que se mostrarán una vez creado el componente de los productos, al igual que hicimos al principio del curso, las guardaremos dentro de la carpeta assets, yo he creado una carpeta "/imagenes/productos"  y, partiendo de los nombres que ya tenemos en nuestro archivo, nombraremos las imágenes, para que puedan mostrarse dinámicamente una vez pasemos los datos al componente.

     Paso 2 - Creación de componente fichaProducto

        Ahora que ya hemos añadido las imágenes que vamos a mostrar en cada una de las fichas de los productos, el próximo paso será crear un nuevo componente, con el que podremos importar y mostrar el segundo objeto de nuestro arreglo, donde están guardadas las informaciones de todos los productos detacados, según cada bloque.

        En este caso, primero crearemos el componente al que llamaremos fichaProducto.vue, crearemos la estructura con el código fijo, para comprobar si todo se muestra correctamente y a continuación, sustituremos los valores por los equivalentes.

        Nos colocaremos en la carpeta compenents y añadiremos el nuevo componente fichaProducto.vue, y dentro copiaremos el siguiente código:

<template>
  <b-card title="Title" img-src="@/assets/imagenes/productos/1.jpg" img-alt="Image" img-top>
    <b-card-text>
      This card has supporting text below as a natural lead-in to additional content.
    </b-card-text>
    <template #footer>
      <small class="text-muted">Last updated 3 mins ago</small>
    </template>
  </b-card>
</template>

<script>
export default {
  name: "fichaProducto"
}
</script>

<style scoped>

</style>

     Explicación

        En este código, estamos crando el modelo de la tarjeta que mostraremos con los productos, utilizando clases cards de Bootstrap Vue, por lo que tendremos realizar cambios en el contenedor, para completar, tanto la llamada al nuevo componente, como la estructura que envolverá las tarjetas con las informaciones de los productos, sustituyendo el apartado que teníamos definido en el anterior capítulo. El código en el contenedor losMasVendidos, quedará de la siguiente manera:

<template>
  <section class="p-5 bg-white">
    <div class="container-lg">
      <h2>{{ SeccionProductos.titulo }}</h2>
      <p>{{ SeccionProductos.resumen }}</p>
      <div class="row g-4 text-center">
        <b-card-group>
          <fichaProducto/>
        </b-card-group>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "losMasVendidos",
  props: ['SeccionProductos']
}
</script>

<style scoped>

</style>

     Y el resultado obtenido, debería ser parecido a la siguiente imagen, donde estamos mostrando SÓLO EL MODELO, de la tarjeta con informaciones fijas de un producto, tomando una de las imágenes que previamente hemos guardado dentro de la carpeta "assets/imagenes/productos":

     Paso 3 - Actualización código, importación datos dinámicos en fichaProducto

     En el siguiente paso, vamos a sustituir en el componente fichaProducto.vue, los valores por las variables equivalentes para obtener los datos desde el archivo productos.js, queando de la siguiente forma:

<template>
  <b-card title="Title" :img-src="require(`@/assets/imagenes/productos/${ producto.imagen || '1.jpg' }`)" img-alt="Image" img-top>
    <b-card-text>
      {{ producto.titulo }}
    </b-card-text>
    <template #footer>
      <small class="text-muted">{{ producto.intro }}</small>
    </template>
  </b-card>
</template>

<script>
export default {
  name: "fichaProducto",
  props: ['producto']
}
</script>

<style scoped>

</style>

     Explicación

        Esta vez hemos sustituido los valores que habíamos escrito por las variables equivalentes en cada uno de los apartados:

       :img-src="require(`@/assets/imagenes/productos/${ producto.imagen || '1.jpg' }`)"

         al añadir los dos puntos, al igual que en casos anteriores, estamos indicando el paso de parámetros dinámicamente, y dentro hemos puesto el require con la dirección a la carpeta de imágenes concatenándola con la propiedad "producto", que estamos recibiendo en  " props: ['producto'] " y así accedemos a las imágenes de cada elemento. A continuación está la condición en caso de que el producto no tenga imagenes, para que muestre la imagen por defecto.

     {{ producto.titulo }} y {{ producto.intro }}

       Con estas llamadas, mostrarmos la información correspondiente, tal y como las tenemos en nuestro array de elementos dentro del archivo producto.js.

     Paso 4 - Actualización de código e importación de datos componente

 

     Por último, pasaremos los datos dentro del componente <fichaProducto /> que hemos llamado en el ListadoProductos, quedamos el componente con la siguiente estructura:

<template>
  <section class="p-5 bg-white">
    <div class="container-lg">
      <h2>{{ SeccionProductos.titulo }}</h2>
      <p>{{ SeccionProductos.resumen }}</p>
      <div class="row g-4 text-center">
        <b-card-group>
          <fichaProducto
             v-for="producto in SeccionProductos.fichas_productos"
             :key="producto.id"
             :producto="producto"
          />
        </b-card-group>
      </div>
    </div>
  </section>
</template>

<script>

export default {
  name: "losMasVendidos",
  props: ['SeccionProductos']
}
</script>

<style scoped>

</style>

     Si visitamos nuevamente nuestra página, ahora tendríamos que ver el listado de productos destacados con sus respectivas imágenes, parecido al siguiente:

Repositorio: https://github.com/drupaladicto/nuxtjs