Cách tạo trang tin rao vặt dùng Meta Box

Cách tạo trang tin rao vặt dùng Meta Box

Trong số các loại hình quảng cáo online, có lẽ rao vặt là loại hình phát triển sớm nhất mà vẫn còn tồn tại cho đến nay. Qua nhiều năm tháng, giao diện và tính năng của các website rao vặt đã được cải thiện nhiều, nhưng chủ yếu vẫn là dựa trên các chức năng cơ bản là:

  • Cho phép người dùng đăng ký tài khoản, đăng tin kèm các thông tin về sản phẩm, dịch vụ
  • Cho phép người xem tìm kiếm và xem thông tin sản phẩm chi tiết

Trong số các trang rao vặt nổi tiếng nhất, chắc hẳn phải kể đến ebay.com. Hôm nay mình sẽ hướng dẫn các bạn dùng Meta Box plugin để làm một trang tin rao vặt trên WordPress theo hình mẫu của ebay.com.

Giao diện trang sản phẩm của ebay.com

Giao diện trang sản phẩm của ebay.com

Chuẩn bị

Trước khi bắt đầu vào bài hướng dẫn, mình nói sơ qua về cách làm của mình như sau:
Sử dụng Meta Box để tạo các trường cho phép người dùng nhập thông tin từ frontend;
Sử dụng một công cụ Page Builder để tạo giao diện ngoài frontend cho website & trang sản phẩm;
Sau cùng, mình sẽ lấy các thông tin nhập vào từ các trường tạo bởi Meta Box để hiển thị tự động ra trang sản phẩm.

Để làm được các thao tác trên, mình cần cài đặt các plugin sau:

Meta Box plugin và các extension của plugin này: Trong bài viết này, ngoài Meta Box plugin, mình sẽ sử dụng thêm các extension của nó với mục đích như sau:

Meta Box Frontend Submission: hiển thị các custom fields ở frontend để người dùng nhập liệu trực tiếp từ frontend;
Meta Box – Elementor Integrator: Cho phép plugin Elementor dưới đây lấy các dữ liệu từ các custom fields tạo bởi Meta Box và hiển thị ra frontend;
Meta Box Builder: cung cấp một giao diện trực quan để bạn tạo và chỉnh sửa custom fields mà không cần dùng code. Plugin này là mình khuyên bạn nên dùng để đỡ mất công code thôi;
Các extension khác: Nếu bạn đã sở hữu cả bộ sản phẩm của Meta Box rồi, thì bạn nên kích hoạt thêm Meta Box Conditional Logic để sử dụng trong việc thiết lập điều kiện giữa các trường thông tin với nhau nhé. Trong bài mình có sử dụng thêm extension này, nhưng cũng tùy trường hợp mới cần dùng thôi.

Elementor Page Builder (bản Pro): plugin này cho phép bạn tạo một trang web bằng cách kéo thả các phần và đặt vào đúng vị trí bạn muốn, đồng thời tùy chỉnh các phần trên website trên một giao diện trực quan mà không cần dùng đến code. Bạn cũng có thể dùng Beaver Builder (bản Pro) để thay thế, cách làm cũng tương tự như trong bài hướng dẫn này.

Như mình đã nói lúc đầu, hôm nay, mình sẽ tạo một trang tin rao vặt gần giống với ebay.com. Vì vậy, bạn hãy xem và tham khảo giao diện này nhé.

Bây giờ, cùng bắt tay vào thực hiện nhé.

Tạo “Trang đăng tin”

Thông thường, khi muốn tạo một bài viết hay nhập các thông tin cho một sản phẩm, chúng ta thường phải đăng nhập vào phần admin và nhập nội dung trong giao diện admin của WordPress.

Tuy nhiên, là một trang rao vặt, số lượng tài khoản rất lớn và không phải ai cũng được quyền truy cập vào admin. Vì vậy, cách làm thường sẽ là tạo một “Trang đăng tin” ngoài giao diện frontend và để người dùng vào đó nhập thông tin sản phẩm. Người dùng sẽ phải đăng nhập và tìm đến trang đăng tin để nhập thông tin cho một sản phẩm hoặc dịch vụ mà họ muốn rao.

Trên trang đăng tin sẽ có các trường thông tin giống như lúc bạn tạo trang sản phẩm mà mình hướng dẫn ở bài trước. Chỉ khác là các trường này bây giờ sẽ hiển thị ở frontend để nhập trực tiếp từ frontend.

Bước 1: Tạo các trường thông tin cần thiết để nhập cho sản phẩm rao vặt

Ở bước này, bạn hãy tạo tất cả các custom fields cần thiết vào cùng một field group nhé. Mình sẽ giải thích thêm.

Đầu tiên, mình tạo field group bằng cách tìm đến menu Meta Box > Custom Fields > Add New.

Tạo các trường thông tin cần thiết để nhập cho sản phẩm rao vặt

Tạo các trường thông tin cần thiết để nhập cho sản phẩm rao vặt

Bạn điền Title và ID cho field group đang tạo và nhấn Publish để tạm lưu lại field group này nhé.

Lưu ý là lúc này bạn không cần thiết lập nào khác cho field group này đâu, hãy cứ để mặc định của nó là được.

Tiếp theo, vẫn trong giao diện chỉnh sửa field group, bạn hãy tạo các custom field con cho field group này.

Lưu ý: Bạn muốn tạo custom fields loại nào, thì hãy tìm loại có tên tương ứng ở cột danh sách các loại fields ở bên trái. Ngay khi click vào cái tên bạn cần, một field tương ứng sẽ tự động tạo và hiển thị bên trong field group.

Ở đây, mình sẽ tạo mẫu 10 custom fields tương ứng với 10 trường thông tin sản phẩm có trên ebay.com như sau:

1. Danh mục
2. Tình trạng sản phẩm
3. Hình ảnh
4. Mô tả
5. Thương hiệu
6. Số lượng
7. Phương thức thanh toán
8. Vận chuyển
9. Kích thước
10. Giá

Tạo trường thông tin cho “Danh mục”

Với các trang rao vặt, thì danh mục của sản phẩm thường chính là danh mục của các bài viết giới thiệu sản phẩm. Ví dụ như sau:

Danh mục của sản phẩm

Danh mục của sản phẩm

Vì vậy, mình sẽ tạo trường “Danh mục” với loại field là Taxonomy Advanced.

Trong phần thiết lập của field này, mình sẽ chọn “Category” ở mục Taxonomy và “Select Tree” ở mục Field Type. Điều này sẽ cho phép tất cả các danh mục bài viết (bao gồm cả các danh mục con) có trong taxonomy tên là Category được hiển thị ra dưới dạng danh sách & phân cấp để người dùng có thể tự chọn.

Thiết lập cho trường “Danh mục” loại Taxonomy Advanced

Thiết lập cho trường “Danh mục” loại Taxonomy Advanced

Tạo trường thông tin cho “Tình trạng sản phẩm”

Tình trạng sản phẩm thường là các trạng thái như: còn mới, đã sử dụng, like new, … cho các sản phẩm hữu hình như laptop, điện thoại, …

Mình chọn fields này là loại Select để người dùng có thể chọn một trong số các trạng thái có sẵn. Ở phần thiết lập, mình đặt tên các trạng thái vào mục Choices như ảnh dưới đây. Mỗi trạng thái là một dòng.

Tạo trường thông tin cho “Tình trạng sản phẩm”

Tạo trường thông tin cho “Tình trạng sản phẩm”

Tất nhiên là các sản phẩm như tour du lịch, dịch vụ làm đẹp, … sẽ không có các tình trạng này. Nên mình sẽ cài đặt để trường này ẩn đi khi người dùng chọn sản phẩm thuộc các danh mục về du lịch, dịch vụ. Cách làm như sau:

Chuyển qua tab Advanced, ở mục Conditional Logic, bạn hãy chọn là “Hidden when All” và đặt “Category In 1” (với 1 là ID của danh mục sản phẩm bạn muốn ẩn trường này đi).

Thao tác chuyển Advanced ở mục Conditional Logic

Thao tác chuyển Advanced ở mục Conditional Logic

Lưu ý là bạn chỉ có thể cài đặt điều kiện để ẩn trường thông tin này đi khi bạn có cài đặt cả extension Meta Box Conditional Logic thôi nhé.

Tạo trường thông tin cho “Phương thức thanh toán”

Tương tự như field “Tình trạng sản phẩm”, mình cũng chọn loại Select cho field này. Mình đặt tên các phương thức thanh toán vào mục Choices, và mỗi loại là một dòng riêng.

Tạo trường thông tin cho “Phương thức thanh toán”

Tạo trường thông tin cho “Phương thức thanh toán”

Tạo trường thông tin cho “Vận chuyển”

Mình cũng chọn loại Select cho trường này, và đặt các phương thức vận chuyển vào mục Choices. Thường thì 1 nhà cung cấp có thể sẽ có nhiều phương thức vận chuyển khác nhau, nên bạn có thể tick thêm vào ô Allow to select multiple choices.

Tạo trường thông tin cho “Vận chuyển”

Tạo trường thông tin cho “Vận chuyển”

Tạo trường thông tin cho “Kích thước sản phẩm”

Các sản phẩm thường có 3 kích thước là “dài x rộng x cao”, trừ các sản phẩm vô hình. Nên mình sẽ tạo 3 field loại Number để người dùng lần lượt điền số đo của 3 chiều vào 3 trường thông tin. Đồng thời, cũng đặt Conditional Logic tương tự như trường “Tình trạng sản phẩm” để không hiển thị với các sản phẩm thuộc nhóm dịch vụ.

Tạo 3 field dạng number để nhập kích thước sản phẩm

Tạo 3 field dạng number để nhập kích thước sản phẩm

Nếu bạn sở hữu extension Meta Box Group, thì bạn hoàn toàn có thể nhóm 3 field này lại thành 1 group nhé.

Tạo trường thông tin cho “Giá”

Bạn nên tạo 2 trường thông tin để nhập giá sản phẩm, 1 cho giá gốc, và một cho giá khuyến mại. Cả 2 trường này cũng đều là loại Number.

Tạo 2 field number cho Giá sản phẩm

Tạo 2 field number cho Giá sản phẩm

Tạo các trường thông tin cho “Hình ảnh”, “Mô tả”, “Thương hiệu”, “Số lượng”

Các trường này không có gì đặc biệt nên bạn chỉ cần tạo các loại field tương ứng như sau là được:

  • Hình ảnh: chọn field loại Image Advanced
  • Mô tả: chọn field loại WYSIWYG
  • Thương hiệu: chọn field loại Text
  • Số lượng: chọn field loại Number

Sau khi kết thúc việc tạo các trường thông tin bạn cần, bạn có thể kéo và thả các field để thay đổi vị trí sao cho phù hợp. Và nhớ lưu lại các thiết lập trên nhé.

Bước 2: Tạo một trang trắng ngoài frontend

Trong admin dashboard, chọn menu Pages > Add New.

Bạn hãy đặt tiêu đề trang, sửa permalink, … rồi nhấn Publish nhé.

Tạo một trang mới cho website

Tạo một trang mới cho website

Bước 3: Cho các trường thông tin hiển thị ra trang đăng tin

Mỗi Field group của Meta Box đều có một shortcode tương ứng được Meta Box sinh tạo ra tự động. Ở bước này, chúng ta sẽ dùng shortcode này.

Trong admin dashboard, bạn đến menu Meta Box > Custom Fields và sẽ thấy danh sách các field group bạn đã tạo hiển thị lên. Bên cạnh field group mà bạn đã tạo ở bước 1, bạn sẽ thấy shortcode tương ứng của nó. Hãy copy đoạn shortcode này và dán vào phần nội dung của trang đăng tin (trong phần chỉnh sửa trang).

Thêm Shortcode vào nội dung của trang

Thêm Shortcode vào nội dung của trang

Lưu ý:

  • Ở bước 1, mình có lưu ý là bạn nên tạo tất cả các field vào 1 field group. Thực ra việc này là để đơn giản hóa bước này đi thôi. Tạo 1 field group thì bạn chỉ cần copy 1 shortcode là được. Nếu bạn có nhiều hơn 1 field group, thì bạn phải copy tất cả các shortcode của các frield group đó.
  • Trong giao diện trang sản phẩm của ebay.com, mình không thấy phần bài viết dài để giới thiệu sâu về sản phẩm, nên mình không dùng đến phần Content Editor mặc định của WordPress. Mình đã xóa nó trực tiếp trên shortcode ở trường post_fields.
[mb_frontend_form id='product-details' post_fields='title, content'] sửa thành [mb_frontend_form id='product-details' post_fields='title’]

Nếu trang của bạn có phần này, thì cứ giữ nguyên nhé.

Bạn nhớ lưu trang sau khi sửa đổi và sẽ thấy khi truy cập vào trang này, các field sẽ hiển thị như sau:

Trang đăng tin sau khi đã thiết lập xong

Trang đăng tin sau khi đã thiết lập xong

Lúc này, người bán truy cập vào trang đăng tin là có thể nhập các thông tin sản phẩm rao vặt của họ mà không cần phải đăng nhập vào backend.

Tạo trang thông tin sản phẩm / dịch vụ ngoài frontend

Ở bước này, bạn có thể chọn làm thủ công như mình đã hướng dẫn ở bài tạo trang sản phẩm. Còn ở bài này, mình sẽ hướng dẫn bạn dùng Elementor để tạo trang nhanh hơn và không cần dùng code.

Bước 1: Tạo template cho trang sản phẩm

Trong admin dashboard, bạn tìm đến menu Templates > Add New. Một cửa sổ sẽ hiển thị ra như dưới đây:

Tạo template cho trang sản phẩm

Tạo template cho trang sản phẩm

Bạn hãy chọn Single ở mục Select the type of template you want to work onPost ở mục Select Post Type nhé. Sau đó đặt tên cho template này và nhấn Create Template.

Bước 2: Cài đặt preview cho trang sản phẩm

Lúc này, trang sản phẩm đang trống trơn, nên mình sẽ tạo preview cho nó với thông tin một sản phẩm bất kỳ có sẵn trên trang để tiện thao tác.

Trong giao diện chỉnh sửa trang của Elementor, click vào biểu tượng bánh răng (Settings) ở góc dưới cùng bên trái. Sau đó chọn tab Preview Settings và chọn bài viết bạn muốn để hiển thị preview.

Tạo preview cho trang sản phẩm

Tạo preview cho trang sản phẩm

Bước 3: Cho hiển thị các thông tin sản phẩm

Thông tin các sản phẩm đều được người bán nhập vào các custom fields tạo bởi Meta Box. Ở bước này, chúng ta sẽ lấy giá trị các field này ra và cho tự động hiển thị ở trang sản phẩm.

Cách lấy giá trị của các loại field đều giống nhau, mình sẽ tạo mẫu một field là “Condition” nhé.

Đầu tiên, các bạn tạo một widget mới cho trang sản phẩm. Sau đó, trong phần Edit heading, bạn chọn Title loại Dynamic > Meta Box Field.

Cho hiển thị các thông tin sản phẩm

Cho hiển thị các thông tin sản phẩm

Tiếp theo, trong phần cài đặt của Title, ở mục Field trong tab Settings, bạn chọn tên của field mà bạn muốn lấy giá trị. Ở đây mình chọn field có tên là “Condition”.

Chọn tên của field mà bạn muốn lấy giá trị

Chọn tên của field mà bạn muốn lấy giá trị

Trong tab Advanced, bạn cài đặt các tiền tố và hậu tố cho trường thông tin này, và giá trị hiển thị khi giá trị của field trống.

Cách cài đặt các phần này như sau:

Giả sử field của bạn là “Chiều dài sản phẩm” chẳng hạn. Giá trị của field thường sẽ là một con số, ví dụ 85 (tức là sản phẩm dài 85cm).

Lúc này, field sẽ tự động lấy ra và hiển thị ngoài giao diện là “85” nên người xem sẽ không thể hiểu 85 này là gì. Vì thế, mình sẽ đặt các tiền tố và hậu tố mặc định cho field này như sau:

  • Before: đặt là “Chiều dài sản phẩm:”
  • After: đặt là “cm”
  • Fallback: là “Chiều dài sản phẩm: — cm”

Khi đó, field sẽ hiển thị đầy đủ với nội dung là: Chiều dài sản phẩm: 85cm. Trường hợp field không có giá trị, thì field sẽ được hiển thị ra là: Chiều dài sản phẩm: — cm.

Bạn tiếp tục tạo các field còn lại và sắp xếp bố cục cho phù hợp nhé. Sau khi hoàn thành việc tạo và sắp xếp các widget khác, mình thu được kết quả như sau:

Trang sản phẩm của trang rao vặt

Trang sản phẩm của trang rao vặt

Kết luận

Các bạn thấy đấy, kết hợp sử dụng Meta Box và một công cụ Page Builder hàng đầu là Elementor sẽ giúp bạn tạo một trang tin rao vặt khá dễ dàng mà không cần dùng code. Người dùng của bạn hoàn toàn có thể nhập dữ liệu vào mà không cần truy cập vào admin panel. Các dữ liệu nhập vào cũng được hiển thị ra trang sản phẩm một cách tự động.

Mọi thứ làm rất đơn giản phải không? Rất hy vọng bài viết này có thể giúp bạn tiết kiệm thời gian và công sức khi xây dựng một trang rao vặt nói riêng, và các trang thương mại điện tử nói chung. Chúc các bạn thành công!

Gửi phản hồi