Neu Frage zu Plugin Entwicklung : IO Request im Admin

[vlat]

Moin,

ich bin gerade am testen wie man IO Request erstellt da ich es für ein Plugin brauche. Im TestPlugin habe ich folgendes erstellt, bekomme aber HTTP 403. Verstehe aber nicht woran es liegt, habe schon jtl_token mitgeben und habe es auch schon als bearer token versucht.

mein Tpl Inhalt

{literal}
<script>
$(document).ready(function () {
    // Daten laden beim Start
    loadEntries();

    // Eintrag hinzufügen oder aktualisieren
    $('#entryForm').on('submit', function (e) {
        e.preventDefault();

        const name = $('#name').val();
        const id = $('#entryId').val();
        const jtl_token = $('input[name="jtl_token"]').val();

        const formData = new FormData();
        const requestData = id ? {
            'name': 'UpdateEntry',
            'params': [{'id': id, 'name': name, 'jtl_token': jtl_token }]
        } : {
            'name': 'CreateEntry',
            'params': [{'name': name, 'jtl_token': jtl_token}]
        };

        // Füge die Daten zum FormData-Objekt hinzu
        formData.append('io', JSON.stringify(requestData));

        $.ajax({
            type: 'POST',
            url: '{/literal}{$plugin_url}{literal}', // Hier binden wir die URL korrekt ein
            data: formData,
            processData: false,  // Verhindert, dass jQuery die Daten formatiert
            contentType: false   // Verhindert die automatische Einstellung des Content-Type Headers
        }).done(function (data) {
            if (data.success) {
                $('#entryForm')[0].reset();
                $('#entryId').val('');
                loadEntries();
            } else {
                alert('Fehler: ' + (data.message || 'Unbekannter Fehler'));
            }
        }).fail(function (xhr, status, error) {
            console.error('AJAX Fehler:', status, error);
            alert('Anfrage fehlgeschlagen: ' + xhr.status + ' ' + xhr.statusText);
        });
    });

    // Einträge laden und anzeigen
    function loadEntries(search = '') {
        const jtl_token = $('input[name="jtl_token"]').val();
        const formData = new FormData();
        const requestData = {
            'name': 'ListEntries',
            'params': [{'search': search ,'jtl_token': jtl_token}]
        };

        formData.append('io', JSON.stringify(requestData));

        $.ajax({
            type: 'POST',
            url: '{/literal}{$plugin_url}{literal}',
            data: formData,
            processData: false,  // Verhindert, dass jQuery die Daten formatiert
            contentType: false   // Verhindert die automatische Einstellung des Content-Type Headers
        }).done(function (data) {
            if (data.success) {
                $('#entries').empty();

                data.entries.forEach(entry => {
                    $('#entries').append(`
                        <tr>
                            <td>${entry.name}</td>
                            <td>
                                <button class="btn btn-warning edit-btn" data-id="${entry.id}">Bearbeiten</button>
                                <button class="btn btn-danger delete-btn" data-id="${entry.id}">Löschen</button>
                            </td>
                        </tr>
                    `);
                });
            } else {
                alert('Fehler beim Laden der Einträge: ' + (data.message ));
            }
        }).fail(function (xhr, status, error) {
            console.error('AJAX Fehler:', status, error);
            alert('Anfrage fehlgeschlagen: ' + xhr.status + ' ' + xhr.statusText);
        });
    }
});

</script>
{/literal}


    <form id="entryForm" class="form">
        {$jtl_token}
        <input type="hidden" id="entryId" class="form-control">
        <input type="text" id="name" placeholder="Name" required class="form-control">
        <br>
        <button type="submit" class="btn btn-block btn-info">Speichern</button>
    </form>
    <hr>
    <input type="text" id="search" placeholder="Suche nach Namen" class="form-control">
    <br>
    <table id="entries" class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Aktionen</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

Inhalt meiner Bootstrap.php

private $dispatcher;
public function boot(Dispatcher $dispatcher): void
    {
        parent::boot($dispatcher);
        $this->dispatcher = $dispatcher;
        $this->dispatcherListeners();
    }

    private function dispatcherListeners(): void
    {
        // Hook registrieren
        $this->dispatcher->listen(
            'shop.hook.' . \HOOK_IO_HANDLE_REQUEST_ADMIN,
            function (array &$args) {
                $args['io']->register('ListEntries', [$this, 'listEntries']);
                $args['io']->register('CreateEntry', [$this, 'createEntry']);
                $args['io']->register('GetEntry', [$this, 'getEntry']);
                $args['io']->register('UpdateEntry', [$this, 'updateEntry']);
                $args['io']->register('DeleteEntry', [$this, 'deleteEntry']);
            }
        );
    }

    // CRUD-Methoden
    public function listEntries(array $params): array
    {
        $search = $params[0]['search'] ?? '';
        $db = Shop::Container()->getDB();
        $query = "SELECT * FROM entries WHERE name LIKE :search";
        $entries = $db->getObjects($query,['search' => "%$search%"]);

        return ['success' => true, 'entries' => $entries];
    }
    ...

In der info.xml ist es als normaler tab eingebunden.

Danke für Tips im Voraus.

 

[FMoche]

Auf den ersten Blick sehe ich hier zwei Probleme:
Der Token muss als $_POST['jtl_token'] vorhanden sein.
Also brauchst du wahrscheinlich noch ein

formData.append('jtl_token', jtl_token);

statt das in dein requestData-Objekt zu packen.
Und die Ziel-URL sollte nicht deine Plugin-URL sein, sondern <shopurl>/admin/io bzw. in alten Shopversionen <shopurl>/admin/io.php

 

[vlat]

Moin,

danke für die Antwort.