Indigo Herbs - Magento and Drupal Integration

Indigo Herbs Logo

As with many of GCM Ecommerce's development briefs, the requirements of Indigo Herbs went beyond a "standard" Magento website; Magento needed to be integrated with Drupal 7, the powerful Content Management System ("CMS"). The data needed to travel in both directions, so Drupal needed access to magento products and Magento needed access to Drupal blog entries, recipes and other "rich content" created within the CMS.

Drupal 7 is a fantastic CMS, offering a lot more power for editors and site administrators "out-of-the-box" than the standard CMS included with Magento. This, combined with the fact that Indigo Herbs had been using a (somewhat more limited) ecommerce solution from within Drupal, meant that it was imperative that the two packages could share data. It was understood from the outset that getting the two packages to communicate is not a straight forward task and even though there are "modules" available for both systems that can sometimes ease the situation, none are comprehensive enough to offer everything and can create unforseen issues in the future.

Indigo Herbs Mockup Splashscreen

Indigo Herbs Initial Mockups

It would not be fair to call Magento a "one-trick-pony", but it is first and foremost an ecommerce solution and sometimes combining two job-specific software packages is a better solution that trying to "shoehorn" additional functionality into a system that is not designed for it. On the flip side, Drupal 7 does offer more than one ecommerce package and some of them are definitely good but they do not offer the same "power" as Magento - for example highly configurable products (for example products with mutiple sizes, colours, prices), payment options and the data made available to the site administrator within the "backend" of the system.

Sharing Data Between Drupal and Magento

Indigo Herbs Logo

Magento Latest Products Carousel within The Drupal Site

The Indigo Herbs homepage is built in Drupal. However, there are "New Products" and "Best Sellers" carousels featured on the homepage that are populated with Magento products. They are not manually updated by the administration team, it is all automatic. Typically, this would be done with Magento's built in API (an application program interface) which allows code to "query" Magento for information such as product data, customer orders and more. However, in practice, the API is extremely slow and it is not feasible to poll the API everytime someone reloads the page, as the would be extremely detrimental to page load speeds and therefore the "User Experience" would be negative.

In order to avoid using the API, the GCM eCommerce developers created a number of custom modules and functions that make all of the required data from Magento available to Drupal and the same for Drupal where specific information is available to be used within Magento pages as required.

In order to properly "future-proof" the system, the data is not directly "injected" into Drupal from Magento, but rather is avaiable "agnostically". This approach means that in the future, Indigo Herbs could move away from Drupal and the data would still be available to other content management systems with no code changes on the Magento end - only the new system would be required to interpret the data.

Provide The Tools, Share The Knowledge

Another requirement from the original brief was to provide the "tools" to allow the company to build upon on the initial development themselves. This suited GCM eCommerce perfectly, as we have an ethos of imparting and cascading knowledge to those who need it, empowering companies and individuals to push their website further. As Indigo Herbs already had a skilled in-house developer, all code was developed under distributed version control software, which allowed the Indigo Herbs' developer to view the code, run further tests on a secondary test server before pushing the code "live".

Initially, GCM eCommerce were provided with a database of products and content along with the initial mockups from a third-party designer. Once the development of the Magento website had reached a certain point, we pushed the code to an external, private test server that allowed the team at Indigo Herbs to view progress, understand code implementations. This, along with the version control software provides very "open" development, so the client can see at all times where progress has been made and which parts are still under development.

Indigo Herbs Logo

Bespoke Magento Module Development

It was important for the Indigo Herbs team that whilst the initial design for Magento and Drupal was coded by GCM eCommerce, the code needed to be easily understood and could be built on by the in-house developer. This led to an on-going relationship between the two companies, with information and skills being shared, resulting in the website moving forward from the initial designs, even today.

A Bespoke, Responsive Design with a Custom Magento Mega Menu

Indigo Herbs Logo

Magento Responsive Mega Menu

With the uptake of mobile devices growing exponentially, the Indigo Herbs team were fully aware of the impact a fully responsive Magento website design would have on their users' experience and product purchases. GCM eCommerce build all sites on a bespoke responsive framework. One potential issue for responsive sites is the ease-of-use for "mega menus" on touch devices. Generally, these large, complex menus can be extremey difficult to build into a useable and understandable menu that can be navigated with taps.

The developers at GCM eCommerce worked through the "user experience", designing a bespoke touch-based menu that makes use of additional vertical screen real-estate, breaking the navigation down in to a simple-to-use system.

It was important for the Indigo Herbs team that whilst the initial design for Magento and Drupal was coded by GCM eCommerce, the code needed to be easily understood and could be built on by the in-house developer. This led to an on-going relationship between the two companies, with information and skills being shared, resulting in the website moving forward from the initial designs, even today.

Update Configurable Prices from Related Simple Products

One of Magento's powerful tools is the option to create configurable products that use other products (named "simple products") from within the system to populate options such as size, colours and price variations. However, due to the complexities of Magento and the process for creating these "configurable products" - which involves associating the simple products with the configurable one to define these options - the prices are not "shared" between simple and configurable. So if a simple product has its price updated, the configurable price that is associated to it will not have its price updated.

This is a common request and one that (to date) has not been addressed by the developers of Magento. There are modules available that achieve the result in different ways, but these do not always work exactly as expected and are only helpful rally if they have been implemented before any products have been added to the system. The GCM eCommerce developers took a different approach to solve the problem, providing a simple to use collection of functions that allow all prices to be updated or specific simple or configurable prices.

You can learn about about how configurable products work by reading our guide Understanding Configurable Products