Apply the filter to an existing portfolio page

Anonymous

#99526

Hi there,

The plugin works excellent! I have one question. I want to filter the portfolio items on this page: http://knappekoppen.work/ (the items are those from Creative lamps to Light lamps).

Now, I would like to keep using this lay-out so I am wondering if I can just let the filter to this portfolio overview.

I figured I had to use these instructions: https://www.designsandcode.com/documentation/search-filter-pro/search-results/custom/, but after reading this, I still don’t know what to do.

The portfolio is an element of the page, implemented with a standard page builder. If necessary I can share the page builder widget.php

Please let me know how I can do this!

Trevor

#99600

Did the page builder come with the theme (is the theme ‘Mega’?), or is it a separate plugin from a third party author? Mega seems to have its own page builder included.

Do you place content on the page using widgets, and in those can you place shortcodes?

Are you able to place a widget with a shortcode directly above the portfolio grid, and if so, can you try this shortcode?

[searchandfilter id="1459" action="filter_next_query"]

Your grid might be using the masonry script as well, so it may be necessary to re-trigger the masonry script as well, using code like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    \\ your script to re-trigger masonry
  });
}(jQuery));
</script>

However, you would the help of your theme author to provide the code for that one line. It varies from theme to theme.

However, in your case I think reloaditems is the way to go, as shown on this page:

http://masonry.desandro.com/methods.html#reloaditems

So the line of script would be this:

$grid.masonry('reloadItems');

But, you need to define $grid, like this maybe:

jQuery('portfolio-container-style-1').masonry('reloadItems');

So you script might be (and I say MIGHT):

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    jQuery('portfolio-container-style-1').masonry('reloadItems');
  });
}(jQuery));
</script>

However, it is also possible it uses the Isotope relayout function:

http://isotope.metafizzy.co/v1/demos/relayout.html

Like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    jQuery('portfolio-container-style-1').isotope('relayout');
  });
}(jQuery));
</script>

[Author]

Posts