14

JCart : ShoppingCart Product Page

 3 years ago
source link: https://www.sivalabs.in/2015/12/jcart-shoppingcart-product-page/
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.
neoserver,ios ssh client

JCart : ShoppingCart Product PageSkip to content

Share this:

Customers can click on a product to view more details about the product either in Home Page or in Category Page.

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.

</div


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK