購物車中"加入購物車」按鈕的實現


details.html中
javascript

<form action="addCart" th:object="${goodsForm}" method="post" name="goodsForm">html

<input type ="hidden"  name="commodityId" th:value="${goodsForm.commodityId}"/>java

<div class="col-sm-6">session

<h4 class="yh detailsT"><span th:text="${goodsForm.commodityName}">裕道府東北有機小米食用米 粗糧黃小米 五穀雜糧月子米</span></h4>app

<dl class="dl-horizontal detailsInfo cf">post

       <dt>零售價:</dt>spa

       <dd class="price yh"><i>¥</i><span th:text="${goodsForm.retailPrice}">128</span></dd>code

       <dt>運 費 :</dt>orm

       <dd>8元</dd>htm

       <dt>品  牌:</dt>

       <dd><span th:text="${goodsForm.brandName}">日思</span></dd>

       <dt>經銷商:</dt>

       <dd><span th:text="${goodsForm.supplierName}">天津日思優質小站稻開發公司</span></dd>

       <dt>規  格:</dt>

       <dd>每<span th:text="${#strings.concat(goodsForm.unit).concat(goodsForm.specifications)}">袋5kg</span></dd>

       <dt>庫  存:</dt>

       <dd><span th:text="${goodsForm.stock}">99</span></dd>

       <dt>數  量:</dt>

       <dd style="height:32px;">

       <div class="chooseAmount mt5">

       <a onclick="subNum();" href="javascript:void(0)"></a>

       <input type="text" name="count" id="count" class="fl inp-t" value="1"/>

       <a onclick="addNum();"  href="javascript:void(0)"></a>

       </div>

       </dd>

   </dl>

   <p class="mt20"><button  class="btnBlue yh ">當即購買</button><button class="btnYellow yh">加入購物車</button></p>

</div>

</form>



CartController.java

    @RequestMapping(value = "addCart", method = RequestMethod.POST)

    public String executeAddCart(Model model, HttpSession session, CartForm cartForm, Device device) throws SQLException {

    log.info("追加購物車");

    GoodsForm goodsForm = new GoodsForm();

goodsForm.setCommodityId(cartForm.getCommodityId());

//goodsForm.setType("糧食");

List<GoodsForm> commodityType = goodsService.getType();

    goodsForm.setCommodityTypeId(commodityType.get(0).getCommodityTypeId());

    model.addAttribute("commodityType", commodityType);

model.addAttribute("goodsForm", goodsService.searchGoods(goodsForm));

    UVO uvo = (UVO)session.getAttribute("UVO");

   

    if (uvo == null || StringUtils.isEmpty(uvo.getGuestId()) || uvo.getGuestId().length() > 4) {

    if (uvo == null || StringUtils.isEmpty(uvo.getGuestId()) || "Guest".equals(uvo.getGuestId().substring(0, 5))) {

    uvo = new UVO();

    Date date = new Date();

        SimpleDateFormat dateformat = new SimpleDateFormat("yyyyMMddHHmmss");

        uvo.setUserId("Guest" + dateformat.format(date));

        uvo.setGuestId("Guest" + dateformat.format(date));

        uvo.setUserName("來賓" + dateformat.format(date));

        log.info("匿名購買商品銷售頁面初始化。");

        AlipayForm alipayForm = new AlipayForm();

        cartForm.setGuestId(uvo.getGuestId());

        alipayForm = cartService.searchAlipay(cartForm);

        List<CartForm> cartList = new ArrayList<>();

        model.addAttribute("cartList", cartList);

        if (alipayForm == null) {

        model.addAttribute("message", "庫存不夠!");

        if(device.isNormal()) {

           return "shop/details";

           } else {

           return "mobile/goods/goodsDetail";

           }

        }

        model.addAttribute("alipayForm", alipayForm);

        if(device.isNormal()) {

        return "shop/alipay/guestAlipayConfirm";

        } else {

        return "mobile/alipay/guestAlipayConfirm";

        }

    }

    }

   

    cartForm.setUpdateUser(uvo.getGuestName());

Date date = new Date();

SimpleDateFormat dateformat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

cartForm.setUpdateTime(dateformat.format(date));

cartForm.setGuestId(uvo.getGuestId());

AlipayForm alipayForm = new AlipayForm();

alipayForm = cartService.searchAlipay(cartForm);

if (alipayForm == null) {

model.addAttribute("cartList", cartService.searchCartList(cartForm));

model.addAttribute("message", "庫存不夠!");

if(device.isNormal()) {

   return "shop/details";

   } else {

   return "mobile/goods/goodsDetail";

   }

}

    

    boolean result = cartService.addCart(cartForm);

    if (!result) {

    throw new SQLException("追加購物車失敗!");

    }

    model.addAttribute("cartList", cartService.searchCartList(cartForm));

    model.addAttribute("list", cartService.searchAlipayHistoryList(cartForm));

    if(device.isNormal()) {

    return "shop/cart/cart-1";

    } else {

    return "mobile/cart/cartList";

    }

    }

點擊進入"個人訂單"的相關方法

<tbody >
<div th:each="cartsInfo,status:${cartList}">
		<tr>
		<td class="chk"><input type="checkbox" name="checkTest" /></td>
			<td>
			<div class="cont cf">
	<a href="#"><img th:src="@{showImage(pictureId=${cartsInfo.pictureId})}"
	alt="購物車詳細狀況" class="pic" /></a>
	<h4>
	<span th:text="${cartsInfo.commodityName}"></span>
	</h4>
	<p class=" mt10">
	規格:每<span
													th:text="${#strings.concat(cartsInfo.unit).concat(cartsInfo.specifications)}"></span>
		</p>
		<p>
	品牌:<span th:text="${cartsInfo.brandName}"></span>
	</p>
	</div>
	</td>
	<td><p class="price yh">
	<span th:text="${cartsInfo.retailPrice}"></span>元
	</p></td>
	<td>
	<div class="chooseAmount">
	<a href="javascript:void(0);"
	th:onclick="${#strings.concat('subNum(').concat(cartsInfo.commodityId).concat(')')}"></a>
	<input th:id="${cartsInfo.commodityId}" type="text" class="fl inp-t" value="1" />
	<a href="javascript:void(0);"
	th:onclick="${#strings.concat('addNum(').concat(cartsInfo.commodityId).concat(')')}"></a>
	</div>
		</td>
			<td><p class="price yh">
											<span th:text="${cartsInfo.retailPrice}"></span>元
										</p></td>
									<td><a class="button"
										th:href="@{delCart(cartId=${cartsInfo.cartId},count=${cartsInfo.count},commodityId=${cartsInfo.commodityId})}"><span>刪除</span></a></td>
								</tr>
								</div>
							</tbody>

						</table>



加入購物車的數量增長

<td class="chk">                                 
   <input type="hidden" th:name="${#strings.concat('listBean[').concat(status.index).concat('].commodityId')}" th:value="${cartsInfo.commodityId}"/>
<input type="checkbox" th:name="${#strings.concat('listBean[').concat(status.index).concat('].checkArray')}" /></td>