[Series viết theme bán hàng Woocommerce] 4. Hiển thị sản phẩm lên trang chủ

Trong bài trước chúng ta đã hoàn thành việc custom cho phần header và footer, trong bài hôm nay, mình sẽ hướng dẫn bạn cách tích hợp sản phẩm Woocommerce và các thông tin khác vào trong trang chủ. Thật ra bạn có nhiều cách để làm việc này, như đưa shotcode vào một page và cho nó hiển thị, tuy nhiên với cách làm này sẽ làm bạn trở nên khó tùy biến cho theme. Và mình thường sử dụng cách viết thẳng vào các file theme cho dễ dàng.

Hiển thị các sản phẩm nổi bật

Bây giờ hãy mở file content.php lên và tìm đến đoạn code sau

Bạn giữ lại lại một item (khoanh đỏ) này thôi, còn 5 cái item tiếp theo bạn có thể xóa hoặc ẩn. Kết quả sẽ như thế này, Bạn lưu ý là mình có bổ sung 2 cái image là sale và new vào dưới để làm nhãn cho sản phẩm nhé.

Bây giờ mình sẽ tiến hành lấy sản phẩm nổi bật. Mình đã có viết một bài về lấy sản phẩm nổi bật trong woocommerce tại bài Hiển thị sản phẩm nổi bật trong WooCommerce trên themes Bạn có thể xem lại chi tiết nhé, ở đây mình làm nhanh.

Kết quả sau khi thêm, lưu ý là mình đã bỏ đi rất nhiều các thông tin không cần thiết để làm đơn giản hơn nhé.

bây giờ bạn vào phần “sản phẩm” ở trong trang quản trị, thêm sản phẩm mới và tích vào dấu sao (đánh dấu nổi bật sản phẩm) như thế này:

và đây là kết quả nhận được.

Hiển thị các sản phẩm theo danh mục

Tiếp theo mình sẽ tiến hành lấy các sản phẩm theo danh mục và hiển thị ra các tab nhé. Từ sản phẩm nổi bật trên, bạn kéo xuống một tí sẽ thấy “category-tab“.  Phần này sẽ được chia làm hai phần, phần thanh điều hướng các tab và các tab chứa sản phẩm.

Với phần này các bạn phải lưu ý đến các ID, ID của các tab sẽ tương ứng với ID của item trong menu.

Bây giờ mình sẽ hiển thị ra các danh mục trước nhé, lưu ý là mình chỉ lấy những danh mục sản phẩm cha thôi nhé.

Các ID được mình chèn vào trong thẻ <a> có định dạng #tab_id danh mục.

Tiếp theo mình sẽ lấy sản phẩm dựa theo các danh mục này và phân ra các tab. Trước tiên chúng ta cần làm sáng tỏ các vùng, bạn bỏ hết các phần không quan trọng và giữ lại những phần sau:

Bạn sẽ thấy mình khoanh hai vùng xanh và đỏ, và như vậy chúng ta sẽ có hai vòng lặp, vòng lặp xanh sẽ lặp lấy danh mục với cú pháp như ở phần trên, và vòng đỏ sẽ là lặp lấy sản phẩm dựa vào ID danh mục. Các bạn viết như sau:

Và kết quả dưới đây.

Bạn nên thêm nhiều danh mục và sản phẩm để test thử nhé, những danh mục con sẽ không được hiện, nhưng sản phẩm thuộc danh mục con sẽ hiển thị trong tab của danh mục cha.

Tiếp theo chúng ta sẽ lấy các sản phẩm random.

Hiển thị các sản phẩm random

Đối với phần hiển thị này bạn lưu ý nó là một slide bao gồm 3 sản phẩm trong 1 item, tức là cứ 3 sản phẩm thì được xếp trong một item.

Như vậy trong vòng lặp chúng ta phải sử dụng các hàm điều kiện để hiển thị các thẻ <div class="item"> phù hợp. mình sẽ code như sau:

Bạn có thể tự tìm hiểu các đoạn code trên nhé, mình sẽ không giải thích phần này nữa.

Tạo custom post type cho slide

Với Slide bạn có nhiều cách để tạo ra, như sử dụng galley trong một page, sử dụng plugin slide, hay đơn giản là sử dụng custom post type. Đối với slide của theme này mình sẽ tạo custom post type vì nó có nhiều thông tin trên slide và một điều quan trọng nữa là mình không thích sử dụng Plugin cho lắm 🙂

Bạn có thể xem lại bài Hướng dẫn tạo Custom Post Type trong WordPress để hiểu rõ về việc tạo custom post type nhé, ở đây mình sẽ đi nhanh.

Bây giờ bạn tạo một tệp có tên slider.php trong thư mục “inc” và thêm đoạn code như sau vào:

<?php
function cpt_slide() {
 $label = array( 'name' => 'Các slide', 
 'singular_name' => 'slide', 
 'add_new' => 'Thêm slide', 
 'add_new_item' => 'Thêm slide mới', 
 'edit_item' => 'Sửa slide', 
 'new_item' => 'slide mới', 
 'view_item' => 'Xem slide', 
 'view_items'=>'Xem tất cả slide', 
 'search_items'=>'Tìm kiếm slide', 
 'not_found'=>'Không có slide', 
 'not_found_in_trash'=>'Không có slide nào trong thùng rác', 
 'all_items'=>'Tất cả slide', 
 'insert_into_item'=>'Thêm phương tiện', 
 'uploaded_to_this_item'=>'Tải lên phương tiện', 
 'featured_image'=>'Ảnh slide', 
 'set_featured_image'=>'Thêm hình ảnh slide', 
 'remove_featured_image'=>'Xóa hình ảnh slide', 
 'use_featured_image'=>'Sử dụng hình ảnh slide', 
 'menu_name'=>'slide custom', 
 'name_admin_bar'=>'slide');
 
 $support = array( 'title',
 'editor',
 'excerpt',
 'author',
 'thumbnail', 
 'custom-fields');


 $arrs = array( 
 'labels' => $label, 
 'description' => 'Mô tả về loại post này',
 'supports' => $support, 
 'taxonomies' => array('nav_menu', 'nav_menu_item' ), 
 'hierarchical' => false, 
 'public' => true, 
 'show_ui' => true, 
 'show_in_menu' => true,
 'show_in_nav_menus' => true, 
 'show_in_admin_bar' => true, 
 'menu_position' => 5, 
 'menu_icon' => 'dashicons-welcome-view-site', 
 'can_export' => true, 
 'has_archive' => true, 
 'exclude_from_search' => false, 
 'publicly_queryable' => true, 
 'capability_type' => 'post');
 register_post_type( 'show-slide' , $arrs );
 }
add_action( 'init', 'cpt_slide' );

Và sau đó thì bạn hãy thêm đoạn này vào file functions.php:

include 'inc/slider.php';

Slide của theme có 4 thành phần như sau:

Chúng ta sẽ sử dụng các thành phần của Slide một cách linh hoạt, để làm được điều này mình sẽ quay lại file slide.php trong mục inc và xóa đi 'editor','author', 'custom-fields' và 'excerpt', trong mảng $support. Mình chỉ sử dụng title và thumbnail các phần còn lại mình sẽ sử dụng meta box để thực hiện việc này.

Bạn hãy xem lại bài : Hướng dẫn tạo Meta Box trong WordPress để xem chi tiết cách tạo meta box nhé.

Kéo xuống cuối file slide.php và thêm đoạn sau vào:

function slide_meta_box(){ 
 add_meta_box( 'slides', 'Thông tin slide', 'form_slides', 'show-slide' );
}

add_action( 'add_meta_boxes', 'slide_meta_box' );

function form_slides($post){ 
 $text1_slide = get_post_meta( $post->ID, '_text1_slide', true ); 
 $text2_slide = get_post_meta( $post->ID, '_text2_slide', true ); 
 $text3_slide = get_post_meta( $post->ID, '_text3_slide', true ); 
 $text4_slide = get_post_meta( $post->ID, '_text4_slide', true ); 
 
 echo '<div id="postcustomstuff"><table id="list-table">
 <thead>
 <tr>
 <th class="left">Tên</th>
 <th>Giá trị</th>
 </tr>
 </thead>
 
 <tbody id="the-list" data-wp-lists="list:meta">
 <tr>
 <td class="left">
 <label for="text1_slide">Dòng mô tả: </label>
 </td>
 <td>
 <input type="text" id="text1_slide" name="text1_slide" value="'.esc_attr( $text1_slide ).'" />
 </td>
 </tr>
 
 <tr>
 <td class="left">
 <label for="text2_slide">Đoạn mô tả ngắn: </label>
 </td>
 <td>
 <textarea id="text2_slide" name="text2_slide" rows="2" cols="25">'.esc_attr( $text2_slide ).'</textarea>
 </td>
 </tr>
 
 <tr>
 <td class="left">
 <label for="text3_slide">Tên nút bấm: </label>
 </td>
 <td>
 <input type="text" id="text3_slide" name="text3_slide" value="'.esc_attr( $text3_slide ).'" />
 </td>
 </tr>
 
 <tr>
 <td class="left">
 <label for="text4_slide">Liên kết: </label>
 </td>
 <td>
 <input type="text" id="text4_slide" name="text4_slide" value="'.esc_attr( $text4_slide ).'" />
 </td>
 </tr>
 
 
 </tbody>
</table></div>';

}

function form_slides_save( $post_id )
{
 $text1_slide = sanitize_text_field( $_POST['text1_slide'] );
 update_post_meta( $post_id, '_text1_slide', $text1_slide );
 
 $text2_slide = sanitize_text_field( $_POST['text2_slide'] );
 update_post_meta( $post_id, '_text2_slide', $text2_slide );
 
 $text3_slide = sanitize_text_field( $_POST['text3_slide'] );
 update_post_meta( $post_id, '_text3_slide', $text3_slide );
 
 $text4_slide = sanitize_text_field( $_POST['text4_slide'] );
 update_post_meta( $post_id, '_text4_slide', $text4_slide );
 
}
add_action( 'save_post', 'form_slides_save' );

Bây giờ bạn truy cập phần silide và thêm nội dung vào.

Trở lại theme bạn chỉnh sửa đoạn code slide thành đoạn như sau.

Và đây là kết quả.

Nếu thêm một slide nữa mà bị lỗi bạn xửa câu cuối thành câu sau nhé.

<?php $acctives=""; endwhile; wp_reset_query(); ?>