Nespresso store, recycling and pick up point locator

Requirements

Nespresso already had a non-Drupal website with information on the brand and its products as well as an e-commerce site. The goal was not to replace the existing website but to seamlessly integrate the boutique search engine part without altering the current system. The switching between different parts of the website should be invisible to the user.

Besides, the data had to be imported from different sources with different formats and requirements and, at the same time, allow for subsequent content editing by publishers, both to add information not present in the original data or to qualify or complete the information received.

This imported data needed to be exposed using a REST API ready for consumption by a Vue.js-based web app that, when embedded on the page, showcases the map and geolocates the points of interest. The use of a client-side modern framework allows for greater flexibility and agility and better performance as perceived by the user, avoiding page reloads or Ajax requests to the server.
Finally, given the idiosyncrasy of the territory to be served (Spain) the website would have to be able to be presented in two of the official languages: Spanish and Catalan.

What makes this project remarkable

This project is a perfect example of a progressively decoupled Drupal strategy. Drupal serves the general structure of the page with the common elements such as menus, footer, and main container, leaving the responsibility of some of the content to a JavaScript application.

For the public front end, Vue.js is used. This JavaScript framework is especially suited for small to medium-sized applications, given its lightness and good performance. The application communicates with Drupal through a JSON web service to obtain the data to be displayed, as well as with the external map service for functionalities such as the map itself or for geographical searches. Additionally, the packaging of the search engine in an independent JavaScript application allows it to be re-used without difficulty in other pages that might require it, simply by adding it using standard HTML mechanisms.

The extensive use of Drupal’s migration tools is also remarkable. Handling complex migrations from a variety of sources and formats. Migrations could be triggered both automatically or manually and the data coming from different sources needed a great deal of normalization before being introduced (i.e. both UPS and Correos were providing pick up point information but with a very different data structure).

Problems solved

During the development, we solved the following problems:

• The sources of external data involve several providers (UPS, Correos, Localoo) and different formats (CSV, TSV) coming from a variety of sources (FTP, SFTP, APIs) and mapped to an inherited paragraph-based system. This complexity was eased by introducing custom implementations of libraries like phpseclib or phpcoord and custom modules like migrate_paragraphs.
• Creation of a custom REST API for its consumption by a Vue.js web app.
• Correct parsing of coordinates.
• The user shouldn’t notice the change of website, so a careful and thorough styling of the website, mimicking the original, was needed.