Implementing Search page

Now that you have learnt to use the API, we will implement a search box in the sample page to get the user input and display the results accordingly. In doing so, we will learn about processing the JSON response to implement pagination.

Step 1

Once you have completed the steps in the "Getting Started" page, you can add search box in your webpage:

<form onSubmit="searchFor(jQuery('#keywords').val());return false;"> <input type="text" id="keywords" class="form-control" placeholder="Search..."> </form>

Once the user enters a text in the search box, you can use that value to do the search:

function searchFor(text) { searchAPI = CommerceDNA.itemSearch({keywords:text}); showPage(1); } function showPage(page) { searchAPI.getPage(page).then(function(rslt){ jQuery('body').append('<pre>'+JSON.stringify(rslt, null, 2)+'</pre>'); }); }

Fork this code »

You should be able to see the results as JSON on your webpage.

Step 2

Now, you can add Bootstrap (or your favorite) theme and render the page with results using Javascript templating engines like EJS.

Fork this code »

You can also implement pagination as shown in this CodePen sample. Or, you can implement infinite scrolling, since this is an AJAX client that can be invoked as many times inside the same page.

Filter by category »