Integrated Device Technology, Inc., (IDT®) (NASDAQ: IDTI), the Analog and Digital Company™ delivering essential mixed-signal semiconductor solutions, re-launched and expanded IDT.com using Drupal in January of 2012. Leveraging Apache Solr and advanced jQuery solutions, the site provides visitors an interface to easily search and explore the depths of the company's broad portfolio of products.

IDT wanted a new web site without the hassle of maintaining the code of a homegrown Web Content Management System (CMS). IDT found it difficult and costly to keep its previous site's content current, as the staff struggled with the system's overall complexity and inflexibility. IDT approached Mediacurrent to help migrate the ColdFusion site to Drupal. The legacy site was starting to show signs of age, and IDT wanted to avoid being locked into yet another CMS that would fail to evolve.

IDT required a solution that would prove to be fast, have an extremely easy-to-use interface, scale to thousands of products and offer the flexibility to grow and change quickly to keep pace with the company's markets. Mediacurrent and IDT turned to Drupal to leverage its vast array of features that allow non-technical product managers to easily and quickly deploy product updates.

Mediacurrent delivered a solution that met IDT's requirements, and launched the site with more than 100 hours under the project budget.

"Like the innovative engineering developments at IDT, there are risks and unknowns in any complex web design project," said Andrew Luchsinger, Technical Marketing Manager at IDT. "Mediacurrent’s highly-skilled team was able to mitigate our risks with a detailed specification and then tackle the unknowns with creative solutions. These skills, coupled with a prowess in project management and clear communication, makes for a valuable service."

The project team from Mediacurrent would like to share some of what we've learned while bringing this new enterprise client into the Drupal community.

Why Drupal was chosen: 

IDT required a solution that would prove to be fast, have an extremely easy-to-use interface, scale to thousands of products and offer the flexibility to grow and change quickly to keep pace with the company's markets. Mediacurrent and IDT turned to Drupal to leverage its vast array of features that allow non-technical product managers to easily and quickly deploy product updates.

Describe the project (goals, requirements and outcome): 

Goals

  • Improve page load times globally.
  • Offer clients new tools on the website to better allow them to find what they need quickly (out of thousands of products).
  • Provide more quality information to the end user and consolidate product attribute mapping.
  • Seamlessly integrate video and images.
  • Allow different navigational paths throughout the site for both the user who knows exactly what they want and users who are just browsing.
  • Integrate with Microsoft Sharepoint as a centralized document control repository.
  • Scale category pages to handle small and large numbers of products without changing the design.

Challenges and Solutions

IDT's existing website was a homegrown ColdFusion-based framework that could not keep up with the pace of the ever-developing web and the flood of new IDT products. This is a familiar scenario. When a site is built on a homegrown framework authored by one person, clients must choose between implementing new features, fixing bugs, or updating content. Conversely, when a site is built on an open-source framework like Drupal, bugs and security patches are maintained by the community so that time can be spent on customized solutions, and content can be managed by individuals who don’t have a technical background.

One of the largest technical hurdles that Mediacurrent faced was the limitations on JavaScript when rendered by older browsers. The primary issue is that some browsers have a maximum number of lines of code that can run before they display a "script timeout" error. Even though the Parametric Search script was running in just a few seconds the users would still see that error. Mediacurrent resolved the problem with a two-pronged approach. First, Mediacurrent moved pre-calculation into the related Drupal module and passed the pre-compiled HTML to the JavaScript via JSON. This allowed the JavaScript to be limited to handle basic input and output. Second, Mediacurrent implemented an Infinite Scroll to address the issue that a single Parametric Search might have hundreds of products that could still trip the "script timeout" error. The Infinite Scroll solved the overall problem by only displaying the first 50 products when the page is first loaded. When a user scrolled to a pre-set region towards the bottom of the page an AJAX request was queued to load 50 more products. This process would continue as the user scrolled down the page until the user stopped scrolling or all of the products were displayed. The combination of these two solutions allows the Parametric Search to easily scale while still loading in under a few seconds for older browsers.

Ease of Use

IDT has thousands of products that must be updated regularly by subject matter experts who don’t have time to use a complex web system. The legacy site allowed for updating of content, but most users avoided making updates because they found the system too complex when adding data. To encourage the product managers to engage and update the new site, Mediacurrent engineered the site to allow for entry/modification of products in only one screen, leveraging data from existing products to reduce redundant input.

Migrating/Merging Content

IDT.com contains information on users and tens of thousands of products and product-related documents. Mediacurrent leveraged the Migrate module to import all of the product-related data including node references. IDT can also utilize this module to import large batches of products at a later date. Additional Migrate scripts and plugins were written to allow data to be imported for content with custom field types, well beyond the standard field types.

Categories, Subcategories & Products

The IDT data structure mimics a pattern that many sites follow. The highest level is the Category, there can be SubCategories listed under a Category (as children) as well as under themselves. The lowest level is the Product, which can be attached to any level of Subcategories. (Category -> Subcategory {Up to 5 levels} -> Product) Normally this wouldn't pose much of a problem, but Drupal nodes are considered to be all on the same level. Mediacurrent addressed this issue by using node references for all three content types. This way, a Category would have links to all of its child Subcategories and all Subcategories would have links to its child Subcategories or Products. Mediacurrent designed the tree structure in this way so it would be possible for a "branch" of the tree to live in multiple locations at the same time as well as bringing along all of its children and grandchildren.

Mediacurrent created the Parametric Tree module to allow for tree traversal through recursion. The module starts at a starting point (the Category), finds the child node IDs and then repeats the process down the line for each child, child's child, etc. until it reaches the bottom of that branch. The module then returns back up the line and starts over with the next set of branches from the Category. Using recursion allows IDT the flexibility of adding as many nodes/branches to the tree as they need without having to hard code limitations such as "Each Category can only have a maximum of four Subcategories."

External Integration

The new site references data from multiple external vendors to provide crucial product-related information to IDT customers. Mediacurrent combined multiple APIs (SOAP and REST) with a tiered caching system to provide the most up-to-date data to users while intelligently managing server load.

During the implementation, IDT transitioned to a new document management system and wanted it to be the authoritative source on all documents. Mediacurrent worked with IDT to implement a custom Document Importer module to update documents in near real-time. The solution used both cron (a time-triggered action performed by the hosting server) and Drupal Queue to allow the site to update in a scalable manner.

Parametric Search

IDT has thousands of products grouped into various categories and subcategories. Each product needs to have its own set of fields, or attributes, that may or may not be similar to another product. Because any one product can have dozens of attributes, IDT needed an interactive way for users to be able to search these fields and easily narrow down which part would serve their purpose. Mediacurrent integrated a large amount of JavaScript code, an intermediary module and Apache Solr to create the dynamic system known as the Parametric Search. From an administrative perspective, IDT's product manager only needs to edit the node and select which columns should be displayed. The Parametric Search module takes care of the appropriate look-ups and display of the table.

To accomplish IDT's vision of the Parametric Search, Mediacurrent created two modules: the first to handle the loading of field-related data for JavaScript to consume on page display, and the second module to handle requests from the JavaScript. The custom JQuery-based JavaScript for the Parametric Search utilizes JQuery Address to allow for browser history preservation, as well as deep linking. The JavaScript also uses the JQuery UI library to display the sliders that are used for integer-, float- and range-based fields. When a user changes any of the dynamic inputs, the script requests updated data from the Parametric Search module which in turn queries Apache Solr for the relevant filtered information. The returned data is then cut into easy-to-consume chunks which enables the endless scroll to load additional data as the user nears the bottom of the page.

Custom Modules

  • Business Groups:
  • The Business Group module tied users together with one or more business groups so users would only see the applicable fields (out of 200 possible fields) when they add/edit a product. This module was used to tie in with the Conditional Fields module.

  • Document Importer:
  • The document importer module polls a local XML file generated by the Document Management System for updates to documents. If changes are detected, the operations are passed off to the Drupal Queue for the appropriate execution as well as moving the document to the correct location.

  • Field Rollup:
  • IDT offers a very diverse product lineup. It is possible for one product to have hundreds of deviations of that product. An example would be a "Clock Generator". If you go to product 5T929 you'll see that there are two orderable product options that range in Core Voltage, Input Frequency, Input Signal, Output Voltage, Output Frequency Range and Output type. All of these different options need to be rolled up into the "Product Specification". Mediacurrent created a CCK module that allowed staff members to choose which columns/fields they wanted to show in the table. The module then consolidates all of the information from the product options and displays it as an easy-to-read tables. It was important that Views was not used to ensure the staff would only have to go to one screen to create/edit products.

  • Hot Topic:
  • IDT wanted a way to easily add call outs, advertisements and additional information to any type of node. The Hot Topic module was created to provide a CCK field type that listed all of the Hot Topic nodequeues. The module then loaded the appropriate view on the node with the selected information. This module allowed the staff to easily add, change or hide the Hot Topic on any page without having to do any NodeQueue, View or Block configuration. Mediacurrent plans on releasing a modified version of this module on drupal.org.

  • AJAX Webform:
  • The AJAX Webform module was created to allow the selected hierarchy of categories and products to be properly selected on the Webform when a user clicked on "Get Technical Support" from anywhere in the site. The module parses the passed GET variable and then loads the appropriate select list values via AJAX.

  • Presearch:
  • It is common for sites to have a search box that allows users to do a generic search of the entire website for keywords. In IDT's case, they wanted to bring users directly to the correct product page if the user entered in a full part number, while still allowing the general site search to work in a standard manner if they did not. The Presearch module intercepts the search box POST, checks the database for an exact match and sends the user to the right product page. If for some reason it was only a partial match or something that wasn't a product number, users will be brought to the default search results page.

  • Product Tree:
  • IDT has a hierarchy of categories that can go up to five levels deep, as well as be multi-homed (per branch). Since the hierarchy was contained in node references and ease-of-use forbid the use of Views, Mediacurrent created a module that would add the Tree to the node when it was displayed. Behind the scenes, the module recursively traversed the tree, built the hierarchy, and added in the number of products in that branch. Since recursive functions with queries can be quite heavy, the Tree is cached for subsequent use.

Theming

In conjunction with the migration from the legacy platform, the IDT.com graphic design was also redesigned as part of the project. IDT's marketing team worked with designer Kevan Hollenback to create mockups and style guides. Mediacurrent then adapted the PSDs to use the grid-based AdaptiveTheme.

The project team chose the AdaptiveTheme because all layouts are content first, supporting information (sidebars) second. The enriched semantic markup is lightweight, which means quicker page load and rendering times. AdaptiveTheme also fully supports both RDFa and ARIA Roles, further improving semantics and content findability.

Mediacurrent worked closely with the IDT team to ensure cross-browser compatibility and a uniform user-experience. CSS3 and jQuery were used to implement features like rotating slideshow blocks and jQuery UI sliders.

Summary

Armed with cutting-edge Drupal tools such as the Migrate module and Apache Solr integration, the project team delivered on IDT's requirements and launched under budget. Employees in IDT offices around the globe report faster loading times compared to the old site, while product managers enjoy a system that is easier to keep current with the latest product information.

About Mediacurrent

Mediacurrent helps organizations architect custom websites by leveraging our proven processes and deep expertise in Drupal. We are home to an elite team of Drupal experts, who have a proven track record of building amazing websites. We strongly believe in open-source principles, collaboration, and sharing knowledge to strengthen the Drupal community. For more information regarding Mediacurrent's services and portfolio please visit http://www.mediacurrent.com.

Technical specifications

Why these modules/theme/distribution were chosen: 

Apache Solr was used because we needed a scaleable way to house the search for 80k+ products while allowing for faceted search results
For CCK, IDT wanted to maintain the site after its launch. CCK allows them to modify the content types without having to dive into code to make changes. Finally, the Orderable Product content type has over 100 fields but the fields don't always apply. To avoid having to create over 20 additional content types we used Conditional Fields module to only show the fields that were appropriate for that user

Community contributions: 
  • Mediacurrent submitted patches for Smart Breadcrumb.
  • We have plans to release the Hot Topic Module back to the community through Drupal.org.
Organizations involved: 
Project team: 

Andrew Riley - Development, Lead Architect
Josh Estep - Development
Kendall Totten - Theme Development
Chris Hales - Development
Brent Ratliff - Development, Quality Assurance
Jeff Diecks - Project Management

IDT turned to Drupal.
IDT turned to Drupal.
Sectors: 
Technology

Comments

xl_cheese’s picture

I used to work here. Until they laid off our entire department!

shamio’s picture

I visited the site now and i liked it because it have two important features. It is both simple and professional and it interested me. Its one of the features of many professional websites made with Drupal. As it seems it made with Drupal 6 because in listed modules we can see Content Construction Kit (CCK) which is implemented in Drupal 7 by default and Drupal 6 based sites have too install it. I just curious to know the reason of it.

Andrew M Riley’s picture

Hi Shamio,

We made the choice to go D6 after evaluating the modules that were needed for the site. Quite a few of the major modules used were still in a development state (and a few just didn't exist). Keep in mind that the development started a while back and the state of D7 was very different than it is now.

davidknicker’s picture

How did they make the 3 box feature at the bottom, just blocks? I think its an interesting layout and nice organization of info, but otherwise a pretty boring website...

Andrew M Riley’s picture

The three blocks across the bottom (Products, Applications and Support) are blocks generated by Menu Block (http://drupal.org/project/menu_block/) and then themed accordingly. We used Menu Block so the client would only have one place to edit links (if you check out the dropdown links at the top of the page you'll notice they are the same submenu items.)

RobertTristan’s picture

yes the 3 boxes features at bottom looks awesome..

nanoprobe’s picture

I think it is unfair to call this site boring. A vast majority of this site users (visitors) are technical people and they are not very concerned with beautiful and/or vivid graphics. They want good organized content, an easy to find/read information and I think that this primary task is very well done. A nice, vivid graphics (not to mention flash animations - horror!) would be only a distraction here. I can only congratulate you for this really successfully & professionally implemented Drupal project - my compliments.

pdesai’s picture

How did you end p using the jQuery sliders for the exposed filters?

Andrew M Riley’s picture

The JQuery UI Sliders (as seen here http://www.idt.com/products/touch-user-interface/touch-controller-led-dr... ) were part of a custom module that returned the JSON data to a custom javascript that parsed it and updated the values.

The general flow was attach the sliders, then when the data loaded set the min-max values and adjust the actual value. The JQuery UI took care of adjusting everything else. We trapped for when a slider changed and then went through the value of each slider and sent off a request to the custom module for updated JSON results. Once those results were returned the process repeated.

Gemini Lights’s picture

There is a lot of content in the inner pages, which is great, but could use a little more of an introduction to the company on the home page. Visitors need to understand what this company does without having to search for answers. Other than that, very clean and usable Drupal 6 website. Great job.