# product
```
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page import="java.util.*"%>
<%@ page import="com.product.model.*"%>
<%@ page import="com.product_fav.model.*"%>
<%@ page import="com.sale_list.model.*"%>
<%@ page import="com.sale_project.model.*"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%><%--JSTLI18N標籤庫--%>
<%
ProductService prodSvc = new ProductService();
List<ProductVO> list = prodSvc.getAll();
pageContext.setAttribute("list", list);
String stuno = (String)request.getAttribute("stuno");
stuno = "S001";
pageContext.setAttribute("stuno", stuno);
Product_favService prod_favsvc = new Product_favService();
List<Product_favVO> listfav = prod_favsvc.getOnePf(stuno);
pageContext.setAttribute("listfav", listfav);
// list.stream()
// .forEach(l -> l.getProdno());
String prno =null;
for (Product_favVO p : listfav) {
System.out.println(p.getProdno());
prno = p.getProdno();
}
pageContext.setAttribute("prno", prno);
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Title -->
<title>FitMate</title>
<!-- Favicon -->
<link rel="icon"
href="<%=request.getContextPath()%>/images/core-img/heart.svg">
<!-- Core Style CSS -->
<link rel="stylesheet"
href="<%=request.getContextPath()%>/css/css/core-style.css">
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="<%=request.getContextPath()%>/css/custom-css/product/product.css">
<script
src="https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js"></script>
<style>
#titilea{
font-size:22px;
}
.single-product-wrapper .product-img .product-favourite button {
position: absolute;
height: 25px;
width: 45px;
font-size: 14px;
color: #ccc;
top: 20px;
right: 20px;
z-index: 10;
line-height: 25px;
background-color: #ffffff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
text-align: center;
opacity: 0;
visibility: hidden;
border:none;
outline:none;
}
.single-product-wrapper .product-img .product-favourite button.active {
opacity: 1;
visibility: visible;
}
.single-product-wrapper:hover .product-img .product-favourite button {
opacity: 1;
visibility: visible;
}
</style>
</head>
<body>
<!-- ##### Header Area Start ##### -->
<header class="header_area">
<div
class="classy-nav-container breakpoint-off d-flex align-items-center justify-content-between">
<!-- Classy Menu -->
<nav class="classy-navbar" id="essenceNav">
<!-- Logo -->
<a class="nav-brand" href="index.html"><img
src="<%=request.getContextPath()%>/images/core-img/logo.png" alt=""></a>
<!-- Navbar Toggler -->
<div class="classy-navbar-toggler">
<span class="navbarToggler"><span></span><span></span><span></span></span>
</div>
<!-- Menu -->
<div class="classy-menu">
<!-- close btn -->
<div class="classycloseIcon">
<div class="cross-wrap">
<span class="top"></span><span class="bottom"></span>
</div>
</div>
<!-- Nav Start -->
<div class="classynav">
<ul>
<li><a href="index.html">首頁</a></li>
<li><a href="blog.html">消息</a></li>
<li><a href="#">商城</a>
<div class="megamenu">
<ul class="single-mega cn-col-4">
<li class="title">服飾</li>
<li><a href="shop.html">男士服飾</a></li>
<li><a href="shop.html">女士服飾</a></li>
</ul>
<ul class="single-mega cn-col-4">
<li class="title">健身相關</li>
<li><a href="shop.html">健身食品</a></li>
<li><a href="shop.html">健身配件</a></li>
</ul>
<ul class="single-mega cn-col-4">
<li class="title">促銷專案</li>
<li><a href="shop.html">母親節</a></li>
<li><a href="shop.html">父親節</a></li>
</ul>
</div></li>
<li><a href="#">課程</a>
<ul class="dropdown">
<li><a href="index.html">課程總覽</a></li>
<li><a href="shop.html">瑜珈</a></li>
<li><a href="single-product-details.html">肌力訓練</a></li>
<li><a href="checkout.html">溜冰/滑板</a></li>
<li><a href="blog.html">有氧課程</a></li>
<li><a href="single-blog.html">海上/海下運動</a></li>
<li><a href="regular-page.html">登山健行</a></li>
<li><a href="contact.html">重量訓練</a></li>
<li><a href="contact.html">球類運動</a></li>
<li><a href="contact.html">武術</a></li>
<li><a href="contact.html">其他</a></li>
</ul></li>
<li><a href="contact.html">揪團</a></li>
<li><a href="#">學員</a>
<ul class="dropdown">
<li><a href="index.html">個人資料</a></li>
<li><a href=".html">查看課表</a></li>
<li><a href=".html">購買清單</a></li>
<li><a href=".html">錢包管理</a></li>
<li><a href=".html">個人信箱</a></li>
</ul></li>
<li><a href="blog.html">討論區</a></li>
</ul>
</div>
<!-- Nav End -->
</div>
</nav>
<!-- Header Meta Data -->
<div class="header-meta d-flex clearfix justify-content-end">
<!-- Search Area -->
<!-- User Login Info -->
<div class="user-login-info">
<a
href="<%=request.getContextPath()%>/front-end/product/product_fav.jsp"><img
src="<%=request.getContextPath()%>/images/core-img/heart.svg"
alt=""></a>
</div>
<div class="user-login-info">
<a href="#"><img
src="<%=request.getContextPath()%>/images/core-img/user.svg"
alt=""></a>
</div>
<!-- Cart Area -->
<div class="cart-area">
<a href="#" id="essenceCartBtn"><img
src="<%=request.getContextPath()%>/images/core-img/bag.svg" alt="">
<span>0</span></a>
</div>
</div>
</div>
</header>
<!-- ##### Header Area End ##### -->
<!-- ##### Right Side Cart Area ##### -->
<div class="cart-bg-overlay"></div>
<div class="right-side-cart-area">
<!-- Cart Button -->
<div class="cart-button">
<a href="#" id="rightSideCart"><img
src="<%=request.getContextPath()%>/images/core-img/bag.svg" alt="">
<span>0</span></a>
</div>
<div class="cart-content d-flex">
<!-- Cart List Area -->
<div class="cart-list">
</div>
<!-- Cart Summary -->
<div class="cart-amount-summary">
<h2>我的購物車</h2>
<ul class="summary-table">
<li><span>商品總計:</span> <span>$ 0 元</span></li>
<li><span>運費:</span> <span>$ 0 元</span></li>
<li><span>總計:</span> <span>$ 0 元</span></li>
</ul>
<div class="checkout-btn mt-100">
<form
action="<%=request.getContextPath()%>/front-end/product/product_order.do"
method="post" id="buy">
<input type=hidden name="action" value="cart"> <input
type=hidden id="checkid" name="stuno" value="${stuno}"> <input type=hidden
name="cart_list" value=""> <input type="submit"
value="結 帳" class="check btn btn-outline-success my-2 my-sm-0">
</form>
</div>
</div>
</div>
</div>
<!-- ##### Right Side Cart End ##### -->
<!-- ##### Breadcumb Area Start ##### -->
<div class="breadcumb_area bg-img"
style="background-image: url(<%=request.getContextPath()%>/images/product/breadcumb.jpg);">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12">
<div class="page-title text-center">
<h2>FitMate購物商城</h2>
</div>
</div>
</div>
</div>
</div>
<!-- ##### Breadcumb Area End ##### -->
<c:if test="${not empty errorMsgs}">
<font style="color:red">請修正以下錯誤:</font>
<ul>
<c:forEach var="message" items="${errorMsgs}">
<li style="color:red">${message}</li>
</c:forEach>
</ul>
</c:if>
<!-- ##### Shop Grid Area Start ##### -->
<section class="shop_grid_area section-padding-80">
<div class="container">
<div class="row">
<div class="col-12 col-md-4 col-lg-3">
<div class="shop_sidebar_area">
<!-- ##### Single Widget ##### -->
<div class="widget catagory mb-50">
<!-- Widget Title -->
<h6 class="widget-title mb-30 pclass-title">商品分類</h6>
<!-- 商品分類 -->
<div class="catagories-menu">
<ul id="menu-content2" class="menu-content">
<!-- Single Item -->
<li>
<ul class="sub-menu collapse show" id="clothing">
<li><a href="<%=request.getContextPath()%>/product/product.do?action=pclass&pclass_id=PC001">男士服飾</a></li>
<li><a href="<%=request.getContextPath()%>/product/product.do?action=pclass&pclass_id=PC002">女士服飾</a></li>
</ul>
</li>
<!-- Single Item -->
<li><a href="#">健身相關</a>
<ul class="sub-menu collapse" id="shoes">
<li><a href="<%=request.getContextPath()%>/product/product.do?action=pclass&pclass_id=PC003">健身食品</a></li>
<li><a href="<%=request.getContextPath()%>/product/product.do?action=pclass&pclass_id=PC004">健身配件</a></li>
</ul>
</li>
<!-- Single Item -->
<li><a href="#">促銷專案</a>
<ul class="sub-menu collapse" id="accessories">
<li><a href="<%=request.getContextPath()%>/product/product.do?action=pclass&pclass_id=PC005">促銷專案</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- ##### Single Widget ##### -->
<div class="widget brands mb-50">
<!-- Widget Title 2 -->
<!-- 左邊欄位預留加功能 -->
</div>
</div>
</div>
<div class="col-12 col-md-8 col-lg-9">
<div class="shop_grid_product_area">
<div class="row">
<div class="col-12">
<div
class="product-topbar d-flex align-items-center justify-content-between">
<!-- Total Products -->
<div class="total-products">
<p>
<%@ include file="page1.file"%>
</p>
</div>
</div>
</div>
</div>
<div class="row col-12">
<c:forEach var="productVO" items="${list}" begin="<%=pageIndex%>"
end="<%=pageIndex+rowsPerPage-1%>">
<!-- Single Product -->
<div class="col-12 col-sm-3 col-lg-4">
<div class="single-product-wrapper">
<!-- Product Image -->
<div class="product-img">
<a href="<%=request.getContextPath()%>/Shopping.html?action=getOne_For_Display&prodno=${productVO.prodno}" id="titilea"><img
src="<%= request.getContextPath()%>/product/product.pic?prodno=${productVO.prodno}"
alt=""></a>
<!-- Product Badge -->
<jsp:useBean id="sale_projectSvc" scope="page" class="com.sale_project.model.Sale_projectService" />
<jsp:useBean id="sale_listSvc" scope="page" class="com.sale_list.model.Sale_listService" />
<%
List<Sale_projectVO>allsp=sale_projectSvc.getAll();
for(Sale_projectVO allsp1:allsp){
List<Sale_listVO> listsp=sale_listSvc.getOneSp(sapro_no);
}
java.util.Date du =new java.util.Date();
long long1=du.getTime();
for(Sale_projectVO listtime : listsp){
Sale_projectVO sale_projectVO=new Sale_projectVO();
long startdate=sale_projectVO.getSapro_start().getTime();
long enddate=sale_projectVO.getSapro_end().getTime();
if(long1>startdate && long1<enddate)
if(productVO.getProdno()==sale_listVO.getProdno()){%>
<div class="product-badge offer-badge">
<span>限時特價</span>
</div>
<%} %>
<%} %>
<!-- Favourite -->
<form
action="<%=request.getContextPath()%>/back-end/product/product_fav.html"
method="post">
<%
boolean test =
(listfav.stream().anyMatch(vo -> vo.getProdno().equals("prno")));
%>
<div class="product-favourite">
<jsp:useBean id="product_favSvc" scope="page"
class="com.product_fav.model.Product_favService" />
<button class="favme fa fa-heart" type="submit"
<c:if test="test">value="Disabled" disabled</c:if>></button>
<input type="hidden" name="prodno"
value="${productVO.prodno}"> <input type="hidden"
name="stuno" value="${stuno}"> <input type="hidden"
name="action" value="insert">
</div>
</form>
</div>
<!-- Product Description -->
<div class="product-description">
<a href="<%=request.getContextPath()%>/Shopping.html?action=getOne_For_Display&prodno=${productVO.prodno}" id="titilea">${productVO.prodname}</a>
<p class="product-price">
${productVO.prodprice}</p>
<!-- Hover Content -->
<div class="hover-content">
<!-- Add to Cart -->
<div class="add-to-cart-btn">
<a href="#" class="btn essence-btn addtocart">Add to
Cart</a> <input type="hidden" value="${productVO.prodno}">
</div>
</div>
</div>
</div>
</div>
</c:forEach>
</div>
<%@ include file="page2.file"%>
</div>
</div>
</div>
<!-- ##### Shop Grid Area End ##### -->
</div>
<!-- ##### Blog Wrapper Area End ##### -->
<!-- ##### Footer Area Start ##### -->
<footer class="footer_area clearfix">
<div class="container">
<div class="row ">
<div class="col-md-12 text-center">
<p>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©
<script>
document.write(new Date().getFullYear());
</script>
by EA101G5 <i class="fa fa-heart-o" aria-hidden="true"></i> by
FitMate</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</footer>
<!-- ##### Footer Area End ##### -->
<!-- jQuery (Necessary for All JavaScript Plugins) -->
<script src="${pageContext.request.contextPath}/js/popper.min.js"></script>
<!-- Popper js -->
<script
src="${pageContext.request.contextPath}/js/jquery/jquery-2.2.4.min.js"></script>
<!-- Bootstrap js -->
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<!-- Plugins js -->
<script src="${pageContext.request.contextPath}/js/plugins.js"></script>
<!-- Classy Nav js -->
<script src="${pageContext.request.contextPath}/js/classy-nav.min.js"></script>
<!-- Active js -->
<script src="${pageContext.request.contextPath}/js/active.js"></script>
<script>
//商品object 產品編號 名稱 產品圖片路徑 選購個數 產品價格
function Product(pordno, name, pro_pic_src, pord_listqty , pro_price){
this.pordno = pordno;
this.name = name;
this.pro_pic_src = pro_pic_src;
this.pord_listqty = pord_listqty;
this.pro_price = pro_price;
}
var productMap = new Map();
var list_cart = Cookies.get("cartItem");
console.log(list_cart);
if (list_cart !== undefined){
var list_cart_object =JSON.parse(list_cart);
for(var key in list_cart_object){
var pordno=list_cart_object[key].pordno;
var name=list_cart_object[key].name;
var pro_pic_src=list_cart_object[key].pro_pic_src;
var pord_listqty=list_cart_object[key].pord_listqty;
var pro_price=list_cart_object[key].pro_price;
product = new Product(pordno, name, pro_pic_src, pord_listqty, pro_price);
productMap.set(product.pordno,product);
var addcart = "<div class='single-cart-item ";
addcart += pordno+"'>";
addcart += "<a href='#' class='product-image'>";
addcart += "<img src='" + pro_pic_src + "' class='cart-thumb' id='cartimg' alt=''>";
addcart += "<div class='cart-item-desc'>";
addcart += "<span class='product-remove ";
addcart += pordno+"'>";
addcart += "<i class='fa fa-close' aria-hidden='true'></i>";
addcart += "</span>";
addcart += "<span class='badge'>";
addcart += pordno+"</span>";
addcart += "<h6>"+name+"</h6>";
addcart += "<p class='size'>選購數量: "
addcart += pord_listqty+"</p>";
addcart += "<p class='price'>價格:"+pro_price+"</p>";
addcart += "<p class='color'>數量價格:"+pro_price*pord_listqty+"</p></div></a></div>";
$(".cart-list").append(addcart);
var all_pord_listqty = 0;
var all_price = 0;
productMap.forEach(function(item, index, array){
all_pord_listqty += item.pord_listqty;//商品總數
all_price +=( parseInt(item.pord_listqty) * parseInt(item.pro_price) ); //商品總數價格
});
$("#essenceCartBtn").find("span").text(all_pord_listqty);
$("#rightSideCart").find("span").text(all_pord_listqty);
// console.log("pprice: "+pprice);//增加商品後購物車商品總額
$(".cart-amount-summary").children().eq(1).find("span").eq(1).text("$ "+all_price+" 元");
var freight = $(".cart-amount-summary").children().eq(1).find("span").eq(3).text();
if(productMap.size>0)
{
var freight = 80;
}else{
var freight = 0;
}
$(".cart-amount-summary").children().eq(1).find("span").eq(3).text("$ "+freight+" 元");
var total = all_price+freight;
$(".cart-amount-summary").children().eq(1).find("span").eq(5).text("$ "+total+" 元");
}
}
$(".addtocart")
.click(
function() {
let pro_pic_src = $(this).parent().parent().parent()
.parent().children().find("img").attr("src");
// console.log("pro_pic_src"+pro_pic_src);//商品同圖片路徑
let pro_price = $(this).parent().parent().parent().find("p").text().trim();
// console.log("pro_price"+pro_price);//商品單價
let name = $(this).parent().parent().siblings().eq(0).text();
// console.log("name"+name);//商品名稱
let pordno = $(this).next().val();
// console.log("pordno"+pordno);//商品編號
var pord_listqty = 1;//預設購買數量
if(productMap.size===0){
product = new Product(pordno, name, pro_pic_src, pord_listqty, pro_price);
productMap.set(pordno,product);
// console.log("成功新增第一筆:"+typeof(pordno));
var addcart = "<div class='single-cart-item ";
addcart += pordno+"'>";
addcart += "<a href='#' class='product-image'>";
addcart += "<img src='" + pro_pic_src + "' class='cart-thumb' id='cartimg' alt=''>";
addcart += "<div class='cart-item-desc'>";
addcart += "<span class='product-remove ";
addcart += pordno+"'>";
addcart += "<i class='fa fa-close' aria-hidden='true'></i>";
addcart += "</span>";
addcart += "<span class='badge'>";
addcart += pordno+"</span>";
addcart += "<h6>"+name+"</h6>";
addcart += "<p class='size'>選購數量: "
addcart += pord_listqty+"</p>";
addcart += "<p class='price'>價格:"+pro_price+"</p>";
addcart += "<p class='color'>數量價格:"+pro_price*pord_listqty+"</p></div></a></div>";
$(".cart-list").append(addcart);
var cart_list = JSON.stringify(mapToObj(productMap));
addToCar(cart_list);
}else{
if(productMap.get(pordno)===undefined){
product = new Product(pordno, name, pro_pic_src, pord_listqty, pro_price);
productMap.set(product.pordno,product);
// console.log("成功新增:"+productMap.get(pordno).pordno);
var addcart = "<div class='single-cart-item ";
addcart += pordno+"'>";
addcart += "<a href='#' class='product-image'>";
addcart += "<img src='" + pro_pic_src + "' class='cart-thumb' id='cartimg' alt=''>";
addcart += "<div class='cart-item-desc'>";
addcart += "<span class='product-remove ";
addcart += pordno+"'>";
addcart += "<i class='fa fa-close' aria-hidden='true'></i>";
addcart += "</span>";
addcart += "<span class='badge'>";
addcart += pordno+"</span>";
addcart += "<h6>"+name+"</h6>";
addcart += "<p class='size'>選購數量: "
addcart += pord_listqty+"</p>";
addcart += "<p class='price'>價格:"+pro_price+"</p>";
addcart += "<p class='color'>數量價格:"+pro_price*pord_listqty+"</p></div></a></div>";
$(".cart-list").append(addcart);
// console.log("productMap.size: "+productMap.size);
var cart_list = JSON.stringify(mapToObj(productMap));
addToCar(cart_list);
}else if(productMap.get(pordno).pordno===pordno){
product=productMap.get(pordno);
pord_listqty = (product.pord_listqty)+1;
product.pord_listqty = pord_listqty;
// console.log("增加商品數量pord_listqty: "+product.pord_listqty);
var cart_product =$(".cart-list").children("div."+pordno);//新增過商品的區塊
var size = "<p class='size'>選購數量: "
size += pord_listqty+"</p>";
cart_product.find(".size").html(size);
var ppa ="數量價格:";
ppa += pro_price*pord_listqty;
cart_product.find(".color").html(ppa);
// console.log("productMap.size: "+productMap.size);
var cart_list = JSON.stringify(mapToObj(productMap));
addToCar(cart_list);
}
}
// console.log("productMap.size: "+productMap.size);
var all_pord_listqty = 0;
var all_price = 0;
productMap.forEach(function(item, index, array){
all_pord_listqty += item.pord_listqty;//商品總數
all_price +=( parseInt(item.pord_listqty) * parseInt(item.pro_price) ); //商品總數價格
});
$("#essenceCartBtn").find("span").text(all_pord_listqty);
$("#rightSideCart").find("span").text(all_pord_listqty);
// console.log("pprice: "+pprice);//增加商品後購物車商品總額
$(".cart-amount-summary").children().eq(1).find("span").eq(1).text("$ "+all_price+" 元");
var freight = $(".cart-amount-summary").children().eq(1).find("span").eq(3).text();
if(productMap.size>0)
{
var freight = 80;
}else{
var freight = 0;
}
$(".cart-amount-summary").children().eq(1).find("span").eq(3).text("$ "+freight+" 元");
var total = all_price+freight;
$(".cart-amount-summary").children().eq(1).find("span").eq(5).text("$ "+total+" 元");
// console.log("total : "+total);//購物車商品價錢+運費總額
// console.log($("i.fa-close"));//購物車商品價錢+運費總額
productMap.forEach(function(item, index, array){
console.log(item.pordno);
console.log(item.name);
console.log(item.pord_listqty);
console.log( parseInt(item.pro_price));
});
});
$(".cart-list").on('click', ".fa-close", function(){
var p_n = $(this).parent().next().text();
productMap.delete(p_n);
$(this).parent().parent().parent().parent().remove();
// console.log(productMap.size);
var all_pord_listqty = 0;
var all_price = 0;
// console.log(productMap);
productMap.forEach(function(item, index, array){
console.log("商品總數:");
console.log(item.pord_listqty);
all_pord_listqty += item.pord_listqty; //移出商品後總數
all_price +=( parseInt(item.pord_listqty) * parseInt(item.pro_price) ); //移除商品後總數價格
});
$("#essenceCartBtn").find("span").text(all_pord_listqty);
$("#rightSideCart").find("span").text(all_pord_listqty);
// console.log("pprice: "+pprice);//移除商品後購物車商品總額
$(".cart-amount-summary").children().eq(1).find("span").eq(1).text("$ "+all_price+" 元");
if(productMap.size>0)
{
var freight = 80;
}else{
var freight = 0;
}
$(".cart-amount-summary").children().eq(1).find("span").eq(3).text("$ "+freight+" 元");
var total = all_price+freight;
$(".cart-amount-summary").children().eq(1).find("span").eq(5).text("$ "+total+" 元");
console.log("total : "+total);//購物車商品價錢+運費總額
console.log($("i.fa-close"));//購物車商品價錢+運費總額
var cart_list = JSON.stringify(mapToObj(productMap));
addToCar(cart_list);
})
$(".check").click(function(){
//*****************
// if($(this).val() != null){
var cart_list = JSON.stringify(mapToObj(productMap));
addToCar(cart_list);
$(this).prev().val(cart_list)
console.log($(this).prev());
$("#buy").submit();
// }else{
// alert("請登入");
// $("#user-login-info")click();
// }
});
//map 轉 JSON字串
function mapToObj(inputMap) {
let obj = {};
inputMap.forEach(function(value, key){
obj[key] = value;
});
return obj;
}
function addToCar(cart_list){
Cookies.set("cartItem", cart_list , { expires: 1 })
}
</script>
</html>
```
Sign in with Wallet
Connect another wallet