5.3.x: Datenbankabfrage per Ajax Request?
Hallo zusammen,
ich nutze Contao 5.3.0 und die aktuellste Visitors-Erweiterung mit PHP 8.2.13. So weit, so gut.
Ich möchte gerne die Werte im Frontend mithilfe des Templates mod_visitors_fe_all.html5 in
Intervallen mit einem Ajax request aktualisieren lassen, damit die Werte auch ohne Reload der
Seite neu geschrieben werden.
Gibt es in Visitors eine Möglichkeit, diese Abfrage einzubauen, und wenn ja, wie sieht das aus?
Ein Freund hat mir vor Längerem mal ein Script geschrieben und in das mod_visitors_fe_all.html5-
Template integriert. Da ich keine Programmierkenntnisse habe, kann ich nicht beurteilen, ob er
bereits auf dem richtigen Weg war. Das Script hat leider nie funktioniert.
Hier mal der komplette Code vom Template mit dem angefügten Script:
HTML-Code:
<?php $this->extend("block_unsearchable"); ?>
<?php $this->block("content"); ?>
<?php foreach ($this->visitors as $visitor): ?>
<span class="visitor_count invisible"><?= $visitor['VisitorsCounting']; ?></span>
<div class="visitor_name">
<div id="VisitorsNameLegend"><?= $visitor['VisitorsNameLegend']; ?></div>
<div id="VisitorsName"><?= $visitor['VisitorsName']; ?></div>
</div>
<div class="visitor_useronline">
<div id="VisitorsOnlineCountLegend"><?= $this->trans('visitors.VisitorsOnlineCountLegend'); ?></div>
<div id="VisitorsOnlineCount"><?= $visitor['VisitorsOnlineCountValue']; ?></div>
</div>
<div class="visitor_visitstoday">
<div id="TodayVisitCountLegend"><?= $this->trans('visitors.TodayVisitCountLegend'); ?></div>
<div id="TodayVisitCount"><?= $visitor['TodayVisitCountValue']; ?></div>
</div>
<div class="visitor_visitstotal">
<div id="TotalVisitCountLegend"><?= $this->trans('visitors.TotalVisitCountLegend'); ?></div>
<div id="TotalVisitCount"><?= $visitor['TotalVisitCountValue']; ?></div>
</div>
<div class="visitor_hitstoday">
<div id="TodayHitCountLegend"><?= $this->trans('visitors.TodayHitCountLegend'); ?></div>
<div id="TodayHitCount"><?= $visitor['TodayHitCountValue']; ?></div>
</div>
<div class="visitor_hitstotal">
<div id="TotalHitCountLegend"><?= $this->trans('visitors.TotalHitCountLegend'); ?></div>
<div id="TotalHitCount"><?= $visitor['TotalHitCountValue']; ?></div>
</div>
<div class="visitor_visitsyesterday">
<div id="YesterdayVisitCountLegend"><?= $this->trans('visitors.YesterdayVisitCountLegend');?></div>
<div id="YesterdayVisitCount"><?= $visitor['YesterdayVisitCountValue']; ?></div>
</div>
<div class="visitor_hitsyesterday">
<div id="YesterdayHitCountLegend"><?= $this->trans('visitors.YesterdayHitCountLegend'); ?></div>
<div id="YesterdayHitCount"><?= $visitor['YesterdayHitCountValue']; ?></div>
</div>
<div class="visitor_pagehits">
<div id="PageHitCountLegend"><?= $this->trans('visitors.PageHitCountLegend');?></div>
<div id="PageHitCount"><?= $visitor['PageHitCountValue']; ?></div>
</div>
<div class="visitor_average">
<?php if ($visitor['AverageVisits']): ?>
<div id="AverageVisitsLegend"><?= $this->trans('visitors.AverageVisitsLegend'); ?> Ø</div>
<div id="AverageVisits"><?= $visitor['AverageVisitsValue']; ?></div>
<?php endif; ?>
</div>
<?php if ($visitor['VisitorsStartDate']): ?>
<div class="visitor_countsince">
<div id="VisitorsStartDateLegend"><?= $this->trans('visitors.VisitorsStartDateLegend'); ?></div>
<div id="VisitorsStartDate"> <?= $visitor['VisitorsStartDateValue']; ?></div>
</div>
<?php endif; ?>
<script>
// Fügen Sie diese Funktion hinzu, um die Daten vom Server abzurufen und die HTML-Elemente zu aktualisieren
function updateVisitorData() {
var iWidth = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
var iHeight = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
var sWidth = screen.width;
var sHeight = screen.height;
var visitorId = <?= $visitor['VisitorsKatID']; ?>;
var visitorUrl = '<?= $this->route('visitors_frontend_screencount') ?>?vcid=' + visitorId +'&scrw='+sWidth+'&scrh='+sHeight+'&scriw='+iWidth+'&scrih='+iHeight+'';
console.log('url: ', visitorUrl);
try {
fetch( visitorUrl, { method: 'GET' , headers: { 'X-Requested-With': 'XMLHttpRequest', } } )
.then(response => response.json())
.then(data => {
document.querySelectorAll(".visitor_count").forEach(el => {
el.innerHTML = data.VisitorsCounting;
});
document.querySelectorAll("#VisitorsName").forEach(el => {
el.innerHTML = data.VisitorsName;
});
document.querySelectorAll("#VisitorsOnlineCount").forEach(el => {
el.innerHTML = data.VisitorsOnlineCountValue;
});
document.querySelectorAll("#TodayVisitCount").forEach(el => {
el.innerHTML = data.TodayVisitCountValue;
});
document.querySelectorAll("#TotalVisitCount").forEach(el => {
el.innerHTML = data.TotalVisitCountValue;
});
document.querySelectorAll("#TodayHitCount").forEach(el => {
el.innerHTML = data.TodayHitCountValue;
});
document.querySelectorAll("#TotalHitCount").forEach(el => {
el.innerHTML = data.TotalHitCountValue;
});
document.querySelectorAll("#YesterdayVisitCount").forEach(el => {
el.innerHTML = data.YesterdayVisitCountValue;
});
document.querySelectorAll("#YesterdayHitCount").forEach(el => {
el.innerHTML = data.YesterdayHitCountValue;
});
document.querySelectorAll("#PageHitCount").forEach(el => {
el.innerHTML = data.PageHitCountValue;
});
document.querySelectorAll("#AverageVisits").forEach(el => {
el.innerHTML = data.AverageVisitsValue;
});
document.querySelectorAll("#VisitorsStartDate").forEach(el => {
el.innerHTML = data.VisitorsStartDateValue;
});
})
.catch( error => console.error('error:', error) );
} catch (r) {
return;
}
}
// Fügen Sie diese Funktion hinzu, um den Timer alle 10 Sekunden zu starten
function startVisitorTimer() {
setInterval(updateVisitorData, 10000);
}
// Starten Sie den Timer, wenn das Dokument geladen ist
document.addEventListener('DOMContentLoaded', startVisitorTimer);
</script>
<?php endforeach; ?>
<?php $this->endblock(); ?>
Hat jemand eine Ahnung, wie das Script evtl. umgeschrieben werden muss, damit es funktioniert?
Vielen Dank für Eure Hilfe!
