Even the best organized ecommerce store can probably benefit from a search feature: here at 320ny we prefer Lemonstand for our projects, and it features some excellent search abilities right out of the box.
If you follow the Lemonstand documentation you can quickly implement a basic search form and results page, but what if you want a more responsive results page? One that can filter results and update the product list without reloading a new page? Fortunately it's pretty straightforward.
I'm assuming that you've already completed the basic Lemonstand search page: that means you have a page for search, and partials product_list and search_form. We're going to start by creating a new page that also implements the Shop:Search action, but for this one, we don't assign a layout because the contents will be delivered via AJAX and inserted into the DOM.
Let's call this page ajaxsearch, leave the layout blank and assign a url (I use '/ajax/search' ). The contents are very simple, you'll just render your product_list partial.
A few things to notice here:
Now we need to start putting the pieces together. We use the search filter on every category page, and the search results page - with only a slight difference in the way the partial is called. For each category page, we'd like to only filter products within that category, for the search page in general we'd like the ability to search within all categories, or maybe a few chosen categories. How might this be accomplished?
So what's going on here?
First you might notice that we use a custom method. Lemonstand gives you the ability to search for ALL product options within the shop, but not all the options within a single category. Since we wanted an effective category search feature we had to provide our own custom method (available on github).
With that out of the way, what else is this block doing?
This isn't a huge file and there's not a lot of advance behavior:
So that's about it. Hopefully by now you'll be able to implement some basic AJAX search for your Lemonstand store. If something was unclear, confusing, or contradictory - or if you have any unrelated Lemonstand questions - please don't hesitate to let me know.