Search Results for 'Masonry'

[Trevor]

Your theme appears to include Visual Composer, so you might want to use our free Visual Composer addon. That grid you show is using Masonry, so you would need to use the Visual Composer Post Masonry element. This post explains more:

https://support.searchandfilter.com/forums/topic/pagination-not-working-11/#post-105228

You may need to make your own grid design using their grid builder, and it may need some custom CSS, but it is possible.

[Anonymous]

The custom content is added in a custom field in the back-end and then called in results.php, before the loop as follows:

<?php if( get_field('luxury_holidays_content') ): ?>

	<div class="masonry-layout-panel custom-content">
			
		<?php the_field('luxury_holidays_content'); ?>
		
	</div>
	
<?php endif; ?>

Strangely, if I hard code the custom content in results.php, it is always visible. However, if I call it in PHP as above, it gets removed when a search or form reset is performed.

[Trevor]

There is a way to use the Divi Builder Blog grid with Search & Filter, then it all become seamless (including Ajax and the Masonry like grid that Divi uses, called Salvattore). Would this work for you?

[Trevor]

With Avada, it is necessary to use shortcode method, but the layout can be fixed, to an extent, as long as I have an example of what it needs to look like. I cannot emulate a Masonry type grid, but otherwise most is achievable.

[Trevor]

Also note that we have a workaround for Divi to support their blog grid directly as the results container. That means it then also supports their masonry like script. Search this forum for:

filter_next_query salvattore divi

[Anonymous]

Found it!

$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
        'use strict';
        console.log("ajax complete");
$('#masonry-container').masonry('reloadItems');
        $('#masonry-container').masonry({
            itemSelector: '#masonry-container .grid-item'
        });  
		
});

[Anonymous]

Hi thanks for the reply

I used a custom theme based on foundation (joints wp).

I tried

$( document ).on(“sf:ajaxfinish”, “.searchandfilter”, function() {
$(‘#masonry-container’).masonry({
itemSelector: ‘#masonry-container .grid-item’
});
});

But no effect…

[Trevor]

Hi

Infinite scroll uses Ajax to load the ‘next’ posts, and so you need to do two things:

#1 Detect when our ajax has finished, for which we have a script snippet
#2 Re-run the masonry script on the posts/posts container

Your major problem will be #2 therefore. Each theme seems to implement masonry differently (assuming your theme actually uses Masonry, and not a look-a-like script like Salvattore). Some themes sensibly create a function to do this, and then run that on document ready. That makes life easier. Some simply run a long script on document ready, part of which does the actual masonry bit on the posts. That makes it very hard. You will need the help of your theme author.

I will give an example here, in this case for the Divi theme (which uses Salvattore):

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    var grids = document.getElementsByClassName('et_pb_blog_grid');
    salvattore['register_grid'](grids[0]);
  });
}(jQuery));</script>

In the above, the part that re-runs the Salvattore script in Divi is these two lines:

var grids = document.getElementsByClassName('et_pb_blog_grid');
salvattore['register_grid'](grids[0]);

Which is relatively easy.

In essence, it boils down to what theme you are using and if the author of it can help you with this. In the above example, Elegant Themes (the author of Divi) could not help, but as Salvattore is so easy to implement, we figured it ourselves with the help of a third party web site code snippet.

[Ross]

Hi Veronika

Apologies for the delay, I’ve been looking into this.

I think I’ve figured the issue.

It seems that when your shop page is loaded, a script is called to show your products (that nice fade effect where the products appear 1 by 1), this means they are initially set to invisible by your theme, and made visible with your themes Javascript.

What happens when you do an ajax search with S&F is, the results do get loaded in but they are not visible, as initially set by your theme.

If you use your browsers inspector, to look at the HTML you will see the results there hidden.

What you need to do, is detect when an ajax request has finished, then run the scripts to show the item in your shop (I guess this could be some sort of masonry script?)

Fortunately, we have a javascript event for this (sf:ajaxfinish) – https://gist.github.com/rmorse/b157004c68870dbd9fb9#file-sf-pro-ajax-events-js

I hope that makes sense.

Best

[Trevor]

Hi

The fade out/fade in effect is done using Ajax results update. That Search & Filter can do.

The design of the grid is down to the theme (or your coding team) to do. The grid on the page you showed is using a Masonry-type effect. There are two major public libraries that do this; Masonry (Isotope) itself and Salvattore.

After Search & Filter performs its Ajax filter, the theme needs to re-do the grid. It would do this through use of a small script snippet we have that will run when the Ajax is finished, but it requires the code from the theme to redo the Masonry, if that is what the theme uses. I know pretty much how to do it for Salvattore, as that is much easier to do, but Masonry is complex to code and each theme does it differently.

So that depends on your theme author to supply you with the code.