Hướng dẫn xây dựng chức năng sản phẩm đã xem trong WooCommerce

Định tạm dừng seri về lập trình theme WooCommerce rồi :D, nhưng lại được yêu cầu từ vài bạn trên fan page Blog Huy Kira nên hôm nay mình tiếp tục cho ra một bài mới về chủ đề này.

Bài viết hôm này mình sẽ giới thiệu cho các bạn chức năng sản phẩm đã xem trong WooCommerce.

Phân tích kỹ thuật

Sản phẩm đã xem ở đây được xác định khi chúng ta vào xem trang chi tiết của một sản phẩm. Cứ mỗi lần xem thì website sẽ ghi nhớ và sau đó sẽ hiển thị list danh sách sản phẩm mà chúng ta đã vào xem trang chi tiết.

Việc quan trọng ở đây là phải ghi nhớ mỗi lần user vào trang chi tiết sản phẩm. Để làm điều này mình sẽ sử dụng chức năng session trong PHP.

Cụ thể như sau:

Chúng ta khởi tạo một session có key là viewed giá trị ban đầu sẽ là một mảng rỗng. Cứ mỗi lần vào trang chi tiết sản phẩm thì chúng ta lấy ID của sản phẩm đó thêm vào mảng session, mảng session  đó chính là danh sách ID của các sản phẩm cần lấy.

Việc cuối là chúng ta sẽ sử dụng vòng lặp get post trong wordpress để show sản phẩm ra như mong muốn.

Xây dựng chức năng sản phẩm đã xem

Để xây dựng chức năng này chúng ta sẽ làm 2 việc chính đó là:

• Khởi tạo session và lưu ID của từng sản phẩm khi truy cập vào bài viết chi tiết của sản phẩm đó
• Sử dụng mảng session để show danh sách sản phẩm

Khởi tạo session:

Các bạn chèn đoạn code này vào file functions.php của theme đang sử dụng nha:

function viewedProduct(){
	session_start();
	if(!isset($_SESSION["viewed"])){
		$_SESSION["viewed"] = array();
	}
	if(is_singular('product')){
		$_SESSION["viewed"][get_the_ID()] = get_the_ID();
	}
}
add_action('wp', 'viewedProduct');

Chúng ta sẽ tạo một hàm có tên là viewedProduct trong hàm này sẽ thực hiện các công việc như sau:

• session_start(); là cú pháp khởi tạo session
• Dòng 3, 4, 5 là kiểm tra thử có tồn tại session viewed hay không. Nếu chưa có thì tạo một session có key là viewed giá trị của session này là một mảng rỗng.
• Dòng 6, 7, 8 kiểm tra có đang ở trang chi tiết sản phẩm hay không bằng cách sử dụng làm is_singular('product'). Nếu đang ở trang chi tiết sản phẩm thì thêm một phần từ mới là ID sản phẩm vào session vừa khởi tạo ở trên.
• Dòng 10 móc hàm này vào action wp để chạy hàm trên khi mỗi lần load website.

Sau khi chạy đoạn code này chúng ta sẽ được một session có key là viewed và giá trị sẽ là mảng các ID của sản phẩm đã xem.

Hiển thị danh sách sản phẩm:

Để hiển thị list các sản phẩm đã xem các bạn chèn đoạn code sau vào vị trí cần hiển thị nha.

<?php if(isset($_SESSION["viewed"]) && $_SESSION["viewed"]){
	$data = $_SESSION["viewed"];
	$args = array(
		'post_type' => 'product',
		'post_status' => 'publish',
		'posts_per_page' => 10,
		'post__in'	=> $data
	);
?>
<?php $getposts = new WP_query( $args);?>
<?php global $wp_query; $wp_query->in_the_loop = true; ?>
<?php while ($getposts->have_posts()) : $getposts->the_post(); ?>
<?php global $product; ?>
	<div class="item-product">
		<a href="<?php the_permalink(); ?>">
			<?php echo get_the_post_thumbnail(get_the_ID(), 'thumnail', array( 'class' =>'thumnail') ); ?>
		</a>
		<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
		<div class="price-product"><?php echo $product->get_price_html(); ?></div>
		<a href="<?php bloginfo('url'); ?>?add-to-cart=<?php the_ID(); ?>">Thêm vào giỏ</a>
	</div>
<?php endwhile; wp_reset_postdata(); 
} else { ?> 
	<p>Không có sản phẩm nào đã xem!</p>
<?php } ?>

Đoạn code trên mình tiến hành kiểm trả session có key là viewed có tồn tại hay không, nếu có chúng ta sẽ chạy vòng lặp get post vào show những sản phẩm đã xem ra.

Còn nếu không có sản phẩm nào đã xem thì hiển thị dòng thông báo: Không có sản phẩm nào đã xem!

Chú ý: 'post__in' => $data là điều kiện để nó hiện các sản phẩm với một mảng id sản phẩm có trước.

Tổng kết:

Hôm nay mình đã hướng dẫn cho các bạn chức năng sản phẩm đã xem trong WooCommerce. Chức năng cũng khá đơn giản sử dụng một tí session là xong.

Session nó lưu dữ liệu trong thời gian trình duyệt đang hoạt động. Nếu chúng ta tắt trình duyệt thì nó sẽ tự xóa dữ liệu, tương đương với việc các sản phẩm trên sẽ bị reset.

Nếu các bạn không muốn bị mất danh sách đã xem sau khi tắt trình duyệt các bạn có thể sử dụng cookies nha.

Thời gian tới mình sẽ tiếp tục ra các video hướng dẫn lập trình wordpress, các bạn nhớ like page vào theo dõi blog nha!

Chào các bạn!