Menggunakan JetSmartFilters dan Bricks Builder untuk Filter dan Sortir Postingan Berdasarkan Nilai Custom Field

Mengenal JetSmartFilters dan Bricks Builder

JetSmartFilters dan Bricks Builder adalah dua tool populer yang digunakan untuk membangun dan mengelola website WordPress. JetSmartFilters memungkinkan Anda untuk membuat filter dan sortir postingan berdasarkan berbagai kriteria, sedangkan Bricks Builder adalah sebuah page builder yang memungkinkan Anda untuk membuat desain website yang responsif dan menarik.

Mengintegrasikan JetSmartFilters dengan Bricks Builder

Untuk mengintegrasikan JetSmartFilters dengan Bricks Builder, Anda perlu membuat sebuah filter radio di JetSmartFilters dan kemudian menghubungkannya dengan Bricks Builder. Berikut adalah langkah-langkahnya:

• Buat sebuah filter radio di JetSmartFilters dengan mengisi data source manual dan menambahkan opsi-opsi yang diinginkan.
• Atur filter untuk diaplikasikan pada Bricks loop dengan memilih query ID yang sesuai.
• Tambahkan kode PHP untuk menghubungkan filter dengan Bricks Builder dan mengatur query vars yang diperlukan.

Technical Detail

Untuk menghubungkan filter dengan Bricks Builder, Anda perlu menggunakan kode PHP berikut:

add_filter('bricks/posts/query_vars', function($query_vars, $settings, $element_id, $element_name) {
    // Target hanya Bricks loop dengan query ID yang sesuai
    $query_id = $settings['jsfb_query_id'] ?? '';
    if ($query_id !== 'my-listing') return $query_vars;

    // JSF mengirimkan data filter via POST selama permintaan AJAX
    $query_data = $_POST['query'] ?? [];
    $sort_field = sanitize_key($query_data['_plain_query_sort_by_field'] ?? ');

    // Validasi dan pengaturan query vars
    if (empty($sort_field)) return $query_vars;
    $allowed_fields = ['weight', 'length', 'rating'];
    if (!in_array($sort_field, $allowed_fields, true)) return $query_vars;

    // Filter: hanya tampilkan postingan yang memiliki nilai untuk field yang dipilih
    $query_vars['meta_query'] = [
        'relation' => 'AND',
        [
            'key' => $sort_field,
            'compare' => 'EXISTS',
        ],
        [
            'key' => $sort_field,
            'value' => '',
            'compare' => '!=',
        ],
    ];

    // Sort: numerik menurun berdasarkan nilai field yang dipilih
    $query_vars['orderby'] = 'meta_value_num';
    $query_vars['order'] = 'DESC';
    $query_vars['meta_key'] = $sort_field;

    return $query_vars;
}, 99, 4);

Key Features

• Menggunakan filter radio di JetSmartFilters untuk memilih field yang ingin difilter dan disortir
• Menghubungkan filter dengan Bricks Builder menggunakan kode PHP
• Mengatur query vars untuk filter dan sortir postingan berdasarkan nilai custom field

Geek Opinion

Mengintegrasikan JetSmartFilters dengan Bricks Builder memungkinkan Anda untuk membuat filter dan sortir postingan yang lebih kompleks dan fleksibel. Dengan menggunakan kode PHP yang tepat, Anda dapat mengatur query vars yang diperlukan untuk menghubungkan filter dengan Bricks Builder dan membuat website yang lebih responsif dan menarik.

Untuk informasi lebih lanjut, Anda dapat mengunjungi JetSmartFilters dan Bricks Builder.