Each theme tends to integrate Masonry differently. Which theme are you using?
AnonymousInactive
I have version 5.4.5 of wpbakery page builder
In the plugin that I attached, only the Add option appears which is the “search and filter form”, but “Post grid” and “Post Masonry grid” are not available, which are the other ones that appear in the image that you attached .
Add that wpbakery option to the content of my page, but when doing the search it does not yield any results. Not only does not solve the problem, but it adds another. Please I need help inmediately. I can attach the code of my search.php if desired. Thank you
Did you follow our guide for Elementor:
https://searchandfilter.com/documentation/3rd-party/elementor/
Even if you do not have Masonry enabled (it might not even be an option), use the guide for Masonry & Ajax, but, instead of this code:
(function ( $ ) {
"use strict";
// detects when the ajax request has finished and the content has been updated
// re-init the layout scripts from Elementor
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
elementorFrontend.init();
});
}(jQuery));
Use this code:
(function ( $ ) {
"use strict";
// detects when the ajax request has finished and the content has been updated
// re-init the layout scripts from Elementor
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
});
}(jQuery));
Note, if you are placing the code inline on the page (in a widget), it needs the <script>.....</script> tags around it.
Even though you may not have followed the guide section for Masonry and Ajax (maybe you are not using Masonry), did you include the JavaScript I showed in my earlier reply?
Did you follow our guide for Elementor:
https://searchandfilter.com/documentation/3rd-party/elementor/
Even if you do not have Masonry enabled (it might not even be an option), use the guide for Masonry & Ajax, but, instead of this code:
(function ( $ ) {
"use strict";
// detects when the ajax request has finished and the content has been updated
// re-init the layout scripts from Elementor
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
elementorFrontend.init();
});
}(jQuery));
Use this code:
(function ( $ ) {
"use strict";
// detects when the ajax request has finished and the content has been updated
// re-init the layout scripts from Elementor
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
});
}(jQuery));
Note, if you are placing the code inline on the page (in a widget), it needs the <script>.....</script> tags around it.
Are you using the integration shown here (I do not think that you are):
https://searchandfilter.com/documentation/3rd-party/elementor/
You need also to use the Javascript for Masonry option, but the JavaScript code is now changed (different to what is shown in that guide). See this post for the new code:
https://support.searchandfilter.com/forums/topic/elementor-pro-post-grid-issues-pagination-and-image-render-post-filter/#post-191836
You are using our Shortcode Display Results method, and the code you sent is the modified results.php template file you have edited? How do you apply the masonry javascript to that? Does masonry work on the initial page load, but not when more posts are loaded?
AnonymousInactive
Hi there,
I’d like to use the infinite scroll mechanism in combination with masonry and the shortcode function.
The results url points definitely pointed to the write page. And the following settings should be correct either.
Post / Result Selector: article
Infinite Scroll Container: .archive-query__inner
And this is my custom results template.
<?php if ( $query->have_posts() ): ?>
<div class="masonry archive-query__inner entry-content">
<?php while ($query->have_posts()) : $query->the_post(); $kategorie_term = get_field( 'kategorie' ); ?>
<article class="object <?php if ( $kategorie_term && $kategorie_term->name !== 'Fact' ) { echo 'object--blue tagged'; } elseif ( $kategorie_term->name == 'Fact' ) { echo 'object--yellow tagged'; } else { echo 'object--blue'; } ?>" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink(); ?>">
<div class="lazyload object__inner" data-bg="<?php if ( $kategorie_term->name == 'Fact' ) { echo the_field( 'factbild' ); } else { echo get_the_post_thumbnail_url(); } ?>" id="post-<?php the_ID(); ?>">
<?php if ( $kategorie_term ): ?>
<div class="overline">
<h6><?php echo $kategorie_term ->name; ?></h6>
</div>
<?php endif; ?>
<div class="object__inner__text content-no-margin">
<?php if ( $kategorie_term && $kategorie_term->name !== 'Fact' ) { echo '<h3>' . get_the_title() . '</h3>'; } elseif ( $kategorie_term->name == 'Fact' ) { echo '<h3>' . get_field( 'facttext' ) . '</h3>'; } else { echo '<h4>' . get_the_title() . '</h4>'; } ?>
<p class="textlink" href="<?php the_permalink(); ?>">Mehr erfahren</p>
</div>
</div>
</a>
</article>
<?php endwhile; ?>
</div>
<?php else: ?>
<div class="search-filter-results-list" data-search-filter-action="infinite-scroll-end">
<span>Keine Einträge gefunden...</span>
</div>
<?php endif; ?>
Thank you in advance for your help!
The results are there but hidden? If so, does the elementor grid element have the option to enable Masonry (not an issue if it does not)? The Text block that has the form in should look something like this:
[searchandfilter id="246086"]
[searchandfilter id="246086" action="filter_next_query"]
<script>(function ( $ ) {
"use strict";
// detects when the ajax request has finished and the content has been updated
// re-init the layout scripts from Elementor
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
});
}(jQuery));</script>
In that order.
