Forums Forums Search & Filter Pro Apply the filter to an existing portfolio page

Viewing 1 post (of 1 total)
  • 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>
Viewing 1 post (of 1 total)