Make chechout work in Safari
This commit is contained in:
Remo Zaros
@@ -343,7 +343,7 @@ function getStraatnaam($postcode, $huisnummer)
|
||||
];
|
||||
}
|
||||
|
||||
// Geef de RUWE response terug (inclusief meta, error, results, etc.)
|
||||
// Give me back RUWE data (inclusive meta, error, results, etc.)
|
||||
return $data;
|
||||
}
|
||||
|
||||
@@ -374,129 +374,157 @@ function postcode_in_range($postcode)
|
||||
return false;
|
||||
}
|
||||
|
||||
function modify_checkout_with_js()
|
||||
{
|
||||
if (
|
||||
!is_checkout() ||
|
||||
(is_wc_endpoint_url() && !is_wc_endpoint_url("order-received"))
|
||||
) {
|
||||
function modify_checkout_with_js() {
|
||||
if ( ! is_checkout() || ( is_wc_endpoint_url() && ! is_wc_endpoint_url( 'order-received' ) ) ) {
|
||||
return;
|
||||
}
|
||||
$data = get_PPPR_data();
|
||||
|
||||
$city = esc_js($data["city"]);
|
||||
$postcode = esc_js( preg_replace(
|
||||
"/(\d+)([A-Z]+)/",
|
||||
'$1 $2',
|
||||
strtoupper($data["postcode"])
|
||||
));
|
||||
$address =
|
||||
esc_js($data["street"] . " " . strtoupper($data["house_number"]));
|
||||
$data = get_PPPR_data();
|
||||
if ( empty( $data ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$city = trim(esc_js( $data['city'] ));
|
||||
$postcode = trim(esc_js( preg_replace( '/(\d+)([A-Z]+)/', '$1 $2', strtoupper( $data['postcode']))));
|
||||
$address = trim(esc_js( $data['street'] . ' ' . strtoupper( $data['house_number'])));
|
||||
|
||||
// Enqueue script properly to handle dependencies and nonces
|
||||
wp_enqueue_script( 'jquery' );
|
||||
wp_localize_script( 'jquery', 'ajax_object', array(
|
||||
'ajax_url' => admin_url( 'admin-ajax.php' ),
|
||||
'nonce' => wp_create_nonce( 'unset_my_session_nonce' )
|
||||
) );
|
||||
|
||||
echo <<<HTML
|
||||
<script type="text/javascript" id="set_pppr_fields">
|
||||
jQuery(document).ready(function($) {
|
||||
|
||||
function lockCheckoutFields() {
|
||||
if (typeof wp !== 'undefined' && wp.data && wp.data.dispatch) {
|
||||
const store = 'wc/store/cart';
|
||||
|
||||
wp.data.dispatch(store).setShippingAddress({
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
address_1: '{$address}',
|
||||
address_2: '',
|
||||
city: '{$city}',
|
||||
state: '',
|
||||
postcode: '{$postcode}',
|
||||
country: 'NL',
|
||||
phone: '',
|
||||
email: ''
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const targets = '#shipping-postcode, #shipping-city, #shipping-address_1';
|
||||
|
||||
$(targets).each(function() {
|
||||
// Voeg readonly attribuut toe (voor toegankelijkheid)
|
||||
$(this).prop('readonly', true);
|
||||
|
||||
$(this).css({
|
||||
'background-color': '#f9f9f9',
|
||||
'cursor': 'not-allowed',
|
||||
'pointer-events': 'none' // Blokkeert alle muisklikken in het veld
|
||||
});
|
||||
});
|
||||
|
||||
if ($('.postcode-reset').length === 0) {
|
||||
const div = document.createElement("div");
|
||||
div.setAttribute("class", "postcode-reset");
|
||||
div.innerHTML = `
|
||||
<a href="#" class="reset-postcode-show-comfirm" style="font-size:12px; text-decoration:underline;">Reset postcode.</a>
|
||||
<span class="bevestiging" style="display:none; font-size:12px;">
|
||||
Deze handeling leegt ook de winkelwagen. Weet je het zeker?
|
||||
<a href="#" class="accept" style="color:red; font-weight:bold;"> JA </a>/
|
||||
<a href="#" class="decline"> nee </a>
|
||||
</span>`;
|
||||
|
||||
div.style.width = "100%";
|
||||
document.querySelector(".wc-block-components-address-form__city")?.after(div);
|
||||
|
||||
$('.reset-postcode-show-comfirm').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
$(this).hide();
|
||||
$(this).next('.bevestiging').show();
|
||||
});
|
||||
$('.decline').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
$(this).closest('.bevestiging').hide();
|
||||
$('.reset-postcode-show-comfirm').show();
|
||||
});
|
||||
|
||||
|
||||
$('.accept').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
$.ajax({
|
||||
url: ajax_object.ajax_url,
|
||||
type: 'POST',
|
||||
data: {
|
||||
action: 'unset_my_session', // Matches wp_ajax_ hook
|
||||
nonce: ajax_object.nonce // Matches wp_create_nonce action
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
location.reload();
|
||||
} else {
|
||||
console.error('Server returned error:', response.data);
|
||||
alert('Failed to reset session: ' + (response.data || 'Unknown error'));
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
console.log('Response Text:', xhr.responseText); // Check for PHP fatal errors
|
||||
}
|
||||
});
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// Safari Fix: Handle back/forward cache (bfcache)
|
||||
window.addEventListener('pageshow', function(event) {
|
||||
if (event.persisted || (typeof wp !== 'undefined' && wp.data)) {
|
||||
initPPPRFields();
|
||||
}
|
||||
});
|
||||
|
||||
jQuery(document.body).trigger('update_checkout');
|
||||
function initPPPRFields() {
|
||||
// Wait for React/WC Blocks to mount
|
||||
setTimeout(() => {
|
||||
const addressVal = '{$address}';
|
||||
const cityVal = '{$city}';
|
||||
const postcodeVal = '{$postcode}';
|
||||
|
||||
}, 800); // Iets langere delay voor React rendering
|
||||
} else {
|
||||
console.error('WooCommerce Blocks API is niet beschikbaar');
|
||||
}
|
||||
// Map WC Blocks field selectors
|
||||
const fields = [
|
||||
{ id: 'shipping-address_1', val: addressVal },
|
||||
{ id: 'shipping-city', val: cityVal },
|
||||
{ id: 'shipping-postcode', val: postcodeVal }
|
||||
];
|
||||
|
||||
fields.forEach(field => {
|
||||
// 1. Try Redux Dispatch (Standard)
|
||||
if (typeof wp !== 'undefined' && wp.data && wp.data.dispatch) {
|
||||
try {
|
||||
wp.data.dispatch('wc/store/cart').setShippingAddress({ [field.id.replace('shipping-', '')]: field.val });
|
||||
} catch(e) { console.warn('Redux update skipped', e); }
|
||||
}
|
||||
|
||||
// 2. Force DOM Update (Safari Fallback)
|
||||
// Select both legacy and Blocks inputs
|
||||
const inputs = document.querySelectorAll('#' + field.id + ', input[name="' + field.id.replace('shipping-', '') + '"]');
|
||||
|
||||
inputs.forEach(input => {
|
||||
if (input.value !== field.val) {
|
||||
input.value = field.val;
|
||||
|
||||
// CRITICAL FOR SAFARI: Manually trigger events so React notices
|
||||
['input', 'change'].forEach(evtType => {
|
||||
input.dispatchEvent(new Event(evtType, { bubbles: true, cancelable: true }));
|
||||
});
|
||||
}
|
||||
|
||||
// 3. Apply Visual Lock
|
||||
input.setAttribute('data-pppr-locked', 'true');
|
||||
input.readOnly = true;
|
||||
});
|
||||
});
|
||||
|
||||
// Inject Reset Button once
|
||||
if (!document.querySelector('.postcode-reset')) {
|
||||
const cityContainer = document.querySelector('.wc-block-components-address-form__city');
|
||||
if (cityContainer) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'postcode-reset';
|
||||
div.style.display = 'block';
|
||||
div.style.width = '100%';
|
||||
div.style.marginTop = '10px';
|
||||
|
||||
div.innerHTML = `
|
||||
<a href="#" class="reset-postcode-show-comfirm" style="font-size:12px; text-decoration:underline; display:block; margin-top:5px;">Reset postcode.</a>
|
||||
<span class="bevestiging" style="display:none; font-size:12px; margin-top:5px;">
|
||||
Deze handeling leegt ook de winkelwagen. Weet je het zeker?
|
||||
<a href="#" class="accept" style="color:red; font-weight:bold;"> JA </a>/
|
||||
<a href="#" class="decline"> nee </a>
|
||||
</span>`;
|
||||
cityContainer.parentNode.insertBefore(div, cityContainer.nextSibling);
|
||||
|
||||
// Event Listeners (using delegation for safety)
|
||||
div.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
if (e.target.classList.contains('reset-postcode-show-comfirm')) {
|
||||
e.target.style.display = 'none';
|
||||
div.querySelector('.bevestiging').style.display = 'block';
|
||||
} else if (e.target.classList.contains('decline')) {
|
||||
div.querySelector('.bevestiging').style.display = 'none';
|
||||
div.querySelector('.reset-postcode-show-comfirm').style.display = 'block';
|
||||
} else if (e.target.classList.contains('accept')) {
|
||||
fetch(ajax_object.ajax_url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
action: 'unset_my_session',
|
||||
nonce: ajax_object.nonce
|
||||
})
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(res => {
|
||||
if (res.success) location.reload();
|
||||
else alert('Failed to reset: ' + (res.data || 'Unknown error'));
|
||||
})
|
||||
.catch(err => console.error('AJAX error:', err));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Add CSS for locked state dynamically
|
||||
if (!document.getElementById('pppr-styles')) {
|
||||
const style = document.createElement('style');
|
||||
style.id = 'pppr-styles';
|
||||
style.textContent = `
|
||||
input[data-pppr-locked="true"] {
|
||||
background-color: #f9f9f9 !important;
|
||||
cursor: not-allowed !important;
|
||||
pointer-events: none !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
}, 600); // Delay for WC Blocks hydration
|
||||
}
|
||||
|
||||
lockCheckoutFields();
|
||||
// Initialize on load
|
||||
initPPPRFields();
|
||||
|
||||
let updateTimeout;
|
||||
$(document.body).on('updated_checkout', function() {
|
||||
clearTimeout(updateTimeout);
|
||||
updateTimeout = setTimeout(lockCheckoutFields, 500);
|
||||
// Re-apply if checkout updates (e.g. shipping method change)
|
||||
document.body.addEventListener('updated_checkout', function() {
|
||||
setTimeout(initPPPRFields, 400);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
HTML;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user