Nuestro equipo, en colaboración con Shopware, tuvo la oportunidad de conocer y trabajar con una nueva herramienta de Shopware: Shopware Frontends. Tanto desde Shopware como por parte de sus partners, recibimos la solicitud de implementar un nuevo proyecto utilizando esta herramienta, integrando además varios elementos del sitio web existente. En concreto, debíamos preparar un POC para el cliente.
*Un Proof of concept (POC), o prueba de concepto, es un método que permite al equipo de gestión de un proyecto —o a otros profesionales— determinar, demostrar y validar la viabilidad de una idea, producto, concepto, solución o hipótesis.
En este artículo, hablaremos en detalle y paso a paso sobre esta experiencia, las ventajas de este enfoque y las características de Shopware Frontends.
¿Qué es Shopware Frontends?
Shopware Composable Frontends es un conjunto de paquetes y herramientas destinados a crear storefronts personalizados e independientes de la plataforma, cuya implementación se basa en Vue.js y Nuxt3. Estructuralmente, se presenta del siguiente modo:
Shopware 6 se considera una de las fuentes de datos compatibles. No obstante, es posible integrar cualquier otra fuente de datos, como un CMS o herramientas de analítica. Shopware Frontends utiliza la Store API para conectarse en tiempo de ejecución con tu instancia de Shopware 6.
Shopware Frontends ofrece varios paquetes que permiten abordar tareas complejas:
- Enrutamiento
- Integración con Shopping Worlds (CMS de Shopware)
- Búsqueda de productos y aplicación de filtros
- Formateo de precios
- Autenticación y gestión de estado
También cuenta con soporte para TypeScript.
Puedes empezar desde cero sin utilizar ninguna plantilla, pero se recomienda usar los Shopware Frontends Setup Templates, que están basados en Nuxt.js y Tailwind CSS..
¡Descubre más sobre Shopware Frontends!
Déjanos tus datos de contacto y nos pondremos en contacto contigo.
IPOC para el cliente: tareas y pasos de implementación
En el caso que desarrollamos, el cliente tenía previsto migrar su sitio a Shopware, aunque solo las partes administrativa y de backend se gestionarían con esta plataforma. La parte del frontend debía implementarse utilizando Shopware Frontends, basado en Vue.js y Nuxt3.
Uno de los aspectos técnicos más importantes fue lograr una integración fluida entre WordPress y Shopware Frontends para recibir y mostrar las entradas del blog.
Las tareas principales que tuvimos que llevar a cabo fueron:
- Implementar la comunicación entre Shopware y Shopware Frontends
- Rellenar Shopware con categorías y productos, replicando los del sitio original
- Crear un diseño de la página principal lo más similar posible al original
- Implementar la visualización de entradas del blog desde el sitio en WordPress
- Añadir al buscador existente la opción de buscar también en el blog
Dado que las tareas estaban bien definidas, nuestro equipo comenzó con la fase de implementación.
Relleno del sitio
Los primeros pasos de instalación y configuración fueron sencillos, por lo que se completaron rápidamente. El siguiente paso fue la fase de relleno de contenido.
Dado que Shopware Frontends ofrece una integración por API bastante sólida con Shopware, elementos estándar como el menú en el encabezado, el carrito, la búsqueda y el enlace a la cuenta de usuario ya estaban implementados por defecto. También se incluía un footer estándar desde el inicio. Solo fue necesario ajustar el número de niveles de visualización del menú.
Nos habría gustado implementar la recepción del logotipo mediante API. Sin embargo, actualmente Frontends solo permite realizar solicitudes API relacionadas con la parte de storefront, por lo que el logotipo tuvo que definirse de forma estática.
Creación de la página principal y de la página de listado
El siguiente paso fue crear la página principal y la página de listado de productos. Shopware Frontends proporciona páginas estándar de Shopware, como la página de detalle del producto, la página de listado, el carrito, el checkout o una página genérica, por lo que se puede utilizar sin problema la funcionalidad de Shopping Experience de Shopware para construir la página principal.
No obstante, hay un matiz importante: en Shopware Frontends solo se muestran los elementos CMS estándar de Shopware. Por lo tanto, si tienes bloques o elementos CMS personalizados, estos no se visualizarán en el frontend generado con Frontends.
Nos encontramos con este reto porque era necesario mostrar un slider con imágenes de fondo y contenido en la página. Sin embargo, gracias a la documentación y a las capacidades de Shopware Frontends, conseguimos resolverlo sin complicaciones: conseguimos mostrar un elemento CMS personalizado en el lado de Frontends. Desde Frontends, mediante la API, recibimos todos los datos de nuestro elemento CMS en un objeto JSON, que luego distribuimos dentro del componente correspondiente, aplicando los estilos y conectando la librería Swiper. De este modo, podemos integrar fácilmente cualquier elemento CMS no estándar del Shopping Experience en nuestro frontend personalizado.
Integración de WordPress y Shopware Frontends
El siguiente paso fue integrar WordPress en Shopware Frontends. El cliente quería utilizar el CMS de WordPress para mostrar las entradas del blog en el sitio.
Para obtener los registros desde WordPress, utilizamos un plugin de GraphQL, que nos proporcionó un endpoint al que podíamos enviar solicitudes para recuperar los datos directamente de la base de datos.
Solo fue necesario crear un componente en el frontend que generara la consulta correspondiente hacia ese endpoint. La respuesta era un array de entradas, que luego mostramos como tarjetas estándar, con una imagen y un título.
Sin embargo, esta visualización no ofrecía una vista completa de las noticias. Es lógico que el usuario quiera acceder al contenido completo. La solución fue crear una página dedicada a noticias, donde se muestra el contenido íntegro de cada entrada. Afortunadamente, Shopware Frontends ya cuenta con un sistema de enrutamiento robusto, lo que nos permitió implementar esta funcionalidad de forma eficiente. Ahora, cuando un usuario hace clic en una tarjeta de noticia, es redirigido de manera fluida a una página aparte con el contenido completo. Cabe destacar que esto se logra enviando una solicitud al endpoint de GraphQL, pasando un slug extraído de la URL para que GraphQL identifique con precisión el tipo de contenido que debe mostrar.
Implementación de la búsqueda
La última tarea que debíamos abordar era la funcionalidad de búsqueda. Shopware Frontends ya incluye una búsqueda de productos, pero el cliente quería que la búsqueda funcionara para dos tipos de contenido: productos y noticias.
Para ello, tuvimos que implementar nuestra propia funcionalidad, que se activa cuando el usuario empieza a escribir en el campo de búsqueda. En ese momento, se envía una solicitud al endpoint con el texto introducido. Si se obtienen resultados relevantes, mostramos las noticias debajo de los productos, siempre que también coincidan con el texto buscado. Esto demuestra la flexibilidad de Shopware Frontends, ya que nos permite ampliar la funcionalidad de búsqueda a múltiples entidades, adaptándose por completo a los requisitos específicos del cliente.
Resumen
Shopware Composable Frontends es una herramienta muy interesante, con un gran potencial y posibilidades casi infinitas, especialmente en el ámbito del frontend, ya que está desarrollada con Vue.js.
Durante el desarrollo, en algunos momentos echamos en falta una documentación más detallada sobre Frontends. Sin embargo, estamos convencidos de que Shopware solucionará esta carencia, y que la herramienta será aún más completa y potente en sus próximas versiones.
