Jump to content

Intégrer Javascript dans page Produit


Jim72
 Share

Recommended Posts

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 ?

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Alexandre-KM (see edit history)

Share this post


Link to post
Share on other sites

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

 

 

Share this post


Link to post
Share on other sites

  • 1 year later...

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>

Share this post


Link to post
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

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More