conditional taxonomies filtering plugin in wordpress website

b. ACF (Advanced Custom Fields) + Custom Code

    •   You can create country and city taxonomies with ACF and then use custom code (possibly with JavaScript or AJAX) to filter cities based on the selected country.
    
Example Workflow:
    1.  Create a custom field for countries and cities.
    2.  Use ACF’s relationship field or taxonomy field to link cities to specific countries.
    3.  Write a custom JavaScript function to update the city dropdown when a country is selected, making an AJAX call to fetch the relevant cities based on the chosen country.



Here’s a step-by-step guide along with the code to achieve the desired functionality using Advanced Custom Fields (ACF) and custom JavaScript.

1. Create Custom Fields for Countries and Cities

First, you’ll need to set up the custom fields using ACF:

    •   Country Field: Create a Select field or Taxonomy field for countries.
    •   City Field: Create a Select field or Taxonomy field for cities.

Make sure that cities are linked to the appropriate countries in some way, such as using a relationship field or by setting up city taxonomy terms as children of country terms.

2. Link Cities to Specific Countries

If you’re using ACF:

    •   For the Country Field, use a Taxonomy field and select the Country taxonomy.
    •   For the City Field, you can use a Post Object field or another Taxonomy field. Ensure cities are related to countries, either through taxonomy hierarchy or via custom post relationships.

3. Write a Custom JavaScript Function and AJAX Call

Here’s how to dynamically filter cities based on the selected country.

a. Enqueue JavaScript File


Add the following code to your theme’s functions.php file to enqueue the JavaScript file and localize the AJAX URL.

function enqueue_custom_scripts() {
    wp_enqueue_script('custom-ajax-filter', get_template_directory_uri() . '/js/custom-ajax-filter.js', array('jquery'), null, true);
    
    // Localize the script with new data
    wp_localize_script('custom-ajax-filter', 'ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');



b. Create the JavaScript File

Create a file named custom-ajax-filter.js in your theme’s js folder.

jQuery(document).ready(function($) {
    $('#country-select').on('change', function() {
        var country_id = $(this).val();

        $.ajax({
            type: 'POST',
            url: ajax_obj.ajax_url,
            data: {
                action: 'filter_cities',
                country_id: country_id,
            },
            success: function(response) {
                $('#city-select').html(response);
            }
        });
    });
});


c. Handle the AJAX Request in PHP

Add the following code to your functions.php file to handle the AJAX request and return the filtered list of cities.

function filter_cities() {
    $country_id = intval($_POST['country_id']);
    $cities = get_posts(array(
        'post_type' => 'city', // Replace with your city post type or taxonomy
        'meta_query' => array(
            array(
                'key' => 'related_country', // Replace with your ACF field key
                'value' => $country_id,
                'compare' => '='
            )
        ),
        'posts_per_page' => -1
    ));

    if ($cities) {
        foreach ($cities as $city) {
            echo '<option value="' . esc_attr($city->ID) . '">' . esc_html($city->post_title) . '</option>';
        }
    } else {
        echo '<option value="">No cities found</option>';
    }

    wp_die();
}

add_action('wp_ajax_filter_cities', 'filter_cities');
add_action('wp_ajax_nopriv_filter_cities', 'filter_cities');


4. HTML Structure

In your template file, make sure you have the appropriate HTML structure to support the dynamic filtering.

<select id="country-select">
    <option value="">Select Country</option>
    <!-- Populate countries here -->
    <?php
    $countries = get_terms('country'); // Replace with your country taxonomy
    if ($countries) {
        foreach ($countries as $country) {
            echo '<option value="' . esc_attr($country->term_id) . '">' . esc_html($country->name) . '</option>';
        }
    }
    ?>
</select>

<select id="city-select">
    <option value="">Select City</option>
    <!-- Cities will be populated here based on selected country -->
</select>


Summary

    •   Step 1: Use ACF to create the necessary custom fields for countries and cities.
    •   Step 2: Ensure the cities are linked to countries, either by taxonomy hierarchy or a relationship field.
    •   Step 3: Write a JavaScript function to listen for changes in the country dropdown, make an AJAX request to fetch cities related to the selected country, and populate the city dropdown accordingly.

This setup should allow you to filter cities based on the selected country dynamically. Let me know if you need further customization or assistance!