VGM – some Form-Improvements

[janoschasen]

Hey,
we are currently using your amazing plugin to support small local business during corona-crisis.
https://supportsmallbusiness.de/laden-finden/

As there are loads of people (who often have zero internet-experience) are adding Markers we experience some Problems with the “quality” of the entries. Some improvements would help greatly.

1. Added URLs without http:/ or https:/ lead to 404-Pages within our WordPress as they are treated as links below the current site. Is there a possibility to leave the wordpress-context when http is detected inside the url? Or add a setting to the VGM-Module?

2. People tend to write the wrong things / forget important information – e.g. the postal code in the Adress. I hacked some descriptions of what is expected via ::before-elements but having the option in the backend would be highly apprecieated (in coming updates maybe)

3. People tend to write too much / too few information. Would it be possible to set maxlenght / minlength ?

4. People forget even more stuiff – would it be possible to set required fields (e.g. category)

Best regards, keep up the great work,
Janosch

[[email protected]]

Hi Janosch,

Thanks so much for getting in touch and for your kind words, it is truly appreciated.

Regarding your questions:

1. Leave the site context when HTTP is not detected in URL:
This can be achieved by adding the custom code I have prepared below. Could I kindly ask if you could please navigate to Maps > Settings > Advanced Settings and please add this code and let me know if that helps? Thanks.

2. Thanks and we will definitely look into adding this option in a future update

3. Setting max length/min length for VGM description:
This can be done with the JavaScript below as well, and once added, please let me know if that is correct.

4. Setting required fields like category:
This can also be done with the JavaScript below and will make the category field a required field.

Here is the custom JS to add:

jQuery(document).ready(function(){
	jQuery('body').find('#wpgmza_category').attr('required', 'true');
	jQuery('body').find('#wpgmza_ugm_add_desc').attr('maxlength', '50');
	jQuery('body').find('#wpgmza_ugm_add_desc').attr('minlength', '10');
	jQuery('body').on('click', 'a.wpgmza_infowindow_link', function(e){
	    e.preventDefault();
	    var url = jQuery(this).attr('href');
	    if (url.indexOf('http') == -1){
	        url = "http://" + url;
	    }
	    window.location.href = url;
	});
});

I hope this helps and look forward to hearing back from you.

Kindest regards,
Dylan

[janoschasen]

Hi Dylan,
the code you provided works like a charm and showed me the way to tweak the form to our needs.
Thanks a lot.

I changed the code for the link+http:/ behaviour a bit to open the linked site in a new tab – code below.

jQuery(document).ready(function(){
	jQuery('body').on('click', 'a.wpgmza_infowindow_link', function(e){
	    e.preventDefault();
	    var url = jQuery(this).attr('href');
	    if (url.indexOf('http') == -1){
	        url = "http://" + url;
	    }
	    var win = window.open(url, '_blank');
	    win.focus();
	});
});

Best,
janosch

[[email protected]]

Hi Janosch,

Thanks for letting me know and that is great to hear.

Please let me know if there is ever anything else that I can assist you with.

Thanks for your time.

Kindest regards,
Dylan

[Keida]

can I follow up on the above question regarding a Required field (in this case, Category field?)

Would I be right if I included the following custom JS (from above) to think this will make all category fields required?

jQuery(document).ready(function(){
	jQuery('body').find('#wpgmza_category').attr('required', 'true');
});

thank you

[Steven]

Hi there,

Thank you so much for getting in touch, we really appreciate your time.

Unfortunately, the above won’t suffice in making the category required.

You will need to ensure that your categories are set checkboxes, which once done you can make use of the custom JS below which will check to see whether at least one category is set. If one is set, it will allow the adding of the marker whereas if one is not set, it will disable the button until a category is set.

To add this, please navigate to -> Maps -> Settings -> Adanced -> please paste the custom js below into the custom JS field and click save:

jQuery(document).ready(function(){
jQuery(‘#wpgmza_ugm_addmarker’).prop(‘disabled’, true).css(‘filter’, ‘grayscale(1)’).css(‘opacity’, ‘0.5’);
jQuery(‘body’).on(‘change’, ‘.wpgmaps_user_form .wpgmza_checkbox’, wpgmza_preval);
function wpgmza_preval(){
var isValid = true;
var atleastOneCat = false;
jQuery(‘.wpgmaps_user_form .wpgmza_checkbox’).each(function(){
if(this.checked){
atleastOneCat = true;
}
});
if(!atleastOneCat){
if(jQuery(‘.sCatNotice’).length > 0){}else{
jQuery(‘.wpgmaps_user_form .wpgmza_cat_checkbox_holder’).prepend(‘Please select at least one category’);
}
} else {
jQuery(‘.sCatNotice’).remove();
}
if(isValid && atleastOneCat){
jQuery(‘#wpgmza_ugm_addmarker’).prop(‘disabled’, false).css(‘filter’, ‘unset’).css(‘opacity’, ‘1’);
} else {
jQuery(‘#wpgmza_ugm_addmarker’).prop(‘disabled’, true).css(‘filter’, ‘grayscale(1)’).css(‘opacity’, ‘0.5’);
}
}
});

Kindly let me know if this helps?

Kindest Regards,
Steven De Beer

[Keida]

This reply has been marked as private.

[Keida]

Steven,

As mentioned above, this didn’t work, but probably that is related to an error in the code above:
I get the following error:

“Uncaught Syntax error: Invalid or Unexpected token” for the following line:

jQuery(‘#wpgmza_ugm_addmarker’).prop(‘disabled’, true).css(‘filter’, ‘grayscale(1)’).css(‘opacity’, ‘0.5’);

and the console highlights the ( and ) for ‘#wpgmza_ugm_addmarker’

could you help out here?
(and this doesn’t work with a drop down list?)

[Steven]

Hi there,

Thank you so much for getting back to me.

Could I kindly ask you to please set your filter back to checkboxes so that I might take a closer look at the error?

I look forward to hearing back from you.

Kindest Regards,
Steven De Beer

[Author]

Posts