Intégrer Javascript dans page Produit

[Jim72]

Bonjour je n'arrive pas à trouver la solution sur le forum.

Je voudrais intégrer un code Javascript dans le champs description de certains produits

(Bouton en savoir plus en l'occurence).

 

Mais la sécurité empêche l'ajout de balises SCRIPT (Prestashop 1.6.0.14)

 

Savez-vous comment remédier à ce problème SVP ?

[Baba deCode]

Bonjour,

inclure le code entre les balises {literal}{/literal}

 

Cdt

[Jim72]

Bonjour, merci pour la réponse rapide mais... ça ne marche pas.

Entre quelles balises ? Les balises <script> ?

[Baba deCode]

Pardon j'ai mal lu ta question, ma réponse était pour l'édition du product.tpl (ou meme dans le footer.tpl)... d'ailleurs pourquoi ne pas faire ca directement ?

[Jim72]

Je suis preneur de toute solution (pour intégrer des scripts + textes différents dans le champs description de tous les produits)

Pourquoi pas depuis product.tpl mais de quelle manière STP ?

[Baba deCode]

Ce que je ferais:

Dans footer.tpl de ton theme:

juste avant</body>

{if $page_name == 'product'}
{literal}
<script type="text/javascript">
    /* * * monscript * * */
</script>
{/literal}
{/if}

[Jim72]

Ca semble logique de le faire comme ça mais... Ca ne marche toujours pas.

J'ai essayé de placer le code à divers endroits de product et à l'endroit indiqué de footer mais sans succès.

Merci beaucoup en tout cas. J'y ai cru

[Jim72]

<script>

function toggleSeeMore() {

    if(document.getElementById("textarea").style.display == 'none') {

        document.getElementById("textarea").style.display = 'block';

        document.getElementById("seeMore").innerHTML = 'En savoir moins';

    }

    else {

        document.getElementById("textarea").style.display = 'none';

        document.getElementById("seeMore").innerHTML = 'En savoir plus';        

    }

}

</script>

Début du texte. <p id="textarea" style="display: none"><br>

Suite du texte.

</p><a id="seeMore" onclick="toggleSeeMore()" href="javascript:void(0);">En savoir plus</a>

 

 

---------------------------------

En fait il m'enlève 

<p id="textarea" style="display: none">

et 

onclick="toggleSeeMore()" href="javascript:void(0);">

 

dans le champs description donc le problème persiste même en mettant le script en dur.

Il faut quand même les appels à la fonction dans le champ description de Prestashop.

[Baba deCode]

essaye sans les literal

[Baba deCode]

ok donc tu ajoutes dans ton product.tpl....

tu entoures ton {$product->description} comme ca:

<p id="textarea" style="display: none">{$product->description}</p> <a id="seeMore" onclick="toggleSeeMore()" href="javascript:void(0);">En savoir plus</a>

[Jim72]

Bonjour. C'est une idée merci.

Mais le but est d'avoir unes partie du texte visible et un bouton en savoir plus pour lire la suite.

Non il faut vraiment que je trouve comment faire sauter la sécurité empêchant les scripts dans description.

 

Certainement via TinyMCE qui est utilisé a priori dans les champs texte du back-office.

[Baba deCode]

Ok apres quelques recherches... essaye de jeter un oeil sur ces deux liens:

 

http://www.tinymce.com/forum/viewtopic.php?id=19033

 

https://mypresta.eu/en/art/prestashop-16/extended-rich-text-editor.html

 

A mon avis c'est tres possible en mixant ces infos.

 

CDT

Edited August 17, 2015 by Alexandre-KM (see edit history)

[erouvier29]

Bonjour,

 

Voilà quelques modifs qui semblent fonctionner. Les numéros de ligne correspondent à PS 1.6.0.14 + thème par défaut.

 

NOTA: j'utilise la description longue plutôt que la courte pour différentes raisons:

- la description courte est utilisée plusieurs fois dans la page produit ( laisser un commentaire, envoyer à un ami) => ids et handlers multiples qui posent problème

- la descirption courte est utilisée pour remplir la méta-balise description

 

1/ Autoriser la sauvegarde des descriptions avec code js (/classes/Product.php, ligne 323):

'description' =>  array('type' => self::TYPE_HTML, 'lang' => true, /*'validate' => 'isCleanHtml'*/),

2/ Remplacer la description courte par la description longue dans la fiche produit (/themes/xxx/product.tpl, lignes 173 à 199):

{if $product->description || $packItems|@count > 0}
  <div id="short_description_block">
    {if $product->description}
      <div id="short_description_content" class="rte align_justify" itemprop="description">{$product->description}</div>
    {/if}

    {* if $product->description}
      <p class="buttons_bottom_block">
        <a href="javascript:{ldelim}{rdelim}" class="button">
          {l s='More details'}
        </a>
      </p>
    {/if *}
    <!--{if $packItems|@count > 0}
    (...)
    {/if}-->
  </div> <!-- end short_description_block -->
{/if}

Et supprimer la description longue de sa position initiale (lignes 467 à 476):

{* if $product->description}
  <!-- More info -->
  <section class="page-product-box">
    <h3 class="page-product-heading">{l s='More info'}</h3>{/if}
    {if isset($product) && $product->description}
      <!-- full description -->
      <div  class="rte">{$product->description}</div>
  </section>
  <!--end  More info -->
{/if *}

3/ Inclure le code js souhaité dans une description longue, par exemple:

<p>
Description courte
<span id="text_more" style="display: none;"> qui s'allonge quand on clique</span>
</p>
<p><a id="see_more" href="#">En savoir plus</a></p>
<script>
$("#see_more").click(function() {
  if ($("#text_more").css("display") == "none") {
    $("#text_more").show();
    $("#see_more").html("En savoir moins");
  } else {
    $("#text_more").hide();
    $("#see_more").html("En savoir plus");
  }
  return false;
});
</script>

Ceci dit, si l'objectif est de basculer entre descriptions courte et longue pour l'ensemble du catalogue, il est sans doute plus judicieux de simplement modifier la fiche produit comme par exemple:

{if $product->description_short || $packItems|@count > 0}
  <div id="short_description_block">
    {if $product->description_short}
      <div id="short_description_content" class="rte align_justify" itemprop="description">{$product->description_short}</div>
    {/if}

    {if $product->description}
      <div id="long_description_content" class="rte align_justify" itemprop="description" style="display:none">{$product->description}</div>
      <a id="see_more" href="#">En savoir plus</a>
      <script>
        $("#see_more").click(function() {
          if ($("#long_description_content").css("display") == "none") {
            $("#long_description_content").show();
            $("#see_more").html("En savoir moins");
          } else {
            $("#long_description_content").hide();
            $("#see_more").html("En savoir plus");
          }
          return false;
        });
      </script>
    {/if}
    <!--{if $packItems|@count > 0}
    (...)
    {/if}-->
  </div> <!-- end short_description_block -->
{/if}

(Le style reste à faire...)

 

 

[le grenier]

bonjour, pour ne pas ouvrir 36 milles post, j'ai une question qui ressemble au probleme posé. je cherche à insérer ce bout de code, dans une fiche produit.

avec l'editeur de description longue, c'est bien sur refusé. ce code est généré par fyuse. je trouve ce code assez sympa puisqu'il permet d'integrer directement une photo 3d de l'objet en question ! je ne souhaite pas touché au tpl. puisque j'aimerai bien mettre le bon code correspondant à chaque fiche produit. n'existe il pas un module permettant de faire ca ?

<div id="fyu_apsdgv3h1p" class="fyu_container fyu_vertical"></div><script src="https://fyu.se/embed?v=2.0"></script><script>FYU.add("apsdgv3h1p", "fyu_apsdgv3h1p", {autoplay:1});</script>

[Baba deCode]

Salut,

 

Une piste, essaye de désactiver le Tiny_Mce de la description longue

 

cdt