Search code examples
javascriptjqueryhtmlwordpressmixitup

Multiple checkbox filters return server error 500


I am trying to set up a Wordpress portfolio page with multiple checkbox filtering options. The js-code and some HTML is from MixItUp (http://codepen.io/patrickkunka/pen/iwcap).

<div class="row">
    <!-- Filter categories -->
    <div class="col-md-4">      
        <form class="controls" id="Filters">
            <?php
            $count1 = 0;
            // all products of category with sortable
            function enc8($c){  return utf8_encode($c); }
            $terms1 = get_terms( product_group );
            $count1 = count($terms1);
            echo '<fieldset>';
                if ( $count1 > 0 ){
                        foreach ( $terms1 as $term1 ) {
                            $termname1 = strtolower($term1->name);
                            $termname1 = str_replace(array(enc8('ä'),enc8('Ä'),enc8('ö'),enc8('Ö'),enc8('ü'),enc8('Ü'),enc8('ß'),' &amp; ',' '),array('ae','Ae','oe','Oe','ue','Ue','ss','-','-'),$termname1);
                            echo '<div class="checkbox"><input type="checkbox" value=".'.$termname1.'"/><label> '.$term1->name.'</label></div>';
                        }
                }
            echo '</fieldset>';
            ?>
            <a class="btn btn-small btn-default" id="Reset">Reset</a>
        </form>
    </div>
    <div class="col-md-4">      
        <form class="controls" id="Filters">
            <?php
            $count2 = 0;    
            // all products of category with sortable
            function enc8($c){  return utf8_encode($c); }
            $terms2 = get_terms( product_category );
            $count2 = count($terms2);
            echo '<fieldset>';
                if ( $count2 > 0 ){
                        foreach ( $terms2 as $term2 ) {
                            $termname2 = strtolower($term2->name);
                            $termname2 = str_replace(array(enc8('ä'),enc8('Ä'),enc8('ö'),enc8('Ö'),enc8('ü'),enc8('Ü'),enc8('ß'),' &amp; ',' '),array('ae','Ae','oe','Oe','ue','Ue','ss','-','-'),$termname2);
                            echo '<div class="checkbox"><input type="checkbox" value=".'.$termname2.'"/><label> '.$term2->name.'</label></div>';
                        }
                }
            echo '</fieldset>';
            ?>
            <a class="btn btn-small btn-default" id="Reset">Reset</a>
        </form>
    </div>

The first taxonomy filter (product_group) works just fine. However, when I add the second one (product_category) the page partly crashes and Chrome returns the following error message: Failed to load resource: the server responded with a status of 500 (Internal Server Error).

The HTML output looks like this:

<div class="col-md-4">      
    <form class="controls" id="Filters">
        <fieldset>
            <div class="checkbox">
                <input type="checkbox" value=".class01"><label> Class01</label>
            </div>
            <div class="checkbox">
                <input type="checkbox" value=".class02"><label> Class02</label>
            </div>
            <div class="checkbox">
                <input type="checkbox" value=".class03"><label> Class03</label>
            </div>
        </fieldset>
        <a class="btn btn-small btn-default" id="Reset">Reset</a>
    </form>
</div>
<div class="col-md-4">      
    <form class="controls" id="Filters">
    <!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

    Page Caching using disk: enhanced (User is logged in)

    Served from: mydomain.org @ 2016-02-21 17:03:37 by W3 Total Cache -->
    </form>
</div>

Does anyone have an idea what the problem is?


Solution

  • Finally, I figured it out. The problem was that the following function

    function enc8($c){ return utf8_encode($c); }
    

    was twice in the code. Combining the two filters to a single function and a bit of renaming some variables was the solution:

    <form class="controls" id="Filters">
        <?php
        $countgroups = 0;
        $countcats = 0;
    
        function enc8($c){ return utf8_encode($c); }
    
        $groups = get_terms( product_group );
        $countgroups = count($groups);                          
        $cats = get_terms( product_category );
        $countcats = count($cats);
    
        echo '<fieldset class="groups"><h4>Produktgruppen</h4>';
            if ( $countgroups > 0 ){
                    foreach ( $groups as $group ) {
                        $groupname = strtolower($group->name);
                        $groupname = str_replace(array(enc8('ä'),enc8('Ä'),enc8('ö'),enc8('Ö'),enc8('ü'),enc8('Ü'),enc8('ß'),' &amp; ',' '),array('ae','Ae','oe','Oe','ue','Ue','ss','-','-'),$groupname);
                        echo '<div class="checkbox"><input type="checkbox" value=".'.$groupname.'"/><label>'.$group->name.'</label></div>';
                    }
            }
        echo '</fieldset>';
        echo '<fieldset class="cats"><h4>Produktkategorien</h4>';
            if ( $countcats > 0 ){
                    foreach ( $cats as $cat ) {
                        $catname = strtolower($cat->name);
                        $catname = str_replace(array(enc8('ä'),enc8('Ä'),enc8('ö'),enc8('Ö'),enc8('ü'),enc8('Ü'),enc8('ß'),' &amp; ',' '),array('ae','Ae','oe','Oe','ue','Ue','ss','-','-'),$catname);
                        echo '<div class="checkbox"><input type="checkbox" value=".'.$catname.'"/><label>'.$cat->name.'</label></div>';
                    }
            }
        echo '</fieldset>';
        ?>
        <a class="btn btn-small btn-default" id="Reset">Reset</a>
    </form>
    

    Works like a charm now :)