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.
Load-More-Button -> Your script is not compatible with Contao 4.
Zitieren
Zitat von Spooky
