Let us implement Controller method to show Product details as follows:
@Controller
public class ProductController extends JCartSiteBaseController
{
@Autowired protected CatalogService catalogService;
....
....
@RequestMapping("/products/{sku}")
public String product(@PathVariable String sku, Model model)
{
Product product = catalogService.getProductBySku(sku);
model.addAttribute("product", product);
return "product";
}
}
@Service
@Transactional
public class CatalogService
{
@Autowired ProductRepository productRepository;
....
....
public Product getProductBySku(String sku) {
return productRepository.findBySku(sku);
}
}
public interface ProductRepository extends JpaRepository<Product, Integer> {
Product findByName(String name);
Product findBySku(String sku);
}
Now we will create the product.html thymeleaf template 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</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="col-md-offset-2 col-md-8">
<div class="product-content-right">
<div class="product-breadcroumb">
<a href="" th:href="@{/}">Home</a>
<a href="" th:href="@{/categories/{name}(name=${product.category.name})}">
<span th:text="${product.category.name}">Category Name</span></a>
<a href="" th:href="@{/products/{sku}(sku=${product.sku})}">
<span th:text="${product.name}">ProductName</span></a>
</div>
<div class="row">
<div class="col-sm-6">
<div class="product-images">
<div class="product-main-img">
<img src="assets/img/product-2.jpg" alt=""
th:src="@{'/products/images/{id}.jpg'(id=${product.id})}"/>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="product-inner">
<h2 class="product-name" th:text="${product.name}">ProductName</h2>
<div class="product-inner-price">
<ins th:text="${product.price}">$9.00</ins>
</div>
<div>
<button class="add_to_cart_button" type="submit"
th:onclick="'javascript:addItemToCart(\'' + ${product.sku} + '\');'">Add to cart</button>
</div>
<div class="product-inner-category">
<h2>Product Description</h2>
<p th:text="${product.description}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Now we can see the product details when clicked on Product from Home Page or Category Page.
No comments:
Post a Comment