TIENDA DE COMERCIO

ELECTRÓNICO
ITERACIÓN 06 – CARRO DE COMPRAS
Autor: Mag. Juan Antonio Castro Silva
Versión: 1.0 Enero 29 de 2020 (20200129T0625)

1. CARRO DE COMPRAS
Para esta aplicación se van utilizar las siguientes plantillas de bootstrap:
Shop Item

Fuente: https://startbootstrap.com/templates/shop-item/

1
Shopping Cart Bootstrap 4 + FontAwesome ( Beta 2 )

Fuente: https://bootsnipp.com/snippets/35e4p
Para implementar la funcionalidad de mostrar la información detallada de un producto y el
carro de compras (Shopping Cart), se deben crear y modificar los siguientes componentes
(artefactos) de java, javascript, css y html.
Clase org.software.product.Product.java
001 package org.software.product;
002
003 import java.sql.Timestamp;
004
005 public class Product {
006 long id;
007 int published;
008 double rating_cache;
009 double rating_count;
010 long category_id;
011 String name;
012 double pricing;
013 String short_description;
014 String long_description;
015 String icon;
016 Timestamp created_at;
017 Timestamp updated_at;
018 double media;
019
020 public long getId() {
021 return id;
022 }
023 public void setId(long id) {
024 this.id = id;
025 }
026 public int getPublished() {
027 return published;
028 }
029 public void setPublished(int published) {
030 this.published = published;
031 }
032 public double getRating_cache() {
033 return rating_cache;

2
034 }
035 public void setRating_cache(double rating_cache) {
036 this.rating_cache = rating_cache;
037 }
038 public double getRating_count() {
039 return rating_count;
040 }
041 public void setRating_count(double rating_count) {
042 this.rating_count = rating_count;
043 }
044 public long getCategory_id() {
045 return category_id;
046 }
047 public void setCategory_id(long category_id) {
048 this.category_id = category_id;
049 }
050 public String getName() {
051 return name;
052 }
053 public void setName(String name) {
054 this.name = name;
055 }
056 public double getPricing() {
057 return pricing;
058 }
059 public void setPricing(double pricing) {
060 this.pricing = pricing;
061 }
062 public String getShort_description() {
063 return short_description;
064 }
065 public void setShort_description(String short_description) {
066 this.short_description = short_description;
067 }
068 public String getLong_description() {
069 return long_description;
070 }
071 public void setLong_description(String long_description) {
072 this.long_description = long_description;
073 }
074 public String getIcon() {
075 return icon;
076 }
077 public void setIcon(String icon) {
078 this.icon = icon;
079 }
080 public Timestamp getCreated_at() {
081 return created_at;
082 }
083 public void setCreated_at(Timestamp created_at) {
084 this.created_at = created_at;
085 }
086 public Timestamp getUpdated_at() {
087 return updated_at;
088 }
089 public void setUpdated_at(Timestamp updated_at) {
090 this.updated_at = updated_at;
091 }
092 public double getMedia() {
093 return media;
094 }

3
095
096 public void setMedia(double media) {
097 this.media = media;
098 }
099 }

Clase org.software.product/ProductList.java
001 package org.software.product;
002
003 import java.util.List;
004 import javax.xml.bind.annotation.XmlElement;
005 import javax.xml.bind.annotation.XmlRootElement;
006
007 @XmlRootElement(name = "products")
008 public class ProductList {
009 private List<Product> items;
010
011 public ProductList() {
012 }
013
014 public ProductList(List<Product> items) {
015 this.items = items;
016 }
017
018 @XmlElement(name = "data")
019 public List<Product> getItems() {
020 return items;
021 }
022 }

Clase org.software.product.ProductService.java
001 package org.software.product;
002
003 import java.sql.Connection;
004 import java.sql.ResultSet;
005 import java.sql.Statement;
006 import java.util.ArrayList;
007
008 import javax.ws.rs.GET;
009 import javax.ws.rs.Path;
010 import javax.ws.rs.PathParam;
011 import javax.ws.rs.Produces;
012
013 import org.software.util.DataBase;
014
015 @Path("/product")
016 public class ProductService {
017
018 @GET
019 @Path("/list/{category_id}")
020 @Produces("application/json")
021 // @Produces("application/xml")
022 public ProductList getProductos(
023 @PathParam(value = "category_id") int category_id) {
024 ArrayList productList = new ArrayList();

4
025
026 //int category_id = 1;
027
028 DataBase database = new DataBase();
029 Connection conexion1 = null;
030 Statement sentencia1 = null;
031 ResultSet rs1 = null;
032 String sql = "";
033 try {
034 conexion1 = database.getConnection("guest");
035 sentencia1 = conexion1.createStatement();
036 sql = "select * from products where category_id = " + category_id;
037 rs1 = sentencia1.executeQuery(sql);
038 while (rs1.next()) {
039 long id = rs1.getInt("id");
040 String name = rs1.getString("name");
041 double pricing = rs1.getDouble("pricing");
042 String short_description = rs1.getString("short_description");
043 String icon = rs1.getString("icon");
044
045 Product product = new Product();
046 product.setId(id);
047 product.setName(name);
048 product.setPricing(pricing);
049 product.setShort_description(short_description);
050 product.setIcon(icon);
051 productList.add(product);
052 }
053 } catch (Exception e) {
054 System.out.println("Error: " + e.toString());
055 }
056 finally {
057 database.closeObject(rs1);
058 database.closeObject(sentencia1);
059 database.closeObject(conexion1);
060 }
061
062 return new ProductList(productList);
063 }
064
065 @GET
066 @Path("/{product_id}")
067 @Produces("application/json")
068 public ProductList getProductById(
069 @PathParam(value = "product_id") int product_id) {
070 ArrayList productList = new ArrayList();
071
072 DataBase database = new DataBase();
073 Connection conexion1 = null;
074 Statement sentencia1 = null;
075 ResultSet rs1 = null;
076 String sql = "";
077 try {
078 conexion1 = database.getConnection("guest");
079 sentencia1 = conexion1.createStatement();
080
081 double media = 0;
082 sql = "select avg(rating) as media from reviews";
083 sql = sql + " where product_id = " + product_id;
084 rs1 = sentencia1.executeQuery(sql);
085

5
086 if (rs1.next()) {
087 media = rs1.getDouble("media");
088 }
088
089 sql = "select * from products where id = " + product_id;
090 rs1 = sentencia1.executeQuery(sql);
091 while (rs1.next()) {
092 long id = rs1.getLong("id");
093 int category_id = rs1.getInt("category_id");
094 String name = rs1.getString("name");
095 double pricing = rs1.getDouble("pricing");
096 String short_description = rs1.getString("short_description");
097 String long_description = rs1.getString("long_description");
098 String icon = rs1.getString("icon");
099
100 Product product = new Product();
101 product.setId(id);
102 product.setCategory_id(category_id);
103 product.setName(name);
104 product.setPricing(pricing);
105 product.setShort_description(short_description);
106 product.setLong_description(long_description);
107 product.setIcon(icon);
108 product.setMedia(media);
109
110 productList.add(product);
111 }
112 } catch (Exception e) {
113 System.out.println("Error: " + e.toString());
114 }
115 finally {
116 database.closeObject(rs1);
117 database.closeObject(sentencia1);
118 database.closeObject(conexion1);
119 }
120
121 return new ProductList(productList);
122 }
123 }

Clase org.software.cart.Item.java
001 package org.software.cart;
002
003 public class Item {
004 long id;
005 long product_id;
006 String product_icon;
007 String product_name;
008 String product_description;
009 double price;
010 double quantity;
011 long coupon;
012
013 public long getId() {
014 return id;
015 }
016 public void setId(long id) {
017 this.id = id;

6
018 }
019 public long getProduct_id() {
020 return product_id;
021 }
022 public void setProduct_id(long product_id) {
023 this.product_id = product_id;
024 }
025 public String getProduct_icon() {
026 return product_icon;
027 }
028 public void setProduct_icon(String product_icon) {
029 this.product_icon = product_icon;
030 }
031 public String getProduct_name() {
032 return product_name;
033 }
034 public void setProduct_name(String product_name) {
035 this.product_name = product_name;
036 }
037 public String getProduct_description() {
038 return product_description;
039 }
040 public void setProduct_description(String product_description) {
041 this.product_description = product_description;
042 }
043 public double getPrice() {
044 return price;
045 }
046 public void setPrice(double price) {
047 this.price = price;
048 }
049 public double getQuantity() {
050 return quantity;
051 }
052 public void setQuantity(double quantity) {
053 this.quantity = quantity;
054 }
055 public long getCoupon() {
056 return coupon;
057 }
058 public void setCoupon(long coupon) {
059 this.coupon = coupon;
060 }
061 }

Clase org.software.cart.ItemList.java
001 package org.software.cart;
002
003 import java.util.List;
004 import javax.xml.bind.annotation.XmlElement;
005 import javax.xml.bind.annotation.XmlRootElement;
006
007 @XmlRootElement(name = "listing")
008 public class ItemList {
009 private List<Item> items;
010
011 public ItemList() {
013 }

7
014
015 public ItemList(List<Item> items) {
016 this.items = items;
017 }
018
019 @XmlElement(name = "data")
020 public List<Item> getItems() {
021 return items;
022 }
023 }

Clase org.software.cart.ItemService.java
001 package org.software.cart;
002
003 import java.io.StringReader;
004 import java.sql.Connection;
005 import java.sql.PreparedStatement;
006 import java.sql.ResultSet;
007 import java.sql.Statement;
007 import java.util.ArrayList;
008
009 import javax.json.Json;
010 import javax.json.JsonArray;
011 import javax.json.JsonArrayBuilder;
012 import javax.json.JsonBuilderFactory;
013 import javax.json.JsonObject;
014 import javax.json.JsonObjectBuilder;
015 import javax.json.JsonReader;
016 import javax.servlet.http.HttpServletRequest;
017 import javax.servlet.http.HttpSession;
018 import javax.ws.rs.Consumes;
019 import javax.ws.rs.GET;
020 import javax.ws.rs.POST;
021 import javax.ws.rs.Path;
022 import javax.ws.rs.PathParam;
023 import javax.ws.rs.Produces;
024 import javax.ws.rs.core.Context;
025 import javax.ws.rs.core.Response;
026
027 import org.software.util.DataBase;
028
029 @Path("/cart")
030 public class ItemService {
031
032 @GET
033 @Path("/items")
034 @Produces("application/json")
035 public Response getItemsCount(@Context HttpServletRequest request) {
036 HttpSession session = request.getSession();
037 ArrayList cart = (ArrayList) session.getAttribute("cart");
038
039 if (cart == null) {
040 cart = new ArrayList();
041 }
042
043 long items = cart.size();
044 String result = "{\"items\":" + items + "}";
045 return Response.status(201).entity(result).build();

8
046 }
047
048 @POST
049 @Path("/update")
050 @Produces("application/json")
051 // @Consumes("application/json")
052 public Response updateItems(
053 @Context HttpServletRequest request, String data) {
054
055 JsonReader reader = Json.createReader(new StringReader(data));
056 JsonObject jsonObject = reader.readObject();
057 JsonArray jArray = jsonObject.getJsonArray("data");
058
059 if (jArray.size() == 0) {
060 }
061
062 HttpSession session = request.getSession();
063 ArrayList cart = (ArrayList) session.getAttribute("cart");
064
065 if (cart == null) {
066 cart = new ArrayList();
067 }
068
069 for (int i = 0; i < jArray.size(); i++) {
070 JsonObject o = jArray.get(i).asJsonObject();
071
072 int product_id = o.getInt("product_id");
073 double quantity = (double) o.getInt("quantity");
074
075 Item item = (Item) cart.get(i);
076 item.setQuantity(quantity);
077 cart.set(i, item);
078 }
079
080 session.setAttribute("cart", cart);
081
082 for (int i = 0; i < cart.size(); i = i + 1) {
083 Item item = (Item) cart.get(i);
084 long id = item.getProduct_id();
085 double qty = item.getQuantity();
086 System.out.println(id + "," + qty);
087 }
088
089 long items = cart.size();
090 String result = "{\"items\":" + items + "}";
091 return Response.status(201).entity(result).build();
092 }
093
094 @GET
095 @Path("/add/{product_id}")
096 @Produces("application/json")
097 public Response addItem(@Context HttpServletRequest request,
098 @PathParam(value = "product_id") int product_id) {
099 HttpSession session = request.getSession();
100 ArrayList cart = (ArrayList) session.getAttribute("cart");
101
102 if (cart == null) {
103 cart = new ArrayList();
104 }
105
106 for (int i = 0; i < cart.size(); i = i + 1) {

9
107 Item item = (Item) cart.get(i);
108 long id = item.getProduct_id();
109
101 if (id == product_id) {
102 long items = cart.size();
103 String result = "{\"items\":" + items + "}";
104 return Response.status(401).entity(result).build();
105 }
106 }
107
108 Item item = new Item();
109 item.setProduct_id(product_id);
110 item.setQuantity(1);
111
112 DataBase database = new DataBase();
113 Connection conexion1 = null;
114 Statement sentencia1 = null;
115 ResultSet rs1 = null;
116 String sql = "";
117 try {
118 conexion1 = database.getConnection("guest");
119 sentencia1 = conexion1.createStatement();
120 sql = "select * from products where id = " + product_id;
121 rs1 = sentencia1.executeQuery(sql);
122
123 if (rs1.next()) {
124 // long id = rs1.getInt("id");
125 String name = rs1.getString("name");
126 String short_description = rs1.getString("short_description");
127 double pricing = rs1.getDouble("pricing");
128 String icon = rs1.getString("icon");
129
130 item.setProduct_name(name);
131 item.setProduct_description(short_description);
132 item.setPrice(pricing);
133 item.setProduct_icon(icon);
134 }
135
136 } catch (Exception e) {
137 System.out.println("Error: " + e.toString());
138 } finally {
139 database.closeObject(rs1);
140 database.closeObject(sentencia1);
141 database.closeObject(conexion1);
142 }
143
144 cart.add(item);
145
146 session.setAttribute("cart", cart);
147
148 long items = cart.size();
149 String result = "{\"items\":" + items + "}";
150 return Response.status(201).entity(result).build();
151 }
152
153 @GET
154 @Path("/del/{product_id}")
155 @Produces("application/json")
156 public Response delItem(@Context HttpServletRequest request,
157 @PathParam(value = "product_id") int product_id) {
158 HttpSession session = request.getSession();

10
159 ArrayList cart = (ArrayList) session.getAttribute("cart");
160
161 if (cart == null) {
162 cart = new ArrayList();
163 }
164
165 for (int i = 0; i < cart.size(); i = i + 1) {
166 Item item = (Item) cart.get(i);
167 long id = item.getProduct_id();
168
169 if (id == product_id) {
170 cart.remove(i);
171 }
172 }
173
174 session.setAttribute("cart", cart);
175
176 long items = cart.size();
177 String result = "{\"items\":" + items + "}";
178 return Response.status(201).entity(result).build();
179 }
180
181 @GET
182 @Path("/list")
183 @Produces("application/json")
184 public ItemList getItems(@Context HttpServletRequest request) {
185 ArrayList<Item> cart = new ArrayList<Item>();
186
187 HttpSession session = request.getSession();
188
189 cart = (ArrayList<Item>) session.getAttribute("cart");
190
191 if (cart == null) {
192 cart = new ArrayList<Item>();
193 }
194 return new ItemList(cart);
195 }
196
197 }

Archivo cart/index.jsp
001 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
002 pageEncoding="ISO-8859-1"%>
003 <!DOCTYPE html>
004 <html lang="en">
005 <head>
006 <meta charset="utf-8">
007 <meta name="viewport"
008 content="width=device-width, initial-scale=1, shrink-to-fit=no">
009 <meta name="description" content="">
010 <meta name="author" content="">
011
012 <title>Shop Homepage - Start Bootstrap Template</title>
013
014 <!-- Bootstrap core CSS -->
015 <link rel="stylesheet"
016 href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
017

11
018 <!-- Custom styles for this template -->
019 <link href="../css/shop-homepage.css" rel="stylesheet">
020
021 <link href="../css/cart.css" rel="stylesheet">
022 </head>
023
024 <body>
025 <!-- Navigation -->
026 <jsp:include page="../portal/menu.jsp"></jsp:include>
027
028 <!-- Page Content -->
029 <script src="https://use.fontawesome.com/c560c025cf.js"></script>
030 <br/>
031 <div class="container">
032 <div class="card shopping-cart">
033 <div class="card-header bg-dark text-light">
034 <i class="fa fa-shopping-cart" aria-hidden="true"></i>
035 Shopping cart
036 <a href="../" class="btn btn-outline-info btn-sm pull-right">
037 Continue shopping
038 </a>
039 <div class="clearfix"></div>
040 </div>
041 <div id="div_items" class="card-body">
042 <div class="pull-right">
043 <a href="" class="btn btn-outline-secondary pull-right">
044 Update shopping cart
045 </a>
046 </div>
047 </div>
048 <div class="card-footer">
049 <div class="coupon col-md-5 col-sm-5 no-padding-left pull-left">
050 <div class="row">
051 <div class="col-6">
052 <input type="text" class="form-control"
053 placeholder="cupone code">
054 </div>
055 <div class="col-6">
056 <input type="submit" class="btn btn-default"
057 value="Use cupone">
058 </div>
059 </div>
060 </div>
061 <div class="pull-right" style="margin: 10px">
062 <a href="javascript:checkout();" id="checkout"
063 class="btn btn-success pull-right">Checkout</a>
064 <div class="pull-right" style="margin: 5px">
065 Total price: <b id="total">$0.00</b>
066 </div>
067 </div>
068 </div>
069 </div>
070 </div>
071
072 <br/>
073 <br/>
074
075 <!-- Footer -->
076 <jsp:include page="../portal/footer.jsp"></jsp:include>
077
078 <!-- Bootstrap core JavaScript -->

12
079 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
080 <script
081 src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
082 </script>
083
084 <script src="../js/portal.js"></script>
085 <script src="../js/cart.js"></script>
086
087 <script>
088 $(document).ready(function(){
089 getItems();
090 updateItemsCount();
091 });
092 </script>
093
094 </body>
095 </html>

Archivo css/cart.css
001 .quantity {
002 float: left;
003 margin-right: 15px;
004 background-color: #eee;
005 position: relative;
006 width: 80px;
007 overflow: hidden
008 }
009
010 .quantity input {
011 margin: 0;
012 text-align: center;
013 width: 15px;
014 height: 15px;
015 padding: 0;
016 float: right;
017 color: #000;
018 font-size: 20px;
019 border: 0;
020 outline: 0;
021 background-color: #F6F6F6
022 }
023
024 .quantity input.qty {
025 position: relative;
026 border: 0;
027 width: 100%;
028 height: 40px;
029 padding: 10px 25px 10px 10px;
030 text-align: center;
031 font-weight: 400;
032 font-size: 15px;
033 border-radius: 0;
034 background-clip: padding-box
035 }
036
037 .quantity .minus, .quantity .plus {
038 line-height: 0;
039 background-clip: padding-box;

13
040 -webkit-border-radius: 0;
041 -moz-border-radius: 0;
042 border-radius: 0;
043 -webkit-background-size: 6px 30px;
044 -moz-background-size: 6px 30px;
045 color: #bbb;
046 font-size: 20px;
047 position: absolute;
048 height: 50%;
049 border: 0;
050 right: 0;
051 padding: 0;
052 width: 25px;
053 z-index: 3
054 }
055
056 .quantity .minus:hover, .quantity .plus:hover {
057 background-color: #dad8da
058 }
059
060 .quantity .minus {
061 bottom: 0
062 }
063 .shopping-cart {
064 margin-top: 60px;
065 }

14
Archivo css/shop-item.css
001 /*!
002 * Start Bootstrap - Shop Item (https://startbootstrap.com/template-overviews/shop-
003 item)
004 * Copyright 2013-2017 Start Bootstrap
005 * Licensed under MIT
006 (https://github.com/BlackrockDigital/startbootstrap-shop-item/blob/master/LICENSE)
007 */
008
009 body {
010 padding-top: 54px;
011 }
012
013 @media (min-width: 992px) {
014 body {
015 padding-top: 56px;
016 }
017 }

Archivo js/portal.js
001 function getCategories(category_id) {
002 $.getJSON("../ws/portal/categories", function(result) {
003 data = result.data;
004 $("#div_categories").empty();
005 for (var row = 0; row < data.length; row = row + 1) {
006 var id = data[row].id;
007 var name = data[row].name;
008 var published = data[row].published;
009 var icon = data[row].icon;
010 var item_class = "list-group-item";
011 if (id == category_id) {
012 item_class = "list-group-item active";
013 }
014 $("#div_categories").append(
015 "<a href='javascript:getProducts(" + id
016 + ");' id='category_" + id + "' class='"
017 + item_class + "'>" + name + "</a>");
018 }
019 });
020 }
021 function getProducts(category_id) {
0 $('.list-group-item').removeClass('active').addClass('');
022 $("#category_" + category_id).addClass('active');
023 $.getJSON("../ws/portal/products/" + category_id, function(result) {
024 data = result.data;
025 $("#div_products").empty();
026 for (var row = 0; row < data.length; row = row + 1) {
027 var id = data[row].id;
028 var name = data[row].name;
029 var published = data[row].published;
030 var icon = data[row].icon;
031 var pricing = data[row].pricing;
032 var short_description = data[row].short_description;
033 var url = "../item/index.jsp?id=" + id;
034 var item = '<div class="col-lg-4 col-md-6 mb-4">';
035 item += '<div class="card h-100">';

15
036 item += '<a id="link_title" href="' + url + '">';
037 item += '<img class="card-img-top" src="../fotos/' + icon
038 + '" alt="">';
039 item += '</a>';
040 item += '<div class="card-body">';
041 item += '<h4 class="card-title">';
042 item += '<a href="' + url + '">' + name + '</a>';
043 item += '</h4>';
044 item += '<h5>$' + pricing + '</h5>';
045 item += '<p class="card-text">' + short_description + '</p>';
046
047 item += '<a href="javascript:addToCart(' + id + ');"
048 class="btn btn-info" role="button">Buy</a>';
049
050 item += '</div>';
051 item += '<div class="card-footer">';
052 item += '<small class="text-muted">';
053 item += '&#9733; &#9733; &#9733; &#9733;&#9734;';
054 item += '</small>';
055 item += '</div>';
056 item += '</div>';
057 item += '</div>';
058 $("#div_products").append(item);
059 }
060 });
061 }
062
063 function updateItemsCount(){
064 $.getJSON("../ws/cart/items", function(json) {
065 var items = json.items;
066 $("#shopping_cart").text(items);
067 });
068 }
069
070 function addToCart(product_id){
071 $.getJSON("../ws/cart/add/" + product_id, function(json) {
072 var items = json.items;
073 $("#shopping_cart").text(items);
074 });
075 }

Archivo js/cart.js
001 var data;
002 function getItems(){
003 $.getJSON("../ws/cart/list", function(result){
004 data = result.data;
005 $('#div_items').empty();
006 var total = 0;
007 for(var row=0; row<data.length; row=row+1){
008 var product_id = data[row].product_id;
009 var name = data[row].product_name;
010 var pricing = data[row].price;
011 var short_description = data[row].product_description;
012 var icon = data[row].product_icon;
013 var quantity = data[row].quantity;
014
015 total = total + pricing * quantity;
016

16
017 var dp = '';
018 dp += '<div id="row_' + product_id + '" class="row">';
019 dp += '<div class="col-12 col-sm-12 col-md-2 text-center">';
020 dp += '<img class="img-responsive" src="../fotos/' + icon
021 + '" alt="prewiew" width="120" height="80">';
022 dp += '</div>';
023 dp += '<div
024 class="col-12 text-sm-center col-sm-12 text-md-left col-md-6">';
025 dp += '<h4 class="product-name"><strong>' + name + '</strong></h4>';
026 dp += '<h4>';
027 dp += '<small>' + short_description + '</small>';
028 dp += '</h4>';
029 dp += '</div>';
030 dp += '<div
031 class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row">';
032 dp += '<div
033 class="col-3 col-sm-3 col-md-6 text-md-right"
034 style="padding-top: 5px">';
035 dp += '<h6><strong>' + pricing.toFixed(2)
036 + ' <span class="text-muted">x</span></strong></h6>';
037 dp += '</div>';
038 dp += '<div class="col-4 col-sm-4 col-md-4">';
039 dp += '<div class="quantity">';
040 dp += '<input type="button" value="+" class="plus">';
041 dp += '<input type="number" step="1" max="99" min="1"
042 value="' + quantity + '" title="Qty" class="qty" size="4">';
043 dp += '<input type="button" value="-" class="minus">';
044 dp += '</div>';
045 dp += '</div>';
046 dp += '<div class="col-2 col-sm-2 col-md-2 text-right">';
047 dp += '<a class="nav-link"
048 href="javascript:removeItem(' + product_id + ');">';
049 dp += '<button type="button" class="btn btn-outline-danger btn-xs">';
050 dp += '<i class="fa fa-trash" aria-hidden="true"></i>';
051 dp += '</button>';
052 dp += '</a>';
053 dp += '</div>';
054 dp += '</div>';
055 dp += '</div>';
056 dp += '<hr>';
057
058 $("#div_items").append(dp);
059 }
060
061 $("#total").empty();
062 $("#total").append("$" + total.toFixed(2));
063
064 var ub = '';
065 ub += '<div class="pull-right">';
066 ub += '<a href="javascript:updateCart();"
067 class="btn btn-outline-secondary pull-right">';
068 ub += 'Update shopping cart';
069 ub += '</a>';
070 ub += '</div>';
071 $("#div_items").append(ub);
072 });
073 }
074
075 function removeItem(product_id){
076 for(var row=0; row<data.length; row=row+1){
077 if(data[row].product_id == product_id){

17
078 data.splice(row, 1);
079 }
080 }
081 $.getJSON("../ws/cart/del/" + product_id, function(result){
082 getItems();
083 updateItemsCount();
084 });
085 }
086
087 function updateCart(){
088 var allListElements = $(".qty").get();
089 var text = '';
090 var separator = '';
091 for(var i=0; i<allListElements.length; i=i+1){
092 var product_id = data[i].product_id;
093 var quantity = allListElements[i].value;
094 text += separator + '{"product_id":' + product_id + ',"quantity":'
095 + quantity + '}';
096 separator = ',';
097 }
098
099 text = '{"data":[' + text + ']}';
100 var posting = $.post("../ws/cart/update/", text);
101
102 // Put the results in a div
103 posting.done(function(result) {
104 var total = 0;
105 for(var i=0; i<allListElements.length; i=i+1){
106 var id = data[i].product_id;
107 var pricing = data[i].price;
108 var quantity = allListElements[i].value;
109 total = total + pricing * quantity;
110 }
11 $('#total').empty();
112 $("#total").append("$" + total.toFixed(2));
113 });
114
115 }
116
117 function checkout(){
118 $.getJSON("../ws/cart/checkout", function(result){
119 $("#checkout").addClass("disabled");
120 updateItemsCount();
121 });
122 }

Archivo js/item.js
001 function getCategoryList(){
002 $.getJSON("../ws/portal/categories", function(result){
003 data = result.data;
004 for(var row=0; row<data.length; row=row+1){
005 var id = data[row].id;
006 var name = data[row].name;
007 var item_class = "list-group-item";
008 $("#div_categories").append(
009 "<a href='../home/?id=" + id
010 + "' id='category_" + id + "' class='"
011 + item_class + "'>" + name + "</a>");

18
012 }
013 });
014 }
015 function getProductById(product_id){
016 $.getJSON("../ws/product/" + product_id, function(result){
017 data = result.data;
018 for(var row=0; row<data.length; row=row+1){
019 var id = data[row].id;
020 var category_id = data[row].category_id;
021 var name = data[row].name;
022 var pricing = data[row].pricing;
023 var short_description = data[row].short_description;
024 var long_description = data[row].long_description;
025 var icon = data[row].icon;
026 var media = data[row].media;
027
028 $("#product_image").attr('src','../fotos/' + icon);
029 $("#product_name").text(name);
030 $("#product_price").text('$ ' + pricing.toFixed(2));
031 $("#product_description").text(long_description);
032
033 $('#product_rating').rateit('value', media.toFixed(1));
034 $('#starts').text(media.toFixed(1) + " starts");
035
036 $('.list-group-item').removeClass('active').addClass('');
037 $("#category_" + category_id).addClass('active');
038 }
039 });
040
041 }
042
043 function getReviews(product_id){
044 $.getJSON("../ws/review/list/" + product_id, function(result){
045 data = result.data;
046 $('#div_reviews').empty();
047 for(var row=0; row<data.length; row=row+1){
048 var id = data[row].id;
049 var username = data[row].username;
050 var comment = data[row].comment;
051 var created_at = data[row].created_at;
052 var created_at_text = data[row].created_at_text;
053
054 var review = '';
055 review += '<hr>';
056 review += '<p>' + comment + '</p>';
057 review += '<small class="text-muted">Posted by '
058 + username + ' on ' + created_at_text + '</small>';
059
060 $("#div_reviews").append(review);
061 }
062 });
063 }
062
063 function addReview(product_id){
064 var rating = $('#rating').rateit('value');
065 var comment = document.getElementById("comment").value;
066
067 $.ajax({
068 'url':'../ws/review/add',
069 'method':'POST',
070 'dataType': 'json',

19
071 'contentType': 'application/json',
072 'data':JSON.stringify({
073 "product_id":product_id,
074 "rating":rating,
075 "comment":comment
076 }),
077 'success': function(data){
078 $('#rating').rateit('value', 0.0);
079 $('#rating_value').text('0.0');
080 document.getElementById("comment").value = "";
081 $('#collapseComment').collapse('hide');
082
083 getReviews(product_id);
084 getProductById(product_id);
085
086 $('#div_review_response').empty();
087 var at = '<div class="alert alert-success" role="alert">';
088 at += '<button type="button" class="close"
089 data-dismiss="alert" aria-label="Close">';
090 at += '<span aria-hidden="true">&times;</span></button>';
091 at += '<strong>Success!</strong> ' + data.message + '!';
092 at += '</div>';
093 $('#div_review_response').append(at);
094
095 window.setTimeout(function() {
096 $(".alert").fadeTo(500, 0).slideUp(500, function(){
097 $(this).remove();
098 });
099 }, 4000);
100 },
101 'failure': function(errMsg) {
102 alert(errMsg);
103 }
104 });
105 }
106
107 function configureRating(){
108 $("#rating").bind('rated', function (event, value) {
109 $('#rating_value').text(value.toFixed(1));
110 });
111
112 $("#rating").bind('reset', function () {
113 $('#rating_value').text('0.0');
114 });
115
116 $("#rating").bind('over', function (event, value) {
117 if (value != null){
118 $('#rating_value').text(value.toFixed(1));
119 }
120 else {
121 $('#rating_value').text($('#rating').rateit('value').toFixed(1));
122 }
123 });
124 }

20
Archivo portal/menu.jsp
001 <%
002 String username = "";
003 try {
004 username = request.getUserPrincipal().getName();
005 } catch (Exception e) {
006 username = "";
007 }
008 %>
009 <!-- Navigation -->
010 <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
011 <div class="container">
012 <a class="navbar-brand" href="../">Start Bootstrap</a>
013 <button class="navbar-toggler" type="button" data-toggle="collapse"
014 data-target="#navbarResponsive" aria-controls="navbarResponsive"
015 aria-expanded="false" aria-label="Toggle navigation">
016 <span class="navbar-toggler-icon"></span>
017 </button>
018 <div class="collapse navbar-collapse" id="navbarResponsive">
019 <ul class="navbar-nav ml-auto">
020 <li class="nav-item active">
021 <a class="nav-link" href="../">Home
022 <span class="sr-only">(current)</span>
023 </a>
024 </li>
025 <li class="nav-item"><a class="nav-link"
026 href="../order/">Orders</a></li>
027 <li class="nav-item"><a class="nav-link"
028 href="../category/">Category</a></li>
029 <li class="nav-item"><a class="nav-link"
030 href="../cart/">
031 <button type="button" class="btn btn-primary">
032 Shopping Cart
033 <span id="shopping_cart" class="badge badge-light">0</span>
034 </button>
035 </a></li>
036 <%
037 if (username.length() == 0) {+
038 %>
039 <li class="nav-item"><a class="nav-link" href="../user/">
040 <button type="button" class="btn btn-success">Login</button>
041 </a></li>
042 <%
043 }
044 %>
045 <%
046 if (username.length() > 0) {
047 %>
048
049 <li class="nav-item">
050 <div class="btn-group nav-link" role="group">
051 <button id="btnGroupDrop1" type="button"
052 class="btn btn-primary dropdown-toggle"
053 data-toggle="dropdown"
054 aria-haspopup="true" aria-expanded="false">
055 <%=username%>
056 </button>
057 <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
058 <a class="dropdown-item" href="../user/">
059 Control Panel</a>

21
060 <a class="dropdown-item" href="../purchase/">
061 Purchases</a>
062 <a class="dropdown-item" href="../Logout">
063 Logout</a>
064 </div>
065 </div>
066 </li>
067 <%
068 }
069 %>
070 </ul>
071 </div>
072 </div>
073 </nav>
074
075 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
076 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
077
078 <script src="../js/portal.js" type="text/javascript"></script>
079 <script type="text/javascript">
080 updateItemsCount();
081 </script>

Archivo item/index.jsp
001 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
002 pageEncoding="ISO-8859-1"%>
003 <%
004 String product_id = request.getParameter("id");
005 %>
006 <!DOCTYPE html>
007 <html lang="en">
008 <head>
009 <meta charset="utf-8">
010 <meta name="viewport"
011 content="width=device-width, initial-scale=1, shrink-to-fit=no">
012 <meta name="description" content="">
013 <meta name="author" content="">
014
015 <title>Shop Item - Start Bootstrap Template</title>
016
017 <!-- Bootstrap core CSS -->
018 <!--
019 <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
020 -->
021 <link rel="stylesheet"
022 href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
023
024 <!-- Custom styles for this template -->
025 <link href="../css/shop-item.css" rel="stylesheet">
026
027 <script src="../js/webfont.js"></script>
028 <link href="../css/rateit.css" rel="stylesheet" type="text/css">
029 </head>
030
031 <body>
032 <!-- Navigation -->
033 <jsp:include page="../portal/menu.jsp"></jsp:include>
034

22
035 <!-- Page Content -->
036 <div class="container">
037
038 <div class="row">
039 <div class="col-lg-3">
040 <h1 class="my-4">Shop Name</h1>
041 <div class="list-group" id="div_categories"></div>
042 </div>
043 <!-- /.col-lg-3 -->
044 <div class="col-lg-9">
045 <div class="card mt-4" id="div_product">
046 <img class="card-img-top img-fluid" id="product_image"
047 src="" alt="">
048 <div class="card-body">
049 <h3 class="card-title" id="product_name"></h3>
050 <h4 id="product_price"></h4>
051 <p class="card-text" id="product_description"></p>
052 <a href="javascript:addToCart(<%= product_id %>)"
053 class="btn btn-info" role="button">Buy</a>
054 <br/><br/>
055 <div>
056 <span class="rateit" id="product_rating"
057 data-rateit-readonly="true"></span>
058 <span id="starts"></span>
059 </div>
060 </div>
061 </div>
062 <!-- /.card -->
0
63 <div class="card card-outline-secondary my-4">
064 <div class="card-header">Product Reviews</div>
065 <div class="card-body" id="div_reviews2">
066 <p>
067 <a class="btn btn-success float-right"
068 data-toggle="collapse"
069 href="#collapseComment" role="button"
070 aria-expanded="false"
071 aria-controls="#collapseComment"> Leave a Review </a>
072 </p>
073 <div class="clearfix"></div>
074 <div id="div_review_response"></div>
075
076 <div class="collapse" id="collapseComment">
077 <br />
078 <div class="card card-body">
079 <form>
080 <div class="form-group">
081 <label for="comment">Comment</label>
082 <textarea class="form-control" id="comment" rows="3">
083 </textarea>
084 </div>
085
086 <div class="form-group">
087 <label for="rating">Rating</label>
088 <div>
089 <span class="rateit" id="rating"
090 data-rateit-step="0.1"
091 data-rateit-min="0"
092 data-rateit-max="5"></span>
093 <span id="rating_value"></span>
094 </div>

23
095 </div>
096 <a href="javascript:addReview(<%=product_id%>);"
097 class="btn btn-info float-right" role="button">
098 Save</a>
099 </form>
100 </div>
101 </div>
102
103 <div id="div_reviews"></div>
104
015 </div>
106 </div>
107 <!-- /.card -->
108
109 </div>
110 <!-- /.col-lg-9 -->
111
112 </div>
113
114 </div>
115 <!-- /.container -->
116
117 <!-- Footer -->
118 <jsp:include page="../portal/footer.jsp"></jsp:include>
119
120
121 <!-- Bootstrap core JavaScript -->
122 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
123
124 <script
125 src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
126 </script>
127
128 <script src="../js/jquery.rateit.js" type="text/javascript"></script>
129 <script src="../js/portal.js" type="text/javascript"></script>
130 <script src="../js/item.js" type="text/javascript"></script>
131
132 <script type="text/javascript">
133 $(document).ready(function() {
134 var product_id = <%=product_id%>;
135 getCategoryList();
136 getProductById(product_id);
137 getReviews(product_id);
138 configureRating();
139 updateItemsCount();
140 });
141 </script>
142 </body>
143
144 </html>

Archivo home/index.jsp
001 <%@ page language="java" contentType="text/html; charset=UTF-8"
002 pageEncoding="UTF-8"%>
003 <%
004 int category_id = 1;
005 try{
006 String id = request.getParameter("id");

24
007 category_id = Integer.parseInt(id);
008 }
009 catch(Exception e){
010 }
011 %>
012 <!DOCTYPE html>
013 <html lang="en">
014 <head>
015 <meta charset="utf-8">
016 <meta name="viewport"
017 content="width=device-width, initial-scale=1, shrink-to-fit=no">
018 <meta name="description" content="">
019 <meta name="author" content="">
020 <title>Shop Homepage - Start Bootstrap Template</title>
021 <!-- Bootstrap core CSS -->
022 <link rel="stylesheet"
023 href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
024 <!-- Custom styles for this template -->
025 <link href="../css/shop-homepage.css" rel="stylesheet">
026 </head>
027 <body>
028 <!-- Navigation -->
029 <jsp:include page="../portal/menu.jsp" />
030 <!-- Page Content -->
031 <div class="container">
032 <div class="row">
033 <div class="col-lg-3">
034 <jsp:include page="../portal/category.jsp" />
035 </div>
036 <!-- /.col-lg-3 -->
037 <div class="col-lg-9">
038 <jsp:include page="../portal/carousel.jsp" />
039 <jsp:include page="../portal/products.jsp" />
040 </div>
041 <!-- /.col-lg-9 -->
042 </div>
043 <!-- /.row -->
044 </div>
045 <!-- /.container -->
046 <!-- Footer -->
047 <jsp:include page="../portal/footer.jsp" />
048 <!-- Bootstrap core JavaScript -->
049 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
050 <script
051 src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
052 </script>
053
054 <script src="../js/portal.js"></script>
055 <script type="text/javascript">
056 var category_id = <%= category_id %>;
057 getCategories(category_id);
058 getProducts(category_id);
059 //updateItemsCount();
060 </script>
061 </body>
062 </html>

25
Archivo /index.jsp
001 <%
002 response.sendRedirect("home/");
033 %>

26