Compare commits

...

2 Commits

Author SHA1 Message Date
Remo Zaros
d060a412cb fill in datat on checkout page 2026-05-09 14:23:30 +02:00
Remo Zaros
305d2c7797 add animation 2026-05-09 14:22:13 +02:00
3 changed files with 169 additions and 44 deletions

View File

@@ -1,10 +1,50 @@
.postcode_modal {
backgrounnd: green;
border-radius: 30px;
border-radius: 20px;
box-shadow(10px);
border: none;
}
max-width: 80ch;
box-shadow: 0 0 20pc black;
padding: 2rem;
opacity: 0;
transition: opacity 0.3s ease, display 0.3s allow-discrete;
& ::backdrop {
background-color: hsl(40deg 100 30 /0.5);
&[open] {
opacity: 1;
transition-behavior: allow-discrete;
transition: opacity 0.3s ease, display 0.3s allow-discrete;
}
&:not([open]) {
display: none;
}
h2 {
font-size: 1.5rem;
margin: .6rem;
}
input[type="text"] {
padding: .3rem;
font-size: 1.4rem;
}
button {
border: none;
font-size: 1.4rem;
padding: .4rem 1rem;
border-radius: 5px;
background: dodgerblue;
margin: 0 0 0 .3rem;
}
.form_fields {
display: flex;
justify-content: space-between;
align-items: center;
}
&::backdrop {
background-color: hsl(40deg 100 30 /0.5);
}
}

View File

@@ -1,5 +1,6 @@
<?php
session_start();
require_once "session_dialog.php";
/*
* Plugin Name: Prijs per Postcode
@@ -26,6 +27,34 @@ class PrijsPerPostcode
{
$uri = $_SERVER["REQUEST_URI"];
if_needed_place_postcode_form($uri);
add_action("wp_footer", "set_checkout_fields_with_javascript");
function set_checkout_fields_with_javascript()
{
// Only run on the checkout page
if (!is_checkout() || is_wc_endpoint_url()) {
return;
}
// Define the values you want to set
$woonplaats = $SESSION["woonplaats"];
$postcode = $_SESSION["postcode"];
$address_1 =
$_SESSION["straatnaam"] . " " . $_SESSION["huisnummer"];
// Output the JavaScript
?>
<script type="text/javascript">
jQuery(document).ready(function($){
// Set the values for the checkout fields
$('#billing_city').val('<?php echo esc_js($woonplaats); ?>');
$('#billing_postcode').val('<?php echo esc_js($postcode); ?>');
$('#billing_address_1').val('<?php echo esc_js(
$address_1,
); ?>');
});
</script>
<?php
}
}
}

View File

@@ -3,7 +3,11 @@
session_start();
function if_needed_place_postcode_form($uri)
{
if (strpos($uri, "/shop") !== false || strpos($uri, "/winkel") !== false) {
if (
strpos($uri, "/shop") !== false ||
strpos($uri, "/winkel") !== false ||
strpos($uri, "/product") !== false
) {
render_dialog_html();
add_action("wp_enqueue_scripts", "modal_styles");
add_action("wp_footer", "send_postcode_data");
@@ -24,7 +28,6 @@ function modal_styles()
function show_modal()
{
?>
<h1>sdfsdfsdfsdfsdfsdfsdf</h1>
<script>
const postcodeModal = document.querySelector("#postcode_modal");
postcodeModal.showModal();
@@ -83,21 +86,28 @@ function render_dialog_html()
<dialog id="postcode_modal" class="postcode_modal" closedby="none">
<h2>Vul je postcode en huisnummer in.</h2>
<form id="postcode_modal_form" method="post" action="">
<input type="text" name="postcode"
title="Voer een geldige Nederlandse postcode in (bijv. 1234AB of 1234 AB)."
pattern="[1-9][0-9]{3} ?(?!sa|sd|ss)[a-zA-Z]{2}"
placeholder= "1010 AA"
required
/>
<div class="form_fields">
<div>
<input type="text" name="postcode"
title="Voer een geldige Nederlandse postcode in (bijv. 1234AB of 1234 AB)."
pattern="[1-9][0-9]{3} ?(?!sa|sd|ss)[a-zA-Z]{2}"
placeholder= "1010 AA"
size="10"
required
/>
<input type="text" name="huisnummer"
pattern="\d+([-\s]?[a-zA-Z]+)?"
title="Voer een geldig huisnummer in (bijv. 1, 1A, 1-A, 1a)."
placeholder= "12a"
required
/>
<button id="postcode_modal_submit" type="submit">verzend</button>
<input type="text" name="huisnummer"
pattern="\d+([-\s]?[a-zA-Z]+)?"
title="Voer een geldig huisnummer in (bijv. 1, 1A, 1-A, 1a)."
placeholder= "12a"
size="5"
required
/>
</div>
<button id="postcode_modal_submit" type="submit">verzend</button>
</div>
<form>
<div class="error_message" id="error_message"></div>
</dialog>
<?php
}
@@ -121,7 +131,7 @@ function handle_postcode_modal($data)
"status" => "error",
"message" => "postcode",
];
echo $resp;
echo json_encode($resp);
exit();
}
@@ -130,16 +140,40 @@ function handle_postcode_modal($data)
"status" => "error",
"message" => "huisnummer",
];
echo $resp;
echo json_encode($resp);
exit();
}
$result = getStraatnaam($params["postcode"], $params["huisnummer"]);
if (isset($result["error"])) {
$resp = [
"status" => "error",
"message" => $result["error"],
"apirequest" => "openpostcode.nl",
];
echo json_encode($resp);
exit();
}
$_SESSION["postcode"] = $params["postcode"];
$_SESSION["huisnummer"] = $params["huisnummer"];
$_SESSION["straatnaam"] = $result["straatnaam"];
$_SESSION["woonplaats"] = $result["woonplaats"];
$_SESSION["lokaak_tarief"] = postcode_in_range(
$params["postcode"],
5000,
5800,
);
$resp = [
"status" => "success",
"message" => "all good",
"straatnaam" => $result["straatnaam"],
"lokaal_trarief" => postcode_in_range(
$params["postcode"],
5000,
5800,
),
];
} else {
$resp = [
@@ -175,31 +209,53 @@ function verify_huisnummer($huisnummer)
return true;
}
function check_data_at_openpostcode($oostcode, $huisnummer)
function getStraatnaam($postcode, $huisnummer)
{
$urk =
"https//openpostcode.nl/api/v2/address?postcode=" .
$postcode .
"&" .
$huisnummer;
$options = [
"http" => [
"method" => "GET",
"header" => "Accept: application/json\r\n",
],
"ssl" => [
"verify_peer" => true,
"verify_peer_name" => true,
],
];
$url =
"https://openpostcode.nl/api/v2/address?postcode=" .
urlencode($postcode) .
"&huisnummer=" .
urlencode($huisnummer);
$context = stream_context_create($options);
$response = file_get_contents($url, false, $context);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_setopt($ch, CURLOPT_USERAGENT, "PHP/OpenPostcodeClient");
if ($response === false) {
// Handle error
} else {
$data = json_decode($response, true);
$response = curl_exec($ch);
if (curl_error($ch)) {
curl_close($ch);
return ["error" => "cURL error: " . curl_error($ch)];
}
return data;
curl_close($ch);
$data = json_decode($response, true);
if (isset($data["error"])) {
return [
"error" => $data["error"]["message"],
"code" => $data["error"]["code"],
];
}
return [
"straatnaam" => $data["results"][0]["straat"],
"woonplaats" => $data["results"][0]["woonplaats"],
];
}
function postcode_in_range($postcode, $start, $end)
{
$cleanPostcode = strtoupper(preg_replace("/\s+/", "", $postcode));
if (!preg_match('/^\d{4}[A-Z]{2}$/', $cleanPostcode)) {
return false;
}
$numberPart = (int) substr($cleanPostcode, 0, 4);
return $numberPart >= $start && $numberPart <= $end;
}