Jump to content

js ne fonctionne pas dans mon tpl

amz83

By amz83
in PrestaShop pour les développeurs

 Share

Recommended Posts

amz83 Rookie

amz83

Posted
Posted

Bonjour,

 

j'ai codé un ptit module (vraiment basique) pour faire un pop up au clic afin de pouvoir renvoyer aux différents pdf (brochures)

 

tout fonctionne sur mon test (quand je l'execute avec notepad++).

 

Mais lorsque je l'ai exporté sur mon ftp, bah le js ne s'active pas, et j'ai l'impression que le css non plus... 

 

En effet le contenu du pop up est en visibility: hidden; mais pourtant on le voit de base.

 

lorsque l'on clic sur l'image, le pop up ne fonctionne pas, 

 

bref les images seront plus parlantes. (je vous joint en piece jointe ce que ça devrait faire et ce que ça fait vraiment.

 

et voici le code:

<html>

<body>

<div class="popup" onclick="myFunction()"> <img src="/../../img/Catevapd.jpg" name="cata" />
  <span class="popuptext" id="myPopup">
		
		<span class="taille1"> Retrouvez toutes nos gammes de produit! séléctionnez le lien Fr ou EN en fonction de vos préférences </br></br>
		Find here all our product range, select Fr or EN link according to you preference. </span>
  
		<span class="taille"> <img src="/../../img/brochureledfr.jpg" style="padding-bottom:3px;"></br> Led </br> <a href="http://www.desineo.fr/img/BrochureLED.pdf" target="_blank" >FR </a> 
		 <a href="http://www.desineo.fr/img/brochureLEDen.pdf" target="_blank" style="padding-left:15px;">       EN</a></span>
  
		 <span class="taille"> <img src="/../../img/Page1.jpg" style="padding-bottom:3px;"></br>Hammam </br><a href="http://www.desineo.fr/img/CatalogueHammam2.pdf" target="_blank" > FR </a> 
		 <a href="http://www.desineo.fr/img/hammamen.pdf" target="_blank" style="padding-left:15px;">       EN </a></span>
		 
		 <span class="taille"> <img src="plvbodyclean.jpg" style="padding-bottom:3px;"></br>Bodyclean </br><a href="http://www.desineo.fr/img/PLV_bodyclean.pdf" target="_blank" > FR </a> 
		 <a href="http://www.desineo.fr/img/bodycleanen.pdf" target="_blank" style="padding-left:15px;">       EN </a></span>
		 
		 <span class="taille"> <img src="plvintense.jpg" style="padding-bottom:3px;"></br>Intense </br><a href="http://www.desineo.fr/img/plvintense.pdf" target="_blank" > FR </a> 
		 <a href="http://www.desineo.fr/img/intenseen.pdf" target="_blank" style="padding-left:15px;">       EN </a></span>
		 
		  <span class="taille"> <img src="plvkgt.jpg" style="padding-bottom:3px;"></br>KGT </br><a href="http://www.desineo.fr/img/kgt.pdf" target="_blank" > FR </a> 
		 <a href="http://www.desineo.fr/img/kgten.pdf" target="_blank" style="padding-left:15px;">       EN </a></span>
		 
		 <span class="taille"> <img src="plvpw1b.jpg" style="padding-bottom:3px;"></br>Purewave </br><a href="http://www.desineo.fr/img/purewave.pdf" target="_blank" > FR </a> 
		 <a href="http://www.desineo.fr/img/purewaveen.pdf" target="_blank" style="padding-left:15px;">       EN </a></span>
		 
		 <span class="taille"> <img src="plvvalstorm.jpg" style="padding-bottom:3px;"></br>Valstorm </br><a href="http://www.desineo.fr/img/plvvalstorm.pdf" target="_blank" > FR </a> 
		 <a href="http://www.desineo.fr/img/vallstormen.pdf" target="_blank" style="padding-left:15px;">       EN </a></span>
		 
		 <span class="taille"> <img src="plvvitech.jpg" style="padding-bottom:3px;"></br>Vitech </br><a href="http://www.desineo.fr/img/PLVvitech.pdf" target="_blank" > FR </a> 
		 <a href="http://www.desineo.fr/img/vitechen.pdf" target="_blank" style="padding-left:15px;">       EN </a></span>
		 
		 <span class="taillecat"> <img src="Catevapd2.png" style="padding-bottom:3px;"></br>notre catalogue </br><a href="http://www.desineo.fr/img/Catalogue%20Desineo.pdf" target="_blank" > FR </a> 
		 <a href="http://www.desineo.fr/img/Catalogue%20Desineo.pdf" target="_blank" style="margin-left:125px;">       EN </a></span>
  
  
  </span>
  
  <div class="clear"></div>
  
</div>

<script type="text/javascript">
// When the user clicks on <div>, open the popup
function myFunction() {
    var popup = document.getElementById('myPopup');
    popup.classList.toggle('show');
}
</script>
</body>
</html>

.clear{
	
	clear:both;
}




body{
	
	font-family: roboto;

}

/* Popup container */


.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
	text-align: center;
	margin-top:70%;
	margin-left:10%;
}

/* The actual popup (appears on top) */
.popup .popuptext {
    visibility: hidden;
    width: 780px;
    background-color: #fcfcfc;
    color: #2c7796;
    text-align: center;
    float:left;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    ;
	border: #2c7796 5px solid;
	border-left: #2c7796 3px solid;
	border-right: #2c7796 3px solid;
	border-top: #2c7796 3px solid;
	
	
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
	float:left;
    top: 100%;
    left: 50%;
    ;
    border-width: 5px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
	
}

.popup .taille1{
	
	color:#333;
	text-decoration:none;
	float:left;
	margin-left:3%;
	text-align:center;
	padding-top:5%;
	
	
}

.popup .taille{
	
	color:#333;
	text-decoration:none;
	float:left;
	margin-left:10%;
	text-align:center;
	padding-top:5%;
	
	
}

.popup .taille a{
	
	color:#333;
	text-decoration:none;
	float:left;
	margin-left:10%;
	text-align:center;
	margin-left:15px;
	
	
}

.popup .taille a:hover{
	
	color:#2c7796;
	text-decoration:none;
	float:left;
	margin-left:10%;
	text-align:center;
	margin-left:15px;
	
	
}

.popup .taillecat{
	padding-top:5%;
	color:#333;
	text-decoration:none;
	float:left;
	margin-left:35%;
	text-align:center;
	
	
}

.popup .taillecat a{
	
	color:#333;
	text-decoration:none;
	float:left;
	margin-left:35%;
	text-align:center;
	margin-left:15px;
	
	
}

.popup .taillecat a:hover{
	
	color:#2c7796;
	text-decoration:none;
	float:left;
	margin-left:35%;
	text-align:center;
	margin-left:15px;
	
	
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

post-1235210-0-59054000-1482403181_thumb.jpg

post-1235210-0-96325500-1482403187_thumb.jpg

Link to comment
Share on other sites
amz83 Rookie

amz83

Posted
  • Author
Posted

Ok bon bah pk pas mais ce que je voulais savoir c'est si mon code était ok au niveau du script etc (pour prestashop 1.5.3.1) voirsi il manquait pas un truc a rajouter pour que ça marche lorsque c'est sur le serveur, si tu me dis que c'est juste le cache a changer, je le ferais.

 

merci

Link to comment
Share on other sites
amz83 Rookie

amz83

Posted
  • Author
Posted

Non sur 1.5.3.1 on n'a pas acces a vide rle cache de base, faut faire soit la manip dans le ftp en supprimant tout a la main dans /smarty/cache et smarty/compile

 

ou alors y'a une manip sur le BO mais je la connais pas. Je te joint un screen.

 

post-1235210-0-15287900-1482412923_thumb.jpg

 

Link to comment
Share on other sites
amz83 Rookie

amz83

Posted
  • Author
Posted

Ok, je l'ai fait, je l'ai enregistré et j'ai ctrl + f5 sur ma page mais bon, ça a rien changé. vous pouvez allez voir si vous voulez: www.desineo.fr 

 

(c'est à gauche vous pouvez pas le rater c'est très moche du coup).

 

cordialement. desineo

Link to comment
Share on other sites
coeos.pro Collaborator

coeos.pro

Posted
Posted

corrige déjà:

 

var popup = document.getElementById('myPopup');
popup.classList.toggle('show');

 

tu ne peux pas cliquer sur un élément pour l'afficher si à la base il est caché.

il faut mettre id='myPopup' sur l'img et afficher/cacher le span qui est juste après l'img

Link to comment
Share on other sites
amz83 Rookie

amz83

Posted
  • Author
Posted

ok donc, j'ai changé comme tu ma dit j'ai remonté le id="mypopup";

<div class="popup" onclick="myFunction()"> <img onmouseover="cata.src='/img/Catevapd2.png'"  onmouseout="cata.src='/img/Catevapd.jpg' " src="/../../img/Catevapd.jpg" name="cata" id="myPopup" />
  <span class="popuptext" >

ça donne ça. 

 

donc la j'ai plus que l'image mais quand je clique sur l'image rien ne se passe.

enfin la classe popup change(je le vois dans l'inspecteur) mais n'affiche pas le popup. 

 

j'ai donc pensé a un problème de z-index mais rien n'y fait (2,1000000)le popup ne s'affiche toujours pas, comment faire?

Link to comment
Share on other sites
amz83 Rookie

amz83

Posted
  • Author
Posted

j'ai crée un module de base en php et j’appelle une page tpl mais je suis un débutant donc ça doitpas etre la meilleur façon:

class cataloguepdf extends Module
{
	public function __construct()
	{
		$this->name = 'cataloguepdf';
		$this->version = '1.0.0';
		$this->author = 'AGERON Arthur le meilleur des stagiaires';
		$this->tab = 'front_office_features';
		$this->need_instance = 0;

		parent::__construct();

		$this->displayName = $this->l('catalogue pdf');
		$this->description = $this->l('catalogue pdf ouvert dans un nouvel onglet ehhh oui.');
	}

	public function install()
	{
		return (parent::install() && $this->registerHook('displayLeftColumn'));
	}

	public function uninstall()
	{

		return parent::uninstall();
	}

	public function hookdisplayLeftColumn($params)
	{
		 $this->context->controller->addCSS($this->_path.'cataloguepdf.css', 'all');
		 $this->context->controller->addJS($this->_path.'cataloguepdf.js');
		return $this->display(__FILE__, 'cataloguepdf.tpl');
	}
}

?>
Link to comment
Share on other sites
Matt K. Newbie

Matt K.

Posted
Posted

Mes pistes : 

 

1) Regarde si tu passes bien dans la méthode "hookdisplayLeftColumn". 

 

Si c'est pas le cas essaye de mettre un d majuscule (hookDisplayLeftColumn), si c'est tjr pas le cas check si tu as bien une left column sur ta page Presta. 

 

2) Si c'est bien le cas. Essaye de voir si ton code est bien chargé dans la page

 

Si ton code est pas chargé, c'est que c'est p'tet pas les bonne méthode pour charger du JS/CSS...

 

3) Tu peux peut être aussi se greffer à un autre hook (genre un hook header)...

 

4) Désactive ton cache pour voir si le pb vient de là.

 

Courage !

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...