0

I want to apply filters on 'retailers' custom post type.

Filters are on the basis on following taxonomies.

  • Shipping Type
  • Release Type
  • Raffles

I am using AJAX to apply filters. (https://savior.d.pr/F1ukdA)

Here is the code:

product-retailers.php

<?php

defined( 'ABSPATH' ) || exit;

global $product;

$shipping_type = get_terms( 'shipping_type', array(
    'hide_empty' => false,
) );
$country = get_terms( 'country', array(
    'hide_empty' => false,
) );
$release_type = get_terms( 'release_type', array(
    'hide_empty' => false,
) );
$raffles = get_terms( 'raffles', array(
    'hide_empty' => false,
) );

?>
<div class="sr-only" id="product_id_with_retailer"><?php echo $post->ID; ?></div>
<div class="product__retailers">
    <div class="product-retailers__container">
        <div class="product-retailers__content">
            <div class="produt_where_to_buy">
            <h2><?= __( 'WHERE TO BUY', 'wildpress' ); ?></h2>
            </div>
            <div class="sorting_container">
                <div class="sort_post_by_category">
                    <div class="post_by_release_type">
                        <?php 
                        if ( ! empty( $release_type ) && ! is_wp_error( $release_type ) ): ?>
                            <select class="release_type">
                                <option disabled selected>Release Type</option>
                                <?php foreach ( $release_type as $st ) {
                                        echo '<option value="'. $st->slug .'">' . $st->name . '</li>';
                                    }
                                ?>
                            </select>
                        <?php endif; ?>
                    </div> 
                </div>
                <div class="sort_post_by_shipping">
                    <div class="post_by_shipping">
                    <?php 
                    if ( ! empty( $shipping_type ) && ! is_wp_error( $shipping_type ) ): ?>
                       <select class="shipping_type">
                            <option disabled selected>Shipping</option>
                            <?php foreach ( $shipping_type as $st ) {
                                    echo '<option value="'. $st->slug .'">' . $st->name . '</li>';
                                }
                            ?>
                         </select>
                    <?php endif; ?>
                    </div> 
                </div>
                <div class="sort_post_by_relevent">
                    <div class="post_by_relevent">
                        <select class="relevent_type">
                            <option disabled selected>Sort by</option>
                            <option value="relevence">Relevence</option>
                            <option value="a-z">Sory by Name A - Z</option>
                            <option value="z-a">Sory by Name Z - A</option>
                        </select>
                    </div> 
                </div>
                <div class="sort_post_by_raffle">
                    <div class="post_by_raffle">
                        <?php 
                        if ( ! empty( $raffles ) && ! is_wp_error( $raffles ) ): ?>
                            <select class="raffle_type">
                                <option disabled selected>Release Type</option>
                                <?php foreach ( $raffles as $st ) {
                                        echo '<option value="'. $st->slug .'">' . $st->name . '</li>';
                                    }
                                ?>
                            </select>
                        <?php endif; ?>
                    </div> 
                </div>
            </div>
            <div class="retailers-container">
            <?php if ( have_rows( 'retailers' ) ) : ?>
                <div class="retailers"> 
                    <?php 
                    while ( have_rows( 'retailers' ) ) :
                        the_row();                        
                        $retailer       = get_sub_field( 'retailer' );
                        $custom_text    = get_sub_field( 'custom_text' );
                        $product_url    = get_sub_field( 'product_url' );
                        $featured_image = wp_get_attachment_image_src( get_post_thumbnail_id( $retailer ), 'thumbnail' );                        
                        $raffle_support_field = get_field('raffle_support', $retailer->ID);             
                        ?>
                        <div class="retailer">
                            <div class="retailer__image"
                                 style="background-image: url('<?= $featured_image[0]; ?>');">
                            </div>                                   
                            <?php if($raffle_support_field == 'true'): ?>
                            <div class="retailer__name">                           
                                    <h3><?= $retailer->post_title;?> <i class="fas fa-tags"></i></h3>
                            <?php else: ?>
                                <div class="retailer__name">   
                                    <h3><?= $retailer->post_title;?></h3>
                            <?php endif;  ?>
                                <p><?= $custom_text; ?></p>
                            </div>
                            <div class="retailer__link">
                                <a href="<?= $product_url; ?>"
                                   target="_blank"
                                   class="button"><?= __( 'Link', 'sneakerlinks' ); ?></a>
                            </div>
                        </div>
                    <?php endwhile; ?>
                </div>
                <?php else: ?>
                    <p><?= __( 'No retailers', 'wildpress' ); ?></p>
                <?php endif; ?>
            </div>

</div>

JavaScript Code

// Sorting Of Retailers Section
jQuery(function($){
    $(".release_type ,.shipping_type ,.relevent_type , .raffle_type").change(function(e){
        e.preventDefault();
        e.stopPropagation();
        var release_type = $('.release_type').val();
        var shipping_type = $('.shipping_type').val();
        var relevent_type = $('.relevent_type').val();
        var raffle_type = $('.raffle_type').val();
        product_id_with_retailer = $('#product_id_with_retailer').text();
        jQuery.post(window.ajax_url, {
            action:'retailer-search-filter',
            data:{
                'release_type':release_type,
                'shipping_type':shipping_type,
                'relevent_type':relevent_type,
                'raffle_type': raffle_type,
                'product_id_with_retailer': product_id_with_retailer
            }, 
        },(response) => {
            if (response) {
                console.log(response);
                jQuery('.retailers-container').hide().html(response).fadeIn('slow');
            }    
        }, 'json');
        return false;
    });
});

Ajax function in woocommerce.php

public function ajax_retailer_search_filter(){
        $html = '';
        $args = [];
        $retailer_ids = [];
        $retailer_custom_text = [];
        $retailer_product_url = [];

        // If Release Type is not empty
        if(isset($_POST['data']['release_type']) && !empty($_POST['data']['release_type'])){ 
            $args['tax_query']['relation'] = 'AND';
            $args['tax_query'][] = array(
                    'taxonomy' => 'release_type',
                    'terms'    => strval( $_POST['data']['release_type']),
                    'field'    => 'slug'
                );

        }

        // If Shipping Type is not empty
        if(isset($_POST['data']['shipping_type']) && !empty($_POST['data']['shipping_type'])){
            $args['tax_query'][] = array(
                    'taxonomy' => 'shipping_type',
                    'terms'    => strval( $_POST['data']['shipping_type']),
                    'field'    => 'slug'
                );

        }

        // If raffle_type is not empty
        if(isset($_POST['data']['raffle_type']) && !empty($_POST['data']['raffle_type'])){
            $args['tax_query'][] = array(
                    'taxonomy'  => 'raffle_type',
                    'terms'     => strval( $_POST['data']['raffle_type']),
                    'field'     => 'slug'

                );
        }



        // If Relevence Type is not empty
        if(isset($_POST['data']['relevent_type']) && !empty($_POST['data']['relevent_type'])){
            $relevent_type =  esc_html($_POST['data']['relevent_type']);

            if($relevent_type == 'a-z'){
                $args['orderby']    = 'title';
                $args['order']      = 'ASC';
            }elseif ($relevent_type == 'z-a') {
                $args['orderby']    = 'title';
                $args['order']      = 'DESC';
            }else{

            }
        }

        $query = new \WP_Query(array(
            'p' => (int)$_POST['data']['product_id_with_retailer'],
            'post_type' => 'product'
        ));
        // The Loop
        if($query->have_posts()){
            while ( $query->have_posts() ) {
                $query->the_post();
                if ( have_rows( 'retailers', $query->ID ) ) {
                    while ( have_rows( 'retailers', $query->ID ) ) {
                        the_row();  
                        $retailer = get_sub_field( 'retailer' );
                        $retailer_ids[] = (int)$retailer->ID;
                        $custom_text    = get_sub_field( 'custom_text' );
                        $product_url    = get_sub_field( 'product_url' );
                        $retailer_custom_text[] = $custom_text;
                        $retailer_product_url[] = $product_url;
                    }
                }
            wp_reset_query();
        }

    }
    $args['post__in'] = $retailer_ids;
    $args['post_type'] = 'retailer';
    $args['post_per_page'] = -1;
    $args['suppress_filters'] = true;

    $query2 = new \WP_Query($args);

    // The Loop
    if($query2->have_posts()){
        $i = 0;
        $html .= '<div class="retailers"> ';
        while ( $query2->have_posts() ) {
            $query2->the_post();

            $featured_image = wp_get_attachment_image_src( get_post_thumbnail_id( $query2->ID ), 'thumbnail' );                        
            $raffle_support_field = get_field('raffle_support', $query2->ID);                 

            $html .= '<div class="retailer">
                            <div class="retailer__image"
                                style="background-image: url('.$featured_image[0].');">
                            </div> ';                                 
            if($raffle_support_field == 'true'){ 
            $html .=  '<div class="retailer__name">                           
                            <h3>'.get_the_title($query2->ID).' <i class="fas fa-tags"></i></h3>';
            }else{ 
            $html .= '<div class="retailer__name">   
                        <h3>'.get_the_title($query2->ID).'</h3>';
            }
            $html .= '<p>'.$retailer_custom_text[$i].'</p></div>
                        <div class="retailer__link">
                            <a href="'.$retailer_product_url[$i].'"
                            target="_blank"
                            class="button">'. __( "Link", "sneakerlinks" ).'</a>
                </div>
            </div>';

            $i++;
        wp_reset_query();
    }
    $html .= '</div>';
    }else{
    $html .= '<p>'.__( 'No retailers', 'wildpress' ).'</p>';
    }
    die(json_encode($html));
}

Retailers are connected to Wocommerce products via ACF Relationship field. (https://savior.d.pr/p2AO7O)

Thank you so much in advance for help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.