Tweet
Bonjour,
Je fais quelques tests pour créer une template de zéro, et je cherche désespérément comment intégrer du Javascript à une template personnalisée. J'ai fouillé un peu partout sur le net, trouvé pleins de réponses, mais aucune n'a résolu le problème et mon javascript ne fonctionne que lorsque je l'intègre directement au fichier index.php.
Le tuto pour créer la structure minimale de la template que j'ai suivi est celui-ci : https://docs.joomla.org/Creating_a_b...a!_template/fr
J'ai tenté les solutions suivantes au fil des recherches :
Récupéré à cette adresse : https://docs.joomla.org/Adding_JavaScript/fr
Récupéré à cette adresse : https://docs.joomla.org/J3.x:Adding_...to_the_page/fr
Récupéré sur la template Protostar de base :
Voici l'architecture de mes fichiers :
Templatevide
-> index.php
-> templateDetails.xml
-> Fichier CSS
----> template.css
-> Fichier DOCS
-> Fichier IMAGES
-> Fichier JS
----> script.js
Voici le contenu du doc index.php :
Le contenu du fichier script.js :
Le contenu du fichier template.css :
C'est probablement un truc tout bête de débutant, mais j'ai l'impression de tourner en rond sur les mêmes ressources sur internet depuis un certain temps. Merci d'avance.
Je fais quelques tests pour créer une template de zéro, et je cherche désespérément comment intégrer du Javascript à une template personnalisée. J'ai fouillé un peu partout sur le net, trouvé pleins de réponses, mais aucune n'a résolu le problème et mon javascript ne fonctionne que lorsque je l'intègre directement au fichier index.php.
Le tuto pour créer la structure minimale de la template que j'ai suivi est celui-ci : https://docs.joomla.org/Creating_a_b...a!_template/fr
J'ai tenté les solutions suivantes au fil des recherches :
Récupéré à cette adresse : https://docs.joomla.org/Adding_JavaScript/fr
Code:
$document = JFactory::getDocument();
$document->addScript('/media/system/js/script.js');
Code:
$document->addScript($JUri::base() . 'templates/custom/js/script.js');
Code:
// Add template js
JHtml::_('script', 'script.js', array('version' => 'auto', 'relative' => true));
Templatevide
-> index.php
-> templateDetails.xml
-> Fichier CSS
----> template.css
-> Fichier DOCS
-> Fichier IMAGES
-> Fichier JS
----> script.js
Voici le contenu du doc index.php :
Code:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );
// Add template js
$document = JFactory::getDocument();
$document->addScript('/media/system/js/script.js');
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>
<body>
<jdoc:include type="modules" name="test1" /> <!-- Position top -->
CECI EST UN TEST
<jdoc:include type="component" />
<jdoc:include type="modules" name="test2" /> <!-- Position bottom -->
<div class="ThisIsTesla" style="width:500px; height:300px; margin: 0 auto;"></div>
<button id="changeColor" onclick="changeColorToBlue()" style="display:block; margin: 20px auto;">Colorer bleu</button>
</body>
</html>
Code:
function changeColorToBlue(){
document.getElementsByClassName('ThisIsTesla')[0].classList.add('colorBgBlue');
}
Code:
.ThisIsTesla{
background-color: red;
}
.colorBgBlue{
background-color:blue!important;
}
Commentaire