Jump to content
MrC8

[Résolu] Fermer/ouvrir description de catégorie avec bouton plus et moins

Recommended Posts

Bonjour à tous,

J'utilise prestashop 1.5.6 et j'utilise très souvent les descriptions de catégories et le fameux bouton "plus" qui permet d'afficher la suite du contenu.

 

Cet ajout est super utile mais il y a un petit truc qui me gêne quand même... Le fait de ne pas pouvoir refermer l'espace d'affichage avec un bouton "Moins".

 

Je suppose qu'il faut créer un bouton javascript qui ferrais l'inverse du bouton "plus" mais je ne suis pas très doué en javascript...

 

Est-ce que quelqu'un aurait une idée de comment procéder pour apporter cette amélioration ?

 

Merci d'avance pour votre aide !

 

 

Edited by MrC8 (see edit history)

Share this post


Link to post
Share on other sites

Bonjour,

 

Voilà un peu d'aide via JQUERY assez simple à mettre en place !!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ma page JQUERY</title>
 <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<style type="text/css">
.show_hide {
    display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide").show();

   $('.show_hide').toggle(function(){
       $(".slidingDiv").slideDown(
         function(){
           $("#plus").text("[-]")
         }
       );
   },function(){
       $(".slidingDiv").slideUp(
       function(){
           $("#plus").text("[+]")
       }
       );
   });
});

</script></head>

<body>

<a href="#" class="show_hide" id="plus">[+]</a>
<div class="slidingDiv" style="display: block;">
Texte en afficher/cacher !!
</div>


</body>
</html>

Ckarone

Edited by ckarone (see edit history)

Share this post


Link to post
Share on other sites

Bonjour Ckarone,

Merci de ton aide, je vais regarder ce que je peux faire avec ce code.

Share this post


Link to post
Share on other sites

Youhou ! Malgré mes faibles connaissances en jquery j'ai réussi à faire ce que je voulais !

Encore merci de ton aide Ckarone !

 

Voilà le code pour ceux que ça intéresse.

 

Dans category.tpl, remplacer :

{if $category->description}
	<div class="cat_desc">
		{if strlen($category->description) > 120}
			<div id="category_description_short">{$category->description|truncate:150}</div>
			<div id="category_description_full" style="display:none">{$category->description}</div>
			<a href="#" onclick="$('#category_description_short').hide(); $('#category_description_full').show(); $(this).hide(); return false;" class="lnk_more">{l s='More'}</a>
		{else}
            <div>{$category->description}</div>
		{/if}
	</div>
{/if}

Par :

{if $category->description}
	<div class="cat_desc">
		{if strlen($category->description) > 120}
		<div id="category_description_short">{$category->description|truncate:150}</div>
		<div id="category_description_full" style="display:none">{$category->description}</div>
		<p><a href="#" class="lnk_more" id="plus">{l s='More'}</a></p>
		{else}
			<div>{$category->description}</div>
		{/if}
	</div>
<script type="text/javascript">
	$(document).ready(function(){
		$("#category_description_full").hide();
		$(".lnk_more").show();                
			$('.lnk_more').toggle(function(){
				$("#category_description_full").slideDown(
				function(){
					$("#plus").text("Moins").addClass("less")
                		} 
                	);
                	$("#category_description_short").hide();
                },function(){
                	$("#category_description_full").slideUp(
                function(){
                	$("#plus").text("Plus").removeClass("less")
                		}
                	);	
                    $("#category_description_short").show();
           });
    });
</script>
{/if}

J'en ai profité pour ajouter la class less au bouton pour pouvoir avoir un affichage différent lorsque la description de la catégorie est ouverte.

 

Et voilà :)

  • Like 1

Share this post


Link to post
Share on other sites

De rien et penses à ajouter "Résolu" dans le titre de ton post!!

 

Ckarone

  • Like 1

Share this post


Link to post
Share on other sites

Bonjour, merci pour vos réponses, ca marche pas sur la version 1.7.6.5 de Prestashop. Avez vous une idée? merci.

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

×
×
  • Create New...

Important Information

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