What’s in a quote? That which prevent third party code to exist on a search page?

(iambic pentameter? Calling all English majors, help me out here please!)

Yesterday, I encountered an interesting issue on one of our clients’ site that had a conflict with a third party service. What it came down to was an anomaly on the search results page. Those of us with a good understanding of Yahoo! stores should be able to point out that any given Yahoo! store can be hosted on several servers, with each server serving it’s purpose (ie. Shopping Cart, Store Front and Search). The issue we encountered was on the search end of things.

Let’s take a look at one of our test stores, sc-professional.com and perform a search for anything, say … “beef”. Before you submit the search, pay close attention to the url change from www.sc-professional.com to search.store.yahoo.net/cig-bin/…, you just experienced a shift from Store Front to the Search server. Now if you view source on the search page (Ctrl + U or right-click and click view page source), you’ll see the source code that generates this page. Now, here’s my attempt at intro to HTML…

When defining HTML tags and setting attributes, you’d need several pieces of information for this. Let’s create a link for Yahoo! that opens a new window: <a href=”http://www.yahoo.com” target=”_blank”>Yahoo</a> Within the “a” tag, you’ll see 2 attributes, href and target, these tell the browser what to do with this tag. Notice the quote around the attributes? Now, compare this to the source code of the search results page, what do you see? Some tags with attributes are missing quotes? How does this happen?

The purpose of the quotes is to “keep everything together” if you will. See that? I just kept everything together right there. When you enclose a string in quotes, the browser will treat it as one element, similar to how your Yahoo! store options work. Remember creating long options? (ie. Size Small Medium Large “Extra Large” - “Extra Large” is treated as one element). The same concept is applied to the web, quotes are used to keep things together.

Now putting this all together. The third party script that was being used by this site contain variations of single and double quotes. Now what harm could it have done? Well, under normal circumstances, as long as they match up, nothing. Using our example, we could easily have <a href=’http://www.yahoo.com’ target=”_blank”>… but single quotes can get messy at times and thus the standards is to use double quotes for all HTML entities. Now when the third party script tries to run on the search result page, the quotes were stripped off, especially the single quotes. So an intricate piece of JavaScript/HTML went from being:

<a href=’http://www.yahoo.com’ onclick=’var msg = “Hello User!”; alert(msg);’><img src=”/lib/STOREID/Yahoo-logo.gif” alt=’Yahoo!’ />Yahoo!</a>

to this:

<a href=http://www.yahoo.com onclick=var msg = Hello User!; alert(msg);><img src=/lib/STOREID/Yahoo-logo.gif alt=Yahoo! />Yahoo!</a>

Whew, I don’t know about you, but I’m all quoted out.

Finally, the quick fix. Seeing and knowing that double and single quotes should not exist, referring to the intricate example, a few red flags should have been raised. Properly quoting something could potentially save the embarrassing “broken image” from ever being displayed. Not sure what it looks like, here: (NOTE: If you’re viewing this in Firefox, you may just get to see a little blue box, but in Internet Explorer, you’re sure to see the broken image) . Just like any good story, this one has a happy ending. The client with this mysterious quotes issue is now up and running, with no broken images.

I know I’m a little long winded on this post, but if you have any questions, please feel free to leave them in the comments and I’ll get back to you as soon as I can.

/r