Ganador de los Splash Awards 2020 de Alemania y Austria

Solución multisitio para TRANSGOURMET

¿Qué opciones tiene una marca como Transgourmet a la hora de crear una solución multisitio para sus clientes y empleados, con el fin de facilitar el uso de diferentes sitios web con distintos sistemas de gestión de contenidos y para usuarios con diferentes niveles de conocimientos técnicos? 1xINTERNET creó una distribución de Drupal 8 en la que todos sus sitios web pueden funcionar sin problemas. El front-end se integró en un sistema de diseño de Patternlab. 

¿Quién es Transgourmet y cómo le ayudamos?

Transgourmet es un mayorista de alimentos para la gastronomía, la hostelería y los consumidores a granel con una facturación de más de 3.000 millones de euros al año. En 2018 1xINTERNET empezó el trabajo con el análisis de todos los sitios web de Transgourmet y su marca Selgros Cash and Carry para poder definir los mismos requisitos y estándares técnicos para ellos. La tarea consistía en crear una solución coherente y flexible que permitiera el relanzamiento de todos los sitios web de la empresa. Por lo tanto, había que utilizar un CMS robusto, seguro y eficaz, cuyo desarrollo y mantenimiento pudieran desvincularse en el tiempo. Para una empresa como Transgourmet un proyecto como este es una parte esencial para completar la estrategia digital.

Descripción del proyecto

Los sitios web corporativos y los micrositios fueron previamente implementados y mantenidos por diferentes equipos utilizando diferentes soluciones de CMS. El diseño no estaba estandarizado entre los sitios web. Para una experiencia de marca homogénea, era necesario utilizar una guía de estilo técnica común. Como CMS se eligió una distribución de Drupal con sistema de diseño desacoplado, sobre cuya base de código común se crearon más de 6 sitios web. 

¿Por qué se eligió Drupal?

Objetivos y resultados del proyecto

El objetivo más importante del proyecto era la creación de una distribución que pudiera satisfacer las necesidades actuales y futuras de clientes B2B. En particular, la interacción con el cliente estaba en primer plano. 

Los siguientes requisitos debían cumplirse en la medida de lo posible:

• Nuevo diseño y experiencia de usuario

• Frontend personalizable de acuerdo con los manuales de identidad corporativa

• Selección de mercados y contenidos personalizados 

• Configuración de filtros específicos del sector para eventos con inscripción regulada

• Banners personalizados con una herramienta de administración fácil de editar para más de 200 banners

• Catálogo de recetas con "llamadas a la acción" integradas (botones CTA)

Distribución de Drupal 8

1xINTERNET creó una distribución de Drupal 8 (producto CMS) sobre la que pueden funcionar todos los sitios web. El frontend se integró en un sistema de diseño basado en Patternlab. La distribución de Drupal y la solución headless de comercio B2B utilizan el mismo sistema. Todos los sitios web se ejecutan de forma independiente, de modo que el desarrollo, el mantenimiento y la implementación pueden llevarse a cabo de forma diferente para cada sitio web. El primer relanzamiento tuvo lugar en 2019 para Transgourmet.de, seguido de otros 2 micrositios. En agosto de 2020 tuvo lugar el relanzamiento del sitio web corporativo de Selgros.de que resultó ser un gran éxito.

Retos

El principal reto fue mantener una estrecha colaboración con todas las partes interesadas por parte de Transgourmet, ya que cada sitio web tenía su propio propietario de producto y diversos requisitos. Así, además de consolidar todas las tecnologías relacionadas con la web, como el relanzamiento, también se trasladaron a la nube otras actividades que se utilizaban para la coordinación (alojamiento, Git, etc.).  Desde el punto de vista técnico, el reto consistía en hacer utilizables tecnologías parcialmente obsoletas. Los usuarios son, en su mayoría, cocineros y jefes de cocina, que a menudo trabajan con un hardware muy antiguo y con permisos de navegación limitados (IE9, InternetExplorer 11). Esto añadió otro nivel de complejidad entre los requisitos modernos de la UX y las limitaciones técnicas. 

Arquitectura modular 

La distribución contiene más de 50 módulos personalizados que pueden activarse y desactivarse según el proyecto. 

Ejemplos de módulos: 

En este proyecto se combinaron una amplia selección de módulos entre sí para abordar los requisitos de los diferentes sitios web. A continuación se describen brevemente las características más importantes desde el punto de vista del cliente.

Eventos con formulario de inscripción

Transgourmet ofrece a sus clientes una variedad de eventos, talleres y exposiciones internas. Algunos se organizan en mercados específicos, otros en mercados superpuestos. Por lo tanto, se ha creado un tipo de contenido que puede contener diferentes eventos. Se ofrece una opción de inscripción para cada evento.

Esto ha permitido a Transgourmet mejorar la organización de eventos desde un alto tráfico de correos electrónicos hasta un flujo de trabajo moderno. Aquí puede ver ejemplos (busque un seminario para ver la inscripción).

Gestión de catálogos

Como ya se ha mencionado, los catálogos/folletos de productos, etc., siguen desempeñando un papel importante en esta industria y, por tanto, debían integrarse en el sitio web. Algunos de estos catálogos se crean en el propio sitio web, otros se integran mediante un software externo a través de una API. Además del elevado número de activos multimedia, se realizaron otras meta descripciones y atribuciones de taxonomía en el CMS.

Aquí puede ver un ejemplo.

Recetas

La primera característica esencial, después de las funciones básicas del sistema de gestión de contenidos, fue el desarrollo de un portal de recetas con opción de integrar las "llamadas a la acción" (botones CTA) que pudieran llevar a los usuarios directamente a la tienda online para realizar la compra.

Contribuciones de la comunidad 

Dentro de este proyecto también se hicieron muchas contribuciones para los módulos de Drupal: 

Google ReCAPTCHA v3
Google reCAPTCHA v3 devuelve una puntuación específica sin que el usuario tenga que interactuar activamente. En función de esta puntuación, se permiten los envíos o se realiza otra prueba CAPTCHA. 

Config Patch GitLab
Si las configuraciones se cambian directamente en la interfaz de usuario de Drupal en lugar de en el repositorio, estos cambios se pueden enviar a Gitlab como una solicitud de fusión.

Mensajes de Toastr
El módulo Toastr implementa la biblioteca Toastr.js. Toastr es una librería Javascript para mensajes no bloqueantes tipo Gnome / Growl. 

Alojamiento / Operaciones

Todos los sitios web están alojados en Pantheon.io, los temas y el código fuente, en Gitlab.com 

El sistema de diseño o el frontend de los sitios web están alojados en un repositorio separado. Hay un repositorio para el propio sitio web y otro para todos los proyectos basados en él. Esto permite desacoplar características individuales o integrarlas en los proyectos fácilmente. 

Todas las operaciones están totalmente automatizadas mediante el sistema CI/CD de Gitlab. Los cambios en el frontend o en el perfil se realizan automáticamente desde los sistemas de prueba del sitio web. Estos, a su vez, se ponen automáticamente a disposición de las páginas de prueba de los proyectos.