Vistas y Taxonomías | Creación de un catálogo con vistas (Parte 1)

Video de Youtube
URL de Video remoto

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 artículo te voy a enseñar cómo crear un bloque del tipo catálogo, que podrás colocar en tu página principal o cualquier otra página, usando vistas y taxonomías.

     Prerrequisitos:

        Conocer cómo se crean contenidos y tipos de contenido en Drupal, te recomiendo ver los videos y documentacíon relacionados con Trabajando con contenidos y tipos

        Conocer el uso de las vistas, te recomiendo que dediques un tiempo a ver los videos y documentacíon relacionados con Trabajo con vistas en Drupal 9

        Conocer el uso de las taxonomías en Drupal,  te recomiendo que dediques un tiempo a ver los videos y documentacíon relacionados con Taxonomías, filtros y vistas en Drupal 9

     Cómo crear un catálogo usando Vistas y Taxonomías en Drupal 9

           Paso 1 - Crear el tipo de contenido

                Para este ejercicio, deberás haber creado al menos un tipo de contenido, al que en este ejemplo le llamaremos Producto, pero que en tu caso puede ser Noticia, Libro, Publicación, etc. ya que se trata de generar un listado de todos estos contenidos clasificándolos a través de sus categorías correspondientes, para ello, utilizaremos un vocabulario, al que llamaré Categoría, que deberá formar parte de los campos dentro de tu tipo de contenido.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

               Si todavía no conoces cómo trabajar con contenidos y tipos de contenido, dedica un tiempo a mirar el video donde te lo explico y podrás entender más fácilmente el resto del ejercicio. Haz clic en el siguiente enlace para ver la documentación y video explicativo: Trabajando con contenidos y tipos

            Paso 2 - Generar contenidos categorizados

              Además, para que tenga sentido, generaremos varios contenidos, añadiéndoles diferentes Categorías, para comprobar que todo funciona según lo esperado. Si estás trabajando con un proyecto nuevo, puedes generar estos contenidos de prueba usando el Módulo Devel Generate, puedes ver cómo hacerlo en el siguiente enlace Cómo generar contenidos de Prueba con el módulo Devel

 

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

             Para categorizar los contenidos utilizaremos las Taxonomías o Vocabularios, cuya función en Drupal es exactamente esa, "clasificar". Así que añadiremos un nuevo vocabulario llamado "Categoría" y, a continuación, agregaremos el campo con el mismo nombre en nuestro tipo de contenido, seleccionando la opción de "Crear entidades referenciadas si no existieran previamente".

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

             Si todavía no conoces las taxonomías y cómo trabajar con ellas, dedica un tiempo a mirar el video donde te lo explico y podrás entender más fácilmente el resto del ejercicio. Haz clic en el siguiente enlace para ver la documentación y video explicativo:  Taxonomías, Filtros en vistas, Menús y CSS   

            Una vez creado el vocabulario y añadido como parte del tipo de contenido, podremos comenzar a clasificar nuestros contenidos, ya sea añadiendo previamente diferentes categorías desde la misma taxonomía o generando nuevos contenidos y añadiéndolas directamente, como parte de dicho proceso.

 

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

             Paso 3 - Crear la vista de Categorías

                  Existen varias maneras de crear catálogos utilizando Taxonomías, podemos crear una Vista tipo Página o podemos crear una Vista tipo Bloque, para incluirla dentro de una Página que hayamos creado paralelamente.

             Opción 1 - Creación de Página Categorías usando taxonomías

                   En este caso, vamos a crear una Vista del tipo Página, que configuraremos como nuestra página de inicio, mostrando el listado de la Taxonomía o vocabulario llamado "Categoría", el objetivo es conseguir el listado de las categorías para luego hacer que apunten a sus respectivos productos, al hacer clic sobre cualquiera de ellas.

                  Accederemos a la url "/admin/structure/views" y crearemos nuestra vista tipo página con el nombre "Catálogo", donde mostraremos las taxonomías del tipo Categoría, luego configuraremos el resto de datos correspondientes, como el tipo de la vista "Página" y la url de acceso; finalmente activaremos el paginador en caso de que tuviéramos muchas categorías. Podremos modificar estos parámetros o ajustarlos una vez creada la vista, en la pantalla de configuración.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

            Ajustes de configuración de la vista

                 Al hacer clic en el botón "Guardar y continuar", de la parte inferior de la página, accederemos a la parte de la configuración interna, donde podremos realizar aquellos ajustes que nos hagan falta y, a su vez, comprobar que lo que se nos muestra es lo que esperábamos.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

            Configuración del catálogo como página principal

                 Ya que hemos comprobado, que efectivamente se muestra el listado de las categorías en nuestra "Vista Catálogo", lo siguiente que deberíamos hacer es configurar nuestro sitio, para que la utilice como página principal.

                 Para ello nos dirigiremos al apartado de Configuraciones básicas del sitio , ubicado en "/admin/config/system/site-information", y colocaremos la url de nuestrra vista en el lugar correspodiente, tal y como te muestro en la siguiente imagen. Una vez realizado el cambio, podremos volver a nuestra página principal y comprobaremos que ha sido realizado el cambio.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

              Añadir imágenes a las taxonomías

              Aunque hemos conseguido el resultado esperado, ya que tenemos configurada nuestra página "Catálogo" como página principal de nuestro sitio, y que se muestran las categorías que habíamos añadido previamente, todavía está muy lejos de lo que esperaríamos encontrar en una web de productos. Así que, a continuación añadiremos un campo del tipo imagen a nuestra taxonomía y de esta manera, podremos mostrar un aspecto más llamativo e impactante a nivel visual para nuestros usuarios.

              Para realizar este cambio, volveremos a la url de configuración de los campos en la Taxonomía accediendo a :

 "/admin/structure/taxonomy/manage/categoria/overview/fields"

y a continuación añadiremos un campo del tipo imagen, como lo haríamos en cualquier otro contenido de Drupal. Crearemos nuestro propio campo personalizado de imágenes para esta taxonomía y rellenaremos los campos correspodientes, una vez realizado el proceso, guardaremos los cambios y ya podremos añadir las imágenes de cada una de nuestras categorías.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

                Ahora que ya hemos añadido el nuevo campo del tipo imagen, podremos acceder a cada una de nuestras Taxonomías y agregarle las imágenes que las harán más fáciles de identificar y atractivas a ojos de nuestros usuarios, llamándolos a la acción de clicar en ellas.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

              Una vez añadidas todas las imágenes, tendremos que hacer lo mismos en la vista "Catálogo", para que podamos tenerlas en la página de inicio. En ese caso, accederemos a la configuración de la vista, añadiremos el nuevo campo "Imagen Categoría" y ajustaremos el formato de presentación de la imagen para que no se vea muy grande.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

             Si volvemos a nuestra página de inicio, el resultado debería ser algo parecido a la siguiente imágen, que ya nos da una mejor idea del objetivo final, que será conseguir un catálogo atractivo y funcional, para presentar nuestros contenidos o productos.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony