session changed, css, postcode range

2026-05-18 10:17:45 +02:00
parent 318eb8f0c5
commit 492289deb1
3 changed files with 91 additions and 52 deletions
--- a/assets/postcode_modal.css
+++ b/assets/postcode_modal.css
@@ -1,47 +1,67 @@
 .postcode_modal {
-    border-radius: 5px;
-    box-shadow(10px);
+    border-radius: 3px;
    border: none;
-    max-width: 80ch;
-    box-shadow: 0 0 20pc black;
+    max-width: 60ch;
    padding: 2rem;
+    padding-bottom: 1rem;
    opacity: 0;
-    transition: opacity 0.3s ease, display 0.3s allow-discrete;
+    transition:
+        opacity 0.3s ease,
+        display 0.3s allow-discrete;

    &[open] {
-      opacity: 1;
-      transition-behavior: allow-discrete;
-      transition: opacity 0.3s ease, display 0.3s allow-discrete;
-    }
-
-    &:not([open]) {
-      display: none;
+        opacity: 1;
+        transition-behavior: allow-discrete;
+        transition:
+            opacity 0.3s ease,
+            display 0.3s allow-discrete;
    }

    h2 {
-      font-size: 1.5rem;
-      margin: .6rem;
+        font-size: 1.1rem;
+        font-weight: 700;
+    }
+
+    p {
+        font-size: 1rem;
+    }
+
+    &:not([open]) {
+        display: none;
+    }
+
+    form {
+        margin-top: 1rem;
    }

    input[type="text"] {
-        padding: .3rem;
-        font-size: 1.4rem;
-        caret-color: hsl(344 98 40);
+        padding: 0.3rem;
+        font-size: 1.2rem;
+        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 {
-        border: none;
-        font-size: 1.4rem;
+        font-size: 1.2rem;
+        font-weight: 700;
        color: hsl(233 100 100);
-        padding: .4rem 1rem;
-        border-radius: 5px;
-        background: hsl(344 98 40);
-        border: 1px hsl(344 98 40) solid;
-        margin: 0 0 0 .3rem;
-        transition: .2s all linear;
-
-        &:hover{
-            color: hsl(344 98 40 );
+        padding: 0.4rem 1rem;
+        background: var(--wp--preset--color--vivid-red);
+        border: 1px var(--wp--preset--color--vivid-red) solid;
+        margin: 0 0 0 0.3rem;
+        transition: 0.2s all linear;
+        padding: 0.2em 2.5em;
+        &:hover {
+            color: var(--wp--preset--color--vivid-red);
            background: hsl(344 98 100);
            cursor: pointer;
        }
@@ -51,20 +71,19 @@
        display: flex;
        justify-content: space-between;
        align-items: center;
-
-        &>{
+        div {
            display: flex;
+            gap: 1.5rem;
        }
    }

    &::backdrop {
-        backdrop-filter: blur(1px);
-        background-color: hsl(40deg 100 0 /0.4);
-        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%);
+        backdrop-filter: blur(2px);
+        background: hsl(0 1 65 / 0.6);
    }

    .error_message_modal_postcode {
        min-height: 1lh;
-        color: hsl(344 98 40 );
-    }/* HTML: <div class="loader"></div> */
+        color: var(--wp--preset--color--vivid-red);
+    } /* HTML: <div class="loader"></div> */
 }
--- a/prijs-per-postcode.php
+++ b/prijs-per-postcode.php
@@ -1,7 +1,6 @@
 <?php

-session_start();
-require_once "session_dialog.php";
+require_once plugin_dir_path(__FILE__) . "session_dialog.php";
 /*
 * Plugin Name: prijzen per poscode range
 * Description:  posctcodes in de 5000-5800 range krijgen een lokaal tarief aangeboden.
@@ -19,12 +18,16 @@ class PrijsPerPostcode
 {
    public function __construct()
    {
-        add_action("init", [$this, "init"]);
+        add_action("init", [$this, "init"], 1);
        add_action("rest_api_init", "register_modal_api");
    }

    public function init()
    {
+        if (session_status() == PHP_SESSION_NONE) {
+            ob_start();
+            @session_start();
+        }
        $uri = $_SERVER["REQUEST_URI"];
        init_postcode_handlers($uri);
        add_filter("woocommerce_sale_flash", "__return_null");
--- a/session_dialog.php
+++ b/session_dialog.php
@@ -1,6 +1,5 @@
 <?php

-session_start();
 function init_postcode_handlers($uri)
 {
    if (strpos($uri, "/winkel/") !== false) {
@@ -69,7 +68,6 @@ function send_postcode_data()
                throw new Error(`HTTP Error! status: ${resp.status}` );
              }
              const data = await resp.json();
-              console.log("Data returnd", data);

              if (data.status === "error"){
                  const err = data.message;
@@ -105,7 +103,7 @@ function render_dialog_html()
 {
    ?>
    <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>
        <form id="postcode_modal_form" method="post" action="" novalidation>
            <div class="form_fields">
@@ -114,19 +112,21 @@ function render_dialog_html()
                        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"
+                        size="8"
+                        autocomplete="off"
                        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"
-                        size="5"
+                        placeholder= "10A"
+                        size="4"
+                        autocomplete="off"
                        required
                    />
                </div>
-                <button id="postcode_modal_submit" type="submit">verzend</button>
+                <button id="postcode_modal_submit" type="submit">OK</button>
            </div>
        </form>
        <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",
            "message" => "all good",
            "straatnaam" => $result["straatnaam"],
-            "lokaal_trarief" => postcode_in_range(
-                $params["postcode"],
-                5000,
-                5800,
-            ),
+            "lokaal_trarief" => postcode_in_range($params["postcode"]),
        ];
    } else {
        $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));

@@ -281,7 +290,15 @@ function postcode_in_range($postcode, $start, $end)

    $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()