Lightflows web design - Love the garden website composite

LoveTheGarden.com is the consumer website for The Scotts Miracle­-Gro Company in the UK. The Scotts Miracle­-Gro Company are a leading global manufacturer of lawn and garden care products for home and professional use. In Europe, Scotts have a variety of web sites in Benelux, Germany and France. These were all to be migrated to Drupal.

The UK based LoveTheGarden.com website supports their brands by providing high­-quality written resources on subjects including planting, growing, and lawn care. Regular written content is provided by news and blog articles, and the website also provides details on The Scotts Miracle­-Gro Company’s large range of products, allowing users to search for them online or in local stores.

Beginning in October 2012, Lightflows Creative Agency - http://www.lightflows.co.uk - worked in conjunction with Design Hive to develop each of these sites. This work is ongoing and having migrated the UK, Benelux and Central European (DE/AT) sites, we are now working on migrating the French website.

Why Drupal was chosen: 

We were approached with the task of unifying The Scotts Miracle­-Gro Company’s European web properties under one framework while continuing to support content written for multiple languages and regions. The existing sites were powered by a number of CMS's including, Typo3, Joomla and a custom Symfony build.

The previous implementation of LoveTheGarden.com was built on Textpattern, limiting its ability to scale and with no definitive solution for handling multiple languages.

Drupal was an obvious choice for its thorough handling of multiple languages within the core and through well­-supported contributed modules. The concept of using a multi­site installation, with a single code base powering multiple sites, meant immensely reduced difficulty in maintaining the web properties and represents large cost savings for the client.

Describe the project (goals, requirements and outcome): 

LoveTheGarden.com was an existing website with over 1,000 pages comprising articles and product information. Our major goals were to:

  • Migrate the existing content (including HTML pages, images and other files) from Textpattern to Drupal
  • Implement an entirely new, responsive design
  • Ensure support for multiple languages

Each decision we made in the planning of the website was with forethought to rolling out in multiple regions, with different content each time. We wanted to ensure that the architecture was flexible to avoid making time­consuming adjustments per region.

With this in mind we planned out the data structure and content types in detail before even beginning to code.

Detailed planning of Drupal content types
Detailed planning of Drupal content types

Approach

The website is heavily taxonomy­ based. Each of the main menu items is a top­-level term within a category vocabulary. A second vocabulary determines who should have access to each page (be it a node or a term).

Options on each term determine the method used to render the term page and, separately, how the pages of nodes within the term are displayed. The options for the rendering of a node can be set on a top­level term and inherited by nodes of child terms for straightforward and efficient configuration.

Our end goal in taking this approach was to produce a system where choosing how to present content (and to whom) is as accessible as producing it. The custom interfaces and methodologies we developed enable editors and administrators to manage sections of the website without needing to access the disconnected configuration of individual modules.

Permission systems

A key requirement of the brief was the ability to create areas of the site which are only accessible to certain users. We created a system around Taxonomy Access Control which allows us to define access permissions on whole sections or categories. A permission inheritance system was developed to easily propagate permissions to whole sections of the site with ease.

With this ability to define sections and permission via categories and contexts, we are able to create completely custom areas of the website, each can have it's own unique theming or 'colour way' and can also have permissions and access granted to roles. We use this to create bespoke consumer and retail sections of the site, and these permissions and content rules are also propagated to Solr search we use throughout the site - this means we can have localised, section specific search in various areas of the site - all of which can be configured by site administrators in a really simply way.

Great care, attention and fine tuning has been employed to avoid users hitting 'access denied' pages, instead they are redirected to an appropriate login or sign up page.

Click image to enlarge

Detailed planning process for section

Site structure, section and category planning

Our development process was Feature­-based: the Panels, Views and content types that form the backbone of the website are defined in code, allowing us to make good use of version control.

Mobile and Table version of Love The Garden
Mobile and tablet responsive design

Challenges

Strict guidelines were provided for the website’s HTML markup, requiring us to do away with all of the markup usually produced by Drupal and contributed modules. We took advantage of Drupal’s excellent theme and template overriding mechanisms to make the necessary changes and support the nature of a fully responsive experience.
A responsive base theme was developed in HTML5, this contains the main structural elements of the site.

We use child themes of this for each region to create unique styling for each country. All CSS for the project was developed using SASS and we have employed many of the micro data formats recommended at http://www.schema.org.


Shortcodes

We needed the ability to insert teasers for content inside nodes and blocks, surrounded by other content. Additionally, we had to ensure the teaser would be current, and use the current active language. We found no contributed module to handle these requirements, so created our own powerful content short codes. Using the Drupal short code module https://drupal.org/project/shortcode as a starting point, we extended the functionality to suit our requirements.

Using it, we have the ability to:

  • Insert one or multiple nodes or terms into a node or block with an arbitrary display mode.
  • Restrict which nodes or terms are included by specific ID numbers or categories.

This removes the need to create and place blocks generated by Views where you require a list of nodes, so long as a suitable display mode is available. We use this content shortcode in the body of the home page so that arbitrary HTML can be placed amongst article teasers (e.g. for special promotions), and in the footer of the site to produce columns of the latest blog entries and news articles with customised markup.

We aim to contribute some of our work in this area back to Drupal, but to date our implementation is very site specific and will require additional work to make it widely available. Those wishing to implement similar solutions should look at the documentation provided with the Drupal short code module or try these two modules which reproduce some of the functionality we desired. https://drupal.org/project/insert_block, https://drupal.org/project/insert_view

Responsive slideshows

For the slideshow used on the homepage and elsewhere, we wanted a Views plugin that was fully responsive and performed correctly even in the face of being resized on the fly during demonstrations. We settled on using the excellent and minimal ResponsiveSlides and created a Views plugin to make use of it.

Each slide is a node which has been associated with a term - the slideshow - in­ the slideshow vocabulary. We use a combination of the Bean and Viewfield modules to allow administrators to create blocks that display a slideshow using our plugin.

Competitions

We were required to transfer a concept of multiple-choice competition forms from the existing Textpattern website. Unfortunately the Competition module for Drupal is no longer maintained, so we produced our own.

In our implementation, a competition is a field type. This allows us the ability to attach a competition to any entity and position the entry form by changing the weight of the field. Administrative interfaces are provided for displaying entries, and the data collected can be exported in CSV format.

Additional custom modules

Other modules we created to solve the client’s requirements include:

  • Table of content plugin for Views, which creates links to groups of results. This can be seen in use on the top­-level categories from the main menu.
  • WYSIWYG plugin for SublimeVideo, allowing editors to easily insert responsive videos into content.
  • The ability for users to manage their email subscriptions, interfacing with ExactTarget.

Weather widget

There are some good Drupal weather modules that exist already, https://drupal.org/project/weather and https://drupal.org/project/wunderground_weather. Initially the weather module looked like a good fit, but had many features that we would never use, so we decided on a light weight approach using Yahoo weather service to retrieve the inspiration we needed. Our module uses location services or an IP address lookup to gather and display local weather to site visitors. If neither of these methods returns useful values, we display the weather in the capital of the country.

Store locator

Each of the sites have detailed product listings and we offer visitors the ability to use a one-click store locator to find local suppliers. This also uses either browser or mobile location data, or failing that, a postcode look up to determine location.

Love the garden product page with link to store locator
A product page with one-click link to the store locator

We plan to release some of these modules back to the Drupal community this year.

Results

LoveTheGarden has launched on Acquia Cloud, which provides us with an excellent development and staging process for ongoing development. For the end user, Acquia’s Drupal­-tuned Varnish and Memcached configuration equate to rapid page loading times, and the responsive nature of the entire website make for an engaging experience on any device.

As of today we have migrated three out of four sites and are currently adding more.

UK http://www.lovethegarden.com
Germany/Austria http://www.liebedeinengarten.de
Benelux http://ilovemygarden.be

Our clients are incredibly pleased with the results of this project and we are already working on a number of other Drupal related projects which we can hopefully announce soon.

Modules/Themes/Distributions
Key modules/theme/distribution used: 
Why these modules/theme/distribution were chosen: 

Panels & Views

Panels, rather than being used to create arbitrary content structures, is almost exclusively used as a routing system to load a View with specific arguments. The View will then display the content using a particular display mode.

We do this by defining a field on a category term, and interpreting the value of that field using Panels selection rules. We find this to be a simple but powerful strategy for customising the appearance of a term page.

Taxonomy Access Control

We use Taxonomy Access Control to create areas of the site only accessible to users with particular roles. However, there are important additional aspects to our implementation:

We configure TAC rules against one specific vocabulary, then tag content (both nodes and terms) with a term from that vocabulary. When a node or term is accessed, an access check is performed against the linked TAC­-configured term.

This places the power of access control in the hands of the website’s editors, preventing them from needing to access the configuration of Taxonomy Access Control directly.

Context

We use Context to define the “Main” and “Trade” sections of the website, loading specific blocks in either case. The Main context is active only when the conditions of the Trade context are not met, so we can be sure every page on the website is in either one or the other section.

To support our ideals of top­-level configuration, we developed three Context condition plugins:

  • Menu*: This condition is active when the current page is within the selected menu.
  • Taxonomy term page: Active on the term page of a specified condition, or a descendant of that term.
  • Taxonomy (with inheritance): Active when viewing a node with any of the specified terms,or descendants of those terms.

* We consider Context’s own Menu condition to be more accurately described as “Menu Item” and have renamed it as such.

The Taxonomy (with inheritance) condition ensures that new child terms being added do not require additional configuration on a context ­- as a descendant, it’s recognised and included.

Migrate

At the beginning of the project we knew that we'd eventually be migrating three, if not four websites all from different CMS's to Drupal, they were:

  • United Kingdom - Textpattern
  • Benelux - Joomla + custom PHP
  • Germany/Austria - Typo3
  • France - Symfony

We were supplied copies of all site files and databases to begin testing. Our initial plan was to use the feeds module https://drupal.org/project/feeds, as we'd had great success with this previously. To modify the data coming from each source we have also tried Feeds Tamper https://drupal.org/project/feeds_tamper. We experimented with feeds for a while, but it eventually became clear that we would need to perform a lot of custom processing and massaging of the input data, so we eventually settled on the Migrate module, https://drupal.org/project/migrate

Migrate gave us the ability to process all of the source data, files and images and move them into the new structure we had defined for the project.
The ability to immediately map database columns and files to Drupal fields, combined with the ability to roll back imperfect migrations, meant we were able to transfer content with relative ease.

Shortly before launching the UK website, we used Migrate once more to successfully transfer in some 24,000 users to accounts and associated Profiles.

Since them we have successfully migrated an additional two websites including Typo3 and Joomla, to Drupal with great success using the migrate module.
We are currently working on a Symfony migration.

Organizations involved: 
Community contributions: 

To date we have contributed back the following modules. All currently in sandbox mode, we'd really appreciate feedback so these can graduate to full modules.

Each of these modules add additional functionality to the context module. They are:

Context taxonomy descendants

Condition plugin for Context that activates when viewing a node referencing descendants of the specified taxonomy terms.

https://drupal.org/sandbox/BenYoung/1984224

Context specific taxonomy term page

Enables activation of a Context when viewing specific taxonomy term pages, or pages of descendant taxonomy terms.

https://drupal.org/sandbox/BenYoung/1984238

Context menu active trail

Context condition activated when within the active trail of a selected menu.

https://drupal.org/sandbox/BenYoung/1984246

Lightflows LTG iPhone and IPad
Love the Garden UK homepage
I Love my Garden - Benelux, Belgium homepage
Liebe deine garten, German and Austrian website homepage

Comments

alinouman’s picture

hi guys nice work here are my two suggestion
1- It would be good if you add facets and solr search in product searching, something like this http://demo.commerceguys.com/ck/products.
2- I was asked 3 or four time to share location (html5 popup). it caused me some annoyance.
thanks.

beauregard’s picture

Hi

Nice site you made!

You write above:

We settled on using the excellent and minimal ResponsiveSlides and created a Views plugin to make use of it.

Do I understand right, that you used views_slideshow and integreated ResponsiveSlides with it? Or is it independent of views? Can you give some more information? I am sure many would be interested how this was done, since there are several discussions running how to make slideshows responsive.

BWPanda’s picture

Not sure if this is what they're referring to, but here's a module that implements ResponsiveSlides: https://drupal.org/project/responsiveslides