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

57
session_dialog.php
View File

@@ -43,9 +43,26 @@ function send_postcode_data()
<script type="module">
const postcodeModal = document.querySelector("#postcode_modal");
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) => {
e.preventDefault();
errorMsg.innerHTML = "";
sndBtn.disabled = true;
sndBtnLdr.style.opacity = "1";
sndBtnTxt.style.opacity = "0";
const formData = new FormData(e.target);
const data = Object.fromEntries(formData.entries());
const json = JSON.stringify(data);
@@ -67,6 +84,9 @@ function send_postcode_data()
if(!resp.ok){
throw new Error(`HTTP Error! status: ${resp.status}` );
}
sndBtn.disabled = false;
sndBtnLdr.style.opacity = "0";
sndBtnTxt.style.opacity = "1";
const data = await resp.json();
console.log("Data returnd", data);
@@ -76,15 +96,15 @@ function send_postcode_data()
switch (err) {
case "HUISNUMMER_NOT_FOUND":
errmsg = "Adres niet gevonden.";
errmsg = "Adres is niet gevonden.";
break;
case "HUISNUMMER_AMBIGUOUS":
errmsg = "Huisnummertovoeging mist.";
break;
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"){
@@ -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>
<form id="postcode_modal_form" method="post" action="" novalidate>
<div class="form_fields">
<div>
<!-- Dutch Postcode Field -->
<input
type="text"
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}"
placeholder="5010 AA"
size="10"
size="8"
required
autocomplete="off"
/>
@@ -125,16 +144,23 @@ function render_dialog_html()
<input
type="text"
name="huisnummer"
title="Voer een geldig huisnummer in (bijv. 1, 1A, 1-A, 1a)."
pattern="\d+([- ]?[a-zA-Z]+)?"
title="Voer een geldig huisnummer in (bijv. 1, 1A, 1-A)."
pattern="\d+([\- ]?[a-zA-Z]+)?"
placeholder="10"
size="5"
size="3"
required
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>
</button>
</div>
<button id="postcode_modal_submit" type="submit">OK</button>
</div>
</form>
<div class="error_message_modal_postcode" id="error_message_modal_postcode" aria-live="polite"></div>
</dialog>
@@ -325,7 +351,7 @@ function modify_checkout_with_js()
if (typeof wp !== 'undefined' && wp.data && wp.data.dispatch) {
const store = 'wc/store/cart';
wp.data.dispatch(store).setBillingAddress({
wp.data.dispatch(store).setShippingAddress({
first_name: '',
last_name: '',
address_1: '<?php echo esc_js($address); ?>',
@@ -341,7 +367,7 @@ function modify_checkout_with_js()
//make fields READONLY and ppstcode reset.
setTimeout(() => {
// make prefilled fiields readonly.
$('#billing-postcode, #billing-city, #billing-address_1')
$('#shipping-postcode, #shipping-city, #shipping-address_1')
.prop('readonly', true)
.css('background', '#f9f9f9');
@@ -351,9 +377,8 @@ function modify_checkout_with_js()
div.setAttribute("class", "postcode-reset")
div.innerHTML = `
<a href="#" class="reset-postcode-show-comfirm" >Reset postcode.</a>
<span class="bevestiging"> Weet je het zeker?
<a href="#" class="accept">ja</a>/<a href="#" class="decline">nee</a>
(Deze handeling leegt de winkelwagen.)
<span class="bevestiging"> Deze handeling leegt ook de winkelwagen. Weet je het zeker?
<a href="#" class="accept">&nbsp;&nbsp;JA&nbsp;</a>/<a href="#" class="decline">&nbsp;nee&nbsp;&nbsp;</a>
</span> `;
div.style.width = "100%";
document.querySelector(".wc-block-components-address-form__city").after(div);