睿乐购电商课程设计——商品模块

﹏ヽ暗。殇╰゛Y 2023-02-23 03:38 61阅读 0赞

### 睿乐购电商课程设计——商品模块 ###

*   *   *  商品详情页
         *  商品搜索页
         *  购物车

### 商品详情页 ###

*  `detail.js`

*  `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">
                            
                            <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>
                            
                            
                            <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>
                            
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-5 col-12 mt-45">
                        
                        <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>
                        
                    </div>
                </div>

### 商品搜索页 ###

*  `shop.html` 部分

<div class="col-lg-9 order-first order-lg-last">
                        
                        <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>
                        
                        
                        <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>
                        
                        
                        <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">
                                
                                <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>
                                
                            </div>
                            <div class="col-12 mb-20">
                                
                                <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>
                                
                            </div>
    
                        </div>
                        
                        
                        <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>
                        
                    </div>

*  `shop,js`

### 购物车 ###

*  `shopping-cart.html`

<div class="cart-area">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <form action="#" class="cart-form">
                            
                            <div class="cart-title">
                                <h5 class="last-title mt-50 mb-20">购物车</h5>
                            </div>
                            
                            
                            <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>   
                                    <button type="button" class="btn btn-info" onclick="saveAll()">保存信息</button>   
                                    <button type="button" class="btn btn-success" onclick="buy()">购买</button>
                                </div>
                            </div>
                            
                            
                            
                            
                        </form>
                    </div>
                </div>
            </div>
        </div>

*  `cart.js`