Online shop

About the project

A website and online shop for a popular german publishing house.

Scope

I was mainly responsible for the integration of the frontend (which was built in Pattern Lab by an external frontend developer) into Drupal templates. I also did a lot of refinements on the frontend and later implemented new features for both the backend and the frontend. Besides there are two Preact apps that I took over after the inital development by a colleague of mine: the shopping cart and the user profile.

Architecture

The backend consists of multiple systems communicating with each other: The shop is implemented in Magento and the rest of the site is built with Drupal. The shopping cart is a Preact app integrated into Drupal, but fetching its data via a REST API from Magento. Product data is imported into the system via an API from the client with a custom Drupal importer module.

The frontend components were built outside of Drupal in a pattern library and were afterwards integrated into the Drupal templating system with Twig.

Challenges

Some interesting tasks during this project included:

• Integrating Drupal and Pattern Lab, i.e. putting the HTML mockups into action with real data.
• Implementing the navigation component with a complex interaction and animation concept.
• Implementing the dictionary widget.
• The search and auto-suggest layer. Some points to pay attention to were: The loading of results is delayed for performance reasons. The results are sorted by content type. If there is only one content type the layout must change. The search input can be reset and the result list should close as soon as the search field is empty. Auto-corrections are shown when available.
• Teaser grids are built with CSS grid.
• Calculate differently sized book covers depending on their real size and page number.

Tech stack

• Drupal 8
• Pattern Lab
• Preact
• jQuery
• Bootstrap 3