JCart : ShoppingCart Category Page

Sharing is caring!

In our Home Page we displayed all the Categories along with few products per each category. When customer clicks on any Category Name we should display Category Page which shows all the products in that Category.

We already have HomeController.category() method to handle the URL /categories/{name}.
So let us create category.html thymeleaf template as follows:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
    	<div layout:fragment="content">
    		<div class="single-product-area">
		        <div class="zigzag-bottom"></div>
		        <div class="container">
		            <div class="row">
		            	<div class="woocommerce-info"> 
		            		<a href="" th:href="@{/}">Home</a> / 
		                    <a href="" th:href="@{/categories/{name}(name=${category.name})}" 
		                    	th:text="${category.name}">Category Name</a>
		                <div class="col-md-3 col-sm-6" th:each="product : ${category.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 when you click on Category Name you should be able to see all the products in that category.

Sharing is caring!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.