NOW Foods
Role: Lead Developer
Published: Jun 2019
NOW Foods is a large-scale e-commerce and informational website for a natural products company. The site organizes hundreds of products across supplements, beauty & health, and essential oils. It provides users with structured navigation, product search, and shopping cart functionality.
This build came along with a major version upgrade from an older Drupal 7 site, into Drupal 8. Since this change broke existing themes and modules, it was decided that they'd seize the opportunity to refresh the overall look and feel of the site.
Product Information Tables
One of the major highlights of this project was a background script to normalize and moderninze product information tables across 1000s of products.
In previous iterations of the site, product information (nutrition facts, dosages, and similar data) lived in HTML tables that were copied and pasted from one product to the next and updated as needed. After the threat of an ADA compliance lawsuit (due to in-accessible code), NOW needed a solution to update these tables across all of their products.
My solution was a background PHP script, which attempted to parse each product's data markup from the existing HTML. The script utilized complex RegEx oprations to break down each
into structured data likeIron 11%
{"Iron": {"daily-value": "11%"}}. These values were saved as separate fields within Drupal, and each product was only parsed once (If there was structured data present, it was assumed that the product had already been parsed).
The original markup was left in place, until an admin manually approved the parsed data. All fields were also fully editable by the admin, so any edge cases or gremlins could be corrected. ONce approved, the original markup was replaced with structured, templated tables.
In addition to fixing invalid markup, the new tables were structured with accessible aria-labels, and with row and column table headings. These improvements allow screen readers and other assistive technologies to understand the relationships between rows and columns, without relying solely on visual cues like bolded text, and the items' positions relative to one another. The outward display of the tables are almost identical, but under the hood, everything is clean and compliant.
The client was very happy with the mix of 90% automation, but with the human interaction requirement. This probably saved hundreds of work-hours that would have been required to read and re-write almost all of their thousands of products. At the same time, the human factor was still there to catch the edge-cases.
All work conducted on this project was done in the employ of Sandstorm Design.
Before
| Serving Size: | 1/3 cup (38g) | |
|---|---|---|
| Servings Per Container: | about 10 | |
| Amount per Serving | % Daily Value | |
| * Percent Daily Values are based on 2,000 calorie diet. † Daily Value not established. |
||
| Calories | 90 | |
| Calories from Fat | 25 | |
| Total Fat | 2.5 g | 4% |
| Saturated Fat | 0.5 g | 3% |
| Trans Fat | 0 g | |
| Cholesterol | 0 mg | 0% |
| Sodium | 0 mg | 0% |
| Total Carbohydrate | 25 g | 8% |
| Dietary Fiber | 6 g | 24% |
| Soluble Fiber | 3 g | |
| Sugars | 0 g | |
| Protein | 7 g | 14% |
| Vitamin A | 0% | |
| Vitamin C | 0% | |
| Calcium | 2% | |
| Iron | 11% | |
After
| Serving Size: | 1/3 cup (38g) |
|---|---|
| Servings Per Container: | About 10 |
| Description | Amount per Serving | % Daily Value | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Calories |
130 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Total Fat |
2.5g | 3%* | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Saturated Fat |
0.5g | 3%* | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Trans Fat |
0g | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Cholesterol |
0mg | 0%* | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Sodium |
0mg | 0%* | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Total Carbohydrate |
24g | 9%* | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Dietary Fiber |
4g | 14%* | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Soluble Fiber |
2g | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Total Sugars |
<1g | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Includes 0g Added Sugars |
0 |
0%* | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Protein |
6g | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Vitamin D |
0mcg | 0%* | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Calcium |
17mg | 2%* | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Iron |
1.7mg | 10%* | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Potassium |
179mg | 4%* | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
*
The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||