JCart : ShoppingCart Product Search Results

In our main template we have a Search box to search for products. In this post we will implement the Product Search functionality. When customer search for a product we will search products based on name or SKU or description.

Let us implement the search handler method in ProductController as follows:

public class ProductController extends JCartSiteBaseController
	@Autowired protected CatalogService catalogService;
	public String searchProducts(@RequestParam(name="q", defaultValue="") String query, Model model)
		List<Product> products = catalogService.searchProducts(query);
		model.addAttribute("products", products);
		return "products";

Create the Search Results view products.html as follows:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
	<title>Product Search Results</title>
	<div layout:fragment="content">
		<div class="single-product-area">
			<div class="zigzag-bottom"></div>
			<div class="container">
				<div class="row">
					<div class="woocommerce-info"> 
						<span class="">Product Search Results</span>
					<div class="col-md-3 col-sm-6" th:each="product : ${products}">
						<div class="single-shop-product">
							<div class="product-upper">
								<img src="assets/img/products/2.jpg" alt="" 
							<h2><a href="#" th:href="@{/products/{sku}(sku=${product.sku})}" 
									th:text="${product.name}">Product Name</a></h2>
							<div class="product-carousel-price">
								<ins th:text="${product.price}">$9.00</ins>
							<div class="product-option-shop">
								<a class="add_to_cart_button" data-quantity="1" data-product_sku="" data-product_id="70" 
									rel="nofollow" href="#"
									th:onclick="'javascript:addItemToCart(\'' + ${product.sku} + '\');'">Add to cart</a>

Now try to search by any product name or sku or description and you should be able to see the matching product results.

Leave a Reply

Your email address will not be published. Required fields are marked *