睿樂購電商課程設計——商品模塊

商品詳情頁

• detail.js

    function getProduct(){
    let id = sessionStorage.getItem("goodsId");
    if (isNull(id)){
        return ;
    }
    $.ajax({
        type: "GET", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/goods/get/"+id,
        success: function(result) {
            if (result.status == 200){
                goodShow(result.data);
            }else if(result.status == 404){
                location.href="404.html";
                return;
            }else{    
                console.log(result.msg);
                return null;
            }
           
        },
        error: function() {
            location.href="404.html";
            return;
        }
    });
}

function goodShow(data){
    let mainImg =  data.main_image;
    $("#item1 a").attr('href',mainImg);
    $("#item1 img").attr('src',mainImg);
    $("#item3 img").attr('src',mainImg);
    let subimg = ('sub_image' in data)?data.sub_image:mainImg;
    $("#item2 a").attr('href',subimg);
    $("#item2 img").attr('src',subimg);
    $("#item4 img").attr('src',subimg);
    $(".product-title").text(data.name);
    $(".regular-price").text(data.price);
    $(".product-description").text(data.detail);
    $(".product_desc").text(data.detail);
    $("#stock").text(data.stock);
    $("#btnAddToCart").attr("onclick",`addCart(${data.id})`);
}

$(function (){
    checkUsername();
    checkCart();
    getProduct();
});

• detail.html部分

   <div class="row">
                <div class="col-xl-6 col-lg-7 col-12 mt-50">
                    <div class="vertical-tab-product vertical-tab-right">
                        <!-- Product Zoom Image start -->
                        <div class="product-slider-container arrow-center text-center float-left">
                            <div class="product-item detail1" id= "item1">
                                <a href="assets/images/product/product-details/product-details-1.jpg"><img src="assets/images/product/product-details/product-details-1.jpg" class="img-fluid" alt="" /></a>
                            </div >
                            <div class="product-item" id="item2">
                                <a href="assets/images/product/product-details/product-details-2.jpg"><img src="assets/images/product/product-details/product-details-2.jpg" class="img-fluid" alt="" /></a>
                            </div>
                        </div>
                        <!-- Product Zoom Image End -->
                        <!-- Product Thumb Zoom Image Start -->
                        <div class="product-thumbnail-vertical float-right">
                            <div class="product-item-thumb detail2" id="item3">
                                <img src="assets/images/product/product-details/product-thumb-1.jpg" class="img-fluid" alt="" />
                            </div>
                            <div class="product-item-thumb" id="item4">
                                <img src="assets/images/product/product-details/product-thumb-2.jpg" class="img-fluid" alt="" />
                            </div>
                        </div>
                        <!-- Product Thumb Zoom Image End -->
                    </div>
                </div>
                <div class="col-xl-6 col-lg-5 col-12 mt-45">
                    <!-- Product Summery Start -->
                    <div class="product-summery position-relative">
                        <div class="product-head">
                            <h1 class="product-title">Porro quisquam eget feugiat pretium</h1>
                            <div class="product-arrows text-right">
                                <a href="#"><i class="fa fa-long-arrow-left"></i></a>
                                <a href="#"><i class="fa fa-long-arrow-right"></i></a>
                            </div>
                        </div>
                        <div class="rating-meta d-flex">
                            <div class="rating">
                                <span class="yellow"><i class="fa fa-star"></i></span>
                                <span class="yellow"><i class="fa fa-star"></i></span>
                                <span class="yellow"><i class="fa fa-star"></i></span>
                                <span class="yellow"><i class="fa fa-star"></i></span>
                                <span class="yellow"><i class="fa fa-star"></i></span>
                            </div>
                            <ul class="meta d-flex">
                                <li>
                                    <a href="#"><i class="fa fa-commenting-o"></i>Read reviews(3)</a>
                                </li>
                                <li>
                                    <a href="#"><i class="fa fa-edit"></i>Write a review</a>
                                </li>
                            </ul>
                        </div>
                        <div class="price-box">
                            <span class="regular-price">$30.00</span>
                        </div>
                        <div class="product-description">
                            <p>Porro first 4K UHD Camcorder, the GX10 has a compact and portable design that delivers outstanding video quality with remarkable detail. With a combination of incredible features and functionality, the GX10 is the ideal camcorder for aspiring filmmakers.</p>
                        </div>
                        <div class="product-packeges">
                            <table>
                                <tbody>
                                    <tr>
                                        <td class="label"><span>大小</span></td>
                                        <td class="value">
                                            <div class="product-sizes">
                                                <a href="#">大</a>
                                                <a href="#">中等</a>
                                                <a href="#">小</a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="label"><span>庫存</span></td>
                                        <td class="value">
                                            <span id="stock">10</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="label"><span>購買量</span></td>
                                        <td class="value">
                                            <div class="product-quantity">
                                                <span class="qty-btn minus"><i class="fa fa-angle-down"></i></span>
                                                <input type="text" class="input-qty" value="1">
                                                <span class="qty-btn plus"><i class="fa fa-angle-up"></i></span>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="product-buttons grid_list">
                            <div class="action-link">
                                <a class="compare-add same-link" href="compare.html" title="Add to compare"><i class="zmdi zmdi-refresh-alt"></i></a>
                                <button class="btn-secondary" id="btnAddToCart">添加購物車</button>
                                <a class="wishlist-add same-link" href="#" title="Add to wishlist"><i class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
                            </div>
                        </div>
                        <div class="product-meta">
                            <div class="desc-content">
                                <div class="social_sharing d-flex">
                                    <h5>分享給朋友:</h5>
                                    <ul>
                                        <li><a href="#" title="facebook"><i class="fa fa-facebook"></i></a></li>
                                        <li><a href="#" title="twitter"><i class="fa fa-twitter"></i></a></li>
                                        <li><a href="#" title="pinterest"><i class="fa fa-pinterest"></i></a></li>
                                        <li><a href="#" title="google+"><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href="#" title="linkedin"><i class="fa fa-linkedin"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Product Summery End -->
                </div>
            </div>

商品搜索頁

• shop.html 部分

  <div class="col-lg-9 order-first order-lg-last">
                    <!-- Shop Banner Start -->
                    <div class="single-banner mt-50 mb-50">
                        <a href="#"><img src="assets/images/banner/shop-banner-1.jpg" alt="" class="img-fluid"></a>
                    </div>
                    <!-- Shop Banner End -->
                    <!-- Shop Toolbar Start -->
                    <div class="toolbar-shop mb-50">
                        <div class="shop_toolbar_btn">
                            <button data-role="grid_3" class="btn-grid-3"></button>
                            <button data-role="grid_list" class="btn-list active"></button>
                        </div>
                        <div class="nice-select select-option">
                            <select name="select">
                                <option value="1">按名稱排序</option>
                                <option value="2">按編號排序</option>
                                <option value="3">按日期排序</option>
                                <option value="4">按類別排序</option>
                            </select>
                        </div>
                    </div>
                    <!-- Shop Toolbar End -->
                    <!-- Shop Wrapper Start -->
                    <div class="row shop-wrapper grid_list">
                        <div class="col-12 mb-20">
                            <div class="item-product pt-0">
                                <div class="product-thumb">
                                    <a href="#">
                                        <img src="assets/images/product/product-12.jpg" alt="" class="img-fluid">
                                    </a>
                                    <div class="box-label">
                                        <div class="label-product-new">
                                            <span>New</span>
                                        </div>
                                    </div>
                                    <div class="action-link">
                                        <a class="quick-view same-link" href="#" title="Quick view" data-toggle="modal"
                                            data-target="#modal_box" data-original-title="quick view"><i
                                                class="zmdi zmdi-eye zmdi-hc-fw"></i></a>
                                        <a class="compare-add same-link" href="compare.html" title="Add to compare"><i
                                                class="zmdi zmdi-refresh-alt"></i></a>
                                        <a class="wishlist-add same-link" href="#" title="Add to wishlist"><i
                                                class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
                                    </div>
                                </div>
                                <div class="product-caption">
                                    <div class="product-name">
                                        <a href="#">Natus erro at congue massa commodo sit dignissim</a>
                                    </div>
                                    <div class="rating">
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                    </div>
                                    <div class="price-box">
                                        <span class="regular-price">$320.00</span>
                                        <span class="old-price"><del>$350.50</del></span>
                                    </div>
                                    <div class="cart">
                                        <div class="add-to-cart">
                                            <a href="shopping-cart.html" title="Add to cart"><i
                                                    class="zmdi zmdi-shopping-cart-plus zmdi-hc-fw"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="grid-list-caption align-items-center">
                                    <div class="product-name">
                                        <a href="#">Natus erro at congue massa commodo sit dignissim</a>
                                    </div>
                                    <div class="rating">
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                    </div>
                                    <div class="price-box">
                                        <span class="regular-price">$30.00</span>
                                    </div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis ad, iure
                                        incidunt. Ab consequatur temporibus non eveniet inventore doloremque
                                        necessitatibus sed</p>
                                    <div class="text-available">
                                        <p><strong>Availabe:</strong><span> 99 In Stock</span></p>
                                    </div>
                                    <div class="action-link">
                                        <a class="quick-view same-link" href="#" title="Quick view" data-toggle="modal"
                                            data-target="#modal_box" data-original-title="quick view"><i
                                                class="zmdi zmdi-eye zmdi-hc-fw"></i></a>
                                        <a class="compare-add same-link" href="compare.html" title="Add to compare"><i
                                                class="zmdi zmdi-refresh-alt"></i></a>
                                        <a class="wishlist-add same-link" href="#" title="Add to wishlist"><i
                                                class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
                                    </div>
                                    <div class="cart-list-button">
                                        <a href="shopping-cart.html" class="cart-btn">Add To Cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 mb-20">
                            <!-- Single-Product-Start -->
                            <div class="item-product">
                                <div class="product-thumb">
                                    <a href="#">
                                        <img src="assets/images/product/product-11.jpg" alt="" class="img-fluid">
                                    </a>
                                    <div class="box-label">
                                        <div class="label-product-new">
                                            <span>New</span>
                                        </div>
                                    </div>
                                    <div class="action-link">
                                        <a class="quick-view same-link" href="#" title="Quick view" data-toggle="modal"
                                            data-target="#modal_box" data-original-title="quick view"><i
                                                class="zmdi zmdi-eye zmdi-hc-fw"></i></a>
                                        <a class="compare-add same-link" href="compare.html" title="Add to compare"><i
                                                class="zmdi zmdi-refresh-alt"></i></a>
                                        <a class="wishlist-add same-link" href="#" title="Add to wishlist"><i
                                                class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
                                    </div>
                                </div>
                                <div class="product-caption">
                                    <div class="product-name">
                                        <a href="#">Mirum est notare tellus eu nibh iaculis pretium</a>
                                    </div>
                                    <div class="rating">
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                    </div>
                                    <div class="price-box">
                                        <span class="regular-price">$320.00</span>
                                        <span class="old-price"><del>$350.50</del></span>
                                    </div>
                                    <div class="cart">
                                        <div class="add-to-cart">
                                            <a href="shopping-cart.html" title="Add to cart"><i
                                                    class="zmdi zmdi-shopping-cart-plus zmdi-hc-fw"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="grid-list-caption align-items-center">
                                    <div class="product-name">
                                        <a href="#">Mirum est notare tellus eu nibh iaculis pretium</a>
                                    </div>
                                    <div class="rating">
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                    </div>
                                    <div class="price-box">
                                        <span class="regular-price">$30.00</span>
                                    </div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis ad, iure
                                        incidunt. Ab consequatur temporibus non eveniet inventore doloremque
                                        necessitatibus sed</p>
                                    <div class="text-available">
                                        <p><strong>Availabe:</strong><span> 99 In Stock</span></p>
                                    </div>
                                    <div class="action-link">
                                        <a class="quick-view same-link" href="#" title="Quick view" data-toggle="modal"
                                            data-target="#modal_box" data-original-title="quick view"><i
                                                class="zmdi zmdi-eye zmdi-hc-fw"></i></a>
                                        <a class="compare-add same-link" href="compare.html" title="Add to compare"><i
                                                class="zmdi zmdi-refresh-alt"></i></a>
                                        <a class="wishlist-add same-link" href="#" title="Add to wishlist"><i
                                                class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
                                    </div>
                                    <div class="cart-list-button">
                                        <a href="shopping-cart.html" class="cart-btn">Add To Cart</a>
                                    </div>
                                </div>
                            </div>
                            <!-- Single-Product-End -->
                        </div>
                        <div class="col-12 mb-20">
                            <!-- Single-Product-Start -->
                            <div class="item-product">
                                <div class="product-thumb">
                                    <a href="#">
                                        <img src="assets/images/product/product-10.jpg" alt="" class="img-fluid">
                                    </a>
                                    <div class="action-link">
                                        <a class="quick-view same-link" href="#" title="Quick view" data-toggle="modal"
                                            data-target="#modal_box" data-original-title="quick view"><i
                                                class="zmdi zmdi-eye zmdi-hc-fw"></i></a>
                                        <a class="compare-add same-link" href="compare.html" title="Add to compare"><i
                                                class="zmdi zmdi-refresh-alt"></i></a>
                                        <a class="wishlist-add same-link" href="#" title="Add to wishlist"><i
                                                class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
                                    </div>
                                </div>
                                <div class="product-caption">
                                    <div class="product-name">
                                        <a href="#">Porro quisquam eget feugiat pretium sodales</a>
                                    </div>
                                    <div class="rating">
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                    </div>
                                    <div class="price-box">
                                        <span class="regular-price">$320.00</span>
                                        <span class="old-price"><del>$350.50</del></span>
                                    </div>
                                    <div class="cart">
                                        <div class="add-to-cart">
                                            <a href="shopping-cart.html" title="Add to cart"><i
                                                    class="zmdi zmdi-shopping-cart-plus zmdi-hc-fw"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="grid-list-caption align-items-center">
                                    <div class="product-name">
                                        <a href="#">Porro quisquam eget feugiat pretium sodales</a>
                                    </div>
                                    <div class="rating">
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                    </div>
                                    <div class="price-box">
                                        <span class="regular-price">$30.00</span>
                                    </div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis ad, iure
                                        incidunt. Ab consequatur temporibus non eveniet inventore doloremque
                                        necessitatibus sed</p>
                                    <div class="text-available">
                                        <p><strong>Availabe:</strong><span> 99 In Stock</span></p>
                                    </div>
                                    <div class="action-link">
                                        <a class="quick-view same-link" href="#" title="Quick view" data-toggle="modal"
                                            data-target="#modal_box" data-original-title="quick view"><i
                                                class="zmdi zmdi-eye zmdi-hc-fw"></i></a>
                                        <a class="compare-add same-link" href="compare.html" title="Add to compare"><i
                                                class="zmdi zmdi-refresh-alt"></i></a>
                                        <a class="wishlist-add same-link" href="#" title="Add to wishlist"><i
                                                class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
                                    </div>
                                    <div class="cart-list-button">
                                        <a href="shopping-cart.html" class="cart-btn">Add To Cart</a>
                                    </div>
                                </div>
                            </div>
                            <!-- Single-Product-End -->
                        </div>

                    </div>
                    <!-- Shop Wrapper End -->
                    <!-- Shop Toolbar Start -->
                    <div class="toolbar-shop toolbar-bottom">
                        <div class="page-amount">
                            <p>10條</p>
                        </div>
                        <div class="pagination">
                            <ul>
                                <li class="previous"><a href="#"><i class="fa fa-angle-left"></i> Previous</a></li>
                                <li class="current">1</li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li class="next"><a href="#">Next <i class="fa fa-angle-right"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- Shop Toolbar End -->
                </div>

• shop,js

function getProduct(page = 1, limit = 9) {
    let searchName = sessionStorage.getItem("searchName");
    let searchId = sessionStorage.getItem("searchId");
    console.log(searchId);
    if (!isNull(searchName)){
        $("#searchName").val(searchName);
    }else{
        searchName = "";
    }
    if (!isNull(searchId)){
        $("#searchId").val(searchId);
        $(".list li[data-value=1]").removeClass("selected");
        $(".top-cat .current").text($('#searchId').find('option:selected').text());
        $(".list li[data-value='"+searchId+"']").addClass("selected focus");
    }
    let data = {
        "page": page,
        "limit": limit,
        "name": searchName,
        "id": searchId,
    }
    $.ajax({
        type: "GET", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/goods/list",
        data: data,
        success: function (result) {
            if (result.status == 200) {
                shouProduct(result.data.list, result.data.totalCount, result.data.currPage, result.data.totalPage);
            } else if (result.status == 404) {
                console.log("getProduct: 404----"+result.msg);
                //location.href = "404.html";
                return;
            } else {
                alert(result.msg);
            }
        },
        error: function () {
            //location.href="404.html";
            console.log("接口異常");
            return;
        }
    });
}

function getContent(goods) {
    return str = `<div class="col-12 mb-20">
        <div class="item-product pt-0">
            <div class="product-thumb">
                <a href="#">
                    <img src="${goods.main_image}" alt="" class="img-fluid">
                </a>
                <div class="action-link">
                    <a class="quick-view same-link" href="#" title="查看詳情" οnclick="shopDetail(${goods.id})"><i class="zmdi zmdi-eye zmdi-hc-fw"></i></a>
                    <a class="compare-add same-link" href="#" title="查找類似產品"><i class="zmdi zmdi-refresh-alt"></i></a>
                    <a class="wishlist-add same-link" href="#" title="添加到心願單"><i class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
                </div>
            </div>
            <div class="product-caption">
                <div class="product-name">
                    <a href="#" οnclick="shopDetail(${goods.id})" >${goods.name}</a>
                </div>
                <div class="rating">
                    <span class="yellow"><i class="fa fa-star"></i></span>
                    <span class="yellow"><i class="fa fa-star"></i></span>
                    <span class="yellow"><i class="fa fa-star"></i></span>
                    <span class="yellow"><i class="fa fa-star"></i></span>
                    <span class="yellow"><i class="fa fa-star"></i></span>
                </div>
                <div class="price-box">
                    <span class="regular-price">${goods.price}</span>
                </div>
                <div class="cart">
                    <div class="add-to-cart">
                        <a href="#" title="添加到購物車" οnclick="addCart(${goods.id})"><i class="zmdi zmdi-shopping-cart-plus zmdi-hc-fw"></i></a>
                    </div>
                </div>
            </div>
            <div class="grid-list-caption align-items-center">
                <div class="product-name">
                    <a href="#" οnclick="shopDetail(${goods.id})">${goods.name}</a>
                </div>
                <div class="rating">
                    <span class="yellow"><i class="fa fa-star"></i></span>
                    <span class="yellow"><i class="fa fa-star"></i></span>
                    <span class="yellow"><i class="fa fa-star"></i></span>
                    <span class="yellow"><i class="fa fa-star"></i></span>
                    <span class="yellow"><i class="fa fa-star"></i></span>
                </div>
                <div class="price-box">
                    <span class="regular-price">${goods.price}</span>
                </div>
                <p>${goods.detail}</p>
                <div class="text-available">
                    <p><strong>庫存量：</strong><span>${goods.stock}</span></p>
                </div>
                <div class="action-link">
                    <a class="quick-view same-link" href="#" title="查看詳情" οnclick="shopDetail(${goods.id})"><i class="zmdi zmdi-eye zmdi-hc-fw"></i></a>
                    <a class="compare-add same-link" href="#" title="查找相似產品"><i class="zmdi zmdi-refresh-alt"></i></a>
                    <a class="wishlist-add same-link" href="#" title="添加到心願單"><i class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
                </div>
                <div class="cart-list-button">
                    <a href="#" class="cart-btn" οnclick="addCart(${goods.id})">添加到購物車</a>
                </div>
            </div>
        </div>
    </div>`
}

function shouProduct(data, totalCount, currPage, totalPage) {
    $list = $(".shop-wrapper");
    $list.empty();
    for (let i = 0, len = data.length; i < len; ++i) {
        $list.append(getContent(data[i]));
    }
    $(".page-amount p").text("共搜索到數據：" + totalCount + " 條");
    $pagination = $(".pagination ul");
    $pagination.empty();
    if (currPage == 1) {
        $pagination.append('<li class="previous"><a href="#" οnclick=><i class="fa fa-angle-left"></i>上一頁</a></li>');
    } else {
        $pagination.append(`<li class="previous"><a href="#" οnclick="getProduct(${currPage-1})"><i class="fa fa-angle-left"></i>上一頁</a></li>`);
    }
    if (totalPage <= 5||(currPage<3)) {
        for (let i = 1; i <= totalPage &&i<5; ++i) {
            if (i == currPage) {
                $pagination.append(`<li class="current">${i}</li>`);
            } else {
                $pagination.append(`<li><a href="#" οnclick="getProduct(${i})">${i}</a></li>`);
            }
        }
    } else if(currPage>=3){
        $pagination.append(`<li><a href="#" οnclick="getProduct(${currPage-2})">${currPage-2}</a></li>`);
        $pagination.append(`<li><a href="#" οnclick="getProduct(${currPage-1})">${currPage-1}</a></li>`);
        $pagination.append(`<li class="current">${currPage}</li>`);
        if(currPage+1<=totalPage){
            $pagination.append(`<li><a href="#" οnclick="getProduct(${currPage+1})">${currPage+1}</a></li>`);
        }
        if(currPage+2<=totalPage){
            $pagination.append(`<li><a href="#" οnclick="getProduct(${currPage+2})">${currPage+2}</a></li>`);
        }
    }
    if (currPage == totalPage) {
        $pagination.append('<li class="previous"><a href="#" οnclick=><i class="fa fa-angle-right"></i>下一頁</a></li>');
    } else {
        $pagination.append(`<li class="previous"><a href="#" οnclick="getProduct(${currPage+1})"><i class="fa fa-angle-right"></i>下一頁</a></li>`);
    }
}



$(function () {
    checkUsername();
    checkCart();
    getProduct();
});

購物車

• shopping-cart.html

    <div class="cart-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <form action="#" class="cart-form">
                        <!-- Cart Title Start -->
                        <div class="cart-title">
                            <h5 class="last-title mt-50 mb-20">購物車</h5>
                        </div>
                        <!-- Cart Title End -->
                        <!-- Cart Table Area Start -->
                        <div class="table-desc">
                            <div class="cart-page table-responsive">
                                <table>
                                    <thead>
                                        <tr>
                                            <th class="product-remove">選中</th>
                                            <th class="product-image">圖片</th>
                                            <th class="product-name">產品名</th>
                                            <th class="product-price">產品價格</th>
                                            <th class="product-quantity">購買數量</th>
                                            <th class="product-remove">刪除</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="product-remove"><input type="checkbox" name="" id=""></td>
                                            <td class="product-image"><a href="#"><img src="assets/images/feature/feature-4.jpg" alt=""></a></td>
                                            <td class="product-name"><a href="#">Natus erro at congue massa commodo sit dignissim</a></td>
                                            <td class="product-price">£65.00</td>
                                            <td class="product-quantity"><label>Quantity</label> <input min="1" max="100" value="1" type="number" default="1"></td>
                                           <td class="product-remove"><a href="#"><i class="fa fa-trash-o"></i></a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="cart-submit">
                            <input type="checkbox" onclick="selectAll(this)" id="selAll"> <label for="selAll">全選</label>&nbsp;&nbsp;&nbsp;
                                <button type="button" class="btn btn-info" onclick="saveAll()">保存信息</button>&nbsp;&nbsp;&nbsp;
                                <button type="button" class="btn btn-success" onclick="buy()">購買</button>
                            </div>
                        </div>
                        <!-- Cart Table Area End -->
                        <!-- Coupon Area Start -->
                        <!-- <div class="coupon-area">
                            <div class="row">
                                <div class="col-lg-6 col-md-6">
                                    <div class="coupon-code left">
                                        <h3>Coupon</h3>
                                        <div class="coupon-inner">
                                            <p>Enter your coupon code if you have one.</p>
                                            <input placeholder="Coupon code" type="text">
                                            <button type="submit">Apply coupon</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6">
                                    <div class="coupon-code right">
                                        <h3>Cart Totals</h3>
                                        <div class="coupon-inner">
                                            <div class="cart-subtotal">
                                                <p>Subtotal</p>
                                                <p class="cart-amount">£215.00</p>
                                            </div>
                                            <div class="cart-subtotal ">
                                                <p>Shipping</p>
                                                <p class="cart-amount"><span>Flat Rate:</span> £255.00</p>
                                            </div>
                                            <a href="#">Calculate shipping</a>

                                            <div class="cart-subtotal">
                                                <p>Total</p>
                                                <p class="cart-amount">£215.00</p>
                                            </div>
                                            <div class="checkout-btn">
                                                <a href="#">Proceed to Checkout</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <!-- Coupon Area End -->
                    </form>
                </div>
            </div>
        </div>
    </div>

• cart.js

function getProduct(ids){
    console.log(ids);
    $.ajax({
        type: "GET", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/goods/gets",
        traditional: true, // 取消jquery序列化時的深度序列化
        data:{"ids":ids},
        success: function(result) {
            if (result.status == 200){
                showData(result.data);
            }else if(result.status == 404){
                location.href="404.html";
                //console.log(result.msg+"----getProduct");
                return;
            }else{    
                console.log(result.msg);
                return null;
            }
           
        },
        error: function() {
            location.href="404.html";
            //console.log("接口異常");
            return;
        }
    });
}

function getCartByUser(token,ids){
    $.ajax({
        type: "GET", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/cart/getlist",
        data:{"ids":ids},
        traditional: true, // 取消jquery序列化時的深度序列化
        beforeSend: function (request) {
            request.setRequestHeader("token", token);
        },
        success: function (result) {
            if (result.status ==200){
                showData(result.data.CartProductVoList);
            } else if (result.status == 404) {
                location.href = "404.html";
                //console.log(result.msg+"----getCartByUser")
                return;
            }else{
                alert(result.msg);
            }
        },
        error: function () {
            location.href="404.html";
            //console.log("接口異常");
            return;
        }
    });
}

function getContent(good,index){
    return `<tr><td class="product-id"><input type="checkbox" value="${good.id}"></td>
    <td class="product-image"><a href="#"><img src="${good.product_main_image}" alt="" style="height:100px;width:100px;"></a></td>
    <td class="product-name"><a href="#">${good.product_name}</a></td>
    <td class="product-price">￥${good.product_price}</td>
    <td class="product-quantity"><label>Quantity</label> <input min="1" max="${good.product_stock}" value="${good.quantity}" defaultValue="${good.quantity}" type="number"></td>
    <td class="product-remove"><a href="#" οnclick="delCart(${good.id},${index})"><i class="fa fa-trash-o"></i></a></td></tr>`
}

function showData(data){
    //console.log(data);
    if(isNull(data)){ 
        return;
    }
    $.cookie("goodCartIdLen",data.length);
    $table=$(".table-desc tbody");
    $table.empty();
    for(let i=0, len = data.length; i < len; ++i){
        $table.append(getContent(data[i],i));
    }
}

function delCart(id,index){
    let token = sessionStorage.getItem("token");
    let len = $.cookie("goodCartIdLen")-1;
    $.cookie("goodCartIdLen",len);
    if (isNull(token)) {
        let idList = $.cookie("goodCartId").split(",");
        idList.splice(index,1);
        $(".table-desc tbody tr:eq("+index+")").remove();
        return ;
    }
    $.ajax({
        type: "DELETE", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/cart/del/"+id,
        beforeSend: function (request) {
            request.setRequestHeader("token", token);
        },
        success: function (result) {
            if (result.status ==200){
                $(".table-desc tbody tr:eq("+index+")").remove();
                return ;
            } else if (result.status == 404) {
                location.href = "404.html";
                //console.log(result.msg+"---delCart");
                return;
            }else{
                alert(result.msg);
            }
        },
        error: function () {
            location.href="404.html";
            //console.log("接口異常");
            return;
        }
    });
}

function getData(){
    let token = sessionStorage.getItem("token");
    let ids = $.cookie("goodCartId");
    let idList ;
    if(isNull(ids)){
        idList = [];
    }else{
        idList = ids.split();
    }
    if (isNull(token)) {
        getProduct(idList);
    } else {
        getCartByUser(token,idList);
        $.cookie("goodCartId",null);
    }
}

function selectAll(check) {
    $(".table-desc tbody input[type=checkbox]").prop("checked",check.checked);
}

$(function(){
    checkUsername();
    getData();
});

function saveCart(id,num,index){
    let token = sessionStorage.getItem("token");
    if (isNull(token)) {
        alert("登錄已過期，修改信息請先登錄");
        window.location.href = "login.html";
        return;
    }
    $.ajax({
        type: "PUT", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/cart/update/"+id,
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({"num":num}),
        beforeSend: function (request) {
            //設置header值
            request.setRequestHeader("token", token);
        },
        success: function (result) {
            if (result.status == 404) {
                //console.log("saveCart----"+result.msg);
                location.href = "404.html";
                return;
            } else if (result.status == 200) {
                $(".table-desc tbody tr .product-quantity:eq("+index+") input").attr("defaultValue",num);
            }

        },
        error: function () {
            //console.log("接口異常----saveCart");
            location.href="404.html";
            return;
        }
    });
}

function saveAll(){
    $(".table-desc tbody tr").each(function(index){
        let defaultValue = $(".table-desc tbody tr .product-quantity:eq("+index+") input").attr("defaultValue");
        let num = $(".table-desc tbody tr .product-quantity:eq("+index+") input").val();
        console.log("saveAll---"+defaultValue+"---"+num);
        if (defaultValue != num){
            let id =  $(".table-desc tbody tr .product-id:eq("+index+") input").val();
            console.log("id----"+id);
            saveCart(id,num,index);
        }
    });
    return false;
}


/**
 * @description 當用戶選擇某幾個商品時可以進行購買，先檢查登錄，驗證是否選擇，
 *      並對信息進行保存，再發送請求，處理成功後可以跳轉到登錄頁
 */
function buy(){
    let token = sessionStorage.getItem("token");
    if (isNull(token)) {
        alert("登錄已過期，修改信息請先登錄");
        window.location.href = "login.html";
        return;
    }
    let a = [];
    $(".product-id input[type=checkbox]").each(function(index){
        if($(this).prop('checked')){
            console.log(index+"---"+$('.product-quantity input:eq('+index+')'));
            a.push({"id":$(this).val(),"quantity":$('.product-quantity input:eq('+index+')').val()});
        }
        
    });
    if (a.length == 0){
        return ;
    }
    $.ajax({
        type: "POST", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/order/add",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(a),
        beforeSend: function (request) {
            request.setRequestHeader("token", token);//設置header值
        },
        success: function (result) {
            console.log(result);
            if (result.status == 200) {
                sessionStorage.setItem("orderId",result.data);
                if(confirm("前往訂單詳情頁查看")){
                    location.href="orderDetail.html";
                }else{
                    getCartByUser(token);
                }
                //console.log(result);
            } else if (result.status == 404) {
                console.log("buy---"+result.msg);
                //window.location.href = '404.html';
            }
        },
        error: function () {
            console.log("接口異常----buy");
            //location.href="404.html";
            return;
        }
    });
}