JCart : Billing and Delivery Page

Once the customer reviewed his cart items details and clicks on Checkout we should display Billing & Delivery page where customer enters delivery address details, payment details etc and place the order. Let us create a OrderDTO.java as follows: public class OrderDTO implements Serializable { private static final long serialVersionUID = 1L; @NotEmpty(message="FirstName is required") private String firstName; @NotEmpty(message="LastName is required") private String lastName; @NotEmpty(message="EmailId is required") @Email private String emailId; @NotEmpty(message="Phone is required") private String phone; @NotEmpty(message="Address Line1 is required") private String addressLine1; private String addressLine2; @NotEmpty(message="City is required") private String city; @NotEmpty(message="State is required") private String state; @NotEmpty(message="ZipCode is required") private String zipCode; @NotEmpty(message="Country is required") private String country; @NotEmpty(message="FirstName is required") private String billingFirstName; @NotEmpty(message="LastName is required") private String billingLastName; @NotEmpty(message="Address Line1 is required") private String billingAddressLine1; private String billingAddressLine2; @NotEmpty(message="City is required") private String billingCity; @NotEmpty(message="State is required") private String billingState; @NotEmpty(message="ZipCode is required") private String billingZipCode; @NotEmpty(message="Country is required") private String billingCountry; @NotEmpty(message="Credit Card Number is required") private String ccNumber; @NotEmpty(message="CVV is required") private String cvv; //setters & getters } Create CheckoutController to display the Billing & Delivery page as follows: […]

Read More

JCart : Customer Registration

To facilitate new customer registration we will provide a new Registration form where customer provide his details and register with our system. Let us implement the back-end customer service operations. public interface CustomerRepository extends JpaRepository<Customer, Integer>{ Customer findByEmail(String email); } @Service @Transactional public class CustomerService { @Autowired CustomerRepository customerRepository; public Customer getCustomerByEmail(String email) { return customerRepository.findByEmail(email); } public Customer createCustomer(Customer customer) { return customerRepository.save(customer); } } @Component public class CustomerValidator implements Validator { @Autowired private CustomerService custmoerService; @Override public boolean supports(Class<? […]

Read More

JCart : Customer Login

So far we have implemented the functionality where customers can browse the categories, add products to cart, view Cart and update/remove items. But to checkout the cart the customer should login into the system. So if the customer is not yet loggedin we should redirect customer to login page. If customer is already registered with our system he can login or he should be able to register. So, we will start implementing Customer Login/Registration usecases. […]

Read More

JCart : Iteration -6

In this Iteration-6 we will be implementing the Customer Login/Register and placing the orders. As per of this we will implement the following usecases: Customer Login Customer Registration Billing & Delivery Page Create Order Order Confirmation Page Send Order Confirmation Email […]

Read More

JCart : View Cart

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: […]

Read More

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(). […]

Read More

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 […]

Read More

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. […]

Read More

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; . […]

Read More

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. […]

Read More