Chương 11-Bài 9. Tạo giỏ hàng (cart sidebar)

Thực hiện tạo trang giỏ hàng (cart sidebar) trong trang chủ

Step 1: hiệu chỉnh giao diện Cart sidebar

Hiệu chỉnh file resources/views/frontend/layouts/partials/cart.blade.php

<div class="wrap-header-cart js-panel-cart">
  <div class="s-full js-hide-cart"></div>

  <div class="header-cart flex-col-l p-l-65 p-r-25">
    <div class="header-cart-title flex-w flex-sb-m p-b-8">
      <span class="mtext-103 cl2">
        Giỏ hàng
      </span>

      <div class="fs-35 lh-10 cl2 p-lr-5 pointer hov-cl1 trans-04 js-hide-cart">
        <i class="zmdi zmdi-close"></i>
      </div>
    </div>
    
    <div class="header-cart-content flex-w js-pscroll">
      <!-- Sử dụng plugin ngCart AngularJS để hiển thị Giỏ hànng -->
      <ngcart-cart template-url="{{ asset('vendor/ngCart/template/ngCart/sidebar-cart.html') }}"></ngcart-cart>
    </div>
  </div>
</div>

Step 2: bổ sung template sidebar-cart trong plugin ngCart

Tạo mới file public/vendor/ngCart/template/ngCart/sidebar-cart.html

<div class="alert alert-warning" role="alert" ng-show="ngCart.getTotalItems() === 0">
    Giỏ hàng trống
</div>

<div class="table-responsive col-lg-12 ngCart cart" ng-show="ngCart.getTotalItems() > 0">
    <ul class="header-cart-wrapitem w-full">
        <li class="header-cart-item flex-w flex-t m-b-12" ng-repeat="item in ngCart.getCart().items track by $index">
            <div class="header-cart-item-img">
                <img src="<% item.getData().sp_hinh_url %>" alt="IMG">
            </div>
    
            <div class="header-cart-item-txt p-t-8">
                <a href="/san-pham/<% item.getId() %>" class="header-cart-item-name m-b-18 hov-cl1 trans-04 title">
                    <% item.getName() %>
                </a>
                
                <span class="header-cart-item-info">
                    <% item.getQuantity() | number %> x <% item.getPrice() | currency %>
                </span>

                <span ng-click="ngCart.removeItemById(item.getId())" class="glyphicon glyphicon-remove remove">Xóa</span>
            </div>
        </li>
    </ul>
</div>

<div class="w-full">
    <div class="header-cart-total w-full p-tb-40" ng-show="ngCart.getTax()">
        Thuế (<% ngCart.getTaxRate() %>%): <% ngCart.getTax() | currency %>
    </div>
    <div class="header-cart-total w-full p-tb-40" ng-show="ngCart.getShipping()">
        Shipping: <% ngCart.getShipping() | currency %>
    </div>
    <div class="header-cart-total w-full p-tb-40">
        Tổng thành tiền: <% ngCart.totalCost() | currency %>
    </div>

    <div class="header-cart-buttons flex-w w-full">
        <a href="/gio-hang" class="flex-c-m stext-101 cl0 size-107 bg3 bor2 hov-btn3 p-lr-15 trans-04 m-r-8 m-b-10">
            Xem giỏ hàng
        </a>

        <a href="/gio-hang" class="flex-c-m stext-101 cl0 size-107 bg3 bor2 hov-btn3 p-lr-15 trans-04 m-b-10">
            Thanh toán
        </a>
    </div>
</div>
<style>
    .ngCart.cart span[ng-click] {
        cursor: pointer;
    }
    .ngCart.cart .glyphicon.disabled {
        color:#aaa;
    }
    .ngCart.cart .title {
        color: blue;
        font-weight: bold;
    }
    .ngCart.cart .remove {
        color: red;
    }
</style>

Step 3: bổ sung nút summary cart trên menu header

Hiệu chỉnh file  resources/views/frontend/layouts/partials/header.blade.php

<!-- Icon header -->
<div class="wrap-icon-header flex-w flex-r-m">
  <div class="icon-header-item cl2 hov-cl1 trans-04 p-l-22 p-r-11 js-show-modal-search">
    <i class="zmdi zmdi-search"></i>
  </div>

  <!-- Hiển thị nút summart cart -->
  <ngcart-summary class="js-show-cart" template-url="{{ asset('vendor/ngCart/template/ngCart/summary.html') }}"></ngcart-summary>

  <a href="#" class="dis-block icon-header-item cl2 hov-cl1 trans-04 p-l-22 p-r-11 icon-header-noti" data-notify="0">
    <i class="zmdi zmdi-favorite-outline"></i>
  </a>
</div>

Step 4: hiệu chỉnh template summary-cart trong plugin ngCart

Hiệu chỉnh file public/vendor/ngCart/template/ngCart/summary.html

<div class="icon-header-item cl2 hov-cl1 trans-04 p-l-22 p-r-11 icon-header-noti js-show-cart" data-notify="<% ngCart.getTotalItems() %>">
  <i class="zmdi zmdi-shopping-cart"></i>
  <% ngCart.totalCost() | currency %>
</div>