desacoplado

Cómo eliminar completamente Node.js y NVM en Ubuntu

En algunas ocasiones, tenemos la necesidad de eliminar por completo versiones anteriores de node.js en nuestro entorno de desarrollo.

node

local

Nuxtjs | Instalación con Lando

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

Vue.js tiene varias distribuciones, al igual que Drupal, en las que se incluyen aquellas funcionalidades específicas, o más utilizadas, para facilitar la configuración de cualquier proyecto. Una de estas distribuciones es Nuxt.js, por esta razón, en lugar de realizar nuestro proyecto Drupal Headless con Vue.js, lo haremos con Nuxt.js, de esta manera ahorraremos tiempo de desarrollo y podremos concentrar nuestra atención en el proceso de conexión entre Drupal y Nuxt.js.

Al igual que hicimos con Contenta CMS, utilizaremos Lando para nuestra aplicación con Nuxt.js, pero en esta ocasión, crearemos nuestro propio archivo de configuración .lando.yml, para tener mayor control sobre el resultado final.

Así que nos colocaremos en el lugar donde alojaremos nuestra aplicación, y a continuación crearemos la carpeta. Una vez creada, añadiremos el archivo .lando.yml y copiaremos dentro de éste el siguiente código:

name: nuxtapp
proxy:
  appserver:
    - nuxtapp.lndo.site
services:
  appserver:
    type: node:14
    command: "yarn dev --hostname 0.0.0.0 --port 80"
    install_dependencies_as_me:
      - yarn install
tooling:
  yarn:
    service: appserver
  npm:
    service: appserver
  node:
    service: appserver
  nuxt:
    cmd: /app/node_modules/.bin/nuxt
    service: appserver

Una vez guardados los cambios, podremos arrancar Lando y, de esta manera, tendremos acceso a los contenedores de Node, para ejecutar yarn, node y nuxt. Así que, al igual que ejecutamos Composer para descargar las dependencias de Drupal, en este caso utilizaremos el comando yarn, para crear nuestra aplicación y descargar todas sus dependencias:

lando start

Antes de pasar a la siguiente instalación, ejecutaremos el comando de lando que nos permite confirmar que todo funcione correctamente, una vez termine su ejecución, podremos continuar con la descarga de nuestra app nuxtj:

lando rebuild

lando yarn create nuxt-app vaciame

Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

La idea es contestar a todas las preguntas de configuración y, cuando hayamos terminado la descarga, mover todos los archivos descargados, a la carpeta raíz y continuar desde allí, borrando la carpeta vaciame.

Cuando se hayan descargado todos los archivos para nuestra aplicación Nuxt.js, dentro de nuestra carpeta vaciame, moveremos todo su contenido a la carpeta principal y la borraremos, a continuación ejecutaremos el comando de lando para restaurar nuestra aplicación.

Antes de realizar el movimiento de archivos, podrás comprobar que en ambas carpetas, principal y vaciame exite una carmeta node_modules, por lo que deberás eliminar primero, la de tu carpeta principal y a continuación, sacar los archivos de vaciame y borrarla.

lando stop

mv vaciame/* .

mv vaciame/.* .

rm -rf vaciame

Ahora sí, podremos ejecutar el comando de restauración de lando acceder a nuestra aplicación de Nuxt.js.

lando restart

Felicidades!!!, ya ahora ya sabes cómo crear una aplicación con Nuxt.js y Lando en tu entorno local. En el siguiente artículo realizaremos las modificaciones necesarias para conectar, nuestro Backend de Drupal Contenta CMS con nuestra aplicación en Nuxt.js.

Nuxtjs | Páginas, navegación y enlaces

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

Ahora que ya hemos avanzado en el montaje y la presentación de algunos datos dinámicos en Nuxt, todavía no nos hemos movido de la página index, que nos viene por defecto en cualquier instalación.

Por esta razón, hoy explicaremos cómo añadir una barra de navegación y el footer en nuestro proyecto, además de la posiblidad de ampliarlo, con la creacíon de páginas que facilitarán a nuestros usuarios, poder moverse por toda nuestra aplicación y acceder, de esta manera, a la información que les interese cuando nos visiten.

Cómo añadir la barra de navegación y el footer para todo el proyecto Nuxtjs

Ya mencionamos en el anterior capítulo, que gracias a que seleccionamos Bootstrap vue, como framework para la parte frontal de nuestro proyecto Nuxt, podremos utilizar sus clases para obtener diseños responsivos mucho más adaptados a dispositivos móviles, también se nos ha añadido el Bootstrap original, padre de Bootstrap vue, y esto podemos comprobarlo en el archivo package.json de nuestra instalación.

Drupal 9 headless Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

En este caso añadiremos, tanto la barra de navegación como el footer para todo el proyecto, utilizando los componentes de Bootstrap. Por lo tanto, lo primero que haremos será crear el nuevo componente al que llamaremos Navegacion.vue y dentor pegaremos el siguiente código:

<template>
  <div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <NuxtLink class="navbar-brand" to="#">Mi Web</NuxtLink>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse ml-auto" id="navbarNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <NuxtLink class="nav-link" to="/">Home <span class="sr-only">(current)</span></NuxtLink>
          </li>
          <li class="nav-item">
            <NuxtLink class="nav-link" to="/productos" >Productos<span class="sr-only">(current)</span></NuxtLink>
          </li>
          <li class="nav-item">
            <NuxtLink class="nav-link" to="/mis-productos">Mis productos<span class="sr-only">(current)</span></NuxtLink>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</template>

<script>
export default {
  name: "Nav.vue"
}
</script>

<style scoped>

</style>

Explicación:

Lo único verdaderamente novedoso en este componente, con respecto a los anteriores, es que hemos añadido los enlaces de la barra de navegación, para acceder a las páginas que todavía no hemos creado. Como podrás observar, en lugar de las etiquetas tradicionales <a href="#">Texto</a>, que solemos ver en páginas credas empleando html, Nuxtjs utiliza sus propias etiquetas para la generación de sus rutas y enlaces.

En lugar de utilzar href="#", emplea to="#", para indicar la ruta de acceso a la página o contenido que llevará el enlace, en el siguiente ejemplo, verás la clase para los enlaces de Bootstrrap "nav-link", dentro de la etiqueta de NuxtLink, además de la especificación a la url que apuntará dicho enlace.

<NuxtLink class="nav-link" to="/mis-productos"></NuxtLink>

Cómo crear páginas en Nuxtjs

Si exploramos los archivos generados con nuestra instalación por defecto de Nuxtjs, podremos confirmar que exite la carpeta pages, que es donde se ubica nuestra página principal index.vue

Para facilitarno la creación de Páginas y rutas, Nuxtjs nos ofrece un método bastante simple y práctico, que consiste en crear el archivo con el nombre que deseamos para nuestra página y lo guardemos dentro de esta carpeta.

Esto es todo lo que vamos a necesitar y Nuxtjs se encargará automáticamente de generar una ruta de acceso correspondiente al nombre que hayamos seleccionado para nuestro archivo.

Hagamos una prueba, tomando como referencia las páginas a las que apuntará nuestro componente Navegacion.vue, vamos a crear dos archivos, correspondientes a cada una de estas páginas, obviamente, la página index.vue ya la tenemos creada y se podrá acceder desde el primer enlace, donde está colocada la barra inclinada o slash to="/", así que nos toca crear la página productos y mis-productos.

Para la página productos, nos colocaremos en la carpeta pages y añadiremos un nuevo componente básico, con el nombre productos.vue, luego pegaremos dentro el siguiente código:

<template>
  <div class="container text-center p-5 mt2">
    <h1>Esta es la página de productos</h1>
  </div>
</template>

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

<style scoped>

</style>

Una vez hayamos guardado el nuevo archivo, podremos acceder en el navegador escribiendo, a continuación de nuestra url /productos, y deberíamos ver un resultado como la siguiente imagen:

Ahora que ya sabes cómo crear una página básica, te animo a que pongas a prueba tus conocimientos, creando la página que falta en esta primera fase, cuya url será /mis-productos, deberías obtener un resultado como el siguiente:

Cómo añadir componentes globales dentro del proyecto Nuxtjs

Ahora que ya hemos creado el componente con la barra de navegación, sólo nos queda llamarlo desde el lugar adecuado, para que se muestre correctamente y podamos navegar dentro del proyecto.

Para que nuestra barra de navegación, en este caso, esté visible desde cualquiera nuestras páginas, sólo tendremos que añadir la etiqueta correspondiente dentro del arhivo que está dentro de la carpeta .nuxt/layouts/ llamado default.vue.

Añadiendo la barra de navegación

Ya que pondremos nuestra barra de navegación en la parte superior de todas las páginas, añadiremos la etiqueta <Navegacion />, justo encima de la etiqueta llamada <Nuxt />, que es la encargada de imprimir todos los elementos de nuestro proyecto.

Para realizar este cambio, es posible que tengamos que modificar los permisos para escribir. Una vez modificados los permisos, podremos pegar el código, sustituyendo por los nombres de los componentes que hayas decidido utilizar:

<template>
  <div>
    <Navegacion />
    <Nuxt />
  </div>
</template>

Si volvemos a nuestro proyecto en el navegador, ahora veremos que la barra de navegación estará presente en todas las páginas para poder acceder a ellas.

Añadiendo el Footer

En el caso del Footer, repetiremos los pasos que hemos hecho para la cabecera, es decir, primero crearemos el componente al que llamaremos Footer.vue, a continuación, pegaremos el siguiente código:

<template>
  <div class="footer">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <body>
    <div id="container">
      <div id="part1">
        <div id="companyinfo"> <a id="sitelink" href="#">Drupaladicto.com</a>
          <p id="title">Cool and Perfect Snippet code</p>
          <p id="detail">We create awesome code snippets that will help you in creating your own beautiful site. </p>
        </div>
        <div id="explore">
          <p id="txt1">Explore</p> <a class="link" href="#">Home</a> <a class="link" href="#">About</a> <a class="link" href="#">Snippet</a> <a class="link" href="#">Careers</a>
        </div>
        <div id="visit">
          <p id="txt2">Visita</p>
          <p class="text">Drupaladicto </p>
          <p class="text">78 Bhulabhai Desai Road </p>
          <p class="text">Mumbai 400 026 </p>
          <p class="text">Phone: (22) 2363-3611 </p>
          <p class="text">Fax: (22) 2363-0350 </p>
        </div>
        <div id="legal">
          <p id="txt3">Legal</p> <a class="link1" href="#">Terms and Conditions</a> <a class="link1" href="#">Private Policy</a>
        </div>
        <div id="subscribe">
          <p id="txt4">Subscribe to US</p>
          <form> <input id="email" type="email" placeholder="Email"> </form> <a class="waves-effect waves-light btn">Subscribe</a>
          <p id="txt5">Connect With US</p> <i class="fab fa-facebook-square social fa-2x"></i> <i class="fab fa-linkedin social fa-2x"></i> <i class="fab fa-twitter-square social fa-2x"></i>
        </div>
      </div>
      <div id="part2">
        <p id="txt6"><i class="material-icons tiny"> copyright</i>copyright 2019 BBbootstrap - All right reserved</p>
      </div>
    </div>
    </body>
  </div>
</template>

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

<style scoped>
#container {
  width: 100%;
  height: 330px
}

#part1 {
  width: 100%;
  height: 280px;
  background-color: #292929
}

#part2 {
  width: 100%;
  height: 50px;
  background-color: black;
  position: relative;
  top: -15px
}

#companyinfo {
  width: 14%;
  height: 280px;
  position: relative;
  left: 8%;
  top: 30px
}

#sitelink {
  font-size: 35px;
  color: #f44336
}

#sitelink:hover {
  color: #e65100
}

#title {
  color: gray;
  position: relative;
  top: 0px;
  font-size: 14.1px
}

#detail {
  color: #aaa7a7;
  font-size: 16px
}

#explore {
  width: 14%;
  height: 280px;
  position: relative;
  top: -235px;
  left: 29%
}

#txt1,
#txt2,
#txt3,
#txt4,
#txt5 {
  color: white;
  font-size: 20px
}

.link {
  display: flex;
  width: 90px;
  height: 40px;
  color: #aaa7a7;
  background-color: transparent;
  border-top: 2px solid white;
  position: relative;
  top: -10px
}

.link:hover,
.link1:hover {
  color: #e65100
}

#visit {
  width: 14%;
  height: 280px;
  position: relative;
  top: -515px;
  left: 42%
}

.text {
  color: #aaa7a7;
  font-size: 14px;
  margin-top: -10px
}

#legal {
  width: 14%;
  height: 280px;
  position: relative;
  top: -800px;
  left: 59.5%
}

.link1 {
  display: flex;
  width: 150px;
  height: 40px;
  color: #aaa7a7;
  background-color: transparent;
  border-top: 2px solid white;
  position: relative;
  top: -10px;
  margin-top: 7px
}

#subscribe {
  position: relative;
  top: -1080px;
  left: 78%;
  width: 14%;
  height: 280px
}

#email {
  color: white;
  position: relative;
  top: -20px
}

.btn {
  position: relative;
  top: -10px
}

#txt5 {
  position: relative;
  top: 0px
}

.social {
  position: relative;
  top: -5px;
  margin-right: 10px;
  color: white;
  cursor: pointer
}

.fa-facebook-square:hover {
  color: #3B579D
}

.fa-linkedin:hover {
  color: #007BB6
}

.fa-twitter-square:hover {
  color: #2CAAE1
}

#txt6 {
  color: white;
  position: relative;
  top: 13px;
  left: 8%;
  width: 80%;
  color: #aaa7a7
}

.material-icons {
  position: relative;
  top: 3px
}

@media only screen and (max-width:1000px) {
  #companyinfo {
    width: 20%
  }

  #sitelink {
    font-size: 30px
  }

  #txt5,
  #txt4 {
    font-size: 17px
  }

  #txt5,
  .social {
    position: relative;
    top: -5px
  }
}

@media only screen and (max-width:850px) {
  #companyinfo {
    position: relative;
    left: 3%
  }

  #txt6 {
    position: relative;
    left: 3%
  }

  #txt1,
  #txt2,
  #txt3,
  #txt4,
  #txt5 {
    font-size: 15px
  }

  #explore {
    position: relative;
    top: -240px;
    left: 26%
  }

  #sitelink {
    font-size: 25px
  }

  #detail {
    font-size: 13px
  }

  .link {
    width: 60px
  }

  #visit {
    position: relative;
    top: -520px;
    left: 37%
  }

  .text {
    font-size: 13px
  }

  #legal {
    position: relative;
    top: -800px;
    left: 54%
  }

  #subscribe {
    position: relative;
    top: -1080px;
    left: 76%;
    width: 20%
  }

  #txt5,
  .social {
    position: relative;
    left: -110%;
    top: px
  }

  #email,
  .btn {
    position: relative;
    top: 0px
  }

  #part1 {
    height: 250px
  }
}
</style>

Una vez guardado el contenido en el componente <Footer />, podremos abrir el archivo default.vue, que hemos modificado hace un momento y simplemente, añadiremos la llamada al nuevo componente footer.

A continuación te presento una imagen con todos los pasos y el resultado que deberías obtener una vez termiandos los cambios.

En el próxiimo capítulo hablaremos sobre la creación de páginas dinámicas, ya que la idea es que podamos navegar, dentro de la página detalle de cada producto, al hacer clic sobre su imagen.

Para esta segunda parte, tendremos que modificar la página productos.vue, por eso prefiero explicarlo más adelante, para que puedas asimilar lo que hemos explicado en este artículo y realizar los cambios que consideres necesarios en los componentes añadidos.

Fuente: https://nuxtjs.org/docs/2.x/directory-structure/layouts

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

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

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

Seguimos avanzando en nuestro curso intensivo de Nuxtjs y, ahora que hemos aprendido, cómo descargar e instalar Nuxtjs y cómo crear y trabajar con componentes, es el momento perfecto para comenzar a practicar el uso de datos, para mostrarlos dinámicamente dentro de un componente, aportando mayor flexibilidad y versatilidad a nuestro proyecto.

Componentes dinámicos y consumo de datos

Cómo dijimos en los primeros capítulos, la mayor ventaja que nos ofrecen los componentes, es la posibilidad de reutilizarlos, dentro de cualquier lugar del proyecto, minimizando así el tiempo necesario para realizar correcciones de código, aplicación de estilos o cualquier otra actividad relacionada con ellos.

En la siguiente imagen, podremos ver dos listados diferentes de productos, pero a la vez, muy parecidos entre ellos. En realidad, ambos comparten la misma estructura, un título, una pequeña descripción y a continuación varias imágenes de productos con sus respectivas informaciones. Por lo tanto, si aplicamos el uso de componentes, en seguida nos daremos cuenta que podremos obtener muy fácilmente el resultado esperado.

Headless con Nuxt y Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony

Primer paso Creación y testeo del componente padre

Hagamos la prueba, dentro de la carpeta components, crearemos un nuevo archivo llamado losMasVendidos.vue y dentro pegaremos el siguiente código para realizar las primeras comprobaciones, se trata de la estructura principal, la que tendrá el título, el subtítulo y el espacio donde, al final, mostraremos los productos:

<template>
  <section class="p-5 bg-white">
    <div class="container-lg">
      <h2>Los más vendidos</h2>
      <p>Estas son las últimas tendencias de nuestros clientes</p>
      <div class="row g-4 text-center">
        <div class="col-md-6 col-lg-3">
          Producto
        </div>
        <div class="col-md-6 col-lg-3">
          Producto
        </div>
        <div class="col-md-6 col-lg-3">
          Producto
        </div>
      </div>
    </div>
  </section>
</template>

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

<style scoped>

</style>

Una vez guardados los cambios en el componente losMasVendidos.vue, abriremos la página index.vue y añadiremos la etiqueta con el nombre del componente, para comprobar que se muestra según lo esperado.

Si guardamos los cambios y volvemos a la página para comprobar los resultados, deberíamos ver algo parecido a la siguiente imagen, tanto en formato escritorio, como en móvil.

Hasta aquí, ya tenemos la primera parte resuelta, que sería la manera en la que podremos mostrar un listado de productos, dentro de un bloque, con un diseño responsivo y funcional; pero para sacar provecho a la capacidad de reutilización de los componentes, nuestro código, tal como está, no nos permitiría usar el mismo componente para mostrar ambos bloques de productos, o sea, "Los más vendidos" y "Super Oferta". Por eso, en esta ocasión vamos a obtener los datos desde una fuente externa a los componentes.

Más adelante, veremos como hacerlo desde una fuente externa a la web, pero por ahora, para conocer la manera de mostrar datos dinámicamente, utilizaremos un archivo, en formato json, que guardaremos dentro de la carpeta assets.

Cómo obtener datos dinámicamente y mostrarlos en un componente

Llegados a este punto, crearemos un nuevo archivo con el nombre productos.js y pegaremos el siguiente código dentro de él.

export const productos = [
  {
    id: 1,
    titulo: "Los más vendidos",
    resumen: "Estas son las últimas tendencias de nuestros clientes",
    fichas_productos: [
      {
        id:5,
        titulo: "Producto",
        intro: "Lorem eleifend mus. Cupidatat alias purus quas debitis laoreet tempus conubia ornare dictumst quia porta cupiditate",
        imagen: "5.jpg"
      },
      {
        id:8,
        titulo: "Producto",
        intro: "Lorem eleifend mus. Cupidatat alias purus quas debitis laoreet tempus conubia ornare dictumst quia porta cupiditate",
        imagen: "8.jpg"
      },
      {
        id:11,
        titulo: "Producto",
        intro: "Lorem eleifend mus. Cupidatat alias purus quas debitis laoreet tempus conubia ornare dictumst quia porta cupiditate",
        imagen: "11.jpg"
      }
    ]
  },
  {
    id: 2,
    titulo: "Super ofertas",
    resumen: "Compra tres productos y te llevaremos 6 a casa",
    fichas_productos: [
      {
        id:1,
        titulo: "Producto",
        intro: "Lorem eleifend mus. Cupidatat alias purus quas debitis laoreet tempus conubia ornare dictumst quia porta cupiditate",
        imagen: "1.jpg"
      },
      {
        id:2,
        titulo: "Producto",
        intro: "Lorem eleifend mus. Cupidatat alias purus quas debitis laoreet tempus conubia ornare dictumst quia porta cupiditate",
        imagen: "2.jpg"
      },
      {
        id:3,
        titulo: "Producto",
        intro: "Lorem eleifend mus. Cupidatat alias purus quas debitis laoreet tempus conubia ornare dictumst quia porta cupiditate",
        imagen: "3.jpg"
      }
    ]
  }
]

Explicación del archivo productos.js

El código que hemos copiado, comienza con la creación de la constante productos, la cuál será accesible desde cualquier componente gracias al export.

export const productos = [

Dentro de nuestra constante, tenemos dos objetos principales, que a su vez, tienen dentro un arreglo de tres objetos, equivalentes a la información de los productos con todos sus elementos.

Obteniendo los datos desde el archivo productos.js

Para acceder a los datos guardados en nuestro archivo productos.js y poder mostrarlos dentro de nuestro componente, tendremos que hacer varias operaciones, que explicaremos paso a paso:

1.- Importar el archivo dentro de nuestro elemento principal

En este caso, todos nuestros componentes se están mostrando dentro de la página index.vue, por lo tanto, si queremos acceder a la información para pasarla luego a los componentes, vamos a importarla dentro de ella usando el siguiente enunciado, dentro de las etiquetas <script></script>

import { productosDestacados } from "@/assets/productos.js"

Con esta línea estamos indicando el nombre de la constante que hemos definido al principio del archivo productos.js y, a continuación, estamos indicando la ubicación del archivo a través del from (el @ está indicando la ubicación al documento root del proyecto)

2.- Preparamos los datos para mostrarlos en los componentes.

Si queremos incluir información para mostrarla dentro de una página o de un componente, lo haremos utilizando el apartado que nos viene por defecto en las etiquetas <script></script>

En este caso, hemos añadido un método llamado data, que devolverá un arreglo con clave valor, al que asignamos la constante que hemos importado en el primer paso. De esta forma, podremos acceder a toda la información y pasarla como argumento dentro de los componentes que aparecen dentro de la página index.vue:

export default {
  data(){
    return {
      LosDestacados : productosDestacados
    }
  }
}

3.- Pasando los valores dentro del componente:

Por último, aprovechando el componente llamado <losMasVendidos />, y por medio de un ciclo for, pasaremos los valores y podremos darle formato personalizado.

<losMasVendidos
    v-for="destacados in LosDestacados"
    :key="destacados.id"
    :SeccionProductos="destacados"
/>

Con este código, estamos accediendo al primer nivel de los objetos dentro de la contante productosDestacados, especificando que la clave que identifica cada objeto será el id, y por último estamos añadiendo una propiedad llamada SeccionProductos, con la que podremos acceder dentro del propio componente losMasVendidos, para mostrar los valores que esperamos, en esta primera fase, el título y descripción de cada bloque de productos destacados.

Si guardamos los cambios y volvemos a nuestra página inicio en el navegador, veremos que no ha cambiado nada, esto se debe a que todavía no hemos sustituido los valores que pusimos manualmente dentro del componente losMasVendidos.vue

4.- Recibiendo los datos dentro del componente

Para recibir los datos y poder imprimirlos dentro del componente, usaremos lo que en Vuex se conoce como props, para ello añadiremos el nombre de la o las propiedades que hayamos declarado y de esta manera ya tendremos acceso para mostrarlas como nos haga falta, al igual que hicimos dentro de la página index.vue, utilizaremos la sección definida entre las estiquetas <script></script>

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

5.- Imprimiendo los valores recibidos dentro del componente

En este último paso, una vez verificados los valores que hemos definido en nuestro archivo productos.js y que desamos mostrar dentro del componente, solo tendremos que añadirlos en el siguiente formato: {{ NombrePropiedad.valor_deseado }}, el componente completo debería 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">
        <div class="col-md-6 col-lg-3">
          Producto
        </div>
        <div class="col-md-6 col-lg-3">
          Producto
        </div>
        <div class="col-md-6 col-lg-3">
          Producto
        </div>
      </div>
    </div>
  </section>
</template>

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

<style scoped>

</style>

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

Nuxt.js | Componentes

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

Continuando con el contenido de este Curso intensivo de Nuxtjs, ahora nos toca abordar el tema de los Componenentes. Al igual que otros Frameworks, la idea fundamental consiste en crear estructuras de código, cuyo principal objetivo es la posibilidad de reutilizarlo, tantas veces como sea posible, esto mejora considerablemente la manera de ampliar, mejorar o detectar errores relacionados con el proyecto.

Por ejemplo, si tenemos que crear una web, donde nuestra página principal constará de varias partes, como por ejemplo, la barra de navegación, un pequeño listado de productos y el Footer, que podrían repetirse en otras páginas, lo más lógico será convertir esas partes en componentes, que podamos volver a mostrar, según nuestras necesidades, añadiendo la línea de código correspondiente a la llamada.

En el siguiente gráfico, podremos ver un ejemplo más detallado sobre lo que representa la simplificación de una estructura, dividiéndola en diferentes componentes, que podremos reutilizar y aprovechar dentro de toda la web, a medida que vayamos avanzando en el desarrollo:

Curso Nuxt.js | www.drupaladicto.com - Consultor especializado en drupal y symfony

Nuxtjs, por defecto, dentro de su estructura, viene con una carpeta para guardar los componentes, llamada COMPONENTS. Si abrimos nuestro proyecto utilizando el IDE de nuestra preferencia, podremos ver que dentro de esta carpeta ya existe un componente llamado Logo.vue, que corresponde al logo que se muestra en la página de bienvenida una vez arrancado Nuxtjs, usando el comando npm run dev.

Antes de abrir el archivo, observemos que se considera como buena práctica, nombrar a los componentes usando el CamelCase, mayúsculas iniciales y la extensión .vue, ya que, como dijimos en el primer artículo, Nuxtjs es un Framework basado en Vuex; esto significa que, al igual que como pasa con Drupal 8 y posteriores, basado en Symfony, podremos usar comandos de uno dentro del otro.

Si exploramos el componente Logo.vue, veremos que la estructura básica de cualquier componente será similar, la parte correspondiente a la plantilla o presentación de su contenidos, encerrada entre las etiquetas <template></template> y en la parte inferior, todo lo relacionado con los estilos entre las etiquetas <style></style>, más adelante veremos también la zona relacionada con la ejecución de métocos, props, etc, que estará entre las etiquetas <script></script>.

Cómo mostrar componentes dentro de una página

Si abrimos la carpeta llamada PAGES, donde al igual que sucede con los componentes, se guardarán todas las páginas de nuestro proyecto, veremos index.vue, que es la página principal de nuestra instalación de Nuxt, donde vemos el logo con el nombre de nuestro proyecto al acceder a la url por defecto http://localhost:3000/.

Si exploramos esta página, veremos que dentro la llama a nuestro componente Logo.vue. Para ello simplemente tendremos que añadir la etiqueta html con el nombre del componente, en este caso <Logo />. Esto es gracias a que dentro del archivo de configuración principal de Nuxtjs, nuxt.config.js, tenemos configurado la importación automática de los componentes.

Otra novedad con relación al componente, es la presencia del enunciado export default { } , que explicaremos más adelante, dentro la zona de <script></script> en la parte inferior de la página.

Ejecutando Vuex dentro de Nuxtjs

Vamos a comprobar un ejemplo sencillo donde utilizaremos código Vuex, en la página index.vue, añadiremos un bucle for de Vuex, para repetir el componente varias veces dentro de la página. Para ello simplemente escribirmeos lo siguiente:

<Logo
  v-for="logo in 5"
  :key="logo"
/>

Una vez guardados los cambios, si volvemos a nuestra página principal en el navegador, el resultado será la presentación del componente, Logo.vue, cinco veces en la página.

Creando nuestro primer componente

Para nuestro ejemplo, vamos a crear una página formada por varios componentes, el primero de ellos será el área que compone la cabecera de la página. Ésta estará formada por un par de textos, un botón que al final llamará a un calendario, en la parte izquierda y una imagen circular en la parte derecha.

Como hemos descargado Bootstrap-vue para realizar cambios en el diseño de nuestro proyecto, podremos implementar fácilmente los estilos suficientes para conseguir el aspecto esperado.

Si quieres conocer más acerca de las opciones disponibles en Bootstrap-vue, visita su Página Oficial y explorar todas sus posibilidades.

Dependiendo del IDE que estés utilizando para trabajar en tu proyecto, existen diversas opciones y plugins que nos permiten crear fácilmente la estructura principal de un componente u otros elementos dentro de nuestro proyecto Nuxtjs. En mi caso, con PHP Storm, sólo tendré que activar el plugin y una vez colocado dentro de la carpeta components, haré clic derecho para crear un NUEVO COMPONENTE, al que le pondré el nombre de Cabecera.vue.

Una vez generado el archivo, sólo tendrás que sustituir las partes que cambiarán, para que se vea tal y como esperamos. Si lo prefieres, podrás copiar y pegar el siguiente código dentro de tu archivo Cabecera.vue, ubicado en tu carpeta components y a continuación, sustituiremos el componente Logo.vue dentro de la página index.vue.

<template>
  <div>
    <section class="bg-white text-dark p-5 p-lg-0 pt-lg-5 text-center text-sm-start">
      <div class="container">
        <div class="d-sm-flex align-items-center justify-content-between">
          <div class="p-2">
            <h1 id="titular-hero">A TU PUERTA</h1>
            <p class="lead">Sollicitudin litora modi aenean blandit natoque mollis lacus vehicula eligendi volutpat sodales auctor</p>
            <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#formulario">Empieza Ahora</a>
          </div>
          <div id="img-hero" v-responsive="{ small: el => el.width <= 500 }">
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>

export default {
  name: "Cabecera",
}
</script>

<style scoped>
@media (max-width: 760px) {
  #img-hero {
    height: 300px!important;
  }
}
#titular-hero {
  font-family: 'Erica One', cursive;
  font-size: 4rem;
}

#img-hero {
  border: 2px solid;
  border-radius: 800px;
  background-image: url("~/assets/imagenes/frutas.jpg");
  width: 100%;
  height: 450px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
</style>

Felicidades, si todo ha ido correctamente, ya tienes tu primer componente, con diseño responsivo en tu proyecto Nuxtjs.

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

Nuxt.js | Prerrequisitos e instalación

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

En este Curso Intensivo de Nuxtjs, no profundizaremos sobre la teoría, porque para ello tienes disponible la Página Oficial de Nuxtjs, mi propósito fundamental es explicarte, de la mejor manera posible, todo lo que necesitas para comenzar a explorar el desarrollo de aplicaciones web, utilizando este magnífico Framework, fruto de una evolución de Vuex, y que ofrece una manera mucho más simple, en mi opinión, de aplicar múltiples mejoras en cuanto al diseño y funcionalidad de las webs.

Sin más que añadir por el momento, vamos a comenzar ya con la primera parte del curso:

Prerrequisitos e instalación de NuxtJS

Lo primero que vamos a necesitar, es un entorno de desarrollo estable, en el que podamos ejecutar todo nuestro código sin complicarnos la vida; en mi caso, como trabajado con Windows 10, he optado por utilizar el Subsitema de Linux con WSL2 en mi ordenador, si no lo has utilizado, aquí te explico cómo hacerlo.

El siguiente requisito para comenzar a trabajar con Nuxtjs, una vez configurado nuestro entorno, será descarga e Instalar NodeJS, si ya lo tenías instalado, te recomiendo actualizar a la versión más reciente ya que se hicieron varias correcciones sobre errores de compatibilidad con Nuxtjs.

Antes de comenzar con la instalación de Nuxtjs, te recomiendo que compruebes las versiones de Nodejs y Npm que tienes instaladas, para ello puedes usar el comando:

node -v

npm -v

Instalación del proyecto con Nuxt

Ahora que ya tenemos todo a punto, listos para comenzar con nuestro proyecto, nos colocaremos en la carpeta destinada para ello, y crearemos una nueva carpeta a la que daremos todos los permisos para evitar fallos durante el proceso de instalación.

Una vez realizados estos pasos, podremos comenzar con la descarga e instalación de la estructura principal de nuestro proyecto, yo he creado una carpeta llamada proyectoNuxt, y dentro de esta tendré otra carpeta a la que llamaré cliente, que será donde alojaré todos los archivos de mi instalación con Nuxtjs, de esta forma, una vez realizada mi instalación, podré trabajar conectándome, por ejemplo a otros proyectos mediante API, manteniendo una estructura organizada.

sudo mkdir proyectoNuxt

sudo chmod -R 777 proyectoNuxt

cd proyectoNuxt/

Si vamos a la Página Oficial de Nuxt, comprobaremos que para instalarlo podremos utilizar npm o yarm, en mi caso optaré por la primera opción pero puedes hacerlo con la que prefieras.

Estando dentro de la carpeta donde alojaremos la instalación, ejecutaremos el siguiente comando, que crerá la carpeta cliente y dentro alojará todos los archivos de nuestra instalación de Nuxtjs:

npx create-nuxt-app cliente

De inmediato, comenzará la descarga de todos los archivos necesarios para que comencemos a trabajar con Nuxtjs. Y una vez descargado se nos realizarán varias preguntas sobre el proyecto que vamos a comenzar, para terminar con las configuraciones correspondientes:

Tendremos la oportunidad de seleccionar varias opciones, previas a nuestra instalación, como el uso de algún Framework de testeo o de Frontend, si usaremos control de versiones, etc.

Una vez hayamos seleccionado las opciones que consideramos importantes para nuestro proyecto, entonces, continuará la descargar y configuración final del Nuxtjs y se mostrará en pantalla un conjunto de informaciones, dentro de las que están los comandos fundamentales para arrancar nuestro proyecto y comenzar con la diversión.

En nuestro caso, nos moveremos a la nueva carpeta cliente y una vez allí, ejecutaremos el comando

npm run dev

Si todo ha ido bien, entonces veremos la url "http://localhost:3000/", para acceder a nuestro proyecto, si la copiamos en el navegador deberíamos ver la página de bienvenida de Nuxtjs.

Y si abrimos, utilizando el IDE de nuestra preferencia, los archivos donde tenemos alojado nuestro proyecto, podremos comprobar la estructura de Nuxtjs, que explicaremos en detalle a medida que avancemos en el desarrollo del curso.

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

Curso intensivo Nuxtjs

Iniciar el curso

Emulsify Drupal | Storybook

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

Ya que tenemos arrancando y funcionando, todo lo que vamos a necesitar, para comenzar con nuestra implementación usando diseño de patrones, empezaremos por realizar los primeros cambios que marcarán el estilo y apariencia de nuestra web. Para ello, realizaremos la exploración de los archivos del Storybook o guía de estilos, para ir conociendo las opciones disponibles y sacar el mayor provecho de ello.

Paso 1 - Definición de la paleta de colores:

El primer lugar donde comienza nuestro viaje hacia la personalización de nuestra guía de estilos, será la definicición de la paleta de colores que vamos a utilizar en nuestra web. Para ellos tendremos que abrir varios archivos, que iremos explicando paso a paso.

Si abrimos nuestra guía de estilos, encontraremos la Paleta de colrores, dentro del menú Colors, tal y como muestro en la siguiente imagen, desde aquí podremos comprobar en tiempo real, cada uno de los cambios que realicemos relacionados con este apartado.

Story book Emulsify | www.drupaladicto.com - Consultor especializado en drupal y symfony

Ahora que ya tenemos claro, dónde comprobaremos los cambios aplicados, abriremos el primero de los archivos de configuración, relacionados con esta parte, que encontraremos, dentro de "NUESTRO-THEME-PERSONALIZADO/components/00-base/01-colors/_00-colors-vars.scss". Se trata de un archivo, en formato SASS, donde se definen todos los colores, utilizando variables.

Una vez entiendas el concepto, será fácil comenzar a aplicar los cambios, aunque no tengas conocimientos previos de SASS, ya que al ejecutar el comando para arrancar la guía de estilos (npm run develop), ésta se encargará de realizar las compilaciones para que todo se vea de acuerdo a lo que se ha definido.

Vamos a realizar una rápida comprobación de que todo funciona correctamente, y de que no tendremos que ejecutar comando de SASS, para ver los resultados inmediatamente; en la última línea del archivo encontraremos la variable "$blue: #005de0;", vamos a cambiar el código del color por el de uno completamente diferente ($blue: #ff6600;) y guardaremos los cambios, sin hacer nada más, a continuación, volveremos a la guía de estilos y veremos de inmediato el cambio, en el color llamado PRIMARY.

El otro de los archivos, relacionado con la paleta de colores, ubicado justo debajo el anterior, es el llamado _01-colors-used.scss, si lo abrimos, veremos que existen dos variables principales, que definen dos Perfiles de color ($defaultColors y $darkColors), para nuestra instalación, que se mostrarán en función del navegador, el modo default se muestra para todos navegadores en general y el modo Dark, sólo en aquellos navegadores que soporten este tipo de presentación, como los dispositivos MAC.

Dentro de cada uno de estos perfiles, están todas las variables que se encuentran definidas en el anterior archivo, con el nombre que se muestra dentro de la paleta. Esta es una de las razones por las cuales al realizar el cambio código de color en el archivo de variables, se aplica automáticamente al resto de archivos relacionados.

Esto quiere decir, que además de los colores existentes, podremos agregar nuestros nombres personalizados y asignarles las variables que hayamos definido en otro archivo para poder emplearlas al momento de aplicar nuestros estilos.

Aplicando lo colores dentro de nuestra hoja de estilos

Durante el proceso de creación de nuestro proyecto, puede que en algún caso necesitemos utilizar, alguno de estos colores, en un elemento en concreto, para que el color se aplique correctamente, en lugar de llamar a la variable de forma directa, tendremos que emplear la función clr(), de esta foma, mantendremos el concepto de "centralizar" y obtendremos mejores resultados al utlizar el diseño de patrones.

El siguiente código, muestra la forma en que se aplica el color a los enlaces del menú principal, dentro del archivo _00-main-menu.scss, ubicado en "NUESTRO-THEME-PERSONALIZADO/components/02-molecules/menus/main-menu/ _00-main-menu.scss.

&--open {
  background-color: clr(background);
  display: block;
  left: 0;
  overflow-y: scroll;
  position: absolute;
  top: 134px;
  right: 0;
  width: 100%;
}

Configuración de los nombres de los colores en el Storybook

Por último, pero no menos importante, está el archivo donde se definen los nombres de los colores que se muestran dentro de nuestra guía de estilos, se trata del archivo colors.yml. Podremos comprobarlo, si cambiamos el nombre de cualquiera de los colores y, sin hacer nada más que guardarlo, abrimos la guía de estilos.

Una vez tengamos configurada correctamente la paleta de colores, todos los cambios relacionados con esta parte, estarán centralizadas, fáciles de modificar, y además, dichos cambios se aplicarán autormáticamente, a través de todo el proyecto Drupal.

Emulsify Drupal | Patrones, componentes y vistas

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

Llegados a este punto, ya tenemos al menos los conocimientos básicos, sobre el diseño de patrones o atómico, también conocido como "Pattern Labs", además de haber realizado, un pequeño recorrido por la estructura de archivos de la guía de estilos o storybook, que nos generó la instalación del módulo Emulsify y de nuestro tema personalizado, dentro del proyecto Drupal 9, con el cual estamos trabajando en este curso.

Es el turno de comenzar a aplicar este diseño de patrones, dentro de una de las plantillas Twig de Drupal 9, para entender mejor las posibilidades ofrecidas, por esta nueva forma de trabajo, cuyo fin principal, además de permitir que los diseñadores puedan trabajar paralelamente con los programadores, sin previos conocimientos sobre Drupal, ni dependencias entre ellos; la posibilidad de "Centralizar" y "Reutilizar" al máximo todos los componentes, disminuyendo así el tiempo de implementación, en todas sus fases.

Aplicando Pattern Labs en las plantillas Drupal 9

Paso 1 - Activación del modo Debug o Depurador de Drupal:

Ya que el diseño de patrones, implica la modificación de las plantillas que vienen por defecto en Drupal, lo primero que deberíamos hacer antes de comenzar con esto, será activar el modo debug o depurador, para conocer el nombre de cada pantilla, de acuerdo con los nodos, campos o vistas que estemos modificando. Existen dos meneras de hacerlo:

Opción 1: Consiste en renombrar el archivo default.services.yml, ubicado dentro de la carpeta /web/sites/default, y a continuación cambir los valores de debug y cache, como se muestra en la imagen.

Curso Pattern Lab Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony

Opción 2: Configurando el archivo settings.local, tal y como te explico en Configuración desarrollo local Drupal 8 Haz clic aquí.

Una vez hayas activado el modo depurador, ejecutarás los comandos drush cr y drush updb, para borrar la caché de drupal y actualizar la base de datos. Entonces al hacer clic en la tecla F12 o seleccionar la opción explorar del navegador, verás los nombres sugeridos por drupal para las plantillas, como te muestro en la siguiente imagen.

Paso 2 - Explorar plantillas por defecto generadas por Emulsify

Como ya hemos mencionado antes, uno de los propósitos del Diseño de patrones es reutilizar siempre que podamos, por esta razón, cuando se genera el Tema personalizado, Emulsify crea varias pantillas Twig, que nos pueden servir, tanto como guia para entender la manera en que trabaja o como base para generar plantillas más complejas.

Si abrimos la carpeta Templates, veremos varias de ellas, clasificadas por su tipo, esta estrucutra nos facilita la ubicación y nos marca la guia de trabajo que deberíamos mantener durante nuestro desarrollo.

Paso 3 - Explorar nuestros contenidos y opciones a implementar

Es muy importante tener claro que nuestra mentalidad debe ser "NO REINVENTEMOS LA RUEDA", esto significa, que deberíamo evaluar constantemente, a medida que vayamos avanzando en nuestro proyecto, para saber si es necesario crear un nuevo componente o simplemente reutilizar uno que ya esté listo.

Por ejemplo, si vamos a la carpeta llamada VIEWS, econtraremos dentro la plantilla para una Vista del tipo lista sin formato, con el nombre views-view-unformatted--frontpage.html.twig, esto significa que si en nuestra página principal pensamos tener un listado de artículos, productos o de imágenes, sólo tendríamos que crear una vista del tipo correspodiente y obtendríamos un resultado al instante.

En la siguiente imagen, he generado algunos artículos, utilizando el módulo Devel y sin hacer nada más, como por defecto, los artículos vienen configurados para mostrarse en la página principal del sitio, obtuve lo que te muestro a continuación:

Si abrimos la plantilla por dentro, encontraremos el siguiente código...

{% embed "@organisms/grid/grid.twig" with {
  grid_type: 'card',
  grid_label: title
} %}
  {% block grid_content %}
    {% for row in rows %}
      {{ row.content }}
    {% endfor %}
  {% endblock %}
{% endembed %}

Eplicación:

Lo primero que vemos aquí es la inclusión o importación del modelo o patrón para este tipo de vista, en este caso a través de embed en lugar de include, a continuación se definen el tipo de patrón para los contenidos que se mostrará dentro del las cuadrículas, usando CARD, y el campo título de la vista.

Si vamos a la documentación de la Página Oficial de Symfony, podremos leer la siguiente explicación:

" La etiqueta incrustada combina el comportamiento de incluir y extender. Le permite incluir el contenido de otra plantilla, al igual que lo hace include. Pero también le permite anular cualquier bloque definido dentro de la plantilla incluida, como cuando se extiende una plantilla.

Piense en una plantilla incrustada como un "esqueleto de micro diseño ".

En la siguiente parte del patrón de diseño, se define un bloque, dentro del cual estará contenida la vista completa, por eso verás que al final están las etiquetas de cierre correspondientes al cierre del bloque y al cierre del embed declarado al principio.

Suscribirse a desacoplado