Search Results for 'filter style'

[dylanb4]

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(); ?>

Add New Note to this Reply

[Iñigo Flores]

This reply has been marked as private.

Add New Note to this Reply

[Trevor]

This reply has been marked as private.

Add New Note to this Reply

[Jochen]

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	
		}

Add New Note to this Reply

[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.

Add New Note to this Reply

[Nathan Holmes]

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(); ?>

Add New Note to this Reply

[Steffen]

This reply has been marked as private.

Add New Note to this Reply

[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).

Add New Note to this Reply

[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?

Add New Note to this Reply

[Danny Albeck]

This reply has been marked as private.

Add New Note to this Reply