Skip Navigation

[Resolved] Parametric search filter with jquery stars

The Toolset Community Forum is closed, for technical support questions, please head on to our Toolset Professional Support (for paid clients), with any pre-sale or admin question please contact us here.
This is the community support forum for Types plugin, which is part of Toolset. Toolset is a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients and people who registered for Types community support can post in it.

This topic contains 8 replies, has 2 voices.

Last updated by rJ-2 7 years, 2 months ago.

Assigned support staff: Caridad.

Author
Posts
#227202

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

#227219

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

#227229

Hello Caridad,

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

Regards

#227291

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

#227302

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

#227313

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

#227406
styling.png

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

#227452

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

#227475

Thanks

The forum ‘Types Community Support’ is closed to new topics and replies.