Lead Tools Product Menu

Lead Machine Tools is a tooling merchant that was founded in 2011. It retails high-end industrial tooling to South Africa's engineering sector and works closely with suppliers in Europe, USA, Taiwan and Japan.

Having liked the work that we did on WD Hearn, a partered company to Lead Machine Tools, we were asked to add a number of features to their website which is in Drupal 8.

One of those features in question was a dynamic product menu that automatically lists products as they are added to the website and which collapses and expands depending on which current product or product category is being viewed.

This was a fairly uncomplicated project as we have built this feature for other clients in the past.

The biggest challenge would be in setting up a local development instance of the site as it is also hosted on Pantheon in the United States.

Deploying a site locally from Pantheon is made easy as they have git integrated into their platform, so it was a matter of creating an account, having access granted, and then cloning the site and pulling down a copy of the database and files.

We made use of Drupal's Views software to create a list of products which we grouped by category.

To make the menu collapsible, we used contextual filtering to check which page is being viewed and then to only show the appropriate corresponding item in the menu.

Lastly, we added some JavaScript that dynamically adds or removes an active class to the menu according to what page was being viewed - this allows the correct highlighting/bolding of menu items to show a customer where they are in the menu while browsing a particular product or product category.

Navigation while browsing products on the Lead Machine Tools website has been substantially improved which has also increased user engagement with adjacent products on the menu.