Our client, Hors coffee house, approached us with the task of developing a new website for the company. In 2019, we were already working on a project to migrate the company's international website to Drupal, the new site was intended to become the main one in the Russian Federation.
The customer provided the site design. The main requirements during the development were compliance with enterprise standards, optimization for mobile devices, and image optimization. Initially, the site was developed on Drupal 8, but later it was updated on Drupal 9.
The site's main functionality can be divided into two parts: Product catalog and information pages.
Information pages
To organize the information pages, we used the "Page + Layout builder + Blocks" link. Blocks and Layout builder are the functionality of the Drupal core, as well as pages, but page management in the administrative interface, at the time of development, was not yet implemented in core. To manage the pages, the Page manager module, supported by the Drupal community, was used. Using pages instead of the classic nodes gives you more flexibility with blocks and allows us to automatically migrate changes on deployment.
7 universal types of blocks have been developed for use on information pages. Blocks visually and structurally similar were combined into one type, and several instances of one block were added to the pages.
Product Catalog
The product catalog is based on the classic "Node + Search API + Facets" scheme. Also, to navigate through product options, the Slick module was used, which allows you to implement carousels of any complexity. The interface for managing products and their properties is implemented mainly on the main functionality of the Drupal core using best practices, such as Media, Paragraphs, and fine-tuning input formats (Allowed formats module).
Main features of the project
- Website in two languages, Russian and English.
- Advanced information page management system based on blocks.
- Complete product management system.
- Image optimization, WebP usage, responsive images.
- Fully adaptive site for mobile devices.
