make button with email-field work

//TODO make plugin work completely, with all features and fix bugs

composer.json

@@ -1,7 +1,7 @@
 {
   "name": "slinicraftet204/notifyifavail",
   "description": "benachrichtigt Kunden, sobald ein Produkt wieder verfügbar ist",
-  "version": "0.1.492",
+  "version": "0.1.499",
   "type": "shopware-platform-plugin",
   "license": "MIT",
   "authors": [

src/Resources/app/storefront/src/main.js

@@ -1 +1,4 @@
-import './js/notify-me.js';
+import PluginManager from 'src/plugin-system/plugin.manager';
+import NotifyMe from './plugin/notify-me.plugin';
+
+PluginManager.register('NotifyMe', NotifyMe, '[data-notify-me]');

src/Resources/public/js/notify-me.js

@@ -1,58 +0,0 @@
-document.addEventListener('DOMContentLoaded', function () {
-    console.log("✅ NotifyMe Script geladen");
-
-    const notifyContainer = document.getElementById('notify-me-container');
-    if (!notifyContainer) {
-        console.error("❌ NotifyMe: Container nicht gefunden!");
-        return;
-    }
-
-    console.log("✅ NotifyMe: Container gefunden");
-
-    const notifyButton = document.querySelector('.notify-me-button');
-    const submitButton = document.querySelector('.notify-me-submit');
-    const emailInput = document.querySelector('.notify-me-email');
-
-    if (notifyButton) {
-        console.log("✅ NotifyMe: Button gefunden");
-        notifyButton.addEventListener('click', function () {
-            const email = this.dataset.customerEmail;
-            const productId = this.dataset.productId;
-            sendNotificationRequest(email, productId);
-        });
-    } else {
-        console.error("❌ NotifyMe: Button nicht gefunden!");
-    }
-
-    if (submitButton) {
-        console.log("✅ NotifyMe: Submit-Button gefunden");
-        submitButton.addEventListener('click', function () {
-            const email = emailInput.value;
-            const productId = this.dataset.productId;
-
-            if (!email) {
-                alert("Bitte geben Sie eine gültige E-Mail-Adresse ein.");
-                return;
-            }
-
-            sendNotificationRequest(email, productId);
-        });
-    } else {
-        console.error("❌ NotifyMe: Submit-Button nicht gefunden!");
-    }
-
-    function sendNotificationRequest(email, productId) {
-        console.log(`📩 Anfrage für Produkt: ${productId}, Email: ${email}`);
-
-        fetch('/notification/subscribe', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-            body: `email=${encodeURIComponent(email)}&productId=${encodeURIComponent(productId)}`
-        })
-            .then(response => response.json())
-            .then(data => {
-                alert(data.message);
-            })
-            .catch(error => console.error('❌ Fehler:', error));
-    }
-});

src/Resources/public/js/notify-me.plugin.js

@@ -0,0 +1,50 @@
+import Plugin from 'src/plugin-system/plugin.class';
+
+export default class NotifyMePlugin extends Plugin {
+    init() {
+        this.notifyButton = document.getElementById('notify-me-button');
+        this.emailInput = document.getElementById('notify-me-email');
+        this.submitButton = document.getElementById('submit-notify');
+
+        this.registerEvents();
+    }
+
+    registerEvents() {
+        if (this.notifyButton) {
+            this.notifyButton.addEventListener('click', () => this.submitForm(true));
+        }
+
+        if (this.submitButton) {
+            this.submitButton.addEventListener('click', () => this.submitForm(false));
+        }
+    }
+
+    submitForm(isLoggedIn) {
+        let email;
+        const productId = this.notifyButton?.dataset.productId || this.submitButton?.dataset.productId;
+
+        if (isLoggedIn) {
+            email = this.notifyButton.dataset.customerEmail;
+        } else {
+            email = this.emailInput.value.trim();
+            if (!this.validateEmail(email)) {
+                alert("Bitte geben Sie eine gültige E-Mail-Adresse ein.");
+                return;
+            }
+        }
+
+        fetch('/notification/subscribe', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+            body: `email=${encodeURIComponent(email)}&productId=${encodeURIComponent(productId)}`
+        })
+            .then(response => response.json())
+            .then(data => alert(data.message))
+            .catch(error => console.error('Error:', error));
+    }
+
+    validateEmail(email) {
+        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailPattern.test(email);
+    }
+}

src/Resources/theme.json

@@ -0,0 +1,6 @@
+{
+  "views": [
+    "@Storefront",
+    "@NotifyIfAvail"
+  ]
+}

src/Resources/views/storefront/component/buy-widget/buy-widget.html.twig

@@ -1,6 +1,6 @@
-{% sw_extends '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %}
+{% sw_extends '@Storefront/storefront/component/buy-widget/buy-widget.html.twig' %}
 
-{% block page_product_detail_price %}
+{% block buy_widget_price %}
     {{ parent() }}
 
     {% if not product.available or product.stock <= 0 %}
@@ -8,13 +8,18 @@
             <h3>{{ "NotifyIfAvail.notify_me"|trans }}</h3>
 
             {% if app.customer %}
-                <button class="btn btn-primary w-100" id="notify-me-button" data-product-id="{{ product.id }}" data-customer-email="{{ app.customer.email }}">
+                <!-- Eingeloggter Benutzer: Nur Button anzeigen -->
+                <button class="btn btn-primary w-100" id="notify-me-button"
+                        data-product-id="{{ product.id }}"
+                        data-customer-email="{{ app.customer.email }}">
                     {{ "NotifyIfAvail.notify_me"|trans }}
                 </button>
             {% else %}
+                <!-- Gast: Nur Eingabefeld + Button anzeigen -->
                 <input type="email" id="notify-me-email" class="form-control mb-2"
                        placeholder="{{ 'NotifyIfAvail.email_placeholder'|trans }}" required>
-                <button class="btn btn-primary w-100" id="submit-notify" data-product-id="{{ product.id }}">
+                <button class="btn btn-primary w-100" id="submit-notify"
+                        data-product-id="{{ product.id }}">
                     {{ "NotifyIfAvail.notify_me"|trans }}
                 </button>
             {% endif %}