Made with create-react-app. Read more on how to run the app here.
See the live demo here.
Objective: Build a Search Page with Pagination with SearchSpring's Search API.
Sample Request URL for the Search API:
http://scmq7n.a.searchspring.io/api/search/search.json?siteId=scmq7n&q=jeans&resultsFormat=native&page=2
Request Query Parameters to Use: "siteId", "q", "resultsFormat", and "page"
Note:
- Look at full-integration sample here
- Filter and sorting features not required.
- Use "resultFormat=native" query parameter to get response body as JSON.
- TextInput Box w/ a Search button next to it
- Grid Container of Product Cards
- Each Product Card Contains the following Elements:
- Product Name
- Product ThumnailImage
- Product Price
- Product MSRP
- Pagination
- Previous Page Button
- 1,2,3...N Pages Buttons
- Next Page Button
- If on the first page, then hide or disable the previous-page button
- If on the last page, then hide or disable the next-page button.
- When N-Page is clicked, then make a request with "page" parameter for the desired page.
- Display product results when someone types into searchbar and click the search button
