[Series viết theme bán hàng Woocommerce] 6. Tạo nút thêm giỏ hàng và giỏ hàng mini

Cập nhật lần cuối: 05 Tháng Mười 2023

WordPress

3,032 Lượt xem

Đến bài viết này thì website bán hàng cơ bản đã được hoàn thành, có thể hiển thị sản phẩm lên trang chủ, danh mục sản phẩm và đã có trang chi tiết sản phẩm. Đến phần này bạn có hai hướng để lựa chọn phát triển, một là không dùng giỏ hàng mà sử dụng các form liên hệ để thu thập thông tin khách hàng như tên và số điện thoại, tuy nhiên nó sẽ rất bất tiện nếu khách hàng của bạn không chỉ muốn mua một sản phẩm. Giỏ hàng thứ cần thiết trong một website thương mại, Woocommerce đã có sẵn tính năng này để chúng ta tích hợp vào theme. Trong bài viết này, mình sẽ hướng dẫn bạn cách tích hợp nút thêm giỏ hàng vào sản phẩm, đồng thời hướng dẫn tạo ra giỏ hàng mini nằm trên thanh menu.

Thêm HTML giỏ hàng mini cho website

Trong giao diện mẫu mình đang sử dụng không có giỏ hàng mini, vì thế nên mình sẽ thêm đoạn giỏ hàng mini vào. Bạn tìm đến Thẻ <li> của giỏ hàng trong file header.php và thay thành đoạn sau

<li id="topcartlink" class="dropdown">
  <a href="/cart" class="ico-cart dropdown-toggle minicart-anchor" data-hover="dropdown">
    <span class="cart-label"><i class="fa fa-shopping-cart"></i> Giỏ hàng</span>
    <span class="cart-qty">(2)</span>
    <i class="fa fa-angle-down"></i>
  </a>
 
  <ul class="minicart-dropdown-menu">
    <div class="slimScrollDiv">
    <li>
      <div id="flyout-cart" class="flyout-cart">
         <div class="mini-shopping-cart">
 
           <div class="count">
              Có <a href="/cart" class="items">2 sản phẩm</a> trong giỏ hàng. 
           </div>
 
           <div class="items ">
              <div class="item first row">
                 <div class="col-md-4">
                    <div class="picture">
                        <a href="link_san_pham" title="Tên sản phẩm">
                           <img alt="Hình sản phẩm" src="hinh.jpeg" title="Tên sản phẩm">
                        </a>
                    </div>
                 </div>
                 <div class="col-md-8">
                    <div class="product">
                       <div class="name">
                          <a href="link_san_pham">Tên sản phẩm</a>
                       </div>
                       <div class="price">Giá sản phẩm: <span>$56.00</span></div>
                       <div class="quantity">Số lượng: <span>1</span></div>
                    </div>
                 </div>
              </div>
          </div>
 
          <div class="totals">Tổng: <strong>$112.00</strong></div>
          <div class="buttons">
             <input type="button" value="Go to cart" class="btn btn-primary" onclick="setLocation('/cart')">
          </div>
       </div>
    </div>
   </li>
 </div>
 </ul>
 </li>

Sau đó bạn thêm một đoạn CSS cho phần này, bạn mở file main.css và thêm vào dưới cùng đoạn sau:

ul.minicart-dropdown-menu { color: #ffffff; }ul.minicart-dropdown-menu { color: #ffffff; }
#topcartlink:hover > ul.minicart-dropdown-menu { display: block; -webkit-animation: fadeInUp 400ms; -moz-animation: fadeInUp 400ms; -ms-animation: fadeInUp 400ms; -o-animation: fadeInUp 400ms; animation: fadeInUp 400ms; }
 #topcartlink ul.minicart-dropdown-menu { position: absolute; top: 30px; left: -50%; background: rgba(0, 0, 0, 0.6); list-style: none; padding: 0; margin: 0; width: 300px; height: 400px; overflow-y: hidden; -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); display: none; z-index: 999; }
 #topcartlink ul.minicart-dropdown-menu li .active { padding-left: 0; }

#topcartlink ul.minicart-dropdown-menu li { padding: 10px 20px 0; }
 #topcartlink ul.minicart-dropdown-menu li:last-child { padding-bottom: 20px; }
 #topcartlink ul.minicart-dropdown-menu li a { color: #fff; background: none; }
 #topcartlink ul.minicart-dropdown-menu li a:hover { }
#topcartlink ul.minicart-dropdown-menu .item { padding: 0px; }

.fa-angle-down { padding-left: 5px; }
@-webkit-keyframes fadeInUp {    0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); }
    100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }}

Sau khi thêm bạn sẽ thấy giao diện có dạng như sau:

Giao diện mini cart sau khi thêm

Bây giờ mình có thể làm các công việc còn lại được rồi.

Tạo nút giỏ hàng cho theme

Trong các bài trước mình đã có tích hợp cả nút thêm vào giỏ hàng rồi, nhưng mình không có nói rõ nên mình sẽ giải thích những nút thêm vào giỏ hàng đó một tí.

Bạn mở file content.php và tìm đến dòng sau:

 <a href="?add-to-cart=<?php echo $product->get_id();?>" class="btn btn-default add-to-cart">
   <i class="fa fa-shopping-cart"></i>Thêm vào giỏ hàng
 </a>

Trong đoạn trên, bạn chú ý phần href của thẻ <a>, nó chứa một đường dẫn sử dụng phương thức GET để truyền một ID sản phẩm với tên biến là add-to-cart.

Bây giờ bạn mở file content-single-product.php trong thư mục woocommerce của theme bạn tìm đến đoạn code sau:

<form method="post" class="form-inline cart" enctype="multipart/form-data">
 <div class="form-group">
   <label for="exampleInputName2"><b>Số lượng:</b></label>
   <div class="custom custom-btn-number form-control">
     <input type="text" pattern="[0-9]*" class="input-text qty" id="qty" min="1" title="SL" max="100" max inputmode="numeric" value="1" maxlength="3" name="quantity" onkeyup="valid(this,'numbers')" onblur="valid(this,'numbers')">
     <button onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;" class="increase items-count2" type="button"><i class="fa fa-plus"></i></button>
     <button onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) &amp;&amp; qty &gt; 1 ) result.value--;return false;" class="reduced items-count2" type="button"><i class="fa fa-minus"></i></button>
   </div>
   <button type="submit" name="add-to-cart" value="<?php echo get_the_id();?>" class="btn btn-lg btn-style btn-cart add_to_cart" title="Cho vào giỏ hàng">Cho vào giỏ hàng</button>
  </div>
 </form>

Khi form này được submit, hai giá trị sẽ được gửi đi bao gồm add-to-cart với ID sản phẩm và quantity với số lượng sản phẩm.

Các biến và giá trị bạn có thể sử dụng như sau:

add-to-cart: thêm vào sản phẩm với giá trị là ID sản phẩm. Ví dụ ?add-to-cart=1.
quantity: số lượng cần thêm vào sản phẩm với giá trị là số nguyên. Ví dụ: ?add-to-cart=1&quantity=2.
attribute_pa_{slug_thuộc_tính}: thêm vào giỏ hàng sản phẩm có thuộc tính với giá trị là slug của một thuộc tính con. Ví dụ: ?add-to-cart=1&quantity=2&attribute_pa_color=black. Bạn có thể kết hợp nhiều thuộc tính với nhau. ví dụ: ?add-to-cart=1&quantity=2&attribute_pa_color=black&attribute_pa_version=128gb
quantity[ID_sản_phẩm]=1: Khi muốn thêm nhiều sản phẩm, bạn sử dụng add-to-cart cho sản phẩm đầu và quantity cho các sản phẩm sau. Ví dụ: ?add-to-cart=111&quantity[122]=1&quantity[133]=1.

Lưu ý: nếu bạn sử dụng thẻ <base> thì bạn phải đưa cả url vào trước dấu ? để tránh lỗi nhé.

Tạo giỏ hàng mini trong theme

Woocomerce đã hỗ trợ các thành phần giỏ hàng cho theme tại thư mục cart của woocommerce. Với giỏ hàng mini bạn có thể sử dụng hàm woocommerce_mini_cart() để hiển thị giỏ hàng mini tại vị trí cần. Tuy nhiên mình sẽ không làm như vậy vì sẽ mất công CSS lại trong file mini-cart.php, và mình cũng không muốn đụng đến cấu trúc của file này. Mình sẻ sử dụng các thành phần trong file này để lắp ghép vào trong theme. Thay đoạn thẻ <li> cũ thành như sau:

<li>
 <div id="flyout-cart" class="flyout-cart">
  <div class="mini-shopping-cart">
   <div class="count">
     Có <a href="<?php echo wc_get_cart_url(); ?>" class="items"><?php echo $total;?> sản phẩm</a> trong giỏ hàng. 
   </div>
   <div class="items ">
   <?php
 global $woocommerce;
 $items = $woocommerce->cart->get_cart();
 $totalcart;
 $haveitems = 0;
 foreach($items as $item => $values) { 
 $_product = apply_filters( 'woocommerce_cart_item_product', $values['data'], $values, $item );
 if ( $_product && $_product->exists() && $values['quantity'] > 0){
 $haveitems = 1;
 $_product = wc_get_product( $values['data']->get_id() );
 
 $linkpro= get_permalink( $values['product_id'] );
 $titlepro= $_product->get_title();
 $getProductDetail = wc_get_product( $values['product_id'] );
 $imgpro = $getProductDetail->get_image(array(80,80));
 $pricepro = get_post_meta($values['product_id'] , '_price', true);
 $quantitypro = $values['quantity'];
 
 ?>
   <div class="item first row">
      <div class="col-md-4">
         <div class="picture">
           <a href="<?php echo $linkpro; ?>" title="<?php echo $titlepro; ?>">
              <?php echo $imgpro; ?>
           </a>
         </div>
      </div>
      <div class="col-md-8">
        <div class="product">
          <div class="name">
             <a href="<?php echo $linkpro; ?>"><?php echo $titlepro; ?></a>
          </div>
          <div class="price">Giá sản phẩm: <span><?php echo $pricepro; ?></span></div>
          <div class="quantity">Số lượng: <span><?php echo $quantitypro; ?></span></div>
        </div>
      </div>
    </div>
    <?php 
    }
  }
 ?>
 
   </div>
 
    <div class="totals">Tổng: <strong><?php echo WC()->cart->get_cart_subtotal(); ?></strong></div>
    <div class="buttons">
      <a class="btn btn-primary" href="<?php echo wc_get_cart_url(); ?>">Vào giỏ hàng</a>
    </div>
   </div>
 </div>

 </li>
 </div>
 </ul>
 </li>

Sau khi thêm kết quả sẽ như sau: