Thiết kế Drupal site: www.idt.com

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.