Jump to content

JS dans pages CMS

merguez
 Share

Recommended Posts

merguez Newbie

merguez

Posted
Posted

Bonjour,

 

Je me permets de solliciter votre aide car je ne parviens pas à utiliser un code javascript sur une page créée dans la section cms.

 

 En effet, il semblerait que seule la partie HTML soit interprétée.

 

J'ai overridé la classe suivant ce tutorial mais rien n'y fait : 

 

http://blog.manit4c.com/2014/02/03/ajouter-du-javascript-dans-vos-pages-cms-sous-prestashop/

 

Voici le code en question :

  <div id="table">
  </div>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <script type="text/javascript">
$("#table").append('<'+'link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">');
</script>
  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
  </ul>
  <div id="tabs-1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse semper lacus eget est condimentum, eu dictum risus sodales. Morbi gravida egestas ipsum sed lacinia. Cras non elit vel nibh ullamcorper varius sit amet sed mi.
  </div>
  <div id="tabs-2">
Pellentesque aliquet, nunc rutrum rhoncus dapibus, odio diam consequat nunc, nec iaculis ligula nisl quis mi. Donec a erat eget neque dapibus tincidunt vitae ac diam. Proin varius ipsum eu orci egestas, nec auctor tellus sodales.
  </div>
  </div>

Merci par avance pour vos conseils.  :)

 

Bien cordialement,

merguez

Link to comment
Share on other sites
2FR3 Newbie

2FR3

Posted
Posted

Bonjour,

J'ai plutot l'habitude de voir ces codes dans le <head>

  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

A confirmer par des connaisseurs de JS.

 

Aussi, pendant que vous faites des modifications de .tpl ou de .css, il est necessaire de desactiver le cache :)

Link to comment
Share on other sites
merguez Newbie

merguez

Posted
  • Author
Posted (edited)

Bonjour 2FR3 et un grand merci pour votre réponse.

 

En fait, la déclaration des fichiers .js est bien prise en compte car je les vois via le code source de la page.

 

Cependant, voici comment le code est modifié lorsque j'édite ma page dans PrestaShop :

<div id="table"> </div>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>// <![CDATA[
$("#table").append('<'+'link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">');
// ]]></script>
<script type="type/javascript">// <![CDATA[
$(function() {
    $( "#tabs" ).tabs();
  });
// ]]></script>

Des éléments <![CDATA[ // ]] font leur apparition.

 

Encore merci.  :rolleyes:

 

Bien cordialement,

merguez

Edited by merguez (see edit history)
Link to comment
Share on other sites
2FR3 Newbie

2FR3

Posted
Posted

Malheuresement, je ne pourrais vous aider plus avec le JS, ce n'est pas du tout ma tasse de thé :(

 

J'aurais essayé tout de meme de mettre les deux lignes dans le <head> de header.tpl, bien que tout comme vous, je reste septique sur le resultat ^^.

Je sais aussi que parfois il y a conflis avec d'autres librairies dans mes rare bidouilles avec ce language :)

Voir http://api.jquery.com/jquery.noconflict/

Link to comment
Share on other sites
Whoami Newbie

Whoami

Posted
Posted

Bonjour merguez (un pseudo qui sent bon l'été :) ),

 

Sous quelle version de Prestashop ? 

 

Si j'ai bien compris, vous souhaitez insérer du code javascript directement dans une page CMS créée en back-office via le WYSIWYG ?

 

Ce n'est en effet pas possible naturellement, mais le patch permet de contourner cela.

 

Chose étant pour l'application du patch/override, avez-vous bien supprimé le cache des classes (/cache/class_index.php) afin de bien prendre en compte ce nouveau fichier ? Si non, n'hésitez pas avant d'essayer à nouveau.

 

Cordialement,

 

Ps : A titre d'information, Jquery et jquery.ui existent déjà dans Prestashop 1.6, pourquoi vouloir les inclure de nouveau ? 

Link to comment
Share on other sites
merguez Newbie

merguez

Posted
  • Author
Posted

Bonjour Whoami et merci pour vos conseils.

 

La version est 1.6.

Effectivement, j'ai bien supprimé les fichiers de cache et désactivé le cache du site pendant la manip.

 

Du coup, voici comment j'ai procédé.

 

J'ai créé un fichier FrontController.php dans /override/classes/controller qui contient le code suivant : 

<?php

class FrontController extends FrontControllerCore
{
    public function setMedia()
    {
        parent::setMedia(); // CSS files
		Tools::addCSS($this->_path.'http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css', 'all');
        Tools::addJS(_THEME_JS_DIR_.'tabs.js');
		Tools::addJS(_THEME_JS_DIR_.'jquery-ui.js');
    }
}

Encore merci.  ;)

 

Très bonne journée.

 

Cordialement,

merguez

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...