Structure of the advanced table, automatic filtering, hiding the map

[Dorian Garrasi]

Hello,
first of all thank you a lot for the amazing plugin.
I have got a couple of questions mainly concerning the advanced table:

1.) Is there a way to filter the table by a category when the side is loaded?
(I saw the solution with the mash-up function in the forum but this is not what i am looking for)

2.) Where can i change the text displayed on the top-left above the map, where the filter for a certain category can be selected. It says “Filter by” and “All” and i would like to translate these words into german.

3.) Below the map is also some text i would like to replace with the german words: “Showing 1 to 5 of 5 records” and “Previous”/”Next”. Where can i edit these phrases?

4.)
(Only relevant if 1.) can NOT be done)
Is it possible to switch the order of the columns of the list so that even on the mobile version the new most left column is displayed ?
With other words: Before the update to version 7.0 i managed to switch the category-column and the title-column by editing the folder wpgmza.php. With this setting the category-column was displayed before the title-column.
On one side the goal was that the more important information, the category-column, was further on the left. On the other side i wanted the category-column to be shown on the mobile version, where only one column is displayed.
With the new update i can not find this settings anymore.

In conclusion: Is there a way to switch the order of the category-column and the title-column so that even on the mobile version the category-column is displayed?

5.) How can i rename “Category” (in german: “Kategorie”) and “Title” (in german: “Bezeichnung”) to “Ort, PLZ” and “Vitality-Coach” in the advanced table ?

6.) How can i hide the actual map on a specific site so that only the advanced table is visible?
Furthermore i would like to do this with one map, which is shown on different sites. So the optimal solution would be something, that not always hides the map for one map-id, but rather something that does this depending on the settings/code of the specific website.

7.)
(Only relevant if 1.) CAN be done)
The info-window displays the title and the description (the address-field is disabled in the settings). Can i replace the title with the category directly for the info-window?

8.) The advanced table does not sort itself based on the description-column when the site is loaded, even tho i changed the settings to do so. Is this problem solvable with some code?

8.) How can the font-size of the column-titles and the content of the table be changed?

9.) With the new update the height of the advanced table has shrinked somehow. Now you can scroll just a tiny bit up and down. Can the height be adjusted so that the scroll-bar distinguishes?

Here is a link to the website i am talking about:
https://treffen.leichteralsdudenkst.de/termin-finden

Currently the “Coach” “Patric Heizmann” has his own site and his own map, where only his dates are shown and i plan to hide the map:
https://treffen.leichteralsdudenkst.de/vitality-coaches/patric-heizmann

Any help you can give me would be really appreciated.
Thank you.

[SupportTeam]

Hi there,

Thank you for getting in touch with us.

1. If you enable Filter by category option under your map → Marker Listing Option we can add some JavaScript to filter by categories on page load. May I ask you to send me a temporary login details to your WordPress admin dashboard so I can login and look further into this for you? Please mark your reply as private to protect your data.

2/3/5. If the language of WordPress is set up in German the translation should be visible on your site. We can install Loco translate plugin to check if all strings are translated and translate missing strings.

6. If you want to hide the map on specific page please open this page in WordPress dashboard and check page ID (you should see it on address URL post=ID_number). Then you can add this css to Maps → Settings → Advanced → Custom CSS:

.page-id-484 .wpgmza_map {
    display: none !important;
}

where the number 484 is Patric Heizmann Page ID.

7. I think it may be done with some JS code but need to look at admin settings.

8. I’ve just checked sorting by description on my local installation and it seemed to work fine. May I ask you to send me a temporary login details to your WordPress admin dashboard so I can login and look further into this for you?

8. Please go to Maps → Settings → Advanced → Custom CSS and add this code:

/* Column titles */
.wpgmza_table th strong {
    font-size: 16px;
}

/* Body text */
.wpgmza_table tbody {
    font-size: 15px;
}

9. Add this code to Maps → Settings → Advanced → Custom CSS:

.wpgmza_marker_holder .dataTables_wrapper {
    padding-bottom: 10px;
}

Thank you for your time in this.

Best regards,
Jarek

[Dorian Garrasi]

This reply has been marked as private.

[SupportTeam]

Hi there,

So sorry for the delay in response over the weekend.

1 and 7. I installed this little plugin: https://wordpress.org/plugins/custom-css-js/ and add custom JS code:

(function($) {

    function bindClickListener(marker, id) {
    
        marker.addListener("click", function() {
          var catID = parseInt(wpgmaps_localize_marker_data[2][id].category);
          jQuery('.wpgmza_infowindow_title').text(wpgmza_category_data[catID].category_name);
            infoWindow[id].open(MYMAP[2].map, marker_array[2][id]);
        });
    
    }

  setTimeout(function() {
    $(window).on("load", function(event) {
      // Fix filtering on page load
    	jQuery('.page-id-484 #wpgmza_filter_select').val('3').trigger('change');
      
        for(var marker_id in marker_array[2]) {
            bindClickListener(marker_array[2][marker_id], marker_id);
        }
    
    });
  }, 500);

})(jQuery);

page-id-484 is your page ID as I explained before. You can add other pages after this line with other page IDs. val('3') is the ID of Freiburg category in dropdown list as you can see from this screenshot: http://prntscr.com/j2s93p

The other code changes title to category inside info windows.

5. You can change translation in Loco Translate plugin or we can add some JS to above code if you want

8. I found that the cause of sorting issue is html code in description field. Those divs break sorting. If you remove them it should work. If you need this html we can implement algorithm for datatables to sorting this but you need to send us customization request.

Kind regards

[Dorian Garrasi]

Hello Jarek,

no problem for the time that passed.
Thank you for adding this code to my site, most of it works really well but there are stil some problems to solve:

-The filtering on page load works almost everytime on Firefox. In really rare cases the map is not filtered but it happens so few time’s that this is no problem.

Unfortunately this function does almost never work on Chrome or Safari. When i first opened the page on Chrome and Safari the list was filtered, if i remember correctly. But everytime i am reload the page the map is not filtered. I tried opening the site in a new tab or restarting the browser completely but it (almost) never works. Is it possible that the code you implemented is only read the first time the page is opened in these browsers?

The same problem occurs with the info window. On Safari and Chrome is stil the title displayed, not the category. On Firefox though it works well.

-I think i tried every option in Loco Translate but the strings i need to translate are not found by the plugin/are already translated and not displayed correctly.
I would be really thankfull if you could rename “Title” to “Ort, PLZ”, “Category” to “Vitality-Coach” and “Description” to “Datum Uhrzeit”. Between “Datum” and “Uhrzeit” are 8 spaces but i can implement the spacing by myself so you dont have to bother with this.

8.) Alright, thanks. This function is not so important. Maybe i will find a way to get rid of the div’s.

Other than that, i found some minor problems. Maybe you can help me with that as well:

A.)
If you use the page on mobile devices there is a “+” to open up more information in every row. If you tap on this “+” the information opens up and you get scrolled up to the map.
Is it ment to be like that ? Because for my understanding the “+” should only open the information and tapping on the row should scroll you up to the map and open the info window.
Just wondering if this is intended and/or easy fixable.

B.)
Also something concearning the mobile version:
If you tap on the row to open up the info window the map is a little bit displaced to the left and some pixels of the info window are cut away. I am not sure if this only occurs on my site.

C.)
I changed the background-color of the table to blue. On the mobile version though the information, which can be opened and closed, turns also blue when you tap or hover the row.
I know that while changing the background for the top and the bottom of the table i also changed the hover-color but i cant find the specific code used for the hovering-function.
Is there a way to differentiate between the hover color and the normal color of the table’s top and bottom row?

As i said, these problems (A-C) are minor one’s, so if it requires a lot of effort to fix them, the way it works currently is also fine.

Thank you again for all the help!
Best regards

[SupportTeam]

Hi there,

I tested this in Chrome and Firefox. I don’t have any issue with filtering but I changed time param in setTimeout so it should help I believe. This code should work in all browsers. Please remember clear your browser cache.

I changed translations in Loco Translate but I think there might be previous version of .mo and .po files in plugins/languages folder so I also added some workaround to JS custom code. Please let me know if it works.

a. I removed scrolling to the map on mobile devices with JS code.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
jQuery(“body”).off(“click”, “.wpgmaps_mlist_row”);
}

b. I tested info window on my Android and didn’t notice any issues. Can you send me some screenshots of this?

c. I fixed it with some custom CSS.

#wpgmza_marker_holder_2 tbody {
background-color: #fff !important;
}

Hope that helps.

Best

[Dorian Garrasi]

Hi Jarek,

thank you for your fast answer.

Unfortunately the filtering on page load and the renaming of “Title”,…. does not work properly.

The following things are working as intended:

-On the main-page (the one with the map visible: https://treffen.leichteralsdudenkst.de/termin-finden) the words “Title”,… are renamed correctly.

-A/C.) works properly, thank you.

The following functions are not working as they should:

-The info-window shows the title again and not the category. This worked fine when you did the first implementation of java-code but sadly it does not work anymore. This occurs on every device (mobile, desktop) and every browser (Firefox, Safari and Chrome).

-On the “sub”-page (the one with the map not vivible: https://treffen.leichteralsdudenkst.de/vitality-coaches/patric-heizmann) the words “Title”,… are not renamed. When the site has almost finished laoding, the words “Ort, PLZ” are visible for a split-second but are then replaced with the old ones. Maybe the automatic filtering-function disturbes the renaming-function. Also when you apply a filter manualy on the main page the renaming is reseted to the old words. This occurs on every device and every browser as well.

-I forgot to mention, that the phrases “Showing 1 to 5…”, “Previous/Next” and “Filter by” are not translated into german. It would we really nice of you to look up a solution for this problem too.

-B.) I attached a screenshot showing the “problem”. This is ofcourse only visible if you tap on a row and get redirected to the map with the info-window on mobile devices. If function A.) is active this is not visible, and if A.) is not active, it is only a really irrelevant “issue”. I thought i just report it to you so you can maybe fix it in the future but there is no need for you to quickly look up a solution for me.

-The automatic filtering function does only work partly:
With the new “setTimeout” there are fewer cases, where it works in comparison to the code used before.
I am using a MacBook and it does not work on Firefox, Safari and Chrome. I cleared the caches multiple times and also tried it on other MacBook’s. Also on an iPhone the filtering does not work. Only on my android-device the filter is applied. Are you using Windows ? Because maybe there are differences between the systems while reading the java-script.

-In the responsive version, on the main page, where “Title”,… is renamed correctly, you can open up more information with the “+”. If opened up, the words “Category” and “Description” are not renamed, although the one visible row is renamed correctly to “Ort, PLZ”. The second screenshot shows this issue.

Thank you so much for investing all this time in helping me. The way you help users and try to find a solution is extraordinary and i will write a really positive review for this plugin.

Best regards

Attachments:

You must be logged in to view attached files.

[Dorian Garrasi]

*1st screenshot*

Attachments:

You must be logged in to view attached files.

[SupportTeam]

Hi there,

I rebuild all code and fixed category in info window and responsive headings in the marker table.

See attached screenshot.

The strings like “Previous”, “Next” and so on should be available in Loco translation. I cannot find them so I think there migth be some issue with translation file on FTP. Would it be possible for you to create a temporary FTP account for me so that I can debug further? Please mark reply as private.

We fixed filtering issue in our latest plugin updates. I noticed that you are still having previous versions so I tried to update them. It seems there are some issues with folder naming so I cannot do that. If I have access to FTP I can update both plugins for you.

Kind regards

Attachments:

You must be logged in to view attached files.

[Dorian Garrasi]

This reply has been marked as private.

[Author]

Posts