Sortable cho custom Taxonomies trong WordPress

Bài viết này sẽ hướng dẫn cho các bạn cách tạo sortable cho custom Taxonomies bằng cách tận dụng plugin Woocommerce đã cài sẵn, mà không cần cài thêm bất cứ plugin nào khác (điều kiện là các bạn đang sử dụng plugin Woocommerce nhé :))

Woocommerce đã cung cấp 1 hook cho chúng ta làm việc này vô cùng dễ dàng, chỉ với 1 vài thao tác đơn giản, gồm có 3 bước sau:

• Sử dụng filter hook của Woocommerce để cấu hình các Taxonomies nào sẽ được dụng sortable
• Sử dụng filter hook của WordPress để thêm cột cho handle hiển thị sortable icon và input field cho custom Taxonomy
• Thêm 1 số style để tạo con trỏ chuột

Sử dụng filter hook của Woocommerce để cấu hình các taxonomies sẽ được sử dụng sortable

// Sortable for taxonomies
add_filter('woocommerce_sortable_taxonomies', 'make_sortable_custom_taxonomies_func');
public function make_sortable_custom_taxonomies_func($sortables)
	{
		$sortables[] = 'product_filter_categories'; // khai báo các custom taxonomies muốn sử dụng sortable, ở đây mình ví dụ là có sẵn taxonomy product_filter_categories
		return $sortables;
	}

Sử dụng filter hook khác của WordPress để thêm cột handle hiện thị sortable icon và input field cho custom Taxonomy

Ở đây mình ví dụ là taxonomy được áp dụng là product_filter_categories

// Custom columms
add_filter('manage_product_filter_categories_custom_column', 'add_product_filter_categories_column_content', 10, 3);

add_filter('manage_edit-product_filter_categories_columns', 'add_product_filter_categories_columns');


public function add_product_filter_categories_column_content($content, $column_name, $term_id)
{
	switch ($column_name) {
		case 'handle':
			$content = '<input type="hidden" name="term_id" value="' . esc_attr($term_id) . '" />';
			break;
		default:
			break;
	}

	return $content;
}

public function add_product_filter_categories_columns($columns)
{
	$columns['handle'] = '';
	return $columns;
}

Tùy chỉnh thêm định dạng để hiện được icon sortable trên table list của Taxonomy list table

table.wp-list-table .column-handle {
    width: 17px;
    display: table-cell;
}

table.wp-list-table tbody td {
    &.column-handle {
        cursor: move;
        width: 17px;
        text-align: center;
        vertical-align: text-top;
        display: table-cell;

        &::before {
            content: "\f333";
            font-family: Dashicons;
            text-align: center;
            line-height: 1;
            color: #999;
            display: block;
            width: 17px;
            height: 100%;
            margin: 4px 0 0 0;
        }
    }
}

Các bạn có thể thấy được danh sách có icon sortable do chúng ta style ở trên (icon ở góc phải)

Và việc xử lý để sắp xếp chạy được bằng mã Javascript và PHP đã được Woocomerce làm cả rồi, chúng ta chỉ việc tận hưởng thành quả thôi

Happy coding 🙂