Search Results for 'masonry'

[Trevor]

Hi

You blog page uses Masonry to position and size the posts in the grid, so it will be necessary to trigger this script after the S&F Ajax has finished re-loading the grid. At some point you will need to discover what function (name) your theme uses to do this, but that is for later. We have a sample script that you would use to do this, which you would need to load on the search page:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("S&F JS ajax request finished");
    // ** here you need to reload your masonry script **
  });
}(jQuery));

The other thing we need to do is to customize the S&F Pro results.php template. If you have not done so yet, follow the documentation:

https://www.designsandcode.com/documentation/search-filter-pro/search-results/using-a-shortcode/#Customising_the_Results

So that you have a copy of this template file in a search-filter sub-folder your (child) theme folder, ready to edit.

[Anonymous]

I’m doing on localhost yet…
http://localhost/wordpress/search-page/

and this is code template for Search Page..
<?php
/*
Template Name: Search Page
*/
get_header();
the_post();

global $reviews_slugs;

$review_category = isset( $_GET[$reviews_slugs[‘review-category’]] ) ? esc_sql( $_GET[$reviews_slugs[‘review-category’]] ) : ”;
$review_tag = isset( $_GET[$reviews_slugs[‘review-tag’]] ) ? esc_sql( $_GET[$reviews_slugs[‘review-tag’]] ) : ”;
$keyword = isset( $_GET[$reviews_slugs[‘keyword’]] ) ? esc_sql( $_GET[$reviews_slugs[‘keyword’]] ) : ”;
$sort = isset( $_GET[$reviews_slugs[‘sort’]] ) ? esc_sql( $_GET[$reviews_slugs[‘sort’]] ) : ”;

$base_permalink = reviews_get_permalink_by_tpl( ‘page-tpl_search’ ) ;
$permalink = reviews_get_permalink_by_tpl( ‘page-tpl_search’ ) ;

$args = array(
‘post_type’ => ‘review’,
‘post_status’ => ‘publish’,
‘posts_per_page’ => reviews_get_option( ‘reviews_per_page’ ),
‘tax_query’ => array(
‘relation’ => ‘AND’
),
‘meta_query’ => array(
‘relation’ => ‘OR’
)
);

$category_ancestors = array();
if( !empty( $review_category ) ){
$permalink = add_query_arg( array( $reviews_slugs[‘review-category’] => $review_category ), $permalink );
$args[‘tax_query’][] = array(
‘taxonomy’ => ‘review-category’,
‘field’ => ‘slug’,
‘terms’ => $review_category,
);
$term = get_term_by( ‘slug’, $review_category, ‘review-category’ );
$description = $term->description;
$category_ancestors[] = $term->term_id;
while ( $term->parent != 0 ){
$term = get_term_by( ‘id’, $term->parent, ‘review-category’ );
$category_ancestors[] = $term->term_id;
}
}

if( !empty( $review_tag ) ){
$permalink = add_query_arg( array( $reviews_slugs[‘review-tag’] => $review_tag ), $permalink );
$args[‘tax_query’][] = array(
‘taxonomy’ => ‘review-tag’,
‘field’ => ‘slug’,
‘terms’ => $review_tag,
);
}

if( !empty( $keyword ) ){
$permalink = add_query_arg( array( $reviews_slugs[‘keyword’] => $keyword ), $permalink );
$args[‘s’] = $keyword;
}

if( !empty( $sort ) ){
$sort_array = explode( “-“, $sort );
$args[‘order’] = $sort_array[1];
if( $sort_array[0] == ‘title’ || $sort_array[0] == ‘date’ ){
$args[‘orderby’] = $sort_array[0];
}
else{
$args[‘orderby’] = ‘meta_value_num’;
$args[‘meta_key’] = $sort_array[0];
if( $args[‘meta_key’] == ‘clicks’ ){
$args[‘meta_key’] = ‘review_clicks’;
}
}
}

$cur_page = ( get_query_var( ‘paged’ ) ) ? get_query_var( ‘paged’ ) : 1; //get curent page
$args[‘paged’] = $cur_page;
$reviews = new WP_Query( $args );
$page_links_total = $reviews->max_num_pages;
$page_links = paginate_links(
array(
‘prev_next’ => true,
‘end_size’ => 2,
‘mid_size’ => 2,
‘total’ => $page_links_total,
‘current’ => $cur_page,
‘prev_next’ => false,
‘type’ => ‘array’
)
);
$pagination = reviews_format_pagination( $page_links );

?>

<section class=”search-filter”>
<div class=”container”>
<div class=”row”>
<div class=”col-sm-4″>
<div class=”widget white-block clearfix”>

<div class=”widget-title-wrap”>
<h5 class=”widget-title”>
<i class=”fa fa-angle-double-right”></i><?php esc_html_e( ‘Filter po ključnoj reči’, ‘reviews’ ); ?>
</h5>
</div>
<form method=”get” action=”<?php echo esc_url( $base_permalink ) ?>”>
<input type=”text” class=”form-control” name=”<?php echo esc_attr( $reviews_slugs[‘keyword’] ); ?>” value=”<?php echo esc_attr( $keyword ) ?>” placeholder=”<?php esc_attr_e( ‘Unesi termin i pritisni enter…’, ‘reviews’ ); ?>”>
</form>

</div>
</div>
<div class=”col-sm-4″>

<div class=”widget white-block clearfix”>

<div class=”widget-title-wrap”>
<h5 class=”widget-title”>
<i class=”fa fa-angle-double-right”></i><?php esc_html_e( ‘Filter po Kategoriji’, ‘reviews’ );?>
</h5>
</div>
<form method=”get” action=”<?php echo esc_url( $base_permalink ) ?>”>
<select name=”<?php echo esc_attr( $reviews_slugs[‘review-category’] ); ?>” id=”review-category” class=”form-control”>
<option value=””><?php esc_html_e( ‘Sve Kategorije’, ‘reviews’ ) ?></option>
<?php reviews_display_categories_filter( $category_ancestors, $permalink ) ?>
</select>
</form>

</div>
</div>
<div class=”col-sm-4″>
<div class=”widget white-block clearfix”>

<div class=”widget-title-wrap”>
<h5 class=”widget-title”>
<i class=”fa fa-angle-double-right”></i><?php esc_html_e( ‘Sortiraj Utiske’, ‘reviews’ );?>
</h5>
</div>
<form method=”get” action=”<?php echo esc_url( $base_permalink ) ?>”>
<select name=”<?php echo esc_attr( $reviews_slugs[‘sort’] ); ?>” id=”sort” class=”form-control”>
<option value=””><?php esc_html_e( ‘- Izaberi -‘, ‘reviews’ ) ?></option>
<option value=”author_average-desc” <?php echo $sort == ‘author_average-desc’ ? esc_attr( ‘selected=”selected”‘ ) : ” ?>><?php esc_html_e( ‘Po autoru (najviše prvo)’, ‘reviews’ ) ?></option>
<option value=”author_average-asc” <?php echo $sort == ‘author_average-asc’ ? esc_attr( ‘selected=”selected”‘ ) : ” ?>><?php esc_html_e( ‘Po autoru (najmanje prvo)’, ‘reviews’ ) ?></option>
<option value=”user_average-desc” <?php echo $sort == ‘user_average-desc’ ? esc_attr( ‘selected=”selected”‘ ) : ” ?>><?php esc_html_e( ‘Po korisniku (najviše prvo)’, ‘reviews’ ) ?></option>
<option value=”user_average-asc” <?php echo $sort == ‘user_average-asc’ ? esc_attr( ‘selected=”selected”‘ ) : ” ?>><?php esc_html_e( ‘Po korisniku (najmanje prvo)’, ‘reviews’ ) ?></option>
<option value=”date-desc” <?php echo $sort == ‘date-desc’ ? esc_attr( ‘selected=”selected”‘ ) : ” ?>><?php esc_html_e( ‘Datum (skorašnji prvo)’, ‘reviews’ ) ?></option>
<option value=”date-asc” <?php echo $sort == ‘date-asc’ ? esc_attr( ‘selected=”selected”‘ ) : ” ?>><?php esc_html_e( ‘Datum (stariji prvo)’, ‘reviews’ ) ?></option>
<option value=”title-desc” <?php echo $sort == ‘title-desc’ ? esc_attr( ‘selected=”selected”‘ ) : ” ?>><?php esc_html_e( ‘Naziv (opadajuče)’, ‘reviews’ ) ?></option>
<option value=”title-asc” <?php echo $sort == ‘title-asc’ ? esc_attr( ‘selected=”selected”‘ ) : ” ?>><?php esc_html_e( ‘Naziv (rastuće)’, ‘reviews’ ) ?></option>
<option value=”clicks-desc” <?php echo $sort == ‘clicks-desc’ ? esc_attr( ‘selected=”selected”‘ ) : ” ?>><?php esc_html_e( ‘Pregleda (opadajuće)’, ‘reviews’ ) ?></option>
<option value=”clicks-asc” <?php echo $sort == ‘clicks-asc’ ? esc_attr( ‘selected=”selected”‘ ) : ” ?>><?php esc_html_e( ‘Pregleda (rastuće)’, ‘reviews’ ) ?></option>
</select>
<?php if( !empty( $review_category ) ): ?>
<input type=”hidden” name=”<?php echo esc_attr( $reviews_slugs[‘review-category’] ); ?>” value=”<?php echo esc_attr( $review_category ) ?>”>
<?php endif; ?>
<?php if( !empty( $review_tag ) ): ?>
<input type=”hidden” name=”<?php echo esc_attr( $reviews_slugs[‘review-tag’] ); ?>” value=”<?php echo esc_attr( $review_tag ) ?>”>
<?php endif; ?>
<?php if( !empty( $keyword ) ): ?>
<input type=”hidden” name=”<?php echo esc_attr( $reviews_slugs[‘keyword’] ); ?>” value=”<?php echo esc_attr( $keyword ) ?>”>
<?php endif; ?>
</form>

</div>
</div>
</div>
<div class=”row”>
<div class=”col-sm-<?php echo is_active_sidebar( ‘reviews-search’ ) ? esc_attr( ‘9’ ) : esc_attr( ’12’ ) ?>”>
<?php
if( !empty( $description ) ){
?>
<div class=”white-block”>
<div class=”content-inner category-description”>
<?php echo $description ?>
</div>
</div>
<?php
}
?>
<?php if( $reviews->have_posts() ): ?>
<div class=”row masonry”>
<?php
while( $reviews->have_posts() ){
$reviews->the_post();
echo ‘<div class=”col-sm-‘.( is_active_sidebar( ‘reviews-search’ ) ? esc_attr( ‘6’ ) : esc_attr( ‘4’ ) ).’ masonry-item”>’;
include( reviews_load_path( ‘includes/review-box.php’ ) );
echo ‘</div>’;
}
?>
</div>
<?php if( !empty( $pagination ) ): ?>
<div class=”pagination”>
<?php echo $pagination; ?>
</div>
<?php endif; ?>
<?php else: ?>
<div class=”widget white-block”>
<?php esc_html_e( ‘Nema utiska po zadatom kriterijumu…’, ‘reviews’ ); ?>
</div>
<?php endif; ?>
</div>

<?php get_sidebar( ‘reviews-search’ ); ?>
</div>
</div>
</section>

<?php get_footer(); ?>

[Ross]

Hi Alaa

The issue here is that the Javascript that is loaded by your site (as with most websites), is only loaded once, when the page is loaded.

When S&F loads in new posts with ajax, your websites scripts are not “reloaded” so it doesn’t know how it should behave with the infinite scroll…

I’m not sure if there would be more issues integrating the two past this point (as you are integrating theme JS with S&F, and its untested) but it looks like for now this is the main issue.

Just to note, you may have already noticed, but your masonry grid does not work correctly after an ajax request is performed, for the same reason above… when new posts are loaded from S&F, your theme must reload the scripts related to masonry and your infinite scroll..

Fortunately, we have a JS filter for this (first question): https://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/

So you need this part for the script:

//depeding on where you add your JS, sometimes its necessary to wrap the above events in a function (as is standard practise):
(function ( $ ) {
	"use strict";
	
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		console.log("S&F JS ajax request finished");
		// ** here you need to reload your masonry & pagination/infinite scroll scripts **
	});
}(jQuery));

The part // ** here you need to reload your masonry & pagination/infinite scroll scripts ** is where you should add this code.

The next (potentially tricky) part for you is to find out how to do this with your theme, it might be best to open a support ticket with them and refer them to this thread..

If the above is not possible, then you likely won’t be able to use ajax unless you want to add in normal pagination to your pages.

Hope that helps

[Trevor]

Is the page using a javascript grid systems, such as Masonry or Isotope, to populate/re-populate the grid? If so, it needs to be re-initialized after our Ajax runs. Our FAQ page gives snippets to show how (sort of) and other users have posted on the forum how they did it too.

[Anonymous]

This is how I got the masonry working:

(function ( $ ) {
	
	"use strict";

	$(function () {
		//detects the start of an ajax request being made
		$(document).on("sf:ajaxstart", ".searchandfilter", function(){
		  console.log("ajax start");

		});

		//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");

$('#ms-container').imagesLoaded( function() {
var container = document.querySelector('#ms-container');
var msnry = new Masonry( container, {
itemSelector: '.ms-item',
columnWidth: '.ms-item',                
isAnimated: true,
        });
});
// this is to change the text label in search box --this can be omitted
$('label.sf-label-checkbox').each(function() {
    var text = $(this).text();
    $(this).text(text.replace('TL Articles', 'Thought Leadership')); 
});  
// end of change the text label in search box --this can be omitted
      console.log("masonry complete");
			//so load your lightbox or JS scripts here again
		});

		//an event fired when S&F is initialised and S&F scripts have been loaded
		$(document).on("sf:init", ".searchandfilter", function(){
			console.log("S&F JS initialised");

		});
	});
			
}(jQuery));

[Trevor]

I am not sure how you might go about this, so I will have to ask Ross. Others reading this might be interested in the code you used to get masonry working? If you can post it here, in between code tags (in the formatting bar above).

[Trevor]

That suggests that you are using isotope or masonry to arrange the posts? If so, it needs to be triggered again after our Ajax has finished. Let me know if my guess was correct so I can advise how?

[Trevor]

The free Search & Filter is totally different to the paid version. I can provide you with a modified results.php, so no work required for you there. All I need is an example page of what it should look like (a page that does NOT use Isotope or masonry in the grid).

[Trevor]

Hi

With the left sidebar, that would look best with 3 columns in the grid. The issue for me is I need to see a page with a similar gride by way of an example, that is made in your theme, WITHOUT the use of Isotope or Masonry. Do you have such an example, or can you make a sample page for me to copy code from? The portfolio grid layouts use isotope.

[Anonymous]

Thanks for the reply Trevor.

I’m scaling back a bit and just trying to work with customising results.php to display the results in a grid without masonry/isotope animation. The post from MindChip seems similar to what I’d like to achieve.

If I wanted to display custom meta data along with the featured image can I use ‘get_post_meta’?

I tried something like this in place of the_category(); but can’t seem to get it working
<p><?php get_post_meta( get_the_ID(), ‘ecpt_7’, true ); ?><p>

Thanks again