web-dev-qa-db-fra.com

Comment utiliser com_ajax pour charger et décharger un autre module (pour la conception adaptative)

Ceci est un suivi de la question Comment peut-on désactiver un module en fonction de la taille de l'appareil ou de la fenêtre d'affichage dans Joomla 3 pour optimiser les performances des appareils mobiles?

Comment utiliser com_ajax pour charger et décharger un module? L'appel peut être effectué à l'aide de javascript pur ou de jquery. Il sera basé sur la taille de la fenêtre d'affichage (nous utilisons mediacheck.js pour cela: https://github.com/sparkbox/mediaCheck ).

Selon l'endroit où cette réponse est donnée, nous pouvons même [demander à notre développeur de] assembler un composant pour permettre ce type de chargement dynamique (choisissez des points d'arrêt, choisissez les modules à charger/décharger).

Justification: La réactivité/adaptation (choisissez votre saveur) est essentielle de nos jours, de même que la réduction de la charge pour le mobile (vitesse 3G lente si dans une bonne zone de réception, ici au Brésil). Si je peux utiliser 10 ~ 15k de jQuery/Javascript pour éviter de charger 20 ~ 200k d'un module (les modules peuvent contenir des images, alors, oui, ils peuvent atteindre une assez grande taille), je suis tout à fait à l'aise. La réduction de l'encombrement de l'écran est également indispensable pour une bonne conception mobile. Nous pouvons même dire que c'est "mobile en premier", parce que nous concevons sans le module, puis le chargeons comme le permet la taille de l'écran.

com_ajax n'est vraiment utilisé que si les données du module sont supportées (basées sur JSON), bien qu'il ait d'autres fonctionnalités. Dans certains cas, le moyen le plus simple de "simplement" charger un module consiste à créer un nouveau fichier de modèle. Cela peut être fait en créant quelque chose comme "module.php" dans le répertoire du modèle. Ensuite, en utilisant quelque chose comme ça à l'intérieur.

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

Cela devrait charger uniquement le module dans une page, en utilisant une URL du type index.php?tmpl=module&module_pos=foo Dans une requête ajax, vous devriez pouvoir obtenir "uniquement" les données du module. Ceci chargera tous les modules assignés à la position nommée par module_pos.

Cela a cependant un problème, javascript. Les modules ajoutent du javascript à la balise head via l'API de Joomla. Pour lutter contre cela, vous auriez effectivement besoin d'ajouter plus dans le fichier module.php pour savoir ce qui se trouve dans la balise head, ce qui ne se trouve pas déjà dans la page actuelle et, en fait, trouver et ajouter ce qui est nécessaire. Ce processus serait assez difficile, mais si vous connaissez les modules qui le font, vous pouvez ajouter davantage à votre appel ajax pour le faire automatiquement en fonction du module.

Cela vous aidera à "charger" le module, après l'avoir chargé via ajax, utilisez simplement jquery pour ajouter le code HTML à la page où vous devez, pour le "décharger", il suffit de le supprimer du dom.

cela peut être fait avec jQuery(ROOT_ELEMENT_OF_MODULE).remove(); pour la suppression et jQuery(PARENT_ELEMENT_TO_INSERT_MODULE).html(MODULE_HTML);. Bien sûr, il y a des variations qui peuvent être faites, mais c'est l'explication simple.

5
Jordan Ramstad