Créer un texte avec Javascript Show/Hide pour mes CMS

sue17 · February 3, 2011

Bonjour,

Je souhaite mettre sur une seule page, tous les textes de mes CMS ( Paiment sécurisé, livraison, mentions légales et conditions générales de vente).

Les textes étant longs, je souhaite qu'ils soient cachés puis visible après un clic sur le titre du texte, (de façon à ce que les utilisateurs puissent consulter toutes les infos sur la même page)

1 - Je ne connais pas le Javascript
2- Pourriez-vous m'aider à rédiger le code exact (ou plus ou moins exact)
3- Pourriez-vous m'indiquer ou je dois taper ce code
4- J'ai créé via le PANNEAU d'Administration - OUTILS - CMS, un lien info (c'est dans cette page que les textes vont être rédigés).

Merci de bien vouloir m'aider à résoudre ce petit problème.

Sue

sue17 · February 3, 2011

C'est IMPORTANT et URGENT s'il vous plaît de l'aide... !

Quelqu'un??

Sue

mehdi2405 · February 3, 2011

as tu essayé d'utiliser le module faq ?

sue17 · February 3, 2011

Merci de ta réponse Mehdi,

Non je n'ai pas essayé ce module, que permet-il de faire?

Sue

Ehinarr · February 3, 2011

La page qui contiendra tous les CMS, cette page, il sera un CMS?

sue17 · February 3, 2011

Oui ce sera une page CMS, qui contiendra tous les liens CMS déjà créés.
Je voudrais qu'il soit possible de cliquer pour voir ou cacher les textes (des conditions de vente, de paiement sécurisé, etc)
avec un texte Javascript hide/show

Quelqu'un s'y connaît? Je n'ai toujours pas trouvé la solution...

rofrof · May 17, 2011

Le problème c'est qu'il ont mis des codes qui ne permettent pas l'utilisation de javascript dans les CMS mais même moi je ne sais pas comment contourner ce problème pour pouvoir y écrire des codes js .

liquidesnake · May 18, 2011

Bonjour,

Je souhaite mettre sur une seule page, tous les textes de mes CMS ( Paiment sécurisé, livraison, mentions légales et conditions générales de vente).

Les textes étant longs, je souhaite qu'ils soient cachés puis visible après un clic sur le titre du texte, (de façon à ce que les utilisateurs puissent consulter toutes les infos sur la même page)

1 - Je ne connais pas le Javascript
2- Pourriez-vous m'aider à rédiger le code exact (ou plus ou moins exact)
3- Pourriez-vous m'indiquer ou je dois taper ce code
4- J'ai créé via le PANNEAU d'Administration - OUTILS - CMS, un lien info (c'est dans cette page que les textes vont être rédigés).

Merci de bien vouloir m'aider à résoudre ce petit problème.

Sue

Ce que tu as besoin c'est Jquery Accordion: http://docs.jquery.com/UI/Accordion
va sur demo

regarde bien ca structure, tu as un Titre et une description le CMS marche de la meme facon donc ds tn CMS .tpl trouve le code qui fait apparaitre le titre et la description puis insere le dans le modele du Jquery.

OOps je viens de remarquer que ds le CMS.tpl il ya que :

{$cms->content} >> ca fais apparaitre le titre et la description

liquidesnake · May 18, 2011

{$cms->meta_title} pour le titre ... pour la description...soit patient ..je reviens plus tard :-)

liquidesnake · May 18, 2011

les voici:
{$cms->meta_title} >> Tu peux utilieser ceci pour ton titre
{$cms->meta_description} >> Tu peux utilieser ceci pour ta description (en bref)
{$cms->content} >> Tu peux utilieser ceci pour ta description (complet)

a utiliser dans le cms.tpl

DONC selon http://docs.jquery.com/UI/Accordion Tu Peux (apartir de ton cms.tpl):

Change:

.....


Section 1



       Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
       ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
       amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
       odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.





....

A:

.....


{$cms->meta_title}



           {$cms->content}





....

Biensur n'oublie pas d'ajouter les liens
du jquery:

 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
 [removed][removed]
 [removed][removed]

et

 $(document).ready(function() {
   $("#accordion").accordion();
 });

Bref Voila ! C'est fini :-D

Have fun, mate!

liquidesnake · May 18, 2011

Le problème c'est qu'il ont mis des codes qui ne permettent pas l'utilisation de javascript dans les CMS mais même moi je ne sais pas comment contourner ce problème pour pouvoir y écrire des codes js .

c'est possible :-D

L'Agence Nature · March 21, 2012

Bonjour,

J'ai prestashop 1.4.7

Je ne veux pas utiliser le module FAQ qui est une page non cms

La fonction don j'ai besoin apparait à l'intérieur d'un cms créé dans la BO

Je cherche à faire la chose suivante:

créer une page cms dans mon back office et insérer un code adéquate dans le html de tinymce afin de créer un effet OPEN and CLOSE avec des titres en <h3> et des paragraphes <p>.

Dans la démo en ligne de prestashop , pour exemple: http://demo-store.prestashop.com/en/content/3-terms-and-conditions-of-use ,

nous pouvons voir qu'il y a une fonction accordéon au niveau du menu catégorie dans la colonne de gauche. Est-il possible d'utiliser le même procédé pour créer un effet SHOW / HIDE dans le texte de la page cms, par exemple dans la page termes et conditions-de-utilisation?

J'ai découvert dans \themes\prestashop\js\tools le fichier treemanagement.js qui semble avoir tout pour un effet OPEN and CLOSE - Le menu Catégorie utilise cet effet. Y a t il moyen de créer ou de trouver le code à adapter et à insérer dans le html, css et tpl ...

Avez vous un code à partager ou des pistes?

Merci

Voici ce que j'ai essayé de faire sans succès:

Dans le html de tinymce d'une page cms

<ul class="tree dynamized" style="display: block;">
<li>
 <span class="grower CLOSE"> </span>
  <a title="" href="#"><h3>MY TITLE 1</h3></a>
 <ul style="display: none;">
  <li>
    <p>Alii nullo quaerente vultus severitate adsimulata patrimonia sua in inmensum extollunt,
cultorum ut puta feracium multiplicantes annuos fructus, quae a primo ad ultimum solem se abunde</p>
  </li>
 </ul>
</li>
<li>
 <span class="grower CLOSE"> </span>
  <a title="" href="#"><h3>MY TITLE 2 </h3></a>
 <ul style="display: none;">
  <li>
    <p>Alii nullo quaerente vultus severitate adsimulata patrimonia sua in inmensum extollunt,
cultorum ut puta feracium multiplicantes annuos fructus, quae a primo ad ultimum solem se abunde</p>
  </li>
 </ul>
</li>
<li>
 <span class="grower CLOSE"> </span>
  <a title="" href="#"><h3>MY TITLE 3</h3> </a>
 <ul style="display: none;">
  <li>
    <p>Alii nullo quaerente vultus severitate adsimulata patrimonia sua in inmensum extollunt,
cultorum ut puta feracium multiplicantes annuos fructus, quae a primo ad ultimum solem se abunde</p>
  </li>
 </ul>
</li>
</ul>

Avec un css :

#center_column span.CLOSE {
    background-image:url("../img/icon/more.gif");
}
#center_column span.OPEN {
    background-image:url("../img/icon/less.gif");
}
#center_column span.grower {
    background-position:0 3px;
    background-repeat:no-repeat;
    display:block;
    float:left;
    height:15px;
    margin:0 0 0 -12px !important;
    padding:0;
    width:9px;
}

Merci pour votre aide.

David

Créer un texte avec Javascript Show/Hide pour mes CMS

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in