Remo/wp-postcode-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

session changed, css, postcode range

Browse Source
This commit is contained in:
Remo Zaros
2026-05-18 10:17:45 +02:00
parent 318eb8f0c5
commit 492289deb1
3 changed files with 91 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
assets/postcode_modal.css
View File

@@ -1,47 +1,67 @@
.postcode_modal { .postcode_modal {
border-radius: 5px; border-radius: 3px;
box-shadow(10px);
border: none; border: none;
max-width: 80ch; max-width: 60ch;
box-shadow: 0 0 20pc black;
padding: 2rem; padding: 2rem;
padding-bottom: 1rem;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease, display 0.3s allow-discrete; transition:
opacity 0.3s ease,
display 0.3s allow-discrete;
&[open] { &[open] {
opacity: 1; opacity: 1;
transition-behavior: allow-discrete; transition-behavior: allow-discrete;
transition: opacity 0.3s ease, display 0.3s allow-discrete; transition:
} opacity 0.3s ease,
display 0.3s allow-discrete;
&:not([open]) {
display: none;
} }
h2 { h2 {
font-size: 1.5rem; font-size: 1.1rem;
margin: .6rem; font-weight: 700;
}
p {
font-size: 1rem;
}
&:not([open]) {
display: none;
}
form {
margin-top: 1rem;
} }
input[type="text"] { input[type="text"] {
padding: .3rem; padding: 0.3rem;
font-size: 1.4rem; font-size: 1.2rem;
caret-color: hsl(344 98 40); caret-color: var(--wp--preset--color--vivid-red);
background: hsl(0 1 80);
border: none;
&:focus,
&:valid,
&:invalid,
&:autofill,
&:autofill:focus {
background: hsl(0 1 80) !important;
}
} }
button { button {
border: none; font-size: 1.2rem;
font-size: 1.4rem; font-weight: 700;
color: hsl(233 100 100); color: hsl(233 100 100);
padding: .4rem 1rem; padding: 0.4rem 1rem;
border-radius: 5px; background: var(--wp--preset--color--vivid-red);
background: hsl(344 98 40); border: 1px var(--wp--preset--color--vivid-red) solid;
border: 1px hsl(344 98 40) solid; margin: 0 0 0 0.3rem;
margin: 0 0 0 .3rem; transition: 0.2s all linear;
transition: .2s all linear; padding: 0.2em 2.5em;
&:hover {
&:hover{ color: var(--wp--preset--color--vivid-red);
color: hsl(344 98 40 );
background: hsl(344 98 100); background: hsl(344 98 100);
cursor: pointer; cursor: pointer;
} }
@@ -51,20 +71,19 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
div {
&>{
display: flex; display: flex;
gap: 1.5rem;
} }
} }
&::backdrop { &::backdrop {
backdrop-filter: blur(1px); backdrop-filter: blur(2px);
background-color: hsl(40deg 100 0 /0.4); background: hsl(0 1 65 / 0.6);
background: radial-gradient(circle,rgba(33, 33, 33, 0.68) 0%, rgba(15, 15, 15, 0.8) 23%, rgba(0, 0, 0, 0.87) 100%);
} }
.error_message_modal_postcode { .error_message_modal_postcode {
min-height: 1lh; min-height: 1lh;
color: hsl(344 98 40 ); color: var(--wp--preset--color--vivid-red);
}/* HTML: <div class="loader"></div> */ } /* HTML: <div class="loader"></div> */
} }

9
prijs-per-postcode.php
View File

@@ -1,7 +1,6 @@
<?php <?php
session_start(); require_once plugin_dir_path(__FILE__) . "session_dialog.php";
require_once "session_dialog.php";
/* /*
* Plugin Name: prijzen per poscode range * Plugin Name: prijzen per poscode range
* Description: posctcodes in de 5000-5800 range krijgen een lokaal tarief aangeboden. * Description: posctcodes in de 5000-5800 range krijgen een lokaal tarief aangeboden.
@@ -19,12 +18,16 @@ class PrijsPerPostcode
{ {
public function __construct() public function __construct()
{ {
add_action("init", [$this, "init"]); add_action("init", [$this, "init"], 1);
add_action("rest_api_init", "register_modal_api"); add_action("rest_api_init", "register_modal_api");
} }
public function init() public function init()
{ {
if (session_status() == PHP_SESSION_NONE) {
ob_start();
@session_start();
}
$uri = $_SERVER["REQUEST_URI"]; $uri = $_SERVER["REQUEST_URI"];
init_postcode_handlers($uri); init_postcode_handlers($uri);
add_filter("woocommerce_sale_flash", "__return_null"); add_filter("woocommerce_sale_flash", "__return_null");

45
session_dialog.php
View File

@@ -1,6 +1,5 @@
<?php <?php
session_start();
function init_postcode_handlers($uri) function init_postcode_handlers($uri)
{ {
if (strpos($uri, "/winkel/") !== false) { if (strpos($uri, "/winkel/") !== false) {
@@ -69,7 +68,6 @@ function send_postcode_data()
throw new Error(`HTTP Error! status: ${resp.status}` ); throw new Error(`HTTP Error! status: ${resp.status}` );
} }
const data = await resp.json(); const data = await resp.json();
console.log("Data returnd", data);
if (data.status === "error"){ if (data.status === "error"){
const err = data.message; const err = data.message;
@@ -105,7 +103,7 @@ function render_dialog_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 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>
<form id="postcode_modal_form" method="post" action="" novalidation> <form id="postcode_modal_form" method="post" action="" novalidation>
<div class="form_fields"> <div class="form_fields">
@@ -114,19 +112,21 @@ function render_dialog_html()
title="Voer een geldige Nederlandse postcode in (bijv. 1234AB of 1234 AB)." 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}" pattern="[1-9][0-9]{3} ?(?!sa|sd|ss)[a-zA-Z]{2}"
placeholder= "1010 AA" placeholder= "1010 AA"
size="10" size="8"
autocomplete="off"
required required
/> />
<input type="text" name="huisnummer" <input type="text" name="huisnummer"
pattern="/\d+([-\\s]?[a-zA-Z]+)?/" pattern="/\d+([-\\s]?[a-zA-Z]+)?/"
title="Voer een geldig huisnummer in (bijv. 1, 1A, 1-A, 1a)." title="Voer een geldig huisnummer in (bijv. 1, 1A, 1-A, 1a)."
placeholder= "12A" placeholder= "10A"
size="5" size="4"
autocomplete="off"
required required
/> />
</div> </div>
<button id="postcode_modal_submit" type="submit">verzend</button> <button id="postcode_modal_submit" type="submit">OK</button>
</div> </div>
</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>
@@ -193,11 +193,7 @@ function handle_postcode_modal($data)
"status" => "success", "status" => "success",
"message" => "all good", "message" => "all good",
"straatnaam" => $result["straatnaam"], "straatnaam" => $result["straatnaam"],
"lokaal_trarief" => postcode_in_range( "lokaal_trarief" => postcode_in_range($params["postcode"]),
$params["postcode"],
5000,
5800,
),
]; ];
} else { } else {
$resp = [ $resp = [
@@ -271,7 +267,20 @@ function getStraatnaam($postcode, $huisnummer)
]; ];
} }
function postcode_in_range($postcode, $start, $end) // 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;
// }
function postcode_in_range($postcode)
{ {
$cleanPostcode = strtoupper(preg_replace("/\s+/", "", $postcode)); $cleanPostcode = strtoupper(preg_replace("/\s+/", "", $postcode));
@@ -281,7 +290,15 @@ function postcode_in_range($postcode, $start, $end)
$numberPart = (int) substr($cleanPostcode, 0, 4); $numberPart = (int) substr($cleanPostcode, 0, 4);
return $numberPart >= $start && $numberPart <= $end; if (
($numberPart >= 4800 && $numberPart <= 4899) ||
($numberPart >= 5000 && $numberPart <= 5199) ||
($numberPart >= 5688 && $numberPart <= 5689) ||
($numberPart >= 5260 && $numberPart <= 5268)
) {
return true;
}
return false;
} }
function modify_checkout_with_js() function modify_checkout_with_js()