Search Results for 'filter style'

[Anonymous]

I had this issue. I couldn’t find a solution here, so I created a very hacky javascript workaround that seems to work fine. Sharing it here in case anyone has a similar need to have a yearly dropdown and the developers don’t build it in.

Here goes:

1) Just after the filters in the theme template (index.php in my case) I have this:

<li class=”moveme”>
<select id=”years” class=”sf-input-select”>
<option value=””>All Years</option>
<?php wp_get_archives( array(
‘format’ => ‘option’,
‘type’ => ‘yearly’
)); ?>
</select>

This creates a dropdown with all the years for which posts exist, with All Years added at the top.

2) On the back end of the S&F plugin I added a Post Date field, set to date range, and a submit button.

3) In my css stylesheet I hid the Post Date field and the submit button:

.sf-field-submit,
.sf-field-post_date,
#primary > .moveme {
display: none !important;
}

I’m also hiding the .moveme element when it first loads.

4) Using jQuery/javascript I move the dropdown into the S&F form (where it becomes visible) on page load. When an option is selected, it populates the hidden Post Date fields with 1st Jan-31st Dec for the chosen year and clicks ‘submit’. The years dropdown gets reset when the form is reset.

$(document).ready( function() {
$(‘.moveme’).insertBefore(‘li.sf-field-post_date’).removeClass(‘moveme’);

$(‘#years’).change(function() {
var selectedValue = $(this).val();
if (selectedValue == ” ) {
$(‘.sf-datepicker’).val(”);
} else {
$(‘.sf-datepicker’).eq(0).val( ’01/01/’ + selectedValue.substr(selectedValue.length-5, 4 ));
$(‘.sf-datepicker’).eq(1).val( ’31/12/’ + selectedValue.substr(selectedValue.length-5, 4 ));
$(‘.searchandfilter .sf-field-submit input’).click();
}
});

$(‘.search-filter-reset’).click(function() {
$(‘#years’).val(”);
});
});

NB. You’ll have to switch the order of 31/12 if you’re using American dates.

Obviously this is sub-optimal, but hey, it works.

[Anonymous]

Here is a JS solution. This is a little crude, but it works. Obviously this would need run after the DOM is ready.

// test if there is a searchandfilter form on the page
if (document.querySelector(‘.searchandfilter’)) {

// query all the ul elements within our filters
const filters = document.querySelectorAll(
‘.searchandfilter > ul > li > ul’
);

// hide the parent (li) element for any that are empty
filters.forEach((filter) => {
if (filter.children.length === 0) {
filter.parentElement.style.display = ‘none’;
}
});
}

[Anonymous]

Some years later: in the “ajax container” field, insert .row.portfolio-items

I’ve got a bug in the search: the filter works, but the opacity of the results were equals 0.

So, I inserted in the child theme style.css

.portfolio-items .col .inner-wrap[data-animation=”fade_in”], .portfolio-items:not(.carousel) .col .inner-wrap.animated {
opacity: 1!important;
}

[Anonymous]

I’ve seen the videos, and everything seems very interesting, but I don’t see anything on the frontend side, where the current v2 is very poor in terms of graphic style (at least compared to the others competitors). It is also unclear if it will be possible to upgrade the work done with the current v2.

Unfortunately, it’s hard to invest money and time for me on a plugin that you work on only when you have free time compared to your main activity. If I remember, the last v2 update is 14 July 2021, and with every WordPress update (such as with 5.9), I’m always worried that Search&Filter will crash and stop working.

Anyway, I’ve just renewed my license to show you how much I believe in your work, but obviously, such a long wait doesn’t help much (it’s been almost two years since the announcement of the beginning v3).

P.S. I’m a “Beaver Builder” user, and I don’t use Gutenberg (which I think is rubbish, IMO).

[Trevor]

It has not stopped, but we do have competing calls upon our time as developers. Also, as a team, we felt it necessary to reevaluate how our users (site developers) interacted with our plugin, bearing in mind recent developments and directional guidance from WordPress (most obviously seen in Gutenberg and WooCommerce).

So, we have completely recoded the admin interface of Search & Filter. You can see video snippets of the progress at this twitter account (of the developer):

https://twitter.com/rossmorsali

and the associated YouTube account:

https://www.youtube.com/channel/UCRR3L-wNcREwSjKcj3KaF8A

We are now in the process of tying this new admin interface (and how and where it saves settings and forms) back in to the already written front end functionality of V3. As such, it doesn’t look like progress, as what you are doing is putting back together what you have torn apart. As we do this, we have to make adjustments to either our new admin side code, or the front end code.

Our aim is to make this version far, far easier to use to setup, and far easier to style the forms, plus have a much wider range of options. A tough balancing act to perform.

As we reach the end, progress gets slower.

[Anonymous]

Hi,

Can I assume that this is the bones and flesh of the V3 grid and card editor ?

Then Can I share some request 🙂

• ACF fields : quite obviously, and even better any custom field, of which we could type in the field name (not label)
• Custom HTML field : a field where we could type in custom text ad html
• Shortcodes option for custom html field: run shortcode in html field, I expect it to be a checkbox option and not always “On” for performance optimisation
• CSS class field for each field : add a text field for adding CSS class, separated by space, at each level (grid, card, single card field, etc.). Please avoid us the pain we do face when styling S&Fpro form where we can’t add class to individual search field
• Post type styling : provide the ability, within a grid, to style cards according to the post_type is holds ; for instance card background color change according to post_type
• Post format styling : as above with wp built in post_format feature
• post term styling : as above, card can be styled according to the post terms (not only built in taxonomies please)
• Magic tags : well magic tags, or call it and implement it however you want. The idea is to display field value.s within field such as “css class” and “custom html fields”. Three examples, first, I have a custom html field coud contain “%post.title% is a %post.post_type.label% written by %Author%”, second, card Css field could contain “%post.post_type.name% %post.post_format% %post.category%” so the card css class would be “my_cpt_name video french_movies documentary”, video being the post format and “french_movies documentary” the two category term of the post. this enables advanced card building without over whelming ui for the user and very simple usage (pods.io magic tag are a good example of how far this could go)

Then, there are a couple of “features” we discussed not available out of the box in S&Fpro, but that may be implemented using custom php result template, and this would be great if they are not lost on the way

https://support.searchandfilter.com/forums/topic/diference-between-end-of-infnite-scroll-results-and-no-results-at-all

https://support.searchandfilter.com/forums/topic/hide-result-shortcode-until-user-input-ajax-auto-update/

Finally the children category issue

Cheers

[Trevor]

It might be possible using custom CSS, yes, but you might need to hire a coder to do that for you. There might be some snippets of CSS on our forum that you could use. To find snippets for the search field, which has the class name sf-field-search, this search should give you posts that style that field:

https://support.searchandfilter.com/forums/search/data+form+sf+id+searchandfilter+sf-field-search/

I forgot to add that V3 should add more styling options.

[Anonymous]

Hello,

I am having issues displaying my search results. I am using dynamic posts v2 with a custom loop and I want the search results to display in the same spot on the same page (/home/). I’ve been troubleshooting all day and watched all the tutorials I could find, but for some reason I just can’t figure it out.

Also, I was wondering if its possible to have a search bar created?

It would look like the top one at this link https://stock.adobe.com/uk/images/search-bar-vector-design-element-set-of-search-bar-boxes-ui-interface-template-isolated-on-white-background/157333469?asset_id=162817473

Icon size 16, border color #999797, fill color nil, line thickness 1, padding 10 top and 10 bottom.

The design will be used for different searches created for different pages.

Will there be an option to style the search and filter layout/design in any future versions?

Thanks guys!

[Anonymous]

Hi there,

I’ve added the search and filter pro to my website and I went through the documentation. I would like to still have the search area from S&F after the first search, but the search area disappears and I am not sure how to make the search bar stay where it is.

If I use the shortcode to display results all the results are not styled and there are no classes to easily target the content to style myself.

Do you have tips for me?

TL;DR; I don’t want the filters to disappear after the first search.

[Trevor]

Yes, using custom CSS, probably on a field set to display as checkboxes. The user in this thread asked to change his terms to images (Flags for countries, but the same principles would apply:

https://support.searchandfilter.com/forums/topic/radio-button-filter-style/#post-273084