Have a custom made Category Filter

New home Forums Pro Add-on Have a custom made Category Filter

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #61412
    nicodergrieche
    Participant

    Hi

    For my application I would like to have more control over how the category filter is being shown.
    I have read the forum contributions about similar topics, and found the ones about how one can use custom css and custom js for this purpose. But still it doesn’t really work for me.

    So I tried by just coping the html code from the list and placing it in my page in a way that better suits me.

    Now I just had to hide the original list. That I can do by disabling the setting that allows users to ‘filter by category’. The problem though seems to be, that by doing this, I don’t only disable the showing of the filter, but the functionality of filtering as well 🙁

    Is there any way I can achieve my goal?
    (Which is having buttons on the right of the map, that hide/show markers of categories on the map)

    #61427
    Dylan
    Moderator

    Hi there,

    Thank you for getting in touch, we do appreciate your time.

    This can be achieved with custom CSS and JavaScript, however, it is likely that some of the scripts/styles you have found on the forums may be slightly out-dated or specific to another environment.

    Copying the HTML structure and disabling the filter controls will not function as intended as the module will be disabled, unfortunately.

    Could I ask you to provide me with a link to your map on the frontend? Once I have this, I can assist in providing you with custom JS and CSS to achieve your desired result.

    I look forward to hearing back from you.

    #61453
    nicodergrieche
    Participant

    hi and thank you very much for your quick response

    currently I’m just experimenting and I haven’t yet filled in all the data I tend to use.
    But you can take a look at what I’m doing on the hidden page http://www.ktr.gr/map-test

    Best regards

    Nico

    #61461
    Dylan
    Moderator

    Hi Nico,

    Thank you for sharing the link to your site.

    I had a look at what you are hoping to achieve and I believe the following CSS should be a step in the right direction:

    .wpgmza-marker-listing-category-filter{
        max-width: 40%;
        height: fit-content !important;
        float: right;
    }
    
    .wpgmza_filter_container{
        width: 100% !important;
    }
    
    .wpgmza_cat_checkbox_holder {
        height: fit-content !important;
    }
    
    .wpgmza_cat_checkbox_item_holder{
        display: block;
    }
    
    .wpgmza_cat_checkbox_holder li{
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px;
    }
    
    .wpgmza_map {
        float: left !important;
        max-width: 60%;
    }
    
    #wpgmza_filter_3{
        display: none;
    }
    

    This can be added to Maps -> Settings -> Advanced -> Custom CSS.

    I would recommend changing your map to be in a full-width container, as the 60/40 split will be handled by the CSS provided above.

    I hope this helps? This should remove the need to create custom buttons and instead leverage existing functionality.

    #61469
    nicodergrieche
    Participant

    Hi thank you for your direct support.
    I tried the .css you suggested and it works fine (see the updated version), it is a good step into the direction I would like to bring it.
    But we are not quite there yet.

    I think I would rather have buttons than check-boxes.
    For the buttons I might use icons that are different than the markers.
    And I would rather have the buttons change their color if selected than actual check-boxes.
    And it looks like I need different presentation for the mobile version than for the desktop.

    Best regards

    Nico

    #61485
    Dylan
    Moderator

    Hi Nico,

    Thank you for the feedback, please add the following CSS below the CSS I have already provided:

    .wpgmza_cat_checkbox_holder li label{
        background: #6ec1e4;
        padding: 3px 7px;
        color: #fff;
        cursor: pointer;
    }
    
    .wpgmza_cat_checkbox_holder li input:checked + label,
    .wpgmza_cat_checkbox_holder li label:hover{
        background: #03577b;
    }
    
    .wpgmza_cat_checkbox_holder li input{
        display: none;
    }

    This should create a button similar to what you had before.

    Once this is added, please let me know so that I can assist you further in position this next to the map and in mobile displays. 🙂

    #61488
    nicodergrieche
    Participant

    Thank you very much for this really amazing fast support 🙂

    The truth is with this last step, it still doesn’t go in the direction I would like it to go.
    As a matter of fact, an other map I have on an other page got affected in a way it shouldn’t.

    What I would actually like, is to somehow separate the map, from the controls that define what it shows and to be able to flexibly and independently define how both look like.

    Maybe the controls are left of the map, maybe on the top, and maybe on an other page ….
    Maybe the controls show the label text maybe not
    Most certainly the controls show an icon, but maybe that icon is not the same as the marker.
    Maybe the order of the controls is vertical maybe horizontal, maybe by rows of two or three etc….

    You see I need this flexibility.

    Thanks once again

    Nico

    #61496
    Dylan
    Moderator

    Hi Nico,

    Unfortunately, the filtering system does not currently support the amount of control you are hoping to achieve. More specifically, it is not possible to separate the control in the way you are hoping.

    In this case, what I might recommend is to switch back to your custom control, which you had on the site before we started with customizing the existing system.

    Once this is in place, perhaps a simpler solution would be to simply hide our control. This means the control is not disabled, simply hidden, allowing your custom solution to work as expected.

    I hope this helps?

    #61497
    nicodergrieche
    Participant

    Hi Dylan

    Thanks for stating this. So I know what the expectations are right.

    One last thing:
    When I use the
    <input type=”checkbox” class=”wpgmza_checkbox” id=”wpgmza_cat_checkbox_1″ name=”wpgmza_cat_checkbox” mid=”3″ value=”1″>
    (and the others of the list) on an other location than the one it which it is being put by wpgmaps short code expantion, the whole thing ceases to operate properly.

    How would you insert controls on an other place on the page (like for example unter an image)?

    Best regards

    Nico

    #61504
    Dylan
    Moderator

    Hi Nico,

    Thank you for your continued time on this one.

    The correct way of linking custom controls to our filter would be to make use of a label as seen below:
    <label for="wpgmza_cat_checkbox_1">Category 1</label>

    I had a look at your site and it does appear you have done this on your side as well. However, it appears you have changed the category filter style to dropdown this will not allow the linking via a label.

    As such, you would need to navigate to Maps -> Settings -> And set the option labelled ‘Filter by category displayed as’ to Checkboxes.

    I hope this helps?

    #61554
    nicodergrieche
    Participant

    Hi Dylan and thank you very much for your help so far.

    I managed to make a compromise that for the time being will serve me.
    But there are two things I would like to improve and maybe you can help me.

    on my test page http://www.ktr.gr/map-test you can see what I will be referring to.
    a) On the filter list I would like to be able to adjust the color of the selected and unselected marker and also the color of theyr text.
    b) If possible for the mobile version I would like to have the vertical scroll bar always visible, because some users might not find out easily that the filter list is scrollable.

    and a third one that occured to me just now:
    maybe a way to modify the text and the look of the ‘Filter by’ text.

    Best regards

    Nico

    #61562
    Dylan
    Moderator

    Hi Nico,

    Thank you for your continued time, please find my responses below:
    1. Unfortunately, it is not possible to alter the icons based on which category is selected at this time (Including the colour). You could change the text colour with the following CSS:

    .wpgmza_cat_checkbox_item_holder input[type=checkbox]:checked ~ label {
        color: #ffb547;
    }

    2. The following CSS will show the scrollbar as requested on mobile devices:

    @media screen and (max-width: 750px){
        .wpgmza_cat_checkbox_holder {
            overflow-y: scroll !important;
            overflow-x: hidden !important;
        }
    }

    3. This text is not editable via the settings area, however, it can be updated with a bit of custom JavaScript. Could I ask you to confirm what you would like it changed to?

    I look forward to hearing back from you.

    #61563
    nicodergrieche
    Participant

    Thank you Dylan for your so immediate support. I do appreciate it very much.

    Yes I confirm that I would like to be able to change or suppress the ‘Filter by’ text.
    As a matter of fact, when I’m done with this first map, and get to publish it as version 1.0 I will proceed in copying and translating it and its Markers and all text to another 2 languages, so on my webpage this map will be available in three different languages.
    (As far as I’ve seen wpgmaps does not have build in the WPML functionality, so in order to have multilinguality I will need to have a map for each language. Please let me know if you know any better way 🙂

    Best regards

    Nico

    #61564
    nicodergrieche
    Participant

    ….. I just tried the code you send me and it unfortunately it does not work as I would like it to.

    The code for the scroll bar somehow does not affect the way the list is shown on my mobile (it does affect the way it is displayed on my PC if I remove the pixel restriction though 🙂

    And I would like to change the color of the ‘buttons’ (not the icons).
    Changing the color of the text, works, but it is not what I needed 🙂

    Best regards

    Nico

    #61577
    Dylan
    Moderator

    Hi Nico,

    Thank you for getting back to me, I do appreciate your time tremendously.

    Yes, that is correct, we do not currently fully support WPML, however, we are in the process of adding our first phase of compatibility for WPML in our upcoming version. This will not allow you to translate marker descriptions/content, however, it will allow for the interface to be translated with WPML.

    For the time being, if you would like to serve your marker content in different languages, the simplest approach will indeed be to create a map for each language.

    With regards to updating the button colour, this can be done with the following CSS instead:
    .wpgmza_cat_checkbox_item_holder input[type=checkbox]:checked ~ label {
    background: #ffb547;
    color: #333333;
    }

    This will change the background colour of the button to a colour you prefer. With that said, it will still, unfortunately, not be possible to alter the icon of associated with that button at this stage.

    With regards to the scroll fix on mobile devices, it is possible that I set the media query value too low: (max-width: 750px)

    You may wish to try increasing the 750px value to a higher value, such as 1000px instead. Further adjustments can then be made to the way the list displays. It is also important to clear any caching that may be in place on the site when testing, as in some cases you might be served an older version of the site when on another device.

    Lastly, with regards to the “Filter by” label, this can be hidden with the following style:

    p[id^="wpgmza_filter_"] {
        display: none;
    }

    Alternatively, this specific maps label can be changed with the following custom JavaScript:

    jQuery(function(){
        jQuery(document).ready(function(){
            jQuery('#wpgmza_filter_5').text('Custom text');
        });
    });

    Where “Custom text” can be replaced with your preferred phrasing. This snippet can be added under Maps -> Settings -> Advanced -> Within the Custom JavaScript block.

    I hope this helps?

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.