When I did it with just one filter for?types?it worked perfectly. Somehow I am doing something wrong when implementing combining filters. But I can not figure out what it is. I’m am still a newcomer to web-development so maybe there is a very simple mistake somewhere.

I created two separate filters for each taxonomy the?filter.php:

<?php 
    if( $terms = get_terms( array(
        'taxonomy' => 'types', // for the types
        'orderby' => 'name'
    ) ) ) : 
        // if categories exist, display the dropdown
        echo '<button class="button" href="#" data-filter="*">show all</button>'; // create the "show all" button
            foreach ( $terms as $term ) :
                echo '<button class="button" href="#" data-filter=".' . $term->slug . '">' . $term->name . '</button>';
            endforeach;
        
    endif;  
?>

and?filter-project.php:

<?php
if ($terms = get_terms(array(
    'taxonomy' => 'project', // select the taxonomy to get
    'orderby' => 'name'
))) :
    // if categories exist, display the dropdown   
    foreach ($terms as $term) :
        echo '<button class="button" href="#" data-filter=".' . $term->slug . '">' . $term->name . '</button>';
    endforeach;
endif;
?>

Then I initialize isotope in the?javascript-script like this:

jQuery(document).ready(function($) {
    // Initialize Isotope
    var $container = $('#jobs'); // Assuming "jobs" is the ID of your container
    $container.isotope({
        itemSelector: '.element-item', // Change this to match your job item selector
        percentPosition: true,
        packery: {
            columnWidth: '.grid-sizer' // Change this to match your job item selector
            }
    });

// store filter for each group
var filters = {};

$demo.on( 'click', '.button', function() {
  var $this = $(this);
  // get group key
  var $buttonGroup = $this.parents('.button-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  // set filter for group
  filters[ filterGroup ] = $this.attr('data-filter');
  // combine filters
  var filterValue = concatValues( filters );
  $grid.isotope({ filter: filterValue });
});

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}

})

In my?function.php?I’m creating shortcodes for the filter to place them on the?header.php:

// =========================================================================
// SHORTCODE Type-Filter
// =========================================================================
function isotope_multi_dropdown_shortcode(){
    ob_start();
        include('template-parts/filter.php');
        //DIE FOLGENDE ZEILE K?NNTE AUCH INKLUDIERT WERDEN UM FILTER UND CONTENT ANZUZEIGEN!
        //include('template-parts/content-jobs.php');
    return ob_get_clean();
}
add_shortcode('isotope-filter-for-jobs', 'isotope_multi_dropdown_shortcode');

/**
 * Use the shortcode to show the isotope filter wherever You want
 * [isotope-filter-for-jobs]
 */

 // =========================================================================
// SHORTCODE Project-Filter
// =========================================================================
 function isotope_multi_dropdown_shortcode_projects(){
    ob_start();
        include('template-parts/filter-project.php');
    return ob_get_clean();
}
add_shortcode('isotope-filter-for-projects', 'isotope_multi_dropdown_shortcode_projects');

/**
 * Use the shortcode to show the isotope filter wherever You want
 * [isotope-filter-for-projects]
 */

On the?header.php?I call the function with the shortcode:

// Call the function to display the 'type'-filter
echo '<div class="button-group" data-filter-group="type">';
echo do_shortcode("[isotope-filter-for-jobs]");
echo '</div>';

// Call the function to display the 'project'-filter
echo '<div class="button-group" data-filter-group="project">';
echo do_shortcode("[isotope-filter-for-projects]"); 
echo '</div>';

I am having the issue that in all grids the “Show all” button does not appear, a few days ago was working fine, but not now.

Any help?

Thank you

TypeError: Cannot read properties of undefined (reading ‘msie’)
at https://evelurieporcelain.net/wp-content/themes/business-pro-porcelain/assets/scripts/min/isotope-init.min.js:1:418
at dispatch (https://evelurieporcelain.net/wp-includes/js/jquery/jquery.min.js:2:43064)
at v.handle (https://evelurieporcelain.net/wp-includes/js/jquery/jquery.min.js:2:41048)

wp_enqueue_script('isotope-js', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js', array('jquery'), BONCULINA_ELEMENTOR_VERSION, true);

Here is the import of isotope.

For example, in my archive template, an item might have classes “term1-17 term2-4” to indicate the post is in position 17 for term1 and position 4 for term2.

My template code needs to compose those class names.

I’ve looked at the plugin code, and I see an internal function _get_order($post_type, $term_id, $start=0, $length=null). I could theoretically use that (though it’s not public).

Just want to make sure I’m not missing a publicly supported feature that would help me here.

It makes the next row of products not line up correctly.

I want the sold out items listed to remain on the product page.
So I thought a workaround could be to add some text “Not for sale” where the price normally shows up. This would realign the grid so to speak.

How can I implement this change?
What code would I need to add, and where?

Thanks in advance.

The response was that the photo view uses Isotope and the that we will need to dequeue that script and run our own.

I have some experience building custom isotope scripts, so I am inclined to try. However, this post was dated 2016. I just want to be sure there have not been any changes in the past 5 years that I need to account for.

Is that still the prevailing approach for customizing the photo view column? Any additional pointers before I embark on the process?

Thanks, Chris

It may be the conflict with “layout” from Cookie plugin…

The link page is this: https://c2050438.ferozo.com/novedades/

I hope you can help me.

Thank you!
Nicolás