Load-More-Button -> Your script is not compatible with Contao 4.

Guten Morgen zusammen

Habe mir gestern Nacht ein Script zusammengebastelt, welche nur eine bestimmte Anzahl Datensätze ausgeben soll und per "Load-More-Button", Datensätze nachlädt.

Nun erhalte ich in der Konsole "Your script is not compatible with Contao 4."
Hat wer eine Idee, was genau da nicht kompatibel ist?

PHP-Code:

---

<?php
// Autoloader laden
if (file_exists('../vendor/autoload.php')) {
    require('../vendor/autoload.php');
}


define('TL_MODE', 'FE');

include('../system/initialize.php');

$limit = isset($_GET['limit']) ? intval($_GET['limit']) : 10; // Number of articles to load each time
$offset = isset($_GET['offset']) ? intval($_GET['offset']) : 0;

try {
    
    $articles = getMoreArticlesFromDatabase($offset, $limit);

    // Return data as JSON
    header('Content-Type: application/json');
    echo json_encode($articles);
} catch (\Exception $e) {
    // Log the error with more context information
    \Contao\System::log('Error in load-more.php: ' . $e->getMessage() . ' ' . $e->getTraceAsString(), __METHOD__, TL_ERROR);

    // Return an error message as JSON
    header('Content-Type: application/json', true, 500);
    echo json_encode(['error' => 'Internal Server Error']);
}


function getMoreArticlesFromDatabase($offset, $limit)
{
    
    $database = \Contao\Database::getInstance();

    $result = $database->prepare("SELECT * FROM tl_mm_artikel WHERE artikel_nummer_e_cat != '' ORDER BY sorting")
        ->limit($limit, $offset)
        ->execute()
        ->fetchAllAssoc();

    return $result;
}
?>

---

Du solltest das als Controller umsetzen.

Zitat:

---

Zitat von Spooky

Du solltest das als Controller umsetzen.

---

Wie meinst du das genau?

https://docs.contao.org/dev/framewor...-custom-routes

Danke das hilft schon weiter, nur stehe ich noch immer etwas auf dem Schlauch.

Ich habe nun unter /config/src/Controller/ die Datei LoadMoreController.php platziert:

PHP-Code:

---

<?php


namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class LoadMoreController extends AbstractController
{
    #[Route('/load-more', name: 'load_more')]
    public function index(): Response
    {
        // Controller-Logik hier
    }
}
?>

---

Unter /config habe ich die Datei routes.yml erstellt mit folgendem Code:

PHP-Code:

---

# config/routes.yml
app_controllers:
    resource: '../src/Controller/'
    type: annotation 


---

Wenn ich nun den Cache löschen will, kriege ich folgenden Fehler:

HTML-Code:

---

$ /opt/plesk/php/7.4/bin/php -q -dmax_execution_time=0 -dmemory_limit=-1 -ddisplay_errors=0 -ddisplay_startup_errors=0 -derror_reporting=0 -dallow_url_fopen=1 -ddisable_functions= -ddate.timezone=UTC /var/www/vhosts/example.net/httpdocs/e-cat/vendor/contao/manager-bundle/bin/contao-console cache:warmup --env=prod
 // Warming up the cache for the prod environment with debug                   
 // false                                                                     
11:05:35 CRITICAL  [console] Error thrown while running command "cache:warmup --env=prod". Message: "Class App\Controller\LoadMoreController does not exist in /var/www/vhosts/example.net/httpdocs/e-cat/app/Resources/../src/Controller/ (which is being imported from "/var/www/vhosts/example.net/httpdocs/e-cat/config/routes.yml"). Make sure annotations are installed and enabled." ["exception" => Symfony\Component\Config\Exception\LoaderLoadException { …},"command" => "cache:warmup --env=prod","message" => "Class App\Controller\LoadMoreController does not exist in /var/www/vhosts/example.net/httpdocs/e-cat/app/Resources/../src/Controller/ (which is being imported from "/var/www/vhosts/example.net/httpdocs/e-cat/config/routes.yml"). Make sure annotations are installed and enabled."]
In FileLoader.php line 180:
                                                                             
  Class App\Controller\LoadMoreController does not exist in /var/www/vhosts/p 
  ublitiv.net/httpdocs/e-cat/app/Resources/../src/Controller/ (which is being 
  imported from "/var/www/vhosts/example.net/httpdocs/e-cat/config/routes.y 
  ml"). Make sure annotations are installed and enabled.                     
                                                                             
In AnnotationDirectoryLoader.php line 62:
                                                         
  Class App\Controller\LoadMoreController does not exist 
                                                         
cache:warmup [--no-optional-warmers] [-h|--help] [-q|--quiet] [-v|vv|vvv|--verbose] [-V|--version] [--ansi] [--no-ansi] [-n|--no-interaction] [-e|--env ENV] [--] <command>
# Process terminated with exit code 1
# Result: General error

---

Scheint als hätte ich das im falschen Verzeichnis. Kannst du mir da auf die Sprünge helfen?

Zitat:

---

Zitat von Dee

Ich habe nun unter /config/src/Controller/ die Datei LoadMoreController.php platziert:

[…]
Scheint als hätte ich das im falschen Verzeichnis.

---

Ja, es muss src/Controller/LoadMoreController.php sein.

danke fiedsch, dass hat geholfen :-)
Irgendwie raff ich es voll nicht mehr.

Meine Scripts sehen nun wie folgt aus:
Die Ausgabe:

PHP-Code:

---

<div class="ausgabeblock titel">
  <ul>
    <li class="col4">Abbildung</li>
    <li class="col6">Artikel</li>
    <li class="col5">Bestellnummer</li>
    <li class="col4 mittig">Detailinformationen</li>
  </ul>
</div>

<div class="layout_full" id="articleContainer">
  <?php for ($i = 0; $i < min(2, count($this->data)); $i++): ?>
    <?php $arrItem = $this->data[$i]; ?>
    <?php if ($arrItem['html5']['artikel_nummer_e_cat']): ?>
      <div class="item <?= $arrItem['class'] ?> ausgabeblock objekte">
        <ul>
          <li class="col4"><?= $arrItem['html5']['artikel_bild']; ?></li>
          <li class="col6"><?= $arrItem['text']['artikel_name']; ?></li>
          <li class="col5"><?= $arrItem['html5']['artikel_nummer_e_cat']; ?></li>
          <li class="col4 mittig icon">
            <a href="/artikelinfos/<?= $arrItem['text']['artikel_nummer_e_cat']; ?>" title="Details zum Artikel <?= $arrItem['text']['artikel_nummer_e_cat']; ?>">
              {{image::b08f85ae-b534-11ee-a40b-001c429f067c}}
            </a>
          </li>
        </ul>
      </div>
    <?php endif; ?>
  <?php endfor; ?>
</div>

<div id="loadMoreContainer">
  <?php if (count($this->data) > 2): ?>
    <button id="loadMoreButton">Weitere Artikel laden</button>
  <?php endif; ?>
</div>

<script>
var loadMoreButton = document.getElementById('loadMoreButton');
var articleContainer = document.getElementById('articleContainer');
var loadMoreContainer = document.getElementById('loadMoreContainer');
var offset = 2; // Hier die Anzahl der bereits geladenen Artikel
var limit = 2; // Hier die Anzahl der Artikel, die bei jedem Laden geladen werden sollen

loadMoreButton.addEventListener('click', function () {
  var xhr = new XMLHttpRequest();
  xhr.open('GET','/load-more.php?offset=' + offset + '&limit=' + limit, true);

  xhr.onload = function () {
    if (xhr.status == 200) {
      try {
        var newArticles = JSON.parse(xhr.responseText);

        if (Array.isArray(newArticles) && newArticles.length > 0) {
          newArticles.forEach(function (arrItem) {
            // Überprüfe, ob 'artikel_nummer_e_cat' einen Wert hat
            if (doesArtikelNummerECatExist(arrItem.text.artikel_nummer_e_cat)) {
              var newItem = document.createElement('div');
              newItem.className = 'item ' + arrItem.class + ' ausgabeblock objekte';
              newItem.innerHTML = '<ul><li class="col4">' + arrItem.html5.artikel_bild + '</li><li class="col6">' + arrItem.text.artikel_name + '</li><li class="col5">' + arrItem.html5.artikel_nummer_e_cat + '</li><li class="col4 mittig icon"><a href="/artikelinfos/' + arrItem.text.artikel_nummer_e_cat + '" title="Details zum Artikel ' + arrItem.text.artikel_nummer_e_cat + '">{{image::b08f85ae-b534-11ee-a40b-001c429f067c}}</a></li></ul>';
              articleContainer.appendChild(newItem);
            }
          });

          offset += limit;
        } else {
          // Keine weiteren Artikel vorhanden
          loadMoreContainer.style.display = 'none';
        }
      } catch (error) {
        console.error('Error parsing JSON:', error);
        displayError('Fehler beim Verarbeiten der Serverantwort.');
      }
    } else {
      console.error('Request failed with status:', xhr.status);
      displayError('Fehler beim Laden weiterer Artikel. Bitte versuchen Sie es später erneut.');
    }
  };

  xhr.onerror = function () {
    console.error('Network error occurred');
    displayError('Ein Netzwerkfehler ist aufgetreten. Bitte überprüfen Sie Ihre Internetverbindung.');
  };

  xhr.send();
});

function displayError(message) {
  // Hinzufügen der Fehlermeldung
  alert(message);
}

</script>

---

/httpdocs/e-cat/web/load-more.php

PHP-Code:

---

<?php
// Autoloader laden
if (file_exists(__DIR__ . '/../vendor/autoload.php')) {
    require(__DIR__ . '/../vendor/autoload.php');
}

// Set the Contao mode to frontend if not already defined
if (!defined('TL_MODE')) {
    define('TL_MODE', 'FE');
}

// Include the Contao system
include(__DIR__ . '/../system/initialize.php');

// Fetch articles based on the offset (assuming $offset is the current offset value)
$limit = isset($_GET['limit']) ? intval($_GET['limit']) : 10; // Number of articles to load each time
$offset = isset($_GET['offset']) ? intval($_GET['offset']) : 0;

try {
    // Example data for demonstration
    $articles = getMoreArticlesFromDatabase($offset, $limit);

    // Return data as JSON
    header('Content-Type: application/json');
    echo json_encode($articles);
} catch (\Exception $e) {
    // Log the error with more context information
    \Contao\System::log('Error in load-more.php: ' . $e->getMessage() . ' ' . $e->getTraceAsString(), __METHOD__, TL_ERROR);

    // Return an error message as JSON
    header('Content-Type: application/json', true, 500);
    echo json_encode(['error' => 'Internal Server Error']);
}


function getMoreArticlesFromDatabase($offset, $limit)
{
    // Initialize the Contao database object
    $database = \Contao\Database::getInstance();

    $result = $database->prepare("SELECT * FROM tl_mm_artikel WHERE artikel_nummer_e_cat != '' ORDER BY sorting")
        ->limit($limit, $offset)
        ->execute()
        ->fetchAllAssoc();

    return $result;
}
?>

---

/httpdocs/e-cat/src/Controller/LoadMoreController.php

PHP-Code:

---

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class LoadMoreController extends AbstractController
{
    #[Route('/load-more', name: 'load_more')]
    public function index(): Response
    {
        
    }
}
?>

---

/httpdocs/e-cat/config/routes.yml

PHP-Code:

---

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class LoadMoreController extends AbstractController
{
    #[Route('/load-more', name: 'load_more')]
    public function index(): Response
    {

    }
}
?>

---

Rufe ich nun die URL "https://e-cat.example.net/load-more.php?offset=2&limit=2" auf, kriege ich ein "Your script is not compatible with Contao 4.".
In der Konsole unter Network steht das mittleriele nicht mehr, da kriege ich folgenden Fehler:

Code:

---

artikel:117 Error parsing JSON:
xhr.onload @ artikel:117
load (async)
(anonymous) @ artikel:117

---

Irgendwie habe ich das Gefühl, dass ich da was vermische, komme aber nicht ganz klar.

Gemeint war, dass du dein /httpdocs/e-cat/web/load-more.php Script mit einem Controller ersetzt.

Habe das nun mal angepasst und versucht nach der Dokumentation umzusetzen.
Ich habe einfach ein grosses Durcheinander mit den Pfaden. Habe mal da wo ich unsicher bin das als Kommentar eingetragen.

/httpdocs/e-cat/src/Controller/LoadMoreController.php

PHP-Code:

---

<?php

// /httpdocs/e-cat/src/Controller/LoadMoreController.php

namespace App\Controller;

// Stimmt die AbstractController-Klasse?
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\Routing\Annotation\Route;

// /load-more ruft die Methode loadMoreAction in diesem Controller auf
#[Route('/load-more', name: 'load_more')]
class LoadMoreController
{
    public function loadMoreAction(int $offset): JsonResponse
    {
        $limit = 2; // Anzahl der Datensätze pro Laden

        // Nächste Datensätze abrufen
        $data = $this->getData($offset, $limit);

        // JSON-Antwort zurückgeben
        return new JsonResponse(['items' => $data, 'hasMore' => false]);
    }

    public function getData($offset, $limit)
    {
        // Rückgabe:
        $data = [
            'items' => [
                ['artikel_bild' => 'Bild1', 'artikel_name' => 'Artikel 1', 'artikel_nummer_e_cat' => '123'],
                ['artikel_bild' => 'Bild2', 'artikel_name' => 'Artikel 2', 'artikel_nummer_e_cat' => '456'],
            ],
            'hasMore' => true, // True, wenn es mehr Datensätze gibt, sonst false
        ];

        return $data;
    }
}

?>

---

/httpdocs/e-cat/config/routes/annotations.yml

PHP-Code:

---

controllers:
    resource: ../../src/Controller/
    type: annotation 


---

Ausgabe

PHP-Code:

---

<?php

$limit = 2; // Anzahl der anfänglich anzuzeigenden Datensätze
$offset = 0; // Anfangs-Offset

// Hier wird der Controller aufgerufen und die Daten abgerufen
$controller = new \App\Controller\LoadMoreController();
$data = $controller->getData($offset, $limit);

// Ausgabe der Datensätze
if (count($data['items'])) :
    echo '<div class="layout_full">';
    foreach ($data['items'] as $arrItem) :
        if (!empty($arrItem['html5']['artikel_nummer_e_cat'])) :
?>
            <div class="item <?= $arrItem['class'] ?> ausgabeblock objekte">
                <ul>
                    <li class="col4"><?= $arrItem['html5']['artikel_bild']; ?></li>
                    <li class="col6"><?= $arrItem['text']['artikel_name']; ?></li>
                    <li class="col5"><?= $arrItem['html5']['artikel_nummer_e_cat']; ?></li>
                    <li class="col4 mittig icon">
                        <a href="/artikelinfos/<?= $arrItem['text']['artikel_nummer_e_cat']; ?>" title="Details zum Artikel <?= $arrItem['text']['artikel_nummer_e_cat']; ?>">
                            {{image::b08f85ae-b534-11ee-a40b-001c429f067c}}
                        </a>
                    </li>
                </ul>
            </div>
<?php
        endif;
    endforeach;
    echo '</div>';
else :
?>
    <div class="noItem">
        <p class="nodateinfo">Es wurden keine Ergebnisse zu diesem Artikel gefunden.</p>
    </div>
<?php
endif;
?>

<div class="ausgabeblock titel">
    <ul>
        <li class="col4">Abbildung</li>
        <li class="col6">Artikel</li>
        <li class="col5">Bestellnummer</li>
        <li class="col4 mittig">Detailinformationen</li>
    </ul>
</div>

<?php if (count($this->data)): ?>
    <div class="layout_full">
        <?php foreach ($this->data as $arrItem): ?>
            <?php $this->block('item'); ?>
            <div class="item <?= $arrItem['class'] ?> ausgabeblock objekte">
                <ul>
                    <li class="col4"><?php echo $arrItem['html5']['artikel_bild']; ?></li>
                    <li class="col6"><?php echo $arrItem['text']['artikel_name']; ?></li>
                    <li class="col5"><?php echo $arrItem['html5']['artikel_nummer_e_cat']; ?></li>
                    <li class="col4 mittig icon">
                        <a href="/artikelinfos/<?php echo $arrItem['text']['artikel_nummer_e_cat']; ?>" title="Details zum Artikel <?php echo $arrItem['text']['artikel_nummer_e_cat']; ?>">
                            {{image::b08f85ae-b534-11ee-a40b-001c429f067c}}
                        </a>
                    </li>
                </ul>
            </div>
            <?php $this->endblock(); ?>
        <?php endforeach; ?>
    </div>
<?php else : ?>
    <?php $this->block('noItem'); ?>
    <p class="nodateinfo">Es wurden keine Ergebnisse zu diesem Artikel gefunden.</p>
    <?php $this->endblock(); ?>
<?php endif; ?>

<!-- "Mehr anzeigen"-Button -->
<?php if ($data['hasMore']) : ?>
    <button class="load-more-button" data-offset="<?= ($offset + $limit) ?>">Mehr anzeigen</button>
<?php endif; ?>

---

HTML-Code:

---

<!-- JavaScript für AJAX-Anfrage -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    // AJAX-Anfrage bei Klick auf den "Mehr anzeigen"-Button
    document.querySelector(".load-more-button").addEventListener("click", function () {
        var offset = this.getAttribute("data-offset");

        // Wie muss der Pfad hier aussehen? Muss der zum Controller?
        fetch("/load-more/" + offset)
            .then(response => response.json())
            .then(data => {

                $('.layout_full').append(data.items);

                // Überprüfung ob es mehrr Datensätze gibt
                if (data.hasMore) {
                    // Aktivieren "Mehr anzeigen"-Button
                    $('.load-more-button').data('offset', data.offset);
                } else {
                    // Deaktivieren "Mehr anzeigen"-Button
                    $('.load-more-button').hide();
                }
            })
            .catch(error => console.error('Error:', error));
    });
});
</script>

---

Dein drittes Code Snippet (das Template?!) passt nicht. Der Controller wird über die Route (/load-more) per JS aufgerufen. Dafür brauchst du keinen eigenen PHP-Code. Probiere es einfach mal manuell aus, indem Du die Load-more URL im Browser eingibst.

In Deinem JS-Code übergibst Du noch den Offset, den Du aber im Controller nicht also Parameter definierst und abfragst. Das wäre

PHP-Code:

---

#[Route('/load-more/{offset}', name: 'load_more')]

public function loadMoreAction(int $offset = 0): JsonResponse 
{
  // …
}
… 


---

Oder gleich noch mit Limit

PHP-Code:

---

#[Route('/load-more/{offset}/{limit}', name: 'load_more')]

public function loadMoreAction(int $offset = 0, int $limit = 10): JsonResponse 
{
  // …
}
… 


---

Danke fiedsch
Habe die Anpassung vorgenommen. Wenn ich die URL mit /load-more/ aufrufe, werden keine Ergebnisse angezeigt: "Es wurden keine Ergebnisse zu diesem Artikel gefunden.".
Nun habe ich schon so viel Zeit da rein investiert, ohne ein Schritt vorwärts zu kommen, dass meine Motivation schwer darunter leidet :cool:

Ich hätte da aber noch eine Frage. Ich kriege folgenden Fehler:

Code:

---

load-more:81 Error Details: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

---

Wenn ich das richtig verstehe, wird vom Server kein valides JSON zurückgegeben. Wie prüft man, ob der Fehler beim Server liegt oder doch am Script?

solch ein "Entwickllungs-Coaching" rein per Forum ist etwas mühselig - man sieht nicht zu 100% was Du übernommen hast und was nicht...

Einfacher wäre es, wenn Du den Code per Github veröffentlichst - dann kann man a) den aktuellen Stand sehen und b) ggf. gleich einen Anpassungsvorschlag posten. Zudem wäre eine URL zum Testen hilfreich ;)