Category filter with icon

New home Forums Pro Add-on Category filter with icon

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #59984
    hrcdapp
    Participant

    Hello, I have a category filter with checkbox and now only the checkbox and the name appear. Can you put an icon?

    #59987
    AbelC
    Moderator

    Hi There,

    Thank you so much for getting in touch with us.

    Unfortunately, this is not supported by default at the moment, however, this could be achieved with Custom CSS. Again, we do apologize for the inconvenience.

    Could I kindly ask if you could please provide me with a link to your map page?

    I will then be able to prepare the code needed to achieve this.

    I look forward to hearing back from you.

    Kind Regards,
    Abel

    #59988
    hrcdapp
    Participant
    This reply has been marked as private.
    #59992
    AbelC
    Moderator
    This reply has been marked as private.
    #59997
    hrcdapp
    Participant
    This reply has been marked as private.
    #60000
    AbelC
    Moderator

    Hi There,

    Thank you for getting back to me.

    I was now able to view your markers, however, it appears that you have not added category icons to your categories.

    Could I kindly ask if you could please navigate to Maps -> Categories -> Edit -> Scroll down to “Category Marker” -> Please add your preferred category icon.

    Once you have added the category icons, could you please navigate to Maps -> Settings -> Advanced -> Custom CSS -> Please paste the following Custom CSS below:

    .category-filter-icon {
    width: 20px;
    vertical-align: bottom;
    margin-right: 10px;
    margin-left: 10px;
    }

    Could you also please add the following Custom JS code below:

    jQuery(window).load(function(){
    WPGMZA.categories.children.forEach(function(cat){
        var catHolder = jQuery('body').find('.wpgmza_cat_checkbox_item_holder_' + cat.id);
        var html = '<img class="category-filter-icon category-filter-icon-' + cat.id + '" src="' + cat.icon + '" />';
        catHolder.prepend(html);
    });
    });

    Please do let me know if this is working for you?

    I look forward to hearing back from you.

    Kind Regards,
    Abel

    #60004
    hrcdapp
    Participant

    Hello,

    I have added the code that you have told me and in the src I have this [object Object]. Now I have only added in one category which is: “Camperizer”.

    Thank you

    #60005
    hrcdapp
    Participant

    Hello, I have added the src cat.icon.url and you can see the image. But what I would like it to be like this is the link.

    https://es.stackoverflow.com/questions/42212/c%C3%B3mo-incrustar-una-imagen-dentro-de-los-checkbox

    I attach an image that is what I want. You can see the example in the url that I have sent you.

    Thanks!!

    Attachments:
    You must be logged in to view attached files.
    #60024
    hrcdapp
    Participant

    Hola, he estado investigando mas y necesario hacer esto.

    Ahora tengo este codigo:

    <li class="wpgmza_cat_checkbox_item_holder wpgmza_cat_checkbox_item_holder_9">
      <img class="category-filter-icon category-filter-icon-9" src="//bevanlifer.com/wp-content/uploads/2020/07/camperizador.png">
      <input type="checkbox" value="9" class="wpgmza_checkbox" id="wpgmza_cat_checkbox_9" name="wpgmza_cat_checkbox" mid="1">
      <label for="wpgmza_cat_checkbox_9">Camperizador</label>
    </li>

    I need to have this code:

    <li class="wpgmza_cat_checkbox_item_holder wpgmza_cat_checkbox_item_holder_9">
      <label class="checkeable">
        <input type="checkbox" value="9" class="wpgmza_checkbox" id="wpgmza_cat_checkbox_9" name="wpgmza_cat_checkbox" mid="1">
        <img class="category-filter-icon category-filter-icon-9" src="//bevanlifer.com/wp-content/uploads/2020/07/camperizador.png">
      </label>
    </li>
    .checkeable input {
      display: none;
    }
    .checkeable img {
      width: 100px;
      border: 5px solid transparent;
    }
    .checkeable input {
      display: none;
    }
    .checkeable input:checked  + img {
      border-color: blue;
    }

    Could you prepare a code to achieve this?
    Thank you very much for the help!

    #60027
    AbelC
    Moderator

    Hi There,

    Thank you so much for letting me know, and that is great to hear.

    You can hide the checkbox and category text by navigating to Maps -> Settings -> Advanced -> Custom CSS -> Please paste the following code below:

    .wpgmza_cat_checkbox_item_holder .wpgmza_checkbox {
      display: none;
    }
    
    .wpgmza_cat_checkbox_item_holder label:nth-child(2) {
      display: none;
    }
    
    .active_category {
      border: red solid 2px;
    }
    

    With that said, we recommend that you add an icon to all your categories by navigating to Maps -> Categories -> Edit -> Scroll down to “Category Marker” -> Add your preferred category icon.

    You will also be able to add a red border to the selected category icon by navigating to Maps -> Settings -> Advanced -> Custom JS -> Please paste the following code below:

    jQuery(function($){
    jQuery(".checkeable").click(function(){
     jQuery(".checkeable").parent('.wpgmza_cat_checkbox_item_holder').removeClass("active_category");
     jQuery(this).parent('.wpgmza_cat_checkbox_item_holder').addClass("active_category");
    });
    });

    Please do let me know if this is working for you?

    I look forward to hearing back from you.

    Kind Regards,
    Abel

    #60039
    hrcdapp
    Participant

    Hi, first thanks for helping me.

    This is my code right now:

    CSS:

    .category-filter-icon {
    width: 20px;
    vertical-align: bottom;
    margin-right: 10px;
    margin-left: 10px;
    }
    
    .wpgmza_cat_checkbox_item_holder .wpgmza_checkbox {
      display: none;
    }
    
    .wpgmza_cat_checkbox_item_holder label:nth-child(2) {
      display: none;
    }
    
    .active_category {
      border: red solid 2px;
    }

    jQuery:

    jQuery(window).load(function(){
    WPGMZA.categories.children.forEach(function(cat){
    var catHolder = jQuery('body').find('.wpgmza_cat_checkbox_item_holder_' + cat.id);
    	    var image = '<label class="checkeable checkeable-'+ cat.id +'"> <img class="category-filter-icon category-filter-icon-' + cat.id + '" src="' + cat.icon.url + '" />';
    	    catHolder.prepend(image);
    
    var catCheckbox = jQuery('#wpgmza_cat_checkbox_' + cat.id).clone(true,true);
    	    jQuery('#wpgmza_cat_checkbox_' + cat.id).remove();
    	    catCheckbox .appendTo('.checkeable-'+ cat.id);
    
    });
    });
    jQuery(function($){
    jQuery(".checkeable").click(function(){
     jQuery(".checkeable").parent('.wpgmza_cat_checkbox_item_holder').removeClass("active_category");
     jQuery(this).parent('.wpgmza_cat_checkbox_item_holder').addClass("active_category");
    });
    });

    Now only the icon image comes out and this is what I want. But now it doesn’t filter.

    How can i fix this?

    Thank you!

    #60049
    AbelC
    Moderator

    Hi There,

    Thank you so much for getting back to me.

    Unfortunately, we were unable to replicate this issue as it appears that markers filtered correctly on our side.

    Could I kindly ask if you could please confirm if everything is now working for you?

    If this issue persists, could you please clear all your caches to see if this resolves the issue you are currently experiencing?

    Could you also please provide us with a screenshot of the issue and please confirm the steps your took as this will allow us to try and replicate this issue on our side?

    We look forward to hearing back from you.

    Kind Regards,
    Abel

    #60051
    hrcdapp
    Participant

    Hello
    I have cleared the browser cache and entered the browser in incognito mode and the problem persists.
    The problem is:
    1- The categories are not selected when I click on them. Don’t put the class .active_category
    2- When I click on a category, the category is not selected on the map.

    All this you can not check on the website that you provide above.
    If you want more information we are in contact.

    Thank you very much,

    #60053
    AbelC
    Moderator
    This reply has been marked as private.
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.