Chia sẻ code tạo giỏ hàng và thanh toán trong wordpress

Như bạn đã biết để làm trang bán hàng trong wordpress thì có rất nhiều plugin hỗ trợ chức năng này một trong đó có plugin woocommerce plugin tuyệt vời hỗ trợ làm website bán hàng wordpress từ A->Z. Bạn chỉ cần tìm hiểu các hook của nó là có thể viết theme bán hàng ngon lành. Nhưng nếu website bán hàng bạn chỉ cần những chức năng đơn giản như giỏ hàng và lấy thông tin khách hàng khi mua thì mình nghĩ không cần phải sử dụng plugin đó vì nó khiến website bạn nặng và có nhiều chức năng mà website bạn không cần đến. Vì vậy bài viết hôm nay mình xin hướng dẫn các bạn cách code giỏ hàng trong wordpress và tích hợp chức năng thu thập thông tin khách hàng từ Contact Form 7 đơn giản và nhanh gọn nhé.

Hướng dẫn tạo giỏ hàng trong wordpres.

Theo cách này bạn dùng Session php để tạo giỏ hàng nhé. Vì vậy để tạo giỏ hàng và thanh toán trong wordpress bạn làm lần lượt qua các bước sau là ok. Mình đã làm và thành công còn bạn thì sao?

Tạo giỏ hàng trong wordpress không dùng plugin

Bước 1: Đầu tiên bạn mở file function.php lên đăng ký query, session, rules cho nó nhé bằng đ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');

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'); 
add_action('init', 'mySessionStart', 1);
add_action('wp_logout', 'mySessionEnd');
add_action('wp_login', 'mySessionEnd');

function mySessionStart() {
ob_start();
if(!session_id()) {
session_start();
}
}
function mySessionEnd() {
session_destroy ();
}

Bước 2: Sau khi đã thêm xong vào function.php tiếp tục bạn tạo 1 file page template có tên file là cart.phpTemplate Name là Giỏ hàng bỏ file đó vào cùng cấp với header.php trong thư mục theme của bạn để xử lý thao tác trên giỏ hàng. Nội dung file cart.php như sau:

<?php
   /*
   Template Name: Trang giỏ hàng
   */
   ?>
<?php get_header();?>
<div class="wx-content">
   <div class="container">
      <div class="content_cat giohang">
         <div class="breadcrumbs">
            <div class="inner">
               <ul>
                  <?php if ( function_exists( 'yoast_breadcrumb' ) ) {
                     yoast_breadcrumb();
                     } ?>
               </ul>
            </div>
         </div>
         <div class="main main-cart" style="margin-top: 20px;">
            <?php
               global $product_prefix;
               $action = get_query_var('action'); //thêm|xóa
               $pro_id = get_query_var('pro_id'); //id sản phẩm
               if($action){ //nếu có thao tác (thêm hoặc xóa)
                switch($action){
                 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
               ?>
            <?php
               if ( isset( $_SESSION['cart'] ) && count( $_SESSION['cart'] ) > 0 ) { //kiểm tra số lượng sản phẩm trước khi hiển thị
               
               ?>
            <h3 class="title-don">Thông tin đơn hàng</h3>
            <form action="" method="post" class="thongtin_sp">
               <table id="cart" class="form_cart">
                  <tr class="title-cart">
                     <td style="width:50px;"></td>
                     <td>Tên sản phẩm</td>
                     <td>Giá</td>
                     <td>Số lượng</td>
                     <td>Thành tiền</td>
                     <td><input type="submit" name="cart_update" value="Cập nhật" style="border: 1px solid olive; cursor: pointer;"
                        title="Cập nhật giỏ hàng"/></td>
                  </tr>
                  <?php
                     $total = 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_field('price', $pro_id)!=0){
                      $price = get_field('price', $pro_id);}else{
                      $price = get_field('price_old', $pro_id);
                      }
                     ?>
                  <tr class="content-cart">
                     <td style="width:50px;"><?php if ( has_post_thumbnail( $pro_id ) ) echo get_the_post_thumbnail( $pro_id, array( 50, 50 ) ); else echo "<img src='".get_bloginfo('template_url')."/images/no_img.png' style='width:50px;height:50px;' />"; ?></td>
                     <td><a href="/<?php echo $product->post_name;?>"><?php echo $product->post_title; ?></a></td>
                     <td><?php echo number_format($price). ' VNĐ'; ?></td>
                     <td><input autocomplete="off" type="text" value="<?php echo $quantity; ?> " name="quantity[<?php echo $pro_id; ?>]" style="width:50px;" /></td>
                     <td><?php echo number_format( $price * $quantity) . ' VNĐ'; ?></td>
                     <?php  $total += $price * $quantity;   $_POST['tien'] = number_format($total).' đ'; ?>
                     <td><a href="<?php echo get_bloginfo( 'url' ) . '/gio-hang/xoa/' . $pro_id; //link xóa sản phẩm trong giỏ ?>" class="remove-product">Xóa</a>
                     </td>
                  </tr>
                  <?php
                     $check .= $product->post_title. " " ."(".$quantity.")". " ,"; 
                     $_POST['name'] = $check;
                     }
                     ?>
                  <tr>
                     <td>
                        <a title="Mua tiếp" class="btn muatiep" onclick="javascript: history.go(-1)">Mua tiếp</a>
                     </td>
                     <td> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                        Thanh toán
                        </button>
                     </td>
                     <td colspan="2"></td>
                     <td class="sum-money">Tổng tiền:</td>
                     <td colspan="3"><span class="money"><?php echo number_format($total); ?></span> VNĐ</td>
                  </tr>
               </table>
            </form>
            <!-- Modal -->
            <div class="nhap_thong_tin">
               <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog" role="document">
                     <div class="modal-content">
                        <div class="modal-header">
                           <h4 class="modal-title text-center" id="myModalLabel">Thông tin đặt hàng</h4>
                           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                           <span aria-hidden="true">×</span>
                           </button>
                        </div>
                        <div class="modal-body">
                           <?php echo do_shortcode('[contact-form-7 id="302" title="Contact form 1"]') ?> 
                           <script>
                              jQuery(function($) {
                                $('.disabled').attr('disabled', 'disabled');
                              });
                           </script>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <?php
               } else {
               echo "<h2>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.</h2>";
               }
               ?>
            <?php
               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ỏ
                }
               }
               }
               ?>
         </div>
      </div>
   </div>
</div>
<?php get_footer()?>

À trong đoạn code trên có 2 field là price(giá khuyến mại) và price_old(giá gốc) bạn xem custom field của bạn khai báo giá là gì thì đổi nó đi nhé không thì cứ tạo 2 field giống của mình là được. Chú ý đoạn đó nhé không lỗi.

Bước 3: Khi đã tạo template page xong bạn hãy vào quản trị tạo 1 trang có tên là Giỏ hàng và chọn page template: giỏ hàng làm giao diện nhé.

Bước 4: Sau khi xong bây giờ muốn hiển thị nút đặt mua hàng ở đâu thì bạn thêm đoạn code này vào là được.

<a href="<?php bloginfo('url')?>/gio-hang/them/<?php the_ID();?>" class="add-cart-button">Đặt mua</a>

Bước 5: Cuối cùng sau khi đã hoàn tất bạn phải cập nhật lại permalink và ra ấn thử xem đã thêm được vào giỏ hàng chưa nhé.

Nếu đúng thì bạn sẽ thêm được vào giỏ hàng sản phẩm bạn mong muốn. Bước cuối cùng là bạn thêm đoạn css này vào để style cho giỏ hàng đẹp chút.

/* CSS Cart */
#cart{
  width: 100%;
      margin: 20px;
}
#cart tr{
  border: 1px solid #ccc;

}
.title-cart{
  background: #ccc;
  
}
.title-cart td{
   padding: 10px 0;
   font-size: 14px;
    font-weight: 600;

}
.content-cart td{
  padding: 10px;
  border: 1px solid #ccc;
}
.remove-product{
  background: red
}
.remove-product, .remove-product:hover {
    background: red;
    color: #fff;
    padding: 5px 20px;
    font-weight: 600;
    border-radius: 8px;
    text-align: center;
}
.sum-money{
  font-weight: 600;
  font-size: 14px;
}
.money{
  font-weight: 600;
  font-size: 14px;
}
.muatiep {
    background: #ff9900;
    margin: 20px;
    padding: 6px 20px;
    font-weight: 600;
    color: #fff!important;
}
.title-don{
  text-align: center;
    font-size: 18px;
    font-weight: 600;
}
.nhap_thong_tin{width: 29%; float: left; margin-left: 2%; margin-bottom: 10px; background: #fff; padding: 10px;}
.nhap_thong_tin input {
    height: 30px;
    width: 100%!important;
    border: 1px #e5e5e5 solid;
    width: 350px;
    outline: none;
    margin-top: 10px;
    padding: 0 10px;
}
.nhap_thong_tin textarea{width: 99%; margin-top: 10px; }
.mua{
  background: #eb71a8;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  font-size: 20px;
  height: 45px!important;
}
/* End CSS Cart */

Cách tạo giỏ hàng trong wordpress

Bài xem thêm:

+ Tạo bài viết liên quan trong wordpress

+ Phân trang trong wordpress

Thanh toán và lấy thông tin khách hàng sử dụng Contact Form 7

Khi đã tạo giỏ hàng xong vậy bây giờ làm sao để thu thập được dữ liệu người dùng bây giờ. Hướng giải quyết mình sử dụng plugin Contact Form 7 để lấy thông tin khách hàng đặt mua. Để tiến hành bạn làm tiếp như sau:

Bước 1: Bạn cài cho mình 3 plugin này vào:

+ Contact Form 7 (tạo form)

+ Contact Form 7 Dynamic Text Extension

+ Contact Form Advanced Database (thu thập lead).

Bước 2: Khi đã cài xong bạn vào contact form 7 add new 1 form mới nhé và thêm đoạn này vào


 
[email* your-email placeholder "Email"] 

[tel tel-586 placeholder "Số điện thoại"]
[dynamictext dynamichidden-341 class:disabled "CF7_POST key='name'"]
[dynamictext dynamichidden-762 class:disabled "CF7_POST key='tien'"]
[textarea your-message placeholder "Thông tin thêm"] 
[submit class:mua "Đặt mua"]

Bước 3: Cuối cùng bạn nhìn vào file cart.php có dòng này và thay bằng đoạn shortcode trong contact form 7 của bạn nhé.

<?php echo do_shortcode('[contact-form-7 id="302" title="Contact form 1"]') ?> 

Bước 4: Khi đã ok bạn bạn ấn vào nút thanh toán trong giỏ hàng và sẽ hiển thị ra form thế này là ok. (Bạn chú ý mình dùng boostrap modal lên nó hiển thị kiểu popup kiểu vậy nhé).

Cách tạo giỏ hàng trong wordpress 1

Ok rồi đó cuối cùng bạn thử đặt 1 sản phẩm và trong quản trị xem có chưa nhé bạn hãy test trên hosting ấy chứ local không có chức năng gửi mail smtp lên không gửi được hoặc các hosting không hỗ trợ thì bạn phải cài smtp thì mới contact form 7 mới hoạt động được.

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 *