[Series viết theme bán hàng Woocommerce] 5. Tạo trang chi tiết và danh mục sản phẩm

Bài trước mình đã hướng dẫn hoàn thành trang chủ bán hàng, bài viết này mình sẽ hướng dẫn việc tạo ra một trang chi tiết và danh mục sản phẩm. Thật ra thì các trang này đã được tạo khi bạn cài đặt plugin woocommerce rồi, tuy nhiên để nó thích hợp với theme của bạn thì bạn phải code lại. Trong bài này mình sẽ hướng dẫn bạn cách đơn giản để tạo ra trang chi tiết và danh mục sản phẩm một cách nhanh nhất nhé.

Tạo trang chi tiết sản phẩm

Trước khi bắt đầu làm việc với các trang của woocommerce, mình cần làm một việc trước, đó là sao chép thư mục templates của plugin woocommerce và đưa vào theme. Bạn truy cập vào thư mục “wp-content\plugins\woocommerce” và sao chép thư mục templates đưa vào thư mục themes của bạn và đổi tên thành woocommerce.

Và từ giờ mình sẽ bắt đầu viết theme trong thư mục này và sẽ không đụng gì đến thư mục plugin cả, sau này bạn có thể update plugin mà không sợ bị lỗi.

Để viết theme cho trang chi tiết sản phẩm, bạn truy cập vào thư mục woocommerce và chú ý các file và thư mục sau:

Trong thư mục single-product bạn sẽ có những file sau:

Bây giờ chúng ta sẽ bắt đầu tìm hiểu về nguyên lý hoạt động để hiển thị một trang sản phẩm của woocommerce trước nhé.

• Khi bạn truy cập vào một sản phẩm chi tiết của woocommerce, tệp single-product.php sẽ được gọi.
• Trong single-product.php bạn sẽ tìm thấy một câu lệnh sau: <?php wc_get_template_part( 'content', 'single-product' ); ?> câu lệnh này kêu gọi hiển thị từ tệp content-single-product.php.
• Trong content-single-product.php bạn sẽ thấy xuất hiện các hooks, trong đó đáng chú ý là các hooks
  • do_action( 'woocommerce_before_single_product_summary' ); : Hiển thị hình ảnh sản phẩm
  • do_action( 'woocommerce_single_product_summary' ); : Hiển thị tên sản phẩm, đánh giá, giá, mô tả, thêm vào giỏ hàng,….
  • do_action( 'woocommerce_after_single_product_summary' ); : Hiển thị các tab, sản phẩm bán thêm, nhận xét,…
• Giao diện trong các hooks nằm trong thực mục single-product.

Để đơn giản hóa việc viết theme, mình sẽ không sử dụng các hooks, thay vào đó là mình sẽ viết thẳng toàn bộ vào file content-single-product.php.

Bây giờ bạn mở file content-single-product.php và xóa toàn bộ nội dung trong file này, nhớ chừa đoạn trên cùng nhé.

Xóa hết nội dung trong content-single-product.php và chừa lại dòng trên cùng

Tiếp theo hãy mở file giao diện là product-details.html và copy toàn bộ section (chỉ có 1 section trong tệp này). Sau đó dán vào phần dưới file content-single-product.php.

Nếu bạn thấy ở dưới có xuất hiện các phần không cần thiết như hình

Thì các bạn ở file single-product.php và xóa bỏ 2 phần khoanh đỏ sau:

Lưu lại bạn sẽ thấy các phần biến mất.

Bây giờ mình cùng phân tích những phần cần thiết mình sẽ tạo cho theme như sau:

Mình chỉ làm 8 phần quan trọng nhất, các phần khác các bạn muốn làm thêm có thể tìm hiểu nhé.

Trước khi tạo các thành phần thì bạn thêm đoạn này vào trên các đoạn mã html: <?php global $product;?>

1.Lấy hình ảnh chính sản phẩm (product image)

Để lấy hình ảnh chính của sản phẩm, bạn sử dụng hàm wp_get_attachment(). Với cú pháp như sau, sau đó sử dụng biến $image[0] để lấy đường dẫn hình ảnh.

Vì theme này không có tính năng zoom, muốn có bạn phải viết Javascript cho nó nên mình sẽ comment cái dòng đó lại.

2.Lấy các hình ảnh sản phẩm (product galley)

Đây là phần tương đối phức tạp, nó không khó ở việc lấy dữ liệu mà khó ở việc lấy sao cho phù hợp với giao diện. Ở theme mẫu mình sử dụng nó sẽ hiển thị một mảng 3 sản phẩm. tức là bạn phải kiểm soát hàm lặp để nó lấy đúng 3 sản phẩm trong một mảng.

Đây là đoạn code mẫu HTML của giao diện.

<div class="item active">
 <a href="#"><img src="images/product-details/similar1.jpg" alt=""></a>
 <a href="#"><img src="images/product-details/similar2.jpg" alt=""></a>
 <a href="#"><img src="images/product-details/similar3.jpg" alt=""></a>
 </div>
 <div class="item">
 <a href="#"><img src="images/product-details/similar1.jpg" alt=""></a>
 <a href="#"><img src="images/product-details/similar2.jpg" alt=""></a>
 <a href="#"><img src="images/product-details/similar3.jpg" alt=""></a>
 </div>

Các dòng thẻ <a> sẽ là những dòng được lặp, và cứ 3 thẻ thì nó lại nằm trong một thẻ <div> có class là "item". Mình sẽ code như sau:

• Đoạn code trên mình sử dụng biến $i để kiểm tra số lượng vòng lặp, khi ở số 1 nó sẽ đưa vào thẻ <div class="item"> đến số 3 thì nó sẽ in ra thẻ đóng </div> và trả về biến $i =0, Sau khi thoát khỏi vòng lặp (lặp hết) thì sẽ cho kiểm tra một lần nữa biến $i này dùng ở đâu, nếu nó nhỏ hơn 3 và lớn hơn 0 tức là vẫn có một số item chưa có thẻ đóng nên sẽ in ra thẻ đóng, đồng thời reset biến trở lại 0.
• Mình sử dụng $product->get_gallery_attachment_ids() để lấy ra tất cả các id của các galley, sau đó dùng wp_get_attachment_url() để lấy ra đường đẫn của các id galley trong vòng lặp.

3.Hiển thị tên sản phẩm, mã sản phẩm, giá sản phẩm, trạng thái sản phẩm

Đây là phần đơn giản nhất, bạn chỉ cần sử dụng các hàm sau:

• Để hiển thị tên sản phẩm bạn sử dụng hàm <?php the_title(); ?> tương tự như các trang khác của wordpress.
• Để hiển thị mã sản phẩm bạn sử dụng hàm <?php echo $product->get_sku(); ?>.
• Để hiển thị giá sản phẩm bạn sử dụng hàm <?php echo $product->get_price(); ?>.
• Để hiển thị trạng thái sản phẩm bạn sử dụng hàm <?php echo $product->get_stock_status(); ?>.

Mình sẽ sử dụng các hàm trên để lấy dữ liệu và sử lý cho phù hợp với theme như sau:

Các dữ liệu đã được mình định dạng lại cho phù hợp. Một số thông tin không cần thiết mình đã comment lại.

Kết quả:

4.Hiển thị nút thêm giỏ hàng

Bây giờ mình sẽ tiến hành làm tính năng nút thêm vào giỏ hàng với số lượng. Bạn chỉnh sửa đoạn code chỗ giỏ hàng thành như sau:

Dữ liệu sẽ được truyền đến chính đường dẫn này với các giá trị như sau:

• Name: quantity, Value: số lượng.
• Name: add-to-cart, Value: ID sản phẩm.

Bạn có thể sử dụng method get thay post để thấy rõ hơn, và thông thường người ta sử dụng post để làm tính năng ajax.

6.Hiển thị mô tả sản phẩm

Mình sẽ loại bỏ một số tab không cần thiết và để lại 1 tab là chi tiết, các bạn có thể đẻ thêm tab bình luận hay gì đó tùy, sau đó mình dùng hàm <?php the_content();?> để lấy ra nội dung mô tả của sản phẩm.

Phần cuối là lấy ra những sản phẩm khuyến nghị, bạn có thể hiển thị các sản phẩm cùng danh mục, bán chạy, … những cái này bạn có thể xem lại bài lấy sản phẩm trong trang chủ để hiểu hơn, ở đây mình sẽ không viết lại nữa.

Tạo trang danh mục sản phẩm

Tương tự như với trang chi tiết sản phẩm trang danh mục cũng có cấu trúc tương tự. Tuy nhiên mình không sử dụng hết các file như là taxonomy-product_cat.php, content-product_cat.php, mình chỉ sử dụng một file duy nhất cho toàn bộ đó là archive-product.php.

Mở file archive-product.php xóa hết các phần không cần thiết và giữ lại các phần như sau:

Sau đó bạn mở file shop.html và copy hai section, thật ra chỉ cần sao chép section dưới là đủ, nhưng để cho như theme gốc nên sẽ sao chép cả hai, sau đó dán vào phần mũi tên chỉ ở trên.

Ở trang này rất đơn giản, mình chỉ lặp và lấy ra các item mà không cần có câu truy vấn.

Các item này nằm trong các thẻ div có class là col-sm-4, nên mình sẽ tìm và xóa hết các item, chỉ giữ lại 1 cái làm mẫu thôi nhé.

Sau đó bạn code theo đoạn như sau để hiển thị các sản phẩm.

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

Đối với phân trang bạn có thể xem lại bài : Hướng dẫn tạo custom pagination phân trang trong WordPress để có thể làm được nhé.