Init project

Future fixes:
-Remove logic for showing current order reference in ajax.js. Instead grab from database using cart ID

views/css/styles.css

@@ -0,0 +1,13 @@
+/* Fade out for alert */
+.fade-out {
+    animation: fadeOut 0.75s forwards;
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}

views/js/index.js

@@ -0,0 +1,105 @@
+document.addEventListener("DOMContentLoaded", function () {
+    // Load saved reference on page load (with retry for dynamic content)
+    loadSavedReferenceWithRetry();
+
+    // Ajax submission
+    document.addEventListener("submit", function (e) {
+        if (e.target && e.target.id === "order_reference_form") {
+            e.preventDefault();
+            const form = e.target;
+            const url = typeof ajax_url !== "undefined" ? ajax_url : null;
+            const input = document.querySelector("#order_reference_input");
+            const inputValue = input.value.trim();
+
+            fetch(url, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/x-www-form-urlencoded",
+                    Accept: "application/json",
+                },
+                body:
+                    "ajax=1&order_reference_input=" +
+                    encodeURIComponent(inputValue),
+            })
+                .then((response) => response.json())
+                .then((data) => {
+                    if (data.success) {
+                        // Save to localStorage
+                        localStorage.setItem("order_reference", inputValue);
+                        displaySavedReference(inputValue);
+                        input.value = "";
+                    }
+                    alertFadeOut(form, data);
+                })
+                .catch((error) => {
+                    console.error(error);
+                    alertFadeOut(form, {
+                        success: false,
+                        message: "An error occurred",
+                    });
+                });
+        }
+    });
+
+    // Load saved reference with retry mechanism for dynamic content
+    function loadSavedReferenceWithRetry(attempts = 0, maxAttempts = 10) {
+        const savedReference = localStorage.getItem("order_reference");
+        if (savedReference) {
+            const success = displaySavedReference(savedReference);
+
+            if (!success && attempts < maxAttempts) {
+                setTimeout(() => {
+                    loadSavedReferenceWithRetry(attempts + 1, maxAttempts);
+                }, 100);
+            }
+        }
+    }
+
+    function displaySavedReference(value) {
+        const form = document.querySelector("#order_reference_form");
+        if (!form) return false;
+
+        const lastSubmittedContainer = form.querySelector(
+            ".last-submitted-container",
+        );
+        if (lastSubmittedContainer) {
+            const lastSubmittedSpan =
+                lastSubmittedContainer.querySelector(".last-submitted");
+            if (lastSubmittedSpan) {
+                lastSubmittedSpan.textContent = value;
+                lastSubmittedContainer.classList.remove("d-none");
+                return true;
+            }
+        }
+        return false;
+    }
+
+    // Reset alert to initial state
+    function resetAlert(alert, messageEl) {
+        alert.classList.add("d-none");
+        alert.classList.remove("alert-success", "alert-danger", "fade-out");
+        messageEl.textContent = "";
+    }
+
+    // Fade out alert and reset
+    function alertFadeOut(form, data) {
+        const alert = form.querySelector(".alert");
+        if (!alert) return;
+
+        const messageEl = alert.querySelector(".alert-message");
+        if (!messageEl) return;
+
+        // Show alert with appropriate class and message
+        alert.classList.remove("d-none");
+        alert.classList.add(data.success ? "alert-success" : "alert-danger");
+        messageEl.textContent = data.message;
+
+        // Fade out after delay
+        setTimeout(() => {
+            alert.classList.add("fade-out");
+            setTimeout(() => {
+                resetAlert(alert, messageEl);
+            }, 750); // 750ms for fade-out animation - make sure it matches in styles.css
+        }, 5000);
+    }
+});

views/templates/front/orderreference.tpl

@@ -0,0 +1,21 @@
+<div class="col-lg-12 col-md-12 box card p-0" id="ref_order" style="border: 0px;">
+    <form action="#" class="p-0" method="post" id="order_reference_form">
+        <fieldset>
+            <p class="h4">{l s='Order reference (optional)' mod='ws_orderreference'}</p>
+            <div class="d-flex flex-nowrap mb-2" style="gap: 10px;">
+                <div class="form-group w-100 mb-0">
+                    <label for="order_reference_input" class="sr-only">{l s='Order reference (optional)' mod='ws_orderreference'}</label>
+                    <input type="text" class="form-control w-100 mb-0" id="order_reference_input" name="order_reference_input" value="{$order_reference_value|escape:'html':'UTF-8'}" required="required">
+                </div>
+                <button type="submit" class="btn btn-primary" id="order_reference_submit">{l s='Submit' mod='ws_orderreference'}</button>
+            </div>
+            <div class="d-none last-submitted-container mb-2">
+                <span class="text-danger">{l s='Your order reference:' mod='ws_orderreference'}</span>
+                <span class="last-submitted text-danger"></span>
+            </div>
+            <div id="order_ref_message" class="alert d-none">
+                <p class="alert-message mb-0"></p>
+            </div>
+        </fieldset>
+    </form>
+</div>

views/templates/pdf/delivery-slip.tpl

@@ -0,0 +1 @@
+<h3>{l s='Your custom order reference:' mod='ws_orderreference'} {$orderReference}</h3>