[Résolu] Parametric search filter with jquery stars

[Auteur]

Publications

[rJ-2]

I am creating a view which will Display the results as a parametric search. I want to use this so visitors can filter breeds.
Custom post type = Breeds
Custom fields: Size (Radio values 1- 7)
Grooming (Radio values 1- 7)
Social (Radio values 1- 7)

On the page where they can filter breeds by custom fields I don't want to display radiobuttons, but instead I want to display stars (from 1 to 7)
Can this be accomlished and if so, can you please help me out on how to accomplish this?
I had tried to use this as an example ( https://toolset.com/forums/topic/styling-radio-buttons-in-cred-form/) but this is for CRED forms, and I can not get it to work for my view

Regards,
Niek

[Caridad]

Dear Niek,

You will have to use a javascript that converts the radio buttons to a star-selector. This is the normal approach so that browsers without javascript will still gracefully downgrade to using radio buttons and will still work.

Have you found a jquery star script that you would like to use here?

Regards
Caridad

[rJ-2]

Hello Caridad,

Thank you for your answer. I came accros this script which I think handles it. hidden link

Regards

[Caridad]

Dear Niek,

I created a View with parametric search on the rating field. The code for the filter looks like this:

[wpv-filter-start hide="false"]
[wpv-filter-controls]
	[wpml-string context="wpv-views"]Rating:[/wpml-string] 
	<div class="stars">[wpv-control field="rating" url_param="rating" type="radios" values="1,2,3,4,5" display_values="1,2,3,4,5"]</div>
	[wpv-filter-submit name="Search"]
[/wpv-filter-controls]
[wpv-filter-end]

I was able to get it work with some changes, add it to the JS section of your View:

jQuery(function($) {
  $('.stars').starRating({
    onimage: 'staron.png',
    offimage: 'staroff.png'
  });
});

(function($) {
    $.fn.starRating = function(options) {

        // Defaults and options
        var defaults = {
              onimage: 'staron.png',
              offimage: 'staroff.png'
        };
        var opts = $.extend({}, defaults, options);
        this.each(function() {
            $('input[type=radio]',this).hide(); //hide the radio buttons themselves
            $('label',this).html(''); //hide the regular text labels
            $('label',this).append('<img src="'+opts.offimage+'">'); //create image elements 
            
            var changeHandler = function()
            {
                stars = parseInt($(this).val());
                elementName = $(this).attr('name');
                $('input[name='+elementName+']').each(function(){
                    if(parseInt($(this).val()) <= stars) {
						$('img',$(this).next('label')).attr('src',opts.onimage);
                    } else {
                        $('img',$(this).next('label')).attr('src',opts.offimage);
					}
                });
            }
            $('input[type=radio]',this).bind('change',changeHandler);
            $('input[type=radio]:checked',this).trigger('change');
        })
   }
})(jQuery);

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.

Regards,
Caridad

[rJ-2]

Hello Caridad,

Thank you very much for your solution. It works perfectly. One other question though. It only works with a submit button. If I leave out the Submit, after the reload, the stars disappear and the radiobuttons are back. Do you know why this happends?

Also, Is it possible to have the radiolist horizontal instead of vertical?

Regards,
Niek

[Caridad]

Dear Niek,

This happens because the javascript runs on page load, not on the ajax reload. Let me suggest an alternative solution based on this.

If you click on the "Advanced Options" button, you have a box to put the name of a function to run after each update, put in there for example 'rating_stars' without the quotes.

Add this code to the CSS section:

.stars br,
.stars input {
  display:none;
}
.stars label {
  display:inline-block;
  width:20px;
  height:20px;
  text-indent:100%;
  background: url(staroff.png) no-repeat;
}
.stars label.on {
  background-image: url(staron.png);
}

You will need to adjust the path to the image files and add this code to the JS section:

function rating_stars() {
  var stars = parseInt(jQuery('.stars input[type=radio]:checked').val());
  jQuery(".stars input[type=radio]").each(function() {
    if(parseInt(jQuery(this).val()) <= stars) {
      jQuery(this).next('label').addClass('on');
    }
  });
}

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.

Regards,
Caridad

[rJ-2]

Hello Caridad,

Thank you again for your help. I have a styling error. As you can see in the attached image, the rating-stars appear fine, but the numbers (1 - 7) appear on the right sight.

Regards,
Niek

[Caridad]

Dear Niek,

Try adding the one more line to the CSS:

.stars br,
.stars input {
  display:none;
}
.stars label {
  display:inline-block;
  width:20px;
  height:20px;
  text-indent:100%;
  overflow:hidden;
  background: url(staroff.png) no-repeat;
}
.stars label.on {
  background-image: url(staron.png);
}

Regards
Caridad

[rJ-2]

Thanks