Friday December 10, 2010
Doing deep alterations to a shopping cart app without altering the base code.
My friend Kent's site sells printed t shirts. All kinds of quirky, odd and unusual images are printed on the shirts, mainly postage stamps from around the world, but also other vintage art like pulp magazine covers. Something I found surprising is that they print the shirts with an actual printer (similar to what I use for my photography). Theirs is called a direct-to-garment printer, and it's basically just a big inkjet printer that takes t shirts instead of paper.
He told me about setting up their website, and that the biggest frustration came from something that seems pretty simple: dependent parameters. The t shirt color and size choices, for example, vary depending on if it's a youth or adult tee, or short or long sleeve. He could not find a shopping cart solution that handles cases where the options for some parameters depend on earlier choices. You'd expect that general type of need would be served by at least some vendors, but to implement it he ended up rolling his own.
"I wanted to avoid making any deep code changes," Kent said. "I hate chasing all the modified files in the back end when the vendor releases a patch, or worse, not being able to do an update without rewriting my mods. So I had to insulate the add-to-cart workflow from my customizations. The original form is still there, buried in the page code. I do all my dynamic menu tinkering on another form which I laid on top, and I puppeteer the user's input to the buried form as they go. Clicking the add-to-cart button fires submit() on the buried form."
Kent hard-codes a few arrays to hold the option values. He said, "I can get away with that because the shop's offerings are all of like type (t-shirts, sweatshirts, and hoodies) so the same attribute types apply to all of them. Well, except for the tote bags, but they don't have any attributes so they're a simple exception to deal with."
sizelist = "6 Month|12 Month|18 Month|2T|4T|Size 5/6|Youth Extra Small|Youth Small|Youth Medium|
Youth Large|Youth Extra Large|Small|Medium|Large|X-Large|2X-Large (+$2)|3X-Large (+$2)";
sizelist = sizelist.split('|');
hues = "White|Ash|Natural|Black (+$3)|Ringer (+$2)|Orange (+$3)|Green (+$3)|Heather Gray";
hues = hues.split('|');
Like the concealed form, these lists contains all of the options.
The choice of garment type is made by clicking a radio button. That click picks up the radio's value: a delimited string defining which sizes and colors are valid for that garment. It also fires a function to recreate the menus, first destroying whatever was there.
00000000000111111|11111110|tee
After splitting on pipes, this example encodes the fact that for an adult T-shirt, the first eleven sizes are invalid, as is the last color. And it contains the internal identifier string for the garment type, which will be passed to the concealed form.
The menu-recreation function loops over the digits of the bitmask, and where it finds a 1 it creates an option for the appropriate <select> using the values from the hard-coded arrays. Each <select> has an onChange() handler to take care of "puppeteering" the data.
for (var x=0; x<sizes.length; ++x) {
if (sizes.charAt(x) == "1") {
document.myform.size.options[y] = new Option(sizelist[x], x+1);
++y;
}
}
Wednesday December 1, 2010
Who knew?
Thanksgiving's full of commies! Or John Stossel's full of shit. Take your pick. I'll bet on the latter.
Thursday November 25, 2010
jQuery in a production environment
With Restek's new chromatography products and solutions website, which went live October 15th of this year, we used jQuery throughout. However, its use wasn't as ubiquitous as we would have liked. This is just a brief rundown of our use of jQuery on the site.
jQuery is used throughout the site, from our homepage to our product pages to our checkout procedure. And for the most part it worked very well, and cross browser (our site is IE6 compatible). On pages like the one for UHPLC Columns, jQuery is the engine behind the rotating promotions images.
If you delve down a level, to our HPLC Columns listing page, jQuery is found in the product listing (we use the dataTables plugin), but our initial use of jQuery was much more extensive. We had the facets in the left navigation pulling in data via AJAX requests, and the whole setup used a jQuery history plugin (actually, I tried a couple of them) to keep track of the users' browsing, so that the back button would work successfully when browsing off the page, and returning to it. But this required changes to the history plugin to be successful, and these changes would work in all but IE6, or we'd get it working in IE6 and it would fail in IE7. In addition, using AJAX like that would have killed our SEO unless we followed Google's method for AJAX requests. So, I reverted that code and all the facets are now links to full-page reloads. We lose very little in terms of speed of loading, but the SEO gains are significant.
What exactly was the problem with the history plugin? Well, let's say you're looking for Pharmaceutical HPLC Columns. You click the facet and you load the page successfully. You check out the first entry on the list, Pinnacle DB Biphenyl columns, Restek's UHPLC columns (in the 1.9μm particle size). You then hit the back button, and return to the product listing. All that worked fine in all browsers. But if you wanted to back up another level to the HPLC Columns page, on IE6 it would require 2 clicks of the back button. I then got it fixed, but IE7 then required 2 clicks. At that point, I made the decision that more effort to address the problem was time poorly spent, and I set about converting to straight HTML linking. This wasn't too difficult, essentially porting client-side jQuery code to PHP.
Now, I kept the use of the datatables plugin, as the table data is in the page itself, not loaded via AJAX. It doesn't pose a problem for SEO. We use it, as well, in our chromatogram library, where I also backed off from using AJAX for the sidebar facets.
Finally, we used the jQuery UI Tabs plugin on our product pages.
The main use of jQuery, however, was internal, in the front end of the admin section of our chromatogram database. The entire front-end makes heavy use of jQuery (tabs, datatables, and its native ability to parse XML). But that's a topic for another post.
Thursday November 11, 2010
Chromatogram Search
A cool, innovative element of Restek's chromatogram search is that you can search by synonym. So, entering '1,4-dioxane' works just as well as entering 'dioksan'. This lookup technology extends to Restek's Reference Standards Search as well, so no matter what industry you're in, no matter what you call a particular analyte, you should be able to find applications and products that meet your needs.
Also, the site's product navigation has been greatly simplified, and Restek's added a (also sorta unique) multi-level faceted navigation system, which allows selections to open up sub-selection options, ad infinitum. So, if you're looking for an HPLC column, for example, and you select "Environmental" HPLC columns for your Industry selection, you're presented with more context-specific options that can help you narrow your selection: Compound and Class options, and a list of US EPA methods. And this multi-level faceting is available across Restek's entire product line.
Tuesday November 9, 2010
Restek
Restek has a new website. It's pretty nice, if I do say so myself. New features include a searchable chromatogram library which includes the unique ability to search by analyte synonym, CAS#, and keywords, etc. Their Reference Standards search uses the same technology. Restek is a leading supplier of chromatography products, providing analysts around the world with the innovative tools they need to monitor the quality of air, water, soil, foods, for pharmaceutical analysis, and petroleum analysis.
Friday June 16, 2006
New portfolio site, photography site...
Two new sites are up:
...a portfolio site, with internet design, game work, and photography...
and
http://www.chrisnelsonphotography.com/
...a portfolio and news site for my photo work. Check 'em out, let me know what you think (The ordering page for the photography site is not up yet -- consider the site a preview.)
Currently the photo website and the portfolio site have the same photo content... the photo site will hold an ever expanding portfolio...
I recently did a semester abroad in Italy, and I'm having a gallery show during the Central PA Festival of the Arts in State College, PA. Check out the photography site for more details.