Jump to content

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

MrC8

By MrC8
in PrestaShop pour les développeurs

 Share

Recommended Posts

MrC8 Newbie

MrC8

Posted
Posted (edited)

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)
Link to comment
Share on other sites
ckarone Newbie

ckarone

Posted
Posted (edited)

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)
Link to comment
Share on other sites
MrC8 Newbie

MrC8

Posted
  • Author
Posted

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
Link to comment
Share on other sites
  • 6 years later...

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