Remo/wp-postcode-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add extra error messages

Browse Source
This commit is contained in:
Remo Zaros
2026-06-01 12:02:59 +02:00
parent a9c7f7c70f
commit f0b7c405fa
1 changed files with 41 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
session_dialog.php
View File

@@ -43,9 +43,26 @@ function send_postcode_data()
<script type="module"> <script type="module">
const postcodeModal = document.querySelector("#postcode_modal"); const postcodeModal = document.querySelector("#postcode_modal");
const modalForm = document.querySelector("#postcode_modal_form"); const modalForm = document.querySelector("#postcode_modal_form");
const sndBtn = document.querySelector("#postcode_modal_submit");
const sndBtnLdr = sndBtn.querySelector(".btn_loader");
const sndBtnTxt = sndBtn.querySelector(".btn_text");
const errorMsg = document.querySelector("#error_message_modal_postcode");
modalForm.querySelectorAll("input").forEach(input => {
input.addEventListener("blur", ev => {
errorMsg.innerHTML = ""
if(!ev.target.validity.valid && ev.target.value !== "") {
errorMsg.innerHTML = ev.target.title;
}
})
})
modalForm.addEventListener('submit', async (e) => { modalForm.addEventListener('submit', async (e) => {
e.preventDefault(); e.preventDefault();
errorMsg.innerHTML = "";
sndBtn.disabled = true;
sndBtnLdr.style.opacity = "1";
sndBtnTxt.style.opacity = "0";
const formData = new FormData(e.target); const formData = new FormData(e.target);
const data = Object.fromEntries(formData.entries()); const data = Object.fromEntries(formData.entries());
const json = JSON.stringify(data); const json = JSON.stringify(data);
@@ -67,6 +84,9 @@ function send_postcode_data()
if(!resp.ok){ if(!resp.ok){
throw new Error(`HTTP Error! status: ${resp.status}` ); throw new Error(`HTTP Error! status: ${resp.status}` );
} }
sndBtn.disabled = false;
sndBtnLdr.style.opacity = "0";
sndBtnTxt.style.opacity = "1";
const data = await resp.json(); const data = await resp.json();
console.log("Data returnd", data); console.log("Data returnd", data);
@@ -76,15 +96,15 @@ function send_postcode_data()
switch (err) { switch (err) {
case "HUISNUMMER_NOT_FOUND": case "HUISNUMMER_NOT_FOUND":
errmsg = "Adres niet gevonden."; errmsg = "Adres is niet gevonden.";
break; break;
case "HUISNUMMER_AMBIGUOUS": case "HUISNUMMER_AMBIGUOUS":
errmsg = "Huisnummertovoeging mist."; errmsg = "Huisnummertovoeging mist.";
break; break;
default: default:
errmsg = "Gegevens niet correct."; errmsg = "Gegevens zijn niet correct.";
} }
document.querySelector("#error_message_modal_postcode").innerHTML = errmsg; errorMsg.innerHTML = errmsg;
} }
if (data.status === "success"){ if (data.status === "success"){
@@ -108,15 +128,14 @@ function render_dialog_html()
<p>Onze prijzen zijn afhankelijk van de regio. Vul daarom de postcode en het huisnummer in om de exacte prijzen te bekijken.</p> <p>Onze prijzen zijn afhankelijk van de regio. Vul daarom de postcode en het huisnummer in om de exacte prijzen te bekijken.</p>
<form id="postcode_modal_form" method="post" action="" novalidate> <form id="postcode_modal_form" method="post" action="" novalidate>
<div class="form_fields"> <div class="form_fields">
<div>
<!-- Dutch Postcode Field --> <!-- Dutch Postcode Field -->
<input <input
type="text" type="text"
name="postcode" name="postcode"
title="Voer een geldige Nederlandse postcode in (bijv. 1234AB of 1234 AB)." title="Voer een geldige postcode in (bijv. 1234AB of 1234 AB)."
pattern="[1-9][0-9]{3} ?(?!sa|sd|ss)[a-zA-Z]{2}" pattern="[1-9][0-9]{3} ?(?!sa|sd|ss)[a-zA-Z]{2}"
placeholder="5010 AA" placeholder="5010 AA"
size="10" size="8"
required required
autocomplete="off" autocomplete="off"
/> />
@@ -125,15 +144,22 @@ function render_dialog_html()
<input <input
type="text" type="text"
name="huisnummer" name="huisnummer"
title="Voer een geldig huisnummer in (bijv. 1, 1A, 1-A, 1a)." title="Voer een geldig huisnummer in (bijv. 1, 1A, 1-A)."
pattern="\d+([- ]?[a-zA-Z]+)?" pattern="\d+([\- ]?[a-zA-Z]+)?"
placeholder="10" placeholder="10"
size="5" size="3"
required required
autocomplete="off" autocomplete="off"
/> />
<button id="postcode_modal_submit" type="submit"><span class="btn_text">OK</span>
<div class="btn_loader">
<svg viewBox="0 0 128 30" xmlns="http://www.w3.org/2000/svg">
<circle style="--i:0" cx="14" cy="15" r="14" />
<circle style="--i:1" cx="64" cy="15" r="14" />
<circle style="--i:2" cx="114" cy="15" r="14" />
</svg>
</div> </div>
<button id="postcode_modal_submit" type="submit">OK</button> </button>
</div> </div>
</form> </form>
<div class="error_message_modal_postcode" id="error_message_modal_postcode" aria-live="polite"></div> <div class="error_message_modal_postcode" id="error_message_modal_postcode" aria-live="polite"></div>
@@ -325,7 +351,7 @@ function modify_checkout_with_js()
if (typeof wp !== 'undefined' && wp.data && wp.data.dispatch) { if (typeof wp !== 'undefined' && wp.data && wp.data.dispatch) {
const store = 'wc/store/cart'; const store = 'wc/store/cart';
wp.data.dispatch(store).setBillingAddress({ wp.data.dispatch(store).setShippingAddress({
first_name: '', first_name: '',
last_name: '', last_name: '',
address_1: '<?php echo esc_js($address); ?>', address_1: '<?php echo esc_js($address); ?>',
@@ -341,7 +367,7 @@ function modify_checkout_with_js()
//make fields READONLY and ppstcode reset. //make fields READONLY and ppstcode reset.
setTimeout(() => { setTimeout(() => {
// make prefilled fiields readonly. // make prefilled fiields readonly.
$('#billing-postcode, #billing-city, #billing-address_1') $('#shipping-postcode, #shipping-city, #shipping-address_1')
.prop('readonly', true) .prop('readonly', true)
.css('background', '#f9f9f9'); .css('background', '#f9f9f9');
@@ -351,9 +377,8 @@ function modify_checkout_with_js()
div.setAttribute("class", "postcode-reset") div.setAttribute("class", "postcode-reset")
div.innerHTML = ` div.innerHTML = `
<a href="#" class="reset-postcode-show-comfirm" >Reset postcode.</a> <a href="#" class="reset-postcode-show-comfirm" >Reset postcode.</a>
<span class="bevestiging"> Weet je het zeker? <span class="bevestiging"> Deze handeling leegt ook de winkelwagen. Weet je het zeker?
<a href="#" class="accept">ja</a>/<a href="#" class="decline">nee</a> <a href="#" class="accept">&nbsp;&nbsp;JA&nbsp;</a>/<a href="#" class="decline">&nbsp;nee&nbsp;&nbsp;</a>
(Deze handeling leegt de winkelwagen.)
</span> `; </span> `;
div.style.width = "100%"; div.style.width = "100%";
document.querySelector(".wc-block-components-address-form__city").after(div); document.querySelector(".wc-block-components-address-form__city").after(div);