How Can I Add A Walmart.com Search Box to my Web Site?

Amazon has been facing somewhat of a backlash recently with people due to its business practices and the personal philosophy of its head honcho, Jeff Bezos. I’m not entirely sure that the other retail behemoth Walmart is much better, but you ask for a search box, I’ll give ya a search box. Fair?

The trick to any search for another site is to reverse engineer how an existing search works already. And the best and easiest way to do that is to search for something and then pay attention to the resultant URL on the search results page. In this instance, I’ve been shopping around for the weirdly fun and entertaining board game Pandemic: Reign of Cthulhu. I mean, pandemics and Cthulhu in the same game? What’s not to love, right?

If I jump over to Walmart.com, the search box is front and center on the top bar:

Start typing in it and you’ll get search suggestions:

I should warn you that getting suggestions to pop up involves a lot of code so we’re going to ignore that in the simple search form we’ll create for your site. If you want that, you’re going to be doing a lot more coding and I don’t think that it’s particularly necessary (though it is useful, as we’ve all learned in the last few years as these have gained popularity).

The last of the suggestions is the game I seek – Pandemic: Reign of Cthulhu – so I’ll just click on that. Here’s the result:

First match. Nice. But, um, we don’t want to buy the game, we want to figure out how search works on Walmart.com!

To do that, look closely at the resultant URL from the search results page:

A tiny bit of experimentation (clicking in the URL in my browser and chopping off the &typeahead=pandemic portion) reveals that the following URL will also produce the exact same results:

https://www.walmart.com/search/?query=pandemic%20reign%20of%20cthulhu

Which means that all the components of a search are now visible. To unwrap it we have:

Search URL = https://www.walmart.com/search
Query field name = query

That’s it. We can now quickly turn this into a rudimentary HTML form:

<form method="GET" action="https://www.walmart.com/search">
  <input name="query" type="text" maxlength="40" />
  <input type="submit" />
</form>

Simple enough, right? You can see where the values we identified just drop into the code. The result? Here’s our search box, live and ready for you to test out:

Try it! Search for something!

Obviously, however, it’s ugly and rudimentary, so let’s give it a tiny bit of formatting and style:

<form method="GET" action="https://www.walmart.com/search">
   Search Walmart.com: <input name="query" type="text" maxlength="40" />
   <input type="submit" value="Go!" />
</form>

And the results:

So that’s it. Copy the above HTML code, go into the “text” or “raw” or “html” view in your page editor, paste it as shown, and boom! You now have a Walmart.com search box right on your Web page. Nicely done.

Pro Tip: I’ve been writing about HTML and Web page design for many years, including having written the book Creating Cool Web Pages with HTML, XHTML and CSS. I have a lot of HTML and CSS tutorials here on the site too, so please do check out my HTML help area for more ideas and assistance. Thanks!

The post How Can I Add A Walmart.com Search Box to my Web Site? originally appeared on Ask Dave Taylor.