Un script dans un template

[Camillelinia]

Bonjour

Je suis sur PS1.7.8

J'ai un script tout simple que je cherche à mettre dans le tpl du produit pour changer une class dans un titre.

Je pensait le mettre dans custom.js mais ca ne marchait pas. Quand je le met directement dans le tpl avec literal ca ne marche pas non plus.

J'ai loupé un truc ? 

<h1>Mon titre changeant</h1>

      <button id="bouton1">Cliquer pour mettre en vert grand</button>

      <button id="bouton2">Cliquer pour mettre en rouge petit</button>

  { literal }

      <script>

       $("#bouton2").on('click', function () { $("h1").addClass('rougegros') })

        $("#bouton1").on('click', function () { $("h1").removeClass('rougegros') }

      </script>

 { /literal}

Le clic au bouton ne change pas la class

 

Merci de votre aide.

   

 

[lionsteph]

Bonjour

jQuery n'est pas chargé lors de l'appel au template. Et il y a des petites erreurs dans votre script, voici une correction :

$( document ).ready(function() {
  $("#bouton2").on('click', function () { $("h1").addClass('rougegros') });
  $("#bouton1").on('click', function () { $("h1").removeClass('rougegros') });
});

Vous avez deux options, soit écrire le même code avec du javascript vanilla, soit différer le chargement de votre script (Avec un délai, déconseillé, ou en chargeant votre script dans le footer)

[Camillelinia]

Merci beaucoup. J'ai passé le scrip en custom.js

Edited January 29, 2023 by Camillelinia (see edit history)