change <?php to <<<HTML

This commit is contained in:
Remo Zaros
2026-06-10 13:30:03 +02:00
parent 0ba7c07287
commit e57a7aadb9

View File

@@ -31,17 +31,20 @@ function modal_styles()
function show_modal() function show_modal()
{ {
?> echo <<<'HTML'
<script id="postcode_modal"> <script id="postcode_modal_open">
const postcodeModal = document.querySelector("#postcode_modal"); const postcodeModal = document.querySelector("#postcode_modal");
postcodeModal.showModal(); postcodeModal.showModal();
</script> </script>
<?php HTML;
} }
function send_postcode_data() function send_postcode_data()
{ {
?> $URL = get_rest_url(null, "postcode-modal/v1/submit");
$nonce = wp_create_nonce("wp_rest");
echo <<<HTML
<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");
@@ -74,17 +77,13 @@ function send_postcode_data()
const payload = Object.fromEntries(formData.entries()); const payload = Object.fromEntries(formData.entries());
try { try {
const resp = await fetch('<?php echo get_rest_url( const resp = await fetch('{$URL}', {
null,
"postcode-modal/v1/submit",
); ?>', {
method: 'POST', method: 'POST',
credentials: 'same-origin', credentials: 'same-origin',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'X-WP-Nonce': '<?php echo wp_create_nonce( 'X-WP-Nonce': '{$nonce}'
"wp_rest",
); ?>'
}, },
body: JSON.stringify(payload) body: JSON.stringify(payload)
}); });
@@ -108,13 +107,11 @@ function send_postcode_data()
userErrorMessage = "Adres is niet gevonden."; userErrorMessage = "Adres is niet gevonden.";
} }
else if (errorCode === "HUISNUMMER_AMBIGUOUS") { else if (errorCode === "HUISNUMMER_AMBIGUOUS") {
// Deze komt ALLEEN nog hier als PHP géén 'platte' match kon vinden.
// Dat betekent dat de gebruiker verplicht een toevoeging moet geven (bijv. alleen 15A bestaat).
const suggestions = data.suggestions || []; const suggestions = data.suggestions || [];
if (suggestions.length > 0) { if (suggestions.length > 0) {
userErrorMessage = `Meerdere opties: ${suggestions.join(", ")}. Voeg een toevoeging toe.`; userErrorMessage = `Meerdere opties: \${suggestions.join(", ")}. Voeg een toevoeging toe.`;
} else { } else {
userErrorMessage = "Huisnummertoevoeging is verplicht."; userErrorMessage = "Huisnummertoevoeging is verplicht.";
} }
} }
else if (errorCode === "CURL_ERROR" || errorCode === "JSON_ERROR") { else if (errorCode === "CURL_ERROR" || errorCode === "JSON_ERROR") {
@@ -131,7 +128,6 @@ function send_postcode_data()
} }
} catch (err) { } catch (err) {
console.error("Fetch Failed:", err);
sndBtn.disabled = false; sndBtn.disabled = false;
sndBtnLdr.style.opacity = "0"; sndBtnLdr.style.opacity = "0";
sndBtnTxt.style.opacity = "1"; sndBtnTxt.style.opacity = "1";
@@ -139,12 +135,12 @@ function send_postcode_data()
} }
}); });
</script> </script>
<?php HTML;
} }
function render_dialog_html() function render_dialog_html()
{ {
?> echo <<<'HTML'
<dialog id="postcode_modal" class="postcode_modal" closedby="none"> <dialog id="postcode_modal" class="postcode_modal" closedby="none">
<h2>Vul je postcode en huisnummer in.</h2> <h2>Vul je postcode en huisnummer in.</h2>
<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>
@@ -186,7 +182,7 @@ function render_dialog_html()
</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>
</dialog> </dialog>
<?php HTML;
} }
function has_postcode() function has_postcode()
@@ -409,62 +405,63 @@ function modify_checkout_with_js()
); );
$address = $address =
$_SESSION["straatnaam"] . " " . strtoupper($_SESSION["huisnummer"]); $_SESSION["straatnaam"] . " " . strtoupper($_SESSION["huisnummer"]);
// Output the JavaScript
?>
<script type="text/javascript" id="fill_address_fields">
jQuery(document).ready(function($) {
fillCheckoutFields();
$(document.body).on('updated_checkout', fillCheckoutFields);
});
function fillCheckoutFields() { echo <<<HTML
if (typeof wp !== 'undefined' && wp.data && wp.data.dispatch) { <script type="text/javascript" id="fill_address_fields">
const store = 'wc/store/cart'; jQuery(document).ready(function(\$) {
fillCheckoutFields();
\$(document.body).on('updated_checkout', fillCheckoutFields);
});
wp.data.dispatch(store).setShippingAddress({ function fillCheckoutFields() {
first_name: '', if (typeof wp !== 'undefined' && wp.data && wp.data.dispatch) {
last_name: '', const store = 'wc/store/cart';
address_1: '<?php echo esc_js($address); ?>',
address_2: '',
city: '<?php echo esc_js($woonplaats); ?>',
state: '',
postcode: '<?php echo esc_js($postcode); ?>',
country: 'NL',
phone: '',
email: ''
});
//make fields READONLY and ppstcode reset. wp.data.dispatch(store).setShippingAddress({
setTimeout(() => { first_name: '',
// make prefilled fiields readonly. last_name: '',
$('#shipping-postcode, #shipping-city, #shipping-address_1') address_1: '{$address}',
.prop('readonly', true) address_2: '',
.css('background', '#f9f9f9'); city: '{$woonplaats}',
state: '',
postcode: '{$postcode}',
country: 'NL',
phone: '',
email: ''
});
// create postcode reset button //make fields READONLY and ppstcode reset.
const div = document.createElement("div"); setTimeout(() => {
const script = document.createElement('script'); // make prefilled fiields readonly.
div.setAttribute("class", "postcode-reset") \$('#shipping-postcode, #shipping-city, #shipping-address_1')
div.innerHTML = ` .prop('readonly', true)
<a href="#" class="reset-postcode-show-comfirm" >Reset postcode.</a> .css('background', '#f9f9f9');
<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);
}, 500);
// create postcode reset button
const div = document.createElement("div");
div.setAttribute("class", "postcode-reset")
div.innerHTML = `
<a href="#" class="reset-postcode-show-comfirm" >Reset postcode.</a>
<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);
}, 500);
jQuery(document.body).trigger('update_checkout');
jQuery(document.body).trigger('update_checkout'); } else {
} else { console.error('WooCommerce Blocks API is niet beschikbaar');
console.error('WooCommerce Blocks API is niet beschikbaar'); }
} }
} </script>
</script> HTML;
<?php
} }
function load_assets_reset_postcode_on_checkout() function load_assets_reset_postcode_on_checkout()
{ {
if (is_checkout() && !is_wc_endpoint_url()) { if (is_checkout() && !is_wc_endpoint_url()) {