SivaLabs

In this Iteration#8 we will implement showing the Customer Account and Order History functionality in our ShoppingCart application. Customer MyAccount Page Profile Order History Once the customer is logged in our system he can click on MyAccount link at the top of the header and view his profile details and order history. First let us write the Controller handler method in our CustomerController to show myAccount details.

For Managing Customers we need a provision to see all the list of customers and view any Customers details. Let us start with implementing the back-end Customer service. public interface CustomerRepository extends JpaRepository<Customer, Integer> { Customer findByEmail(String email); @Query("select o from Order o where o.customer.email=?1") List<Order> getCustomerOrders(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.

For Managing Orders we need a provision to see all the list of orders and view an order details and updating the order status. Let us start with implementing the back-end order service. @Service @Transactional public class OrderService { @Autowired EmailService emailService; @Autowired OrderRepository orderRepository; ... ... public Order getOrder(String orderNumber) { return orderRepository.findByOrderNumber(orderNumber); } public List<Order> getAllOrders() { Sort sort = new Sort(Direction.DESC, "createdOn"); return orderRepository.findAll(sort); } public Order updateOrder(Order order) { Order o = getOrder(order.

In Iteration#6 we have implemented features in ShoppingCart application to enable Customers place orders. In this Iteration#7 we will implement the features in Administration application to view and manage the Customers and Orders. As part of Iteration#7 we will implement the following usecases: Manage Orders List all Orders View Order details Update Order status Manage Customers List all customers View customer details

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:

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<?

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.

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

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:

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().