4

JCart : ShoppingCart Product Search Results

 2 years ago
source link: https://www.sivalabs.in/2015/12/jcart-shoppingcart-product-search-results/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

JCart : ShoppingCart Product Search ResultsSkip to content

Share this:

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:

@Controller
public class ProductController extends JCartSiteBaseController
{	
	@Autowired 
	protected CatalogService catalogService;
	...
	...
	
	@RequestMapping("/products")
	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" 
	  xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      layout:decorator="layout/mainLayout">
      
<head>
	<title>Product Search Results</title>
</head>
<body>
	<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>
					<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="" 
										th:src="@{'/products/images/{id}.jpg'(id=${product.id})}"/>
							</div>
							<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>  
							
							<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>
							</div>
						</div>
					</div>
					
				</div>
				
			</div>
		</div>
	</div>
	
</body>    
</html>

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK