Add postcode reset to checkout.

assets/reset-postcode.css

@@ -0,0 +1,22 @@
+.postcode-reset {
+    font-size: var(--wp--preset--font-size--small, 13px);
+    line-height: 1.3;
+    margin-top: 11px;
+
+    a {
+        color: var(--wc-red);
+        cursor: pointer;
+
+        &:hover {
+            filter: brightness(160%);
+        }
+    }
+
+    .bevestiging {
+        display: none;
+
+        &[data-open="true"] {
+            display: inline;
+        }
+    }
+}

assets/reset-postcode.js

@@ -0,0 +1,14 @@
+document.addEventListener("click", function (event) {
+  event.preventDefault();
+  if (event.target.matches(".reset-postcode-show-comfirm")) {
+    console.log("link1 button clicked!");
+    document.querySelector(".bevestiging").dataset.open = true;
+  }
+  if (event.target.matches(".accept")) {
+    console.log("link2 button clicked!");
+  }
+  if (event.target.matches(".decline")) {
+    console.log("link3 button clicked!");
+    document.querySelector(".bevestiging").dataset.open = false;
+  }
+});

prijs-per-postcode.php

@@ -26,7 +26,8 @@ class PrijsPerPostcode
     public function init()
     {
         $uri = $_SERVER["REQUEST_URI"];
-        if_needed_place_postcode_form($uri);
+        add_filter("woocommerce_sale_flash", "__return_null");
+        init_postcode_handlers($uri);
 
         //add_action("template_redirect", [$this, "redirect_if_missing_tag"]);
         add_action(
@@ -56,67 +57,6 @@ class PrijsPerPostcode
             $this,
             "controleer_postcode_op_woocommerce_paginas",
         ]);
-        add_action("wp_footer", [$this, "set_checkout_fields_with_javascript"]);
-    }
-
-    public function set_checkout_fields_with_javascript()
-    {
-        if (
-            !is_checkout() ||
-            (is_wc_endpoint_url() && !is_wc_endpoint_url("order-received"))
-        ) {
-            return;
-        }
-
-        $woonplaats = $_SESSION["woonplaats"];
-        $postcode = $formatted_postcode = preg_replace(
-            "/(\d+)([A-Z]+)/",
-            '$1 $2',
-            strtoupper($_SESSION["postcode"]),
-        );
-        $address =
-            $_SESSION["straatnaam"] . " " . strtoupper($_SESSION["huisnummer"]);
-        // Output the JavaScript
-        ?>
-        <script type="text/javascript" id="fill_address_fields">
-
-
-        jQuery(document).ready(function($) {
-            fillCheckoutFields();
-            $(document.body).on('updated_checkout', fillCheckoutFields);
-        });
-
-        function fillCheckoutFields() {
-          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: '<?php echo esc_js($address); ?>',
-                address_2: '',
-                city: '<?php echo esc_js($woonplaats); ?>',
-                state: '',
-                postcode: '<?php echo esc_js($postcode); ?>',
-                country: 'NL',
-                phone: '',
-                email: ''
-            });
-
-            setTimeout(() => {
-                $('#shipping-postcode, #shipping-city, #shipping-address_1')
-                    .prop('readonly', true)
-                    .css('background', '#f9f9f9');
-            }, 500);
-
-            jQuery(document.body).trigger('update_checkout');
-        } else {
-             console.error('WooCommerce Blocks API is niet beschikbaar');
-        }
-
-     }
-     </script>
-     <?php
     }
 
     public function add_local_price_field($loop, $variation_data, $variation)

session_dialog.php

@@ -1,7 +1,7 @@
 <?php
 
 session_start();
-function if_needed_place_postcode_form($uri)
+function init_postcode_handlers($uri)
 {
     if (strpos($uri, "/winkel/") !== false) {
         add_action("wp_enqueue_scripts", "modal_styles");
@@ -14,6 +14,8 @@ function if_needed_place_postcode_form($uri)
             render_dialog_html();
         }
     }
+    add_action("wp_footer", "modify_checkout_with_js");
+    add_action("wp_enqueue_scripts", "load_assets_reset_postcode_on_checkout");
 }
 
 function modal_styles()
@@ -116,7 +118,7 @@ function render_dialog_html()
                     <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"
+                        placeholder= "12A"
                         size="5"
                         required
                     />
@@ -278,3 +280,98 @@ function postcode_in_range($postcode, $start, $end)
 
     return $numberPart >= $start && $numberPart <= $end;
 }
+
+function modify_checkout_with_js()
+{
+    if (
+        !is_checkout() ||
+        (is_wc_endpoint_url() && !is_wc_endpoint_url("order-received"))
+    ) {
+        return;
+    }
+
+    $woonplaats = $_SESSION["woonplaats"];
+    $postcode = $formatted_postcode = preg_replace(
+        "/(\d+)([A-Z]+)/",
+        '$1 $2',
+        strtoupper($_SESSION["postcode"]),
+    );
+    $address =
+        $_SESSION["straatnaam"] . " " . strtoupper($_SESSION["huisnummer"]);
+    // Output the JavaScript
+    ?>
+        <script type="text/javascript" id="fill_address_fields">
+          jQuery(document).ready(function($) {
+              fillCheckoutFields();
+              $(document.body).on('updated_checkout', fillCheckoutFields);
+          });
+
+          function fillCheckoutFields() {
+            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: '<?php echo esc_js($address); ?>',
+                  address_2: '',
+                  city: '<?php echo esc_js($woonplaats); ?>',
+                  state: '',
+                  postcode: '<?php echo esc_js($postcode); ?>',
+                  country: 'NL',
+                  phone: '',
+                  email: ''
+              });
+
+              //make fields READONLY and ppstcode reset.
+              setTimeout(() => {
+                // make prefilled fiields readonly.
+                $('#shipping-postcode, #shipping-city, #shipping-address_1')
+                  .prop('readonly', true)
+                  .css('background', '#f9f9f9');
+
+                  // create postcode reset button
+                  const div = document.createElement("div");
+                  const script = document.createElement('script');
+                  div.setAttribute("class", "postcode-reset")
+                  div.innerHTML = `
+                    <a class="reset-postcode-show-comfirm" >Reset postcode.</a>
+                    <span class="bevestiging"> Weet je het zeker?
+                      <a class="accept">ja</a>/<a class="decline">nee</a>
+                      (Deze handeling leegt de winkelwagen.)
+                    </span> `;
+                  div.style.width = "100%";
+                  document.querySelector(".wc-block-components-address-form__city").after(div);
+              }, 500);
+
+
+
+              jQuery(document.body).trigger('update_checkout');
+          } else {
+              console.error('WooCommerce Blocks API is niet beschikbaar');
+          }
+       }
+     </script>
+     <?php
+}
+
+function load_assets_reset_postcode_on_checkout()
+{
+    // Only load on checkout page
+    if (is_checkout() && !is_wc_endpoint_url()) {
+        wp_enqueue_style(
+            "my-checkout-style",
+            plugin_dir_url(__FILE__) . "assets/reset-postcode.css", // Path to your CSS file
+            [],
+            "1.0.0",
+        );
+
+        wp_enqueue_script(
+            "my-checkout-script",
+            plugin_dir_url(__FILE__) . "assets/reset-postcode.js",
+            [], // Dependency on jQuery
+            "1.0.0",
+            true, // Load in footer
+        );
+    }
+}