Wordpress Product-Filter with CPT & Custom Taxonomy

Question

I'm building a Site with Wordpress link to site It's a Site with Custom Post Types (product) and Custom Post Taxonomies (product_category).

On the Category page I have to filter the products by Subcategories. I found the filterable.js with a tutorial.

My Problem: If I click on any subcategory (Filter-Item) the browser (Chrome and Filezilla) doesn't work anymore.

If I click on the filter the browser says "processing request" after a long loading time the browser gives me an error. Here's a screenshot of the Browser error: http://farbstrakt.com/screenshot.png

I think the problem is about how I change the URL. I'm searching days for any solution but nothing. I can't find the error

here's my taxonomy-product_category.php

       <div class="container middler" id="demo">
       <ul class="filter-wrapper clearfix" id="portfolio-filter">
          <?php
               $args = array(
        'show_count'         => false,
        'child_of'           => get_queried_object()->term_id,
        'taxonomy'           => 'product_category',
        'title_li'           =>'',
 ); 
             $terms = get_categories($args);
             $count = count($terms);


             if ( $count > 0 ){
                         echo '<li class="cl-effect-2"><div><a href="#all" title=""><span data-hover="Alle">Alle</span></a></div></li>';

                        foreach ( $terms as $term ) {

                        $termname = strtolower($term->name);
                        $termname = str_replace(' ', '-', $termname);

                        $termname = strtolower($term->name);
                        $termname = str_replace(' ', '-', $termname);

                        echo '<li class="cl-effect-2">
                                <div>
                                    <a href="#'.$termname.'">
                                        <span data-hover="'.$term->name.'">'.$term->name.'</span>
                                    </a>
                                </div>
                            </li>';
                    }
                }
                ?>
            </ul>


    <?php 
        $loop = new WP_Query(array('post_type' => 'product', 'posts_per_page' => -1));
        $count =0;           
    ?>
    <div id="portfolio-wrapper">

        <ul class="grid effect-2 item-wrapper clearfix  filter-all" id="grid">


    <?php if ( $loop ) : 

                while ( $loop->have_posts() ) : $loop->the_post(); ?>

                   <?php
                    $terms = get_the_terms( $post->ID, 'product_category' );

                    if ( $terms && ! is_wp_error( $terms ) ) : 
                        $links = array();

                        foreach ( $terms as $term ) 
                        {
                            $links[] = $term->name;
                        }
                        $links = str_replace(' ', '-', $links); 
                        $tax = join( " ", $links );     
                    else :  
                        $tax = '';  
                    endif;
                                    ?>                  
                    <?php $infos = get_post_custom_values('_url'); ?>

                <li class="<?php echo strtolower($tax); ?> all ">           
                    <div>
                        <figure>
                        <a href="<?php the_permalink() ?>" class="img-link"><?php the_post_thumbnail( array(400, 160) ); ?></a>
                        <figcaption><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></figcpation>
                        </figure>
                    </div>
                </li>                               
         <?php endwhile; else: ?>                            
                <p class="no-products">NO products
                </p>                                                                
    </ul>
    <?php endif; ?>

and thats the short snippet from the code above where i think there must be the error.

           <?php
                    $terms = get_the_terms( $post->ID, 'product_category' );

                    if ( $terms && ! is_wp_error( $terms ) ) : 
                        $links = array();

                        foreach ( $terms as $term ) 
                        {
                            $links[] = $term->name;
                        }
                        $links = str_replace(' ', '-', $links); 
                        $tax = join( " ", $links );     
                    else :  
                        $tax = '';  
                    endif;
                                    ?>

                    <?php $infos = get_post_custom_values('_url'); ?>

                <li class="<?php echo strtolower($tax); ?> all ">   

Would be grateful if you could help me. I have searched a lot and didn't found any solution. I'm a PHP-Newbie. Of course I could use another filter plugin but I want to figure out where's the problem Thanks

Answer 1

The issue is appending a url with #all means that the browser will look for a element with a id of all . It cant find it on your page, because no element exists with this id.Hence the browser crashes after a few links have been clicked on.

just for reference, a element with a id looks like this:

<div id="someelement" class="not the same thing as id" >content</div>
 <div id="anotherelement" class="someelement" >content</div>

In this case, if you append the url of the page with this element on it with #someelement the browser will focus on the first element. This does not look for elements with the class 'someelement'.

If you want to pass query args, you need to use the ?products=all&etc format. But what i think you want to do is actually redirect to a page displaying only the selected term? use /term instead in your href.

Also you are getting a 404 on product_category and any of the terms you had on the page. Part of the issue is you are using $term->name instead of $term->slug which may be different. Did you reset the permalinks when you created the taxonomy? Also check the settings as described here:

https://codex.wordpress.org/Function_Reference/register_taxonomy

By default WP will create a loop on taxonomy-term.php and archive pages, the loop you run is a second db request and loop so thats extra time added to your server response time. Use the pre_get_posts hook

https://codex.wordpress.org/Plugin_API/Action_Reference/pre_get_posts