Search Results for 'Masonry'

[Anonymous]

That’s all working. Great. Thanks!

Now I’d like to try to make it work with Ajax. All my settings are the same as above except I’ve selected the Authors post type and unselected Posts.

When I select Load results using Ajax, then the filter doesn’t work.

I’m doing all this on a page with the following content:

[searchandfilter id="154"]

[searchandfilter id="154" show="results"]

And this page uses this custom template, which queries the db to get category names, then within each category queries to get posts. FYI each post can only have one category. Otherwise I’m aware that a given post could show up more than once on the page.:

<?php
/* template name: Authors Page */
 ?>
<?php get_header(); ?>
 <div id="layout" class="pagewidth clearfix">
     <div id="content" class="authors-page clearfix">
    <?php
    //echo do_shortcode('[searchandfilter id="154"]');
    // get all the categories from the database
    $cats = get_categories(); 
	// loop through the categries
	foreach ($cats as $cat) 
		{
		// setup the cateogory ID
		$cat_id= $cat->term_id;            // create a custom wordpress query
		$args = array('post_type' => 'authors', 'cat' => $cat_id, 'meta_key' => 'author_last_name', 'orderby' => 'meta_value', 'order' => 'asc');
		$args['search_filter_id'] = 154;
		$query = new WP_Query($args);
		$count = $query->found_posts;
		if($count > 0) //fix this to test if there are any results (numrows > 0)
			{
			// Make a header for the cateogry
			echo "<h2 class=\"category-name background\" style=\"clear:both\"><span>".$cat->name."</span></h2>";
			}
?>
                    
     <div id="loops-wrapper" class="loops-wrapper sidebar1 grid3  boxed masonry infinite masonry-done blog" style="position: relative; height: 640.234px;">
     <div class="grid-sizer"></div>
     <div class="gutter-sizer"></div>
    <?php
    // start the wordpress loop!
 	if ( $query->have_posts() ) : ?>
		<?php while ( $query->have_posts() ) : $query->the_post(); ?>	
			<article id="post-<?php echo get_the_ID();?>" class="post clearfix post-<?php echo get_the_ID();?> type-post status-publish format-standard has-post-thumbnail hentry category-featured-authors has-post-title no-post-date " style="position: absolute; left: 0px; top: 500px;">
			 <figure class="post-image  clearfix">
				<a href="<?php the_permalink();?>"><img src="<?php echo get_the_post_thumbnail_url(); ?>" class=" wp-post-image wp-image-84" alt="<?php the_title(); ?>" srcset="" sizes="(max-width: 200px) 100vw, 200px" width="200" height="150"><img src="<?php the_field('featured_book_cover_image'); ?>" class="featured_title_cover_image" width="100" height="150"></a>
				<a href="<?php echo esc_url( get_permalink() ); ?>" class="overlay">
				<div class="excerpt-text"><?php the_field('mini_blurb'); ?></div>
				</a>
			  </figure>
			  <div class="post-content">
				<div class="post-content-inner">
				<!-----------------ICON----------------->
					<!--<span class="<?php if($on_list) { echo $icon_class; } ?> tooltips author-tooltips add_<?php echo get_the_ID();?> list-icon"  title="<?php echo $element_title; ?>">
						<?php if(!$on_list) { ?><a href="#" class="<?php echo $icon_class; ?> btnAddAction" onclick = "cartAction('<?php echo $action; ?>','<?php echo get_the_ID();?>')"></a> <?php } ?>
					</span>	-->
				   <!-----------------/.ICON------------------>
					<h2 class="post-title entry-title"><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h2>
					<div class="entry-content">
					   <?php the_field('featured_book_title'); ?>
					</div><!-- /.entry-content -->
				</div><!-- /.post-content-inner -->
			  </div><!-- /.post-content -->
		 </article>
		<?php endwhile; wp_reset_postdata(); ?>
		<!-- show pagination here -->
	<?php else : ?>
		<!-- show 404 error here -->
	<?php endif; ?>
    </div><!-- #loops-wrapper -->
<?php } // done the foreach statement ?>

	</div><!-- #content -->
</div><!-- #layout -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

This all works fine, except when I set it to use Ajax.

Thanks.

[Trevor]

That would depend what functionality you want, and what options you set in the plugin.

Ajax allows the results to refresh without the page reloading.

Masonry re-arranges the content to give the appearance of columns where vertical gaps between posts is removed.

[Anonymous]

I will try it…

One more question about your documentation :

Does I need to configure “Using Ajax” and “Masonry & Ajax” or anly the first part “Setup is quick and painless” will be enough?

Regards,

[Trevor]

Are you able to send me a live link/URL to your search page so I can take a look?

I suspect that you may be using a theme template or plugin that creates a grid using Masonry. If that is so, Masonry needs to be re-triggered, but I will need to take a look to confirm this.

[Trevor]

It is not one that we have tested. However, I can see that the plugin uses Masonry to arrange the posts, and experience tells me that an Ajax refresh of results would also require some custom javascript to re-trigger the Masonry code/effect.

Out of the box, it will be difficult to get the two working together, but it could almost certainly be made to work. You would most likely require assistance (beyond our normal technical support) to get it working.

[Trevor]

I think the problem is the way the page loop is working, and it does not seem to work with our ‘As an Archive’ method.

In the past I have seen BeTheme, but where the content is built in a page builder called Muffin Builder. But your site appears to have WPBakery Page Builder, for which we do an integration (and I think we cna also integrate with Muffin Builder).

The page I currently see uses Masonry, so that also will cause some problems. How did you build this search page, as I do not see a page with this names in Pages?

I think the problem with prices is associated with the above, not that it is stored in json format.

[Ross]

Hi Lisa

Please take a look, the issue should now be fixed.

Our plugin required a small tweak to get everything playing nice.

I’ve also done a writeup of the required steps, should you wish to get Masonry working etc

https://searchandfilter.com/documentation/3rd-party/elementor/

Thanks

[Ross]

I figured it out. The script needed to relayout masonry is:

(function ( $ ) {
	"use strict";
	
	//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(){
		elementorFrontend.init();
		//so load your lightbox or JS scripts here again
	});
	
}(jQuery));

Also, in some circumstances, I noticed there were some pagination issues, these can be fixed by adding this to functions.php (replacing my-posts, with the slug of the page the posts widget is on):

//fix pagination issues in elementor when using posts widget with S&F
add_action('loop_start', 'elementor_post_widget_pagination_fix', 10);
function elementor_post_widget_pagination_fix($query)
{
	if(is_page("my-posts")){
		$sf_paged = 1;
		if(isset($_GET['sf_paged'])){
			$sf_paged = intval($_GET['sf_paged']);
		}
		set_query_var("paged", $sf_paged); //elementor uses get_query_var to get current page, so lets set it before its performeed
	}
	remove_action('loop_start', 'elementor_post_widget_pagination_fix', 10);
}

Thanks

[Trevor]

#1 Make a results page. To do this, add a New Page to your site, give it a suitable title (in my case I will call it Sample Page) and save the page (use the WordPress editor Update button). In my examples I will use an imaginary site called http://mysite.com/. From this page you will need the full URL (in my case it is http://mysite.com/sample-page):

#2 Now create a new search in Search & Filter Pro. Give it a suitable name (in my case I have called it Elementor Test). You need to make the form to suit your needs. To make testing easier, note the settings I have used on my General Settings tab. Also make a note of the forms shortcode ([searchandfilter id="105"] in my example) as you will need this later (yours will have a different ID number):

#3 Add any fields you need in the form. You can see I have added Categories and Tags, and a Submit button (when you have done testing, you may want to remove this and enable Auto Submit, but that is down to your preference or design needs).

#4 On the Display Results tab make sure you set the form to the Custom display method, set the full Results URL you had from #1 and set the Ajax Container to .elementor-posts-container as shown here:

#5 Save the form. Return to the results page and click the blue ‘Edit with Elementor’ button.

#6 I made the row 25%/75% (1 col : 3col) and in the left column placed a Text Editor element with two shortcodes in (using the shortcode from #2, you need to type in the action part yourself or copy it from here):

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

Again make sure you change the ID numbers!!!

#7 In the right column I placed a Posts Element (notice I have Masonry off at this point):

I will edit this post once I have figured Masonry out. We did ask the Elementor support team how the layout was initialized (using javascript):

https://github.com/pojome/elementor/issues/4800

They don’t think they do, as you can see from their reply. The above screenshot shows a Masonry option, which is a posts grid initializing javascript. That did not impress me much. I now have to figure that part. I will be back!

[Trevor]

Hi

I can see a javascript error in the console appear as soon the infinite scroll kicks in. This is why it never completes.

I also note that the actual individual post container is the aside, and the container with the grid class that you have used in the infinite scroll settings is inside that. That may be a problem.

Another thing I can see is some active javascript applying to the posts to resize them, but I cannot see what the script is. The appearance looks somewhat like Masonry.

I am not sure what theme you are using, but I suspect that the layout script applying to the results and the use of the grid class inside the asides will be the issue.