Select2 Orderby Not displaying

Anonymous

#44984

Hi,
I have a small but slightly annoying/strange problem when using the filter form on my Woocommerce shop page.
When first landing on the page here: http://tinyurl.com/jr2yuc2 it uses the nicely styled Select2 sorting drop-down.
However, when using any of the brand filters it changes the sorting drop-down to the standard version. I’ve tried to style this box to match the Select2 styling as best I can but I cant change the arrow easily with CSS to match the Select2 arrow.

Is there anyway I can get it to use the Select2 ordering box on all pages including filtered pages?.

Anonymous

#45094

Any ideas on this?

Ross Moderator

#45234

Hey Andrew

I can’t see the select2 on that page but I may have an idea.

Is this after a search has been performed it loses the select2?

In this case I think if you disable ajax it will work?

I think the issue is, when using ajax, the results are reloaded, but in addition to this the search form is too.

This means a regular select will be loaded in, and you will need to apply your “select2” js to it.

Check the first question here:

http://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/

To get our events, so you know when an ajax request has finished and to re-attach select2.

Thanks

Anonymous

#45560

This reply has been marked as private.

Anonymous

#45813

Any further assistance with this would be appreciated.

Ross Moderator

#45976

Hi Andrew

No plugin can remove and add a form element via ajax, and automatically load in custom Javascript your have applied to it.

There is just no way to do it – so its not a plugin limitation more a implementation issue.

Looking at your issue, what I said previously still stands – you need to run select 2 on your form fields after an ajax request has completed.

So, your page will already be loading a version of select2 in the code somewhere – so we do not need to load the whole library again. Instead we just need to call teh same function you probably already called on the fields…

So – it looks like from your case it would be something like:

$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    //so load your lightbox or JS scripts here again+
    $('.searchandfilter select').select2(); //re-init select2
});

If you open the console, do you see the logs “ajax complete”?

Thanks

Anonymous

#45977

All I see in console is errors about Google Map API. I’m really not experienced with javascript/ajax so am a bit lost here.

Ross Moderator

#46055

This reply has been marked as private.

Anonymous

#46071

This reply has been marked as private.

Anonymous

#46210

I have found how the theme is adding the select2 to the woocommerce sorting select:

$j(document).ready(function() {
	"use strict";

    $j('.price_slider_wrapper').parents('.widget').addClass('widget_price_filter');
    initSelect2();
    initAddToCartPlusMinus()
});

<strong>function initSelect2() {
    $j('.woocommerce-ordering .orderby, #calc_shipping_country, #dropdown_product_cat').select2({
        minimumResultsForSearch: -1
    });
    $j('.woocommerce-account .country_select').select2();</strong>
}

I tried adding the search and filter select class .searchandfilter .sf-input-select into the function
but unfortunately it didnt work.
I feel this script is close to what I need but I dont know how to combine it with the script you started for me above.

[Author]

Posts