Hướng Dẫn Tự Tạo Giỏ Hàng Cho WordPress

Hướng Dẫn Tự Tạo Giỏ Hàng Cho WordPress

Thời gian gần đây, có nhiều bạn hỏi về cách tạo giỏ hàng cho WordPress không dùng plugin (đặc biệt là WooCommerce). Cá nhân Hoàng An cũng từng làm giỏ hàng bằng cách không sử dụng plugin cho các dự án thiết kế website WordPress của mình.

Hôm nay tôi xin hướng dẫn các bạn tự tạo giỏ hàng cho WordPress không dùng plugin. Tất nhiên không sử dụng plugin thì chúng ta phải sử dụng code.

Có rất nhiều cách để có thể tạo giỏ hàng, trong bài viết này tôi hướng dẫn các bạn tạo giỏ hàng bằng cách sử dụng Session

Đăng ký query var để truyền thao tác (Thêm, xóa) và lưu ID sản phẩm

Bạn mở file functions.php trong theme bạn đang sử dụng và thêm đoạn code sau:

function insert_query_vars($vars) {
    array_push($vars, 'pro_id'); //lưu id sản phẩm
    array_push($vars, 'action'); //lưu thao tác (thêm, xóa)
    return $vars;
}
add_filter('query_vars', 'insert_query_vars');

Đăng ký Rules để Rewrite URL khi thêm sản phẩm vào giỏ hàng

Đường dẫn khi thêm vào giỏ hàng có cấu trúc như sau: https://hoangan.net/gio-hang/them/2 (Trong đó: 2 là ID sản phẩm)

Bạn chỉ thêm đoạn code sau vào file functions.php của theme:

function rewrite_rules($rules) {
    $new_rules = array();
    $new_rules['(gio-hang)/(them|xoa)/([0-9]+)/?'] = 'index.php?pagename=$matches[1]&action=$matches[2]&pro_id=$matches[3]';
    return $new_rules + $rules;
    echo $matches[2];

}
add_action('rewrite_rules_array', 'rewrite_rules');

Tiếp theo, tại trang sản phẩm bạn hãy chèn link thêm vào giỏ như sau:

<a href="<?php bloginfo('url') ?>/gio-hang/them/<?php the_ID(); ?>">Thêm vào giỏ</a>

Đăng ký Session để giỏ hàng hoạt động

Như tôi đã nói ở trên giỏ hàng tôi sử dụng session, vậy nên tôi sẽ phải đăng ký session

Bạn chỉ cần đoạn code sau vào file functions.php của theme

add_action( 'init', 'pveser_start_session' );
function pveser_start_session() {
    if ( !session_id() ) {
        session_start();
    }

Tạo Page Template để lưu trữ giỏ hàng

Trong thư mục gốc mà theme bạn đang sử dụng tạo file cart.php:

<?php
/*Template Name: Trang giỏ hàng*/
?>
<?php
get_header();
?>
Nội dung giỏ hàng tại đây
<?php 
get_footer();
?>

Tiếp theo, bạn đăng nhập vào trang quản trị, vào Trang => Thêm trang mới

Lưu ý:

  • Đặt tên slug gio-hang (Vì đã Rewrite URL ở bước trên)
  • Chọn giao diện: Trang giỏ hàng (Page Template vừa tạo)

Lấy thao tác và ID sản phẩm trong trang giỏ hàng

Trong Page Template bạn vừa tạo, bạn dùng code sau để lấy thao tác (Thêm, xóa) và ID sản phẩm

<?php
/*Template Name: Trang giỏ hàng*/
?>
<?php
get_header();
?>
<div class="container">
<h1 class="page-title"><?php the_title(); ?></h1>
<?php
$action = get_query_var('action'); //thêm|xóa
$pro_id = get_query_var('pro_id'); //id sản phẩm
?>
</div>
<?php 
get_footer();
?>

Thực hiện thao tác thêm, xóa sản phẩm trong giỏ hàng

Bạn sử dụng code sau:

switch($action)
{ //nếu có thao tác (thêm hoặc xóa)
  case 'them':
   if (isset( $_SESSION['cart'][$pro_id])) //nếu đã có thì cập nhật số lượng thêm 1
       $quantity = $_SESSION['cart'][$pro_id] + 1;
   else
       $quantity = 1; //ngược lại tạo 1 item mới với số lượng là 1
       $_SESSION['cart'][$pro_id] = $quantity; //cập nhật lại
       wp_redirect(get_bloginfo('url').'/gio-hang'); exit(); //trả về trang hiển thị giỏ hàng
    break;
  case 'xoa':
       if(isset( $_SESSION['cart'] ) && count( $_SESSION['cart'] ) > 0 )
           { //kiểm tra và xóa sản phẩm dựa vào id
             unset($_SESSION['cart'][$pro_id]);
             wp_redirect(get_bloginfo('url').'/gio-hang'); exit();
           }
           else
           {
             unset($_SESSION['cart']);
             echo "<h3>Hiện chưa có sản phẩm nào trong giỏ hàng! <a href='".get_bloginfo('url')."'>Bấm vào đây</a> để xem và mua hàng.</h3>";
           }
     break;

}
else
{
//không có thao tác thêm hoặc xóa thì sẽ hiển thị sản phẩm trong giỏ hàng
}

Ghép vào Page Template sẽ có code như sau:

<?php
/*Template Name: Trang giỏ hàng*/
?>
<?php
get_header();
?>
<div class="container">
<h1 class="page-title"><?php the_title(); ?></h1>
<?php
$action = get_query_var('action'); //thêm|xóa
$pro_id = get_query_var('pro_id'); //id sản phẩm
?>
switch($action)
{ //nếu có thao tác (thêm hoặc xóa)
  case 'them':
   if (isset( $_SESSION['cart'][$pro_id])) //nếu đã có thì cập nhật số lượng thêm 1
       $quantity = $_SESSION['cart'][$pro_id] + 1;
   else
       $quantity = 1; //ngược lại tạo 1 item mới với số lượng là 1
       $_SESSION['cart'][$pro_id] = $quantity; //cập nhật lại
       wp_redirect(get_bloginfo('url').'/gio-hang'); exit(); //trả về trang hiển thị giỏ hàng
    break;
  case 'xoa':
       if(isset( $_SESSION['cart'] ) && count( $_SESSION['cart'] ) > 0 )
           { //kiểm tra và xóa sản phẩm dựa vào id
             unset($_SESSION['cart'][$pro_id]);
             wp_redirect(get_bloginfo('url').'/gio-hang'); exit();
           }
           else
           {
             unset($_SESSION['cart']);
             echo "<h3>Hiện chưa có sản phẩm nào trong giỏ hàng! <a href='".get_bloginfo('url')."'>Bấm vào đây</a> để xem và mua hàng.</h3>";
           }
     break;

}
else
{
//không có thao tác thêm hoặc xóa thì sẽ hiển thị sản phẩm trong giỏ hàng
}
</div>
<?php 
get_footer();
?>

Hiển thị sản phẩm trong giỏ hàng

if ( isset( $_SESSION['cart'] ) && count( $_SESSION['cart'] ) > 0 )
{
?>
<form action="" method="post" name="list_product">
    <table id="cart" class="table table-bordered">
        <thead>
           <tr>
              <th width="5%">STT</th>
              <th>Tên sản phẩm</th>
              <th>Giá sản phẩm</th>
              <th width="10%">Số lượng</th>
              <th>Thành tiền</th>
              <th width="15%"><input type="submit" name="cart_update" value="Cập nhật giỏ hàng" class="btn btn-success"/></th>
            </tr>
         </thead>
         <tbody>
            <?php
               $total = 0;
               $stt=0;          
               foreach ( $_SESSION['cart'] as $pro_id => $quantity )
                { //lặp qua mảng cart session lấy ra id và show thông tin sản phẩm theo id đó
                  $product = get_post((int)$pro_id );
                  if (get_post_meta($pro_id, "price_sale",true)>0)
                    {
                      $price=(float)get_post_meta($pro_id, "price_sale",true);
                    }
                  else
                    {
                        $price=(float)get_post_meta($pro_id, "price_stand",true);
                    }
                  $total_money=$price*$quantity;
                  $stt++;
                  total+=$total_money;
             ?>
             <tr>
                <td><?php echo $stt; ?></td>
                <td><a target="_blank" title="<?php echo $product->post_title; ?>" href="<?php echo get_permalink($product->ID); ?>"><?php echo $product->post_title; ?></a></td>
                <td><?php echo number_format($price, 0, "", "."); ?> VNĐ</td>
                <td><input autocomplete="off" class="form-control" type="text" value="<?php echo $quantity; ?>" name="quantity[<?php echo $pro_id; ?>]"/></td>
                <td><?php echo number_format($total_money, 0, "", "."); ?> VNĐ</td>
                <td><a href="<?php echo get_bloginfo( 'url' ) . '/gio-hang/xoa/' . $pro_id; ?>">Xóa</a></td>
             </tr>
           <?php
             }
           ?>
                                
      <tr>
          <td colspan="2">Tổng tiền</td>
          <?php
             if (isset($_SESSION['coupon'])) {
                   $total = $total - $total * $_SESSION['coupon'];
               }
             ?>
             td colspan="4"><?php echo number_format($total, 0, "","."); ?> VNĐ</td>
      </tr>
      <tr>
         <td colspan="6">
              <a title="Tiếp tục mua hàng" class="btn btn-primary" href="<?php echo get_bloginfo( 'url' ); ?>">Tiếp tục mua hàng</a>
              <a title="Thanh toán" class="btn btn-success" href="<?php echo get_bloginfo("url"); ?>/thanh-toan">Thanh toán</a>
         </td>

      </tr>
   </tbody>
</table>
</form>
<?php
}
else 
{
   echo '<div class="alert alert-danger">Hiện chưa có sản phẩm nào trong giỏ hàng! <a href="' . get_bloginfo( 'url' ) . '">Bấm vào đây</a> để xem và mua hàng</div>';
}

Xử lý cập nhật giỏ hàng

Bạn sử dụng code sau để xử lý cập nhật giỏ hàng

if(isset($_POST['cart_update'])){ //xử lý cập nhật giỏ hàng
      if(isset($_POST['quantity'])){
           if(count($_SESSION['cart']) == 0) unset($_SESSION['cart']); //nếu không còn sản phẩm trong giỏ thì xóa giỏ hàng
           foreach($_POST['quantity'] as $pro_id => $quantity){ //lặp mảng số lượng mới và cập nhật mới cho giỏ hàng
               if($quantity == 0) unset($_SESSION['cart'][$pro_id]);
               else $_SESSION['cart'][$pro_id] = $quantity;
            }
               wp_redirect(get_bloginfo( 'url' ).'/gio-hang'); //cập nhật xong trả về trang hiển thị sản phẩm trong giỏ
       }
 }//End cart_update

Toàn bộ code trang giỏ hàng

<?php
/*Template Name: Trang giỏ hàng*/
?>
<?php
get_header();
?>
<div class="container">
<h1 class="page-title"><?php the_title(); ?></h1>
<?php
$action = get_query_var('action'); //thêm|xóa
$pro_id = get_query_var('pro_id'); //id sản phẩm
?>
switch($action)
{ //nếu có thao tác (thêm hoặc xóa)
  case 'them':
   if (isset( $_SESSION['cart'][$pro_id])) //nếu đã có thì cập nhật số lượng thêm 1
       $quantity = $_SESSION['cart'][$pro_id] + 1;
   else
       $quantity = 1; //ngược lại tạo 1 item mới với số lượng là 1
       $_SESSION['cart'][$pro_id] = $quantity; //cập nhật lại
       wp_redirect(get_bloginfo('url').'/gio-hang'); exit(); //trả về trang hiển thị giỏ hàng
    break;
  case 'xoa':
       if(isset( $_SESSION['cart'] ) && count( $_SESSION['cart'] ) > 0 )
           { //kiểm tra và xóa sản phẩm dựa vào id
             unset($_SESSION['cart'][$pro_id]);
             wp_redirect(get_bloginfo('url').'/gio-hang'); exit();
           }
           else
           {
             unset($_SESSION['cart']);
             echo "<h3>Hiện chưa có sản phẩm nào trong giỏ hàng! <a href='".get_bloginfo('url')."'>Bấm vào đây</a> để xem và mua hàng.</h3>";
           }
     break;

}
else
{
//không có thao tác thêm hoặc xóa thì sẽ hiển thị sản phẩm trong giỏ hàng
if ( isset( $_SESSION['cart'] ) && count( $_SESSION['cart'] ) > 0 )
{
?>
<form action="" method="post" name="list_product">
    <table id="cart" class="table table-bordered">
        <thead>
           <tr>
              <th width="5%">STT</th>
              <th>Tên sản phẩm</th>
              <th>Giá sản phẩm</th>
              <th width="10%">Số lượng</th>
              <th>Thành tiền</th>
              <th width="15%"><input type="submit" name="cart_update" value="Cập nhật giỏ hàng" class="btn btn-success"/></th>
            </tr>
         </thead>
         <tbody>
            <?php
               $total = 0;
               $stt=0;          
               foreach ( $_SESSION['cart'] as $pro_id => $quantity )
                { //lặp qua mảng cart session lấy ra id và show thông tin sản phẩm theo id đó
                  $product = get_post((int)$pro_id );
                  if (get_post_meta($pro_id, "price_sale",true)>0)
                    {
                      $price=(float)get_post_meta($pro_id, "price_sale",true);
                    }
                  else
                    {
                        $price=(float)get_post_meta($pro_id, "price_stand",true);
                    }
                  $total_money=$price*$quantity;
                  $stt++;
                  total+=$total_money;
             ?>
             <tr>
                <td><?php echo $stt; ?></td>
                <td><a target="_blank" title="<?php echo $product->post_title; ?>" href="<?php echo get_permalink($product->ID); ?>"><?php echo $product->post_title; ?></a></td>
                <td><?php echo number_format($price, 0, "", "."); ?> VNĐ</td>
                <td><input autocomplete="off" class="form-control" type="text" value="<?php echo $quantity; ?>" name="quantity[<?php echo $pro_id; ?>]"/></td>
                <td><?php echo number_format($total_money, 0, "", "."); ?> VNĐ</td>
                <td><a href="<?php echo get_bloginfo( 'url' ) . '/gio-hang/xoa/' . $pro_id; ?>">Xóa</a></td>
             </tr>
           <?php
             }
           ?>
                                
      <tr>
          <td colspan="2">Tổng tiền</td>
          <?php
             if (isset($_SESSION['coupon'])) {
                   $total = $total - $total * $_SESSION['coupon'];
               }
             ?>
             td colspan="4"><?php echo number_format($total, 0, "","."); ?> VNĐ</td>
      </tr>
      <tr>
         <td colspan="6">
              <a title="Tiếp tục mua hàng" class="btn btn-primary" href="<?php echo get_bloginfo( 'url' ); ?>">Tiếp tục mua hàng</a>
              <a title="Thanh toán" class="btn btn-success" href="<?php echo get_bloginfo("url"); ?>/thanh-toan">Thanh toán</a>
         </td>

      </tr>
   </tbody>
</table>
</form>
<?php
}
else 
{
   echo '<div class="alert alert-danger">Hiện chưa có sản phẩm nào trong giỏ hàng! <a href="' . get_bloginfo( 'url' ) . '">Bấm vào đây</a> để xem và mua hàng</div>';
}

if(isset($_POST['cart_update'])){ //xử lý cập nhật giỏ hàng
      if(isset($_POST['quantity'])){
           if(count($_SESSION['cart']) == 0) unset($_SESSION['cart']); //nếu không còn sản phẩm trong giỏ thì xóa giỏ hàng
           foreach($_POST['quantity'] as $pro_id => $quantity){ //lặp mảng số lượng mới và cập nhật mới cho giỏ hàng
               if($quantity == 0) unset($_SESSION['cart'][$pro_id]);
               else $_SESSION['cart'][$pro_id] = $quantity;
            }
               wp_redirect(get_bloginfo( 'url' ).'/gio-hang'); //cập nhật xong trả về trang hiển thị sản phẩm trong giỏ
       }
 }//End cart_update

}
</div>
<?php 
get_footer();
?>

Việc cuối cùng là bạn dùng CSS để style lại bảng sản phẩm trong giỏ hàng

Kết luận

Trên đây tôi hướng dẫn bạn cách tạo giỏ hàng cho WordPress không dùng Plugin. Nhưng trên đây chỉ là bước thêm, xóa, cập nhật số lượng sản phẩm trong giỏ hàng. Bài sau Hoàng An xin hướng dẫn bạn cách tạo trang thanh toán để lưu trữ thông tin đơn hàng.

[Total: 22   Average: 4/5]

THAM GIA NHÓM HỖ TRỢ

 
Lập trình web PHP (hoangan.net)
Nhóm Công khai · 1 thành viên
Tham gia nhóm
 

Hoàng An

Tôi không phải là 1 chuyên gia lập trình, cũng không phải là 1 chuyên gia SEO. Với niềm đam mê với CNTT, tôi có thể biến ý tưởng thành sản phẩm và thích chia sẻ kiến thức cho người khác. Nếu có duyên, mời bạn đến với khoá học của tôi

14 bình luận trong “Hướng Dẫn Tự Tạo Giỏ Hàng Cho WordPress

  1. vậy là sẽ dùng custom post type tạo sp đúng ko Ad.

    vậy thì việc quản lý sp cũng như quản lý đơn hàng sẽ như thế nào nhỉ,
    cả việc gửi email sau khi mua sản phẩm thành công….

    1. Hi em,

      Cảm ơn em đã quan tâm đến blog của anh. Dạo này anh hơi nhiều việc nên chưa viết được. Sang tuần anh sẽ thu xếp nhé.

      Cảm ơn em nhiều!

  2. Anh có dùng contact form 7 để lấy thông tin khách hàng ko ạ? Nếu có thì em xin tặng anh 1 plugin đi kèm cho phép lưu trữ các dữ liệu của CTF7 lại ngay trong admin, có thể view, export ra excel để quản lý.

  3. Lỗi này xử lý ntn vậy ad “Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\rau1\wp-includes\formatting.php:5100) in C:\xampp\htdocs\rau1\wp-includes\pluggable.php on line 1216”

  4. lỗi này xử lý sao ad “Fatal error: Cannot redeclare rewrite_rules() (previously declared in C:\xampp\htdocs\shopmyphamHK\ShopMyPham\wp-content\themes\banhang\functions.php:49) in C:\xampp\htdocs\shopmyphamHK\ShopMyPham\wp-content\themes\banhang\functions.php on line 94”

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *