Search Results for 'Masonry'

[Ross]

Hi Laura

Is $container, something that is updated/replaced in the ajax area?

Then likely $container is replaced, and effectively masonry won’t exist on the new content, so calling reloadItems will throw this error (this is of course all theory)..

I had a quick look at the code and wrote the following which I think should work, although untested:

(function ($) {
    
	function loadMasonry(){

		//$container will always be a new copy
		var $container = $('.grid');
		
		//running images loaded again after page load / ajax event 
		$container.imagesLoaded(function () {
			// INITIALIZE MASONRY
			$container.masonry({
				itemSelector: '.entry',
				columnWidth: '.entry',
				gutter: 40,
			});
			// Masonry has been initialized, okay to call methods
			
			// not sure if you will need this here but might be worth adding in
			//$container.masonry('reloadItems');
		});
	}
	
	//if you need to call on page load etc...
	loadMasonry();
	
	//then also call it after ajax event
	$(document).on("sf:ajaxfinish", ".searchandfilter", function () {
		console.log("ajax complete");
		loadMasonry();
	});

}(jQuery));

Hope that helps

Thanks

[Anonymous]

Ideally, I’d like to get this working with Masonry since it’s packaged with WordPress and a lot of people use it, I feel like I may run into this issue again.

I’ll see what I can find out on my own and I’ll let you know if I get it sorted.

I’ll also check out Salvattore. I hadn’t seen it before, but I like the idea of a CSS-driven configuration.

[Anonymous]

It’s a custom theme I am building using the Genesis Framework.

I found your FAQ on this issue so I tried to implement your recommendation.

$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	console.log("ajax complete");
	//so load your lightbox or JS scripts here again
        $container.masonry('reloadItems')
});

I’m seeing the log statement, but I am getting the error:

Error: “cannot call methods on masonry prior to initialization; attempted to call ‘reloadItems’”

The Masonry Grid documentation covers that how to make sure your grid is initialized before calling a method, but I’ve followed that exactly and I am still getting the error.

https://masonry.desandro.com/faq.html#call-methods-error

I’ve tried all sorts of variations on this, but I am not having any luck.
This is what I have now:

(function ($) {
    var $container = $('.grid');

    $container.imagesLoaded(function () {
        // INITIALIZE MASONRY
        $container.masonry({
            itemSelector: '.entry',
            columnWidth: '.entry',
            gutter: 40,
        });
        // Masonry has been initialized, okay to call methods
        $(document).on("sf:ajaxfinish", ".searchandfilter", function () {
            console.log("ajax complete");
            $('.grid').masonry('reloadItems');
        });
    });

}(jQuery));

I’d appreciate any ideas of where I might be going wrong.

And thanks for the quick responses. I really appreciate it!

[Trevor]

Hi Josh

S&F Pro works with Avada. The problem is to get Ajax working with it. Theme Fusion have, so far, not provided the necessary code required to re-trigger Masonry (used in their Grid).

The process is to build a page in the page builder in Avada, placing our search form using a shortcode in a code element, let us assume that the shortcode for your form is this:

[searchandfilter id="1428"]

… and the Avada grid where you need it.

Directly above the grid element, add another code element (if the S&F form is already in a code element in that place, you can add these extra two snippets in that same element, under the form).

Then the two new snippets to use are these:

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

and:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
// load your Masonry trigger code here
  });
}(jQuery));</script>

The issue is (I have tried to guess what the code is, but so far haven’t figured it) what is need to replace this commented line?

// load your Masonry trigger code here

Then, in the Search & Filter form, the Display Results method needs to be set to Custom and the Results URL to the full URL of the results page.

With Ajax switched on (which is the part that does not work as of yet due to that missing code), the Ajax Container will also need to be set.

The last user to ask this question of Theme Fusion is from this thread:

https://support.searchandfilter.com/forums/topic/using-search-and-filter-not-working-with-cue-music-player/

Hopefully, Theme Fusion will provide an answer at some point. As I said, with Ajax OFF, it should work, with the page reloading.

[Anonymous]

Thanks again. With regard to the second issue, at your suggestion, I played with a few settings on Beaver Builder and get that to work (http://tsas4.wpengine.com/working-paper/). Fixed!

Is there a way to remove the Masonry script so that I don’t get the auto-scroll down on pages that have S&F? Is that something from the Avada theme, Beaver Builder or S&F?

[Trevor]

I took a look at the Page Builder and I am not familiar enough with it to try my idea. It was to use the Custom Display Results Method and either hook in the PHP template, or use the filter_next_query shortcode [e.g. [searchandfilter id="1428" action="filter_next_query"]]immediately before the grid). However, I can see that it is using Masonry to arrange the posts, and it may be that this will need re-triggering to re-arrange the posts each time a search is done.

Using a different theme (Beaver Themer), one user (@Ash) has very kindly posted how he did it:

https://support.searchandfilter.com/forums/topic/beaver-themer-integration-info-on-documentaion-page/

https://support.searchandfilter.com/forums/topic/beaver-themer-integration-info-on-documentaion-page-2/

https://support.searchandfilter.com/forums/topic/beaver-themr-integration-on-taxonomy-archive/

https://support.searchandfilter.com/forums/topic/beaver-builder-themer-integration/

Other than that, you may need to talk to the (very nice and helpful) guys at Beaver Builder.

The javascript method required to be able to re-trigger Masonry (not specific to Beaver Builder) uses code like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
// load your Masonry trigger code here
  });
}(jQuery));</script>

[Trevor]

The problem is that the masonry (isotope needs to be re-triggered when Ajax refreshes that element of the page. Our code would look like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
// load your Masonry trigger code here
  });
}(jQuery));</script>

If the Jupiter support team can provide you with this code, then we can move forwards.

[Anonymous]

My website sells masonry stones. I have built a database using numeric values. This is because The slider function seems to need a numbers database to operate. This is fine. I have assigned each value a descriptor. I would like these descriptions to show instead of the numeric value from the database. For instance – I have a slider range for texture. 1-4 makes little sense to a consumer. Can I output smooth-tumbled? Even if I had to rename each manually (via CSS?. In this instance 1=smooth, 2= cut/hewn, 3= Split/rough, 4= tumbled. The slider would still recalls the values, yet would output words(desscriptions) instead of said values.

I have this issue for many sliders – The customer should choose from ranges of sizes, textures, shapes , consistency, etc.

Perhaps easier – On sizes, we have 1, 3, 5, and 8 (industry standards). Yet the slider seems to need even steps. Is there a way around this? If the above has a solution, I could just descript a 7 as an 8 and leave the step at 2…

[Ross]

Hi again

So I tried to solve this issue without having to revert to you but it looks like I may need your help.

Essentially we need to find out the Javascript that is being used to give your products the masonry / grid type layout.

What happens is, when you search with S&F, the new results are loaded in with Ajax, but, they are not visible (you can check the html markup).

What we need to do is, after S&F results are loaded (we have a JS event for this), then we need to run your themes javascript (that handles the display of hte shop).

If you could contact your theme author to find out, even what library is being used to do this layout then we can do the rest.

Although, I think your theme author could quite easily give us the exact javascript we need to “re-layout” the shop.

Then we would add this to your child theme:

//detects when the ajax request has finished and the content has been updated
// - add scripts that apply to your results here
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	console.log("ajax complete");
	//so add the script from your theme, to do the layout of your products again
});

Thanks

[Anonymous]

it not avada theme code its wp theme code. i dont use masonry.
here is the results.php
<?php
/**
* Search & Filter Pro
*
* Sample Results Template
*
* @package Search_Filter
* @author Ross Morsali
* @link http://www.designsandcode.com/
* @copyright 2015 Designs & Code
*
* Note: these templates are not full page templates, rather
* just an encaspulation of the your results loop which should
* be inserted in to other pages by using a shortcode – think
* of it as a template part
*
* This template is an absolute base example showing you what
* you can do, for more customisation see the WordPress docs
* and using template tags –
*
* http://codex.wordpress.org/Template_Tags
*
*/

if ( $query->have_posts() )
{
?>

<?php echo $query->found_posts; ?> Ergebnisse gefunden<br />
Seite <?php echo $query->query[‘paged’]; ?> von <?php echo $query->max_num_pages; ?><br />

<div class=”pagination”>

<div class=”nav-previous”><?php next_posts_link( ‘Older posts’, $query->max_num_pages ); ?></div>
<div class=”nav-next”><?php previous_posts_link( ‘Newer posts’ ); ?></div>
<?php
/* example code for using the wp_pagenavi plugin */
if (function_exists(‘wp_pagenavi’))
{
echo “<br />”;
wp_pagenavi( array( ‘query’ => $query ) );
}
?>
</div>

<?php
while ($query->have_posts())
{
$query->the_post();

?>
<div>
<h2>“><?php the_title(); ?></h2>
<?php if( have_rows(‘bilder’) ): ?>
<div class=”acf-gallery col-sm-12 col-xs-12 col-md-3″>
<div class=”fusion-gallery fusion-gallery-container fusion-grid-1 fusion-columns-total-10 fusion-gallery-layout-grid” style=”margin: -5px; position: relative; height: 1889.1px;”>

<?php $tmp=0;
while( have_rows(‘bilder’) ): the_row();
$image = get_sub_field(‘url’);
if ($tmp==0) : ?>
<div style=”padding: 5px; display: block; position: absolute; left: 0px; top: 0px;” class=”fusion-grid-column fusion-gallery-column fusion-gallery-column-1 hover-type-zoomin”><div class=”fusion-gallery-image”>” class=”fusion-lightbox” data-rel=”iLightbox[d2dfb9cbd4d28f5c119]” data-caption=””>” alt=”” title=”” aria-label=”” class=”img-responsive wp-image-397″></div></div>
<div class=”clearfix”></div>
<?php $tmp++; ?>
<?php endif; ?>

<?php endwhile; ?>
</div>
</div>
<?php endif; ?>
<div class=”col-sm-12 col-xs-12 col-md-9″><?php the_content(); ?></div>

<p><?php the_category(); ?></p>
<p><?php the_tags(); ?></p>
<div class=”clearfix”></div>

</div>
<div class=”clearfix”></div>

<hr />
<?php
}
?>
Seite <?php echo $query->query[‘paged’]; ?> von <?php echo $query->max_num_pages; ?><br />

<div class=”pagination”>

<div class=”nav-previous”><?php next_posts_link( ‘Older posts’, $query->max_num_pages ); ?></div>
<div class=”nav-next”><?php previous_posts_link( ‘Newer posts’ ); ?></div>
<?php
/* example code for using the wp_pagenavi plugin */
if (function_exists(‘wp_pagenavi’))
{
echo “<br />”;
wp_pagenavi( array( ‘query’ => $query ) );
}
?>
</div>
<?php
}
else
{
echo “No Results Found”;
}
?>