Cách dùng trường button để tạo các hành động tùy chỉnh bằng JavaScript với Meta Box

Trong WordPress, không phải lúc nào cũng có sẵn những nút có chức năng/hành động như ý muốn trong backend ngoài các nút mặc định của WordPress. Trong bài viết này, mình sẽ giới thiệu cách thêm các hành động tùy chỉnh, bằng cách sử dụng các trường button bằng JavaScript với plugin Meta Box một cách thuận tiện nhất.

Đầu tiên, bạn cần cài đặt plugin Meta Box. Với phiên bản miễn phí trên WordPress.org, bạn sẽ có được framework cần thiết để tạo custom field. Tải xuống plugin Meta Box miễn phí trên tại đây.

Tuy nhiên để tạo custom field, cụ thể là trường button một cách dễ dàng với giao diện người dùng (UI) trực quan mà không cần code, bạn cần mua extension trả phí là Meta Box Builder. Còn nếu bạn là dân code thì có thể tự code mà không cần mua extension này nhé.

Sau khi cài đặt và kích hoạt tất cả xong, chúng ta sẽ bắt đầu các bước tạo một hành động tùy chỉnh. Cụ thể ở đây mình có một trang thương mại điện tử sử dụng plugin WooCommerce. Mình cần tạo một nút có chức năng xóa, reset các dữ liệu đã nhập, một nút dùng để đặt trở lại giá trị mặc định.

Bước 1: Tạo các field để nhập dữ liệu bằng Meta Box

Trước khi tạo các hành động với JavaScript, chúng ta cần 1 số trường thông tin để làm demo.

Mình sẽ tạo thêm các trường thông tin trong trang sản phẩm của WooCommerce để nhập dữ liệu. Nếu bạn chưa biết cách tạo các custom field vào trang WooCommerce thì có thể tham khảo bài hướng dẫn tại đây.

Mình tạo 3 field, bao gồm: giá bán buôn (wholesale price), giá bán lẻ (retaile price) và khuyến mãi (discount). Bạn lưu ý cần ghi nhớ ID của các field này vì chúng ta sẽ cần phải điền nó vào đoạn code ở bước số 3.

tạo 3 field để nhập dữ liệu bằng Meta Box Builder

Bước 2: Tạo các nút bằng Meta Box Builder

Vào Meta Box > Custom Fields > Add New và chọn trường Button (vì mình đang cần tạo một nút) ở tab Fields.

Đầu tiên ở trường này, mình sẽ tạo một nút để xóa hết dữ liệu nhập vào. Bạn cần điền thông tin và ghi nhớ ID của trường để thêm vào phần code về sau. Ở đây, mình đổi tên ID thành button_reset cho dễ nhớ. Xong xuôi thì chọn Publish.

tạo buttom bằng Meta Box Builder để xóa dữ liệu nhập vào

Ở tab Settings, chọn Post typeproduct để nút này xuất hiện trong trang sản phẩm, sau đó ấn Save Changes để lưu.

cài đặt buttom bằng Meta Box Builder để xuất hiện sản phẩm

Tương tự, quay trở lại tab Fields, tạo một trường button cho nút đặt giá trị mặc định, điền thông tin và chọn Update.

tạo buttom bằng Meta Box Builder để đặt giá trị mặc định

Sau khi tạo xong trường button này, vào một trang sản phẩm bất kì, bạn sẽ thấy hai nút vừa tạo.

tạo buttom bằng Meta Box Builder để tạo 2 nút reset và default

Bước 3: Thêm code để thực hiện hành động khi click vào nút

Trong file function.php của theme, hãy thêm đoạn code sau:

add_action( 'rwmb_enqueue_scripts', 'twentytwenty_enqueue_custom_script' );
function twentytwenty_enqueue_custom_script() {
        wp_enqueue_script( 'script-id', get_template_directory_uri() . 
'/assets/js/admin.js', array( 'jquery' ), '', true );
}

Đoạn code trên dùng để chèn 1 file script chạy ở admin, như khai báo thì file này tên là admin.js đặt ở folder assets/js của themes.

Sau đó, ta sẽ tạo 1 file admin.js ở folder assets/js với nội dung như sau:

jQuery( function ( $ ) {
$( '#button_reset' ).on( 'click', function() {
    $( '#product-information' ).find( 'input[type=text]' ).val('');
} );

$( '#set_default' ).on( 'click', function() {
    $( ''#whole_sale_price' ).val('150000');
    $( '#retail_price' ).val('100000');
    $( '#discount_price' ).val('80000');
} );
} );

Trong đó:

$( '#button_reset' ).on( 'click' ): hàm này được thực hiện khi click vào nút Reset đã tạo ở trên (ID của nút của mình là button_reset). Khi click vào nút này thì sẽ chạy dòng lệnh:

$( '#product-information' ).find( 'input[type=text]' ).val('')

Dòng lệnh này sẽ xoá hết giá trị của trường input trong group có ID là product-information về rỗng, có nghĩa là nó sẽ xoá hết các giá trị của trường giá bán buôn, giá bán lẻ và khuyến mại.

$( '#set_default' ).on( 'click' ): hàm này được thực hiện khi click vào nút Default. Khi click vào nút này thì sẽ chạy các dòng lệnh sau:

$( '#whole_sale_price' ).val('150000'): đặt lại giá trị của trường giá bán buôn (có ID là whole_sale_price) về 150000 (nếu bạn muốn thay đổi giá trị mặc định này thì hãy sửa nó ở đây).

$( '#retail_price' ).val('100000') và $( '#discount_price' ).val('80000'): tương tự, hai dòng này sẽ đặt lại giá trị của các trường giá bán lẻ và khuyến mãi về 100000 và 80000.

Bây giờ khi bạn ấn vào nút Reset vừa được tạo thì nó sẽ thực hiện hành động xóa các giá trị của field. Còn khi click vào nút Default value thì các giá trị sẽ đưa về giá trị mặc định rồi đấy.

hiển thị 2 nút reset và default value

Lời kết

Vậy là bạn có thể tạo được các nút chức năng tùy chỉnh cho riêng mình trong backend với sự hỗ trợ của plugin Meta Boxextension Meta Box Builder. Nó sẽ giúp cho việc quản lý, sử dụng WordPress của bạn thuận tiện và hiệu quả hơn đấy.

Để lại bình luận

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 *