In our earlier post we have implemented Add To Cart functionality. In this post we will implement showing the Cart Item details. In out mainLayout.html header we have ShoppingCart icon showing the cart item count as follows: <div class="shopping-item"> <a href="#" th:href="@{/cart}">Cart <i class="fa fa-shopping-cart"></i> <span id="cart-item-count" class="product-count">(0)</span> </a> </div> When customer clicks on Cart icon we will show the Cart details. Let us implement the “/cart” url handler method in CartController as follows:
Continue reading »JCart : ShoppingCart Add Item To Cart
In our HomePage/CategoryPage/ProductPage we have a button Add To Cart as follows: <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> When customer clicks on Add To Cart button it will trigger addItemToCart(sku) JavaScript function passing the product SKU value. Now create jcart-site/src/main/resources/static/assets/js/app.js and implement addItemToCart(sku) function as follows: function addItemToCart(sku) { $.ajax ({ url: '/cart/items', type: "POST", dataType: "json", contentType: "application/json", data : '{"sku":"'+ sku +'"}"', complete: function(responseData, status, xhttp){ updateCartItemCount(); } }); } This function triggers an Ajax call to url ‘/cart/items’ using jQuery and if it is successful we are calling another JavaScript function updateCartItemCount().
Continue reading »JCart : Iteration-5
In Iteration-5 we will be primarily working on Cart related functionality. As part of Iteration-4 we have implemented showing Home page, Category Page, Product Page and Product Search features. In this Iteration we will implement the following usecases: Add To Cart in HomePage/CategoryPage/ProductPage Cart Page View Cart Items Updates Quantity Remove Items
Continue reading »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: @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.
Continue reading »JCart : ShoppingCart Product Page
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; .
Continue reading »JCart : ShoppingCart Category Page
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" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" layout:decorator="layout/mainLayout"> <head> <title>Category</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"> <a href="" th:href="@{/}">Home</a> / <a href="" th:href="@{/categories/{name}(name=${category.
Continue reading »JCart : ShoppingCart Home Page
In our Home page we will show all the categories along with few of the products in each Category. Let us update HomeController with two methods to show all the categories and the selected category products. @Controller public class HomeController extends JCartSiteBaseController { @Autowired protected CatalogService catalogService; @RequestMapping("/home") public String home(Model model) { List<Category> previewCategories = new ArrayList<>(); List<Category> categories = catalogService.getAllCategories(); for (Category category : categories) { Set<Product> products = category.
Continue reading »JCart : ShoppingCart UI Layout Setup
In this post we will setup the layout for our ShoppingCart UI using Thymeleaf templates. Download the ustore theme zip file from https://www.freshdesignweb.com/ustora/ and copy the following directories/files into jcart-site/src/main/resources/static/assets folder. css fonts img js style.css Create Site layout thymeleaf template jcart-site/src/main/resources/templates/layout/mainLayout.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"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">QuilCart</title> <!-- Google Fonts --> <link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,700,600' rel='stylesheet' type='text/css'/> <link href='https://fonts.
Continue reading »JCart : Initial code setup for ShoppingCart
First we will start with setting up the initial code using SpringBoot. We have already discussed in JCart: Initial Code SetUp article about creating a maven module jcart-site which will be our ShoppingCart application. In that article we have shown what springboot dependencies to add as well. Just to recap we will be using SpringBoot, SpringMVC, Thymeleaf, JPA for our ShoppingCart application. jcart-site/pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>com.
Continue reading »JCart : Iteration-4
In this Iteration-4 we will start building the consumer facing ShoppingCart website. Initial code setup for ShoppingCart webapp [Configuring HTTPS/SSL/TLS] (/jcart-configuring-https-ssltls/) ShoppingCart UI Layout setup Home Page Category Page Product Page Product Search Results
Continue reading »