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,11 +107,9 @@ 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.";
} }
@@ -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,12 +405,12 @@ function modify_checkout_with_js()
); );
$address = $address =
$_SESSION["straatnaam"] . " " . strtoupper($_SESSION["huisnummer"]); $_SESSION["straatnaam"] . " " . strtoupper($_SESSION["huisnummer"]);
// Output the JavaScript
?> echo <<<HTML
<script type="text/javascript" id="fill_address_fields"> <script type="text/javascript" id="fill_address_fields">
jQuery(document).ready(function($) { jQuery(document).ready(function(\$) {
fillCheckoutFields(); fillCheckoutFields();
$(document.body).on('updated_checkout', fillCheckoutFields); \$(document.body).on('updated_checkout', fillCheckoutFields);
}); });
function fillCheckoutFields() { function fillCheckoutFields() {
@@ -424,11 +420,11 @@ function modify_checkout_with_js()
wp.data.dispatch(store).setShippingAddress({ wp.data.dispatch(store).setShippingAddress({
first_name: '', first_name: '',
last_name: '', last_name: '',
address_1: '<?php echo esc_js($address); ?>', address_1: '{$address}',
address_2: '', address_2: '',
city: '<?php echo esc_js($woonplaats); ?>', city: '{$woonplaats}',
state: '', state: '',
postcode: '<?php echo esc_js($postcode); ?>', postcode: '{$postcode}',
country: 'NL', country: 'NL',
phone: '', phone: '',
email: '' email: ''
@@ -437,13 +433,12 @@ 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.
$('#shipping-postcode, #shipping-city, #shipping-address_1') \$('#shipping-postcode, #shipping-city, #shipping-address_1')
.prop('readonly', true) .prop('readonly', true)
.css('background', '#f9f9f9'); .css('background', '#f9f9f9');
// create postcode reset button // create postcode reset button
const div = document.createElement("div"); const div = document.createElement("div");
const script = document.createElement('script');
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>
@@ -454,17 +449,19 @@ function modify_checkout_with_js()
document.querySelector(".wc-block-components-address-form__city").after(div); document.querySelector(".wc-block-components-address-form__city").after(div);
}, 500); }, 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>
<?php HTML;
} }
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()) {