Jump to content

Intégrer Javascript dans page Produit

Jim72
 Share

Recommended Posts

Jim72 Newbie

Jim72

Posted
Posted

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 ?

Link to comment
Share on other sites
Jim72 Newbie

Jim72

Posted
  • Author
Posted

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

Link to comment
Share on other sites
Jim72 Newbie

Jim72

Posted
  • Author
Posted
<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.

Link to comment
Share on other sites
Jim72 Newbie

Jim72

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
erouvier29 Newbie

erouvier29

Posted
Posted

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

 

 

Link to comment
Share on other sites
  • 1 year later...
le grenier Newbie

le grenier

Posted
Posted

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