Wie kann ich mit com_ajax ein anderes Modul laden und entladen (für Adaptive Design)?


7

Dies ist eine Folge der Frage: Wie kann ein Modul basierend auf der Größe des Geräts oder des Ansichtsfensters in Joomla 3 deaktiviert werden, um die Leistung für mobile Geräte zu optimieren?

Wie kann ich mit com_ajax ein Modul laden und entladen? Der Aufruf kann entweder mit reinem Javascript oder mit jquery erfolgen und basiert auf der Größe des Ansichtsfensters (wir verwenden dafür mediacheck.js: https://github.com/sparkbox/mediaCheck ).

Abhängig davon, wohin diese Antwort führt, können wir sogar eine Komponente zusammenstellen, um diese Art des dynamischen Ladens zu ermöglichen (wählen Sie Haltepunkte, wählen Sie aus, welche Module geladen / entladen werden sollen).

Begründung: Responsive / Adaptive (wählen Sie Ihren Geschmack) ist heutzutage unerlässlich, ebenso wie die Reduzierung der Ladegröße für Mobiltelefone (langsame 3G-Geschwindigkeit in einem guten Empfangsbereich, hier in Brasilien). Wenn ich 10 ~ 15k jQuery / Javascript verwenden kann, um das Laden von 20 ~ 200k eines Moduls zu vermeiden (Module können Bilder enthalten, also eine ziemlich große Größe erreichen), bin ich alles dafür. Die Reduzierung der Bildschirmunordnung ist auch ein Muss für ein gutes mobiles Design. Wir können sogar argumentieren, dass dies "zuerst mobil" ist, da wir ohne das Modul entwerfen und es dann laden, wenn die Bildschirmgröße dies zulässt.


1
Sehr gute Frage. Etwas, das ich eigentlich selbst machen möchte, aber im Moment nicht sicher bin, wie ich am besten vorgehen soll. Haben Sie nachgeforscht, ob dies bereits erreicht wurde?
Lodder

Ich wusste nicht einmal, dass dies möglich ist. Zu viel, um mit den heutigen Tagen Schritt zu halten. Gute Frage.
Nestor Ledon

Antworten:


5

com_ajax wird nur dann wirklich verwendet, wenn die Daten für das Modul unterstützt werden (JSON-basiert), obwohl es andere Funktionen hat. In einigen Fällen besteht der einfachste Weg, ein Modul "nur" zu laden, darin, eine neue Vorlagendatei zu erstellen. Dies kann durch Erstellen von "module.php" im Vorlagenverzeichnis erfolgen. Dann benutze so etwas drinnen.

<?php
$jinput = JFactory::getApplication()->input;
$module = $jinput->get('module_pos', 'default_value', 'get');
?>
<jdoc:include type="modules" name="<?php echo $module; ?>"/>

Dies sollte nur das Modul auf einer Seite laden. index.php?tmpl=module&module_pos=fooWenn Sie eine URL wie in einer Ajax-Anfrage verwenden, sollten Sie in der Lage sein, "nur" die Moduldaten abzurufen. Dadurch werden alle Module geladen, die der von module_pos bezeichneten Position zugewiesen sind.

Dies hat jedoch ein Problem, Javascript. Module fügen dem Head-Tag über die Joomla-API Javascript hinzu. Um dem entgegenzuwirken, müssten Sie der Datei module.php effektiv mehr hinzufügen, um herauszufinden, was sich im head-Tag befindet, was sich noch nicht auf der aktuellen Seite befindet, und um tatsächlich zu finden und hinzuzufügen, was benötigt wird. Dieser Vorgang wäre ziemlich schwierig, aber wenn Sie die Module kennen, die dies tun, können Sie Ihrem Ajax-Aufruf weitere hinzufügen, um dies je nach Modul automatisch zu tun.

Dies wird Ihnen helfen, das Modul zu "laden". Nachdem es über Ajax geladen wurde, verwenden Sie einfach jquery, um das HTML zu der Seite hinzuzufügen, auf der Sie es "entladen" müssen, und entfernen Sie es einfach aus dem Dom.

das kann mit jQuery(ROOT_ELEMENT_OF_MODULE).remove();zum entfernen gemacht werden und jQuery(PARENT_ELEMENT_TO_INSERT_MODULE).html(MODULE_HTML);. Natürlich gibt es Variationen, die gemacht werden können, aber das ist die einfache Erklärung.


Vielen Dank, es funktioniert gut und es ist eine einfache Lösung. Können Sie etwas näher erläutern, wie Sie diesen Teil ausführen können: "Wenn Sie die Module kennen, die dies tun, können Sie Ihrem Ajax-Aufruf weitere hinzufügen, um dies je nach Modul automatisch zu tun." Eigentlich schließe ich alle js-Dateien manuell ein (ich weiß, welche Dateien ich hinzufügen muss)
Sébastien Gicquel

Sie müssen so etwas verwenden jQuery('head').first().append('SCRIPT_TAG');und das sollte das JS laden. Es wird jedoch nicht für alle funktionieren, da einige möglicherweise den Onload zum Feuern benötigen (obwohl Sie es versuchen können jQuery(document).trigger('readty');). Dies hängt jedoch auch davon ab, wie viel JS Ihre Site hat. Das zweimalige Auslösen des Onloads kann Probleme verursachen, und ich bin mir nicht einmal sicher, ob dies funktioniert .
Jordan Ramstad
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.