Search Results for 'filter style'

[Anonymous]

We’ve recently upgraded to the latest version of Search and Filter pro.

The old version was setup by someone else. We are using a custom template to display search results, with custom taxonomies for the product pages.

The filtering no longer works, and we are struggling to get multiple pages for results as the we can’t seem to figure our the “loop” for display our results with the information attached.

Archive page below:

<?php get_header(); ?>

<div class=”page-header available”>

<div class=”container”>

<?php echo do_shortcode(‘[searchandfilter id=”79″]’); ?>

</div></div>

<div class=”full-width-content”>

<div class=”container”>
<div class=”sculpture-intro”><h1 style=”font-size:x-Large;”>Sculpture Collection
</h1><br>

</div>
<div class=”row”>

<div class=”col-md-12″>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<article class=” sculpture_post”>
<div class=”archive-thumb”>

“> <?php the_post_thumbnail( ‘archive-thumb’ ); ?>
</div>

<h1 class=”archive”>“><?php the_title(); ?></h1>
<p><?php the_category( ‘, ‘ ); ?></p>
<div class=”artistt-archive”>
<?php

$term = get_field(‘artist’);

if( $term ): ?>

<p>by <?php echo $term->name; ?></p>

<?php endif; ?>
</div>

<p><?php the_field(‘price’); ?></p>

<?php

$term = get_field(‘size’);

if( $term ): ?>

<p>size: <?php echo $term->name; ?></p>

<?php endif; ?>

</article>

<?php endwhile; else: ?>
<br>
<div class=”no-result”>
<h1>sorry! no sculptures match your criteria</h1>
<br>
Reset Search
</div>

<?php endif; ?>

</div>

</div>

<?php get_footer(); ?>

[Anonymous]

Thanks Trevor, I completely understand that you cannot help me with custom css. Let me try a different approach which might be much easier:
I can wrap the search form into a “Spoiler” (I’m using this plugin https://getshortcodes.com/docs/spoiler/) on mobile and show it only in open status if a filter is set already.
– Can you please me with a query that will check if any filters are already set
– wp_is_mobile() also return true on larger screens or on landscape view, do you know a better way?

$searchform = do_shortcode('[searchandfilter id="8746"]');
$no_filters_set = 1; // need a query here if any search filters are set
if ( wp_is_mobile()) {	
	if 	($no_filters_set)  {
	    $my_shortcode = '[su_spoiler title="Filter Articles" open="NO" style="default" icon="plus" anchor="" anchor_in_url="no" class=""]';
	}		
	else {
		$my_shortcode = '[su_spoiler title="Filter articles" open="YES" style="default" icon="plus" anchor="" anchor_in_url="no" class=""]';
	}
	
	$my_shortcode .= $searchform;
	$my_shortcode .= '[/su_spoiler]';
	echo do_shortcode($my_shortcode);
} 
else { echo $searchform; // show the searchform on desktop	
		}

[Trevor]

Ah, that we have little or no control over. Let me explain, and then offer a ‘Select’ replacement script as a possible solution (used by many themes).

One of the reasons so many themes/sites use ‘Select’ replacement scripts is that much of the formatting of standard select controls is done by the browser, and so you have little or no control over that.

The Chosen script is included with/used by our plugin by default. However, it is now pretty much abandoned and has not received any major updates in a long time. It has poor support for iOS devices for example.

In the current version of our plugin, there is an option in our settings page to choose which (Combobox) script to use.

Go to wp-admin -> Search & Filter -> Settings -> Combobox Script

Change this from Chosen to Select2

The Select2 script is then available for you to apply to the form. Select2 is maintained now by the WooCommerce team, who are, of course, owned by Automattic, the owners of WordPress, and as such is used by a lot of themes and plugins.

So, in the form field settings, select the combobox option for each. This will mean you may need to add the styling you want to these fields.

There is an alternate way of doing this, but this is the easiest. Now you can style the resulting select as it is not a select!

This post shows the complete Select2 CSS that we already include in our plugin:

https://support.searchandfilter.com/forums/topic/customise-dropdown-combobox/#post-180345

At the end is an example of how to modify it.

[Anonymous]

Hi, I’m having some trouble getting the ajax event hooks to work.
I added the code from the FAQ page for sf:ajaxfinish, but I’m not seeing anything in the console log.
See code below. Does anything stand out as to why this would not be working?

Thanks.

<?php

/**
 * The template for displaying search results pages.
 *
 * @package understrap
 */

// Exit if accessed directly.
defined('ABSPATH') || exit;

get_header();

$container = get_theme_mod('understrap_container_type');?>

<div class="wrapper contentPadding" id="search-wrapper">

<link rel="stylesheet" href="<?php echo get_site_url();?>/wp-content/themes/InyoBlogTheme/dist/bricklayer.min.css">
<script src="<?php echo get_site_url();?>/wp-content/themes/InyoBlogTheme/dist/bricklayer.min.js"></script>

	<div class="<?php echo esc_attr($container); ?>" id="content" tabindex="-1">
		
	<div class="row">
	<!--Display sub navigation partial view -->
		<?php get_template_part('partials/navtabs'); ?>
	</div>
	<div id="test">This is a test</div>
		
		<!--Display Search & Filter Widget -->
		<?php if (is_active_sidebar('search-bar')) : ?>
							<div id="search-bar" role="complementary">
								<?php dynamic_sidebar('search-bar'); ?>
								
							</div>
						<?php endif; ?>		

		<header id="search-title">
			
			<?php
			global $searchandfilter;
			$sf_current_query = $searchandfilter->get(102003)->current_query();	
			$args = array(
				"str" => '%2$s'
			);

			if (!$sf_current_query->get_search_term()=="") {
			echo '<h3>Search Results for:<span> "' . $sf_current_query->get_search_term() . '"</span></h3>'; 
			}

			?>
			
		</header><!-- .page-header -->

		<div class="row">

			<!-- Do the left sidebar check and opens the primary div -->
			<?php get_template_part('global-templates/left-sidebar-check'); ?>

			<main class="site-main" id="main">

				<?php if (have_posts()) : ?>

					<div class="bricklayer" id="my-bricklayer"> 
					<?php /* Start the Loop */ ?>

					<?php while (have_posts()) : the_post(); ?>
						<?php
							//Display search results based on content type. 
							//To change how different content types are displayed in search, edit the content-search loop template.									
							get_template_part('loop-templates/content', 'search');
									
						?>
						
					<?php endwhile; 

					wp_reset_postdata();

					?>

					</div><!--Bricklayer-->
						
				<?php endif; ?>
									
			</main><!-- #main -->

			<!-- The pagination component -->
			<div class="pt-3">
				<?php 
				understrap_pagination();
		
				?>
			</div>

			<!-- Do the right sidebar check -->
			<?php get_template_part('global-templates/right-sidebar-check'); ?>

		</div><!-- .row -->	

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

</div><!-- #search-wrapper -->

<script>
	var bricklayer = new Bricklayer(document.getElementById('my-bricklayer'));

	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		console.log("ajax complete");
		//do or stop your animation
	});
</script>

<!--Display bottom advertisment-->
<?php get_template_part( 'partials/poolparts-ad'); ?>

<?php get_footer(); ?>

[Trevor]

You can, of course, add filters to the search, as long as you have a different source of meta data (terms) for each of them. At the moment, you have only a custom taxonomy named categoriesignature.

You add can custom fields (Post Meta) or other taxonomies.

As to the sidebar question, that is dependent on your theme, or page builder, and this is not something that comes within the scope of our support.

I can see that the form you have currently has some alignment issues with the radio buttons and checkboxes, which may require further custom CSS to align correctly.

In the main, our form is relatively unstyled, leaving it to the user to add their own style using custom CSS in the theme custom CSS panel, or the WordPress Customizer (and there are other methods for importing CSS to a site).

[Trevor]

I fixed that link. Can you check/confirm that you did follow the advice there?

As to the bullet points. This theme CSS file:

https://www.hifi-advice.com/blog/wp-content/themes/theblog/style.css

On line 861 has this CSS, which is causing them:

.body-content ul > li:before {
    content: "\f105";
    font-family: "FontAwesome";
    position: absolute;
    left: 0;
    top: 5px;
    line-height: 1;
}

Add this custom CSS to the theme customizer to fix this:

.body-content .searchandfilter ul > li:before {
    content: none;
}

Once I have the answer to the first part of this reply, I need to see the content of the results.php file, IF you have modified it? If you did not modify it, do you have a Related Posts plugin installed (which one), as it may be automatically adding that content after the post excerpt?

[Anonymous]

I dont think all these are necessary but this is how I fixed it for now:

function remove_sf_scripts() {
	if (tribe_is_event() || tribe_is_event_category() || tribe_is_in_main_loop() || tribe_is_view() || 'tribe_events' == get_post_type() || is_singular( 'tribe_events' )) {
		wp_deregister_script( 'search-filter-plugin-build' );
		wp_deregister_script( 'search-filter-plugin-chosen' );
		wp_deregister_script( 'jquery-ui-datepicker' );
		wp_deregister_style( 'search-filter-plugin-styles' );
	}
}
add_action('wp_enqueue_scripts', 'remove_sf_scripts', 100);

[Trevor]

There is no way to add a scroll to a select field other than to have lots of entries (as our demo does). What you could do is to make it a combobox in the field settings. This would the apply the Select2 jQuery script to it, and style it much better.

At the moment you are hiding if empty. But you want to show them, see here:

https://www.screencast.com/t/jUc9Mhe5WqYf

Some custom CSS is needed for the date to be in 2 columns:

.searchandfilter[data-sf-form-id="14110"] li.sf-field-post_date input {
    width: 100px;
    min-width: auto;
    display: inline-block;
}
.searchandfilter[data-sf-form-id="14110"] li.sf-field-post_date li {
    display: inline-block;
}
.searchandfilter[data-sf-form-id="14110"] li.sf-field-post_date li:first-child {
    margin-right: 20px;
}

[Anonymous]

I have many facets that I’ll have to style in boxes with scrollbars. The problem I’m having is to have the form in the top area of the search results and tags/categories pages. I still don’t grasp this (the pro plugin should have a few templates to build upon on).
To make it easier, how can I have the page results of your example at https://demo.searchandfilter.com/movies/ but with the form at the top and the results in full-width bellow?
If you can give me the actual php template I’ll really appreciate it.

Thanks a lot for your kind assistance!

[Anonymous]

Hi Trevor,

I have tried to apply options from Select2 to the dropdown filter. For instance trying to disable the default search field. Not giving me any errors but neither is it removing the search input form.

So, basically i want to be able to add additional options to the existing dropdown menu to customize the dropdown with the JS options which are available on the official site.

After adding the latest version of Select2 JS and CSS to the functions.php by enqueue it will create a new dropdown and apply the options to it.

This is not what i want. I want to to override and extend the options from the current dropdown.

also tried to dequeue the default style but the CSS is not being removed. What is the correct code for it?

Could you tell me how i can use the options from Select2?

Thanks in advance.

Kind regards,
Nino