Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
By Upbeat Productions on
Warwick Fabrics UK are creators of exclusive furnishing fabrics for domestic and commercial interiors. They have been supplying fabrics to the trade for 25 years, alongside their sister company in Australia (Warwick Fabrics Australia).
The challenge to deliver a beautiful, fully responsive website that showcases Warwick Fabrics’ extensive range of collections and fabrics in full-colour glory, and also allowed customers to order free samples of their products using a familiar cart-based e-commerce style system.
The site’s design included some unique elements that demanded use of JavaScript throughout to enhance the experience, including a lovely full-page search window, and hoverable ‘hotspots’ that allowed clients and visitors to see which fabrics are featured in their collection images.
Why Drupal was chosen:
We are open source specialists, primarily working with Drupal (for over 7 years). We chose Drupal 7 for this project as we knew we could utilise Drupal Commerce for the sample requests and using our teams technical skills to develop the ‘hotspot’ functionality using custom JavaScript whilst ensuring that sites administrators were able to manage their creation from within the administration pages.
Describe the project (goals, requirements and outcome):
The Solution
We created a robust e-commerce backbone was provided using Drupal and Drupal Commerce for the sample requests.
On top of this foundation we added a modern HTML5-based, fully responsive theme built from the designs supplied. The ‘hotspot’ functionality was added using custom JavaScript, with some help from the jQuery library (and some lovely percentage-based maths).
The administrative side of the project also received some JavaScript love - with a custom interface for tagging hotspots to images and selecting which fabric to associate with it. Feedback from the client was very positive for this.
The front-end search functionality was created using custom JavaScript and LESS - built to overlay the entire screen when clicked, it’s results come from Drupal’s built-in search module, with a little tweaking of the template to show relevant fabrics for results.
The Results
- A beautiful, fully responsive, javascript-enhanced theme experience.
- Clean and clear product presentation.
- An easy, clean and recognisable e-commerce process for requesting samples, complete with a cart and checkout process.
- Interactive javascript elements such as ‘hotspots’ and zooming in on fabric thumbnails to see more details.
- Custom drupal interfaces for the client to organise their inventory.
Technical specifications
Key modules/theme/distribution used:
Why these modules/theme/distribution were chosen:
Using Commerce for the sample ordering was the obvious choice for us as we have staff members who have used both Commerce and Ubercart, and had a more positive experience with setting up and using Commerce; with its flexibility for 3rd party integrations and customisation.
We developed our own module to display hotspots on images, and extended the taxonomy administration pages to add a new local tab named "manage hotspots", from there site administrators had the ability to use a JavaScript controlled UI that allows them to 'tag' specific points on an image, then reference a Commerce product entity to display against it.
Organizations involved:
Sectors:
E-Commerce
Retail and Distribution
