Jump to content
Sign in to follow this  
disarci

[Tuto] Leggi tutto - Meno in pagina categoria

Recommended Posts

Ciao,

 

scrivo questo tutorial in quanto mi è capitato di cercare online come fare il leggi + e leggi - su prestashop 1.6, 1.7 e ho trovato solo spunti e parti incomplete.

NB questo è un tutorial di base, ovviamente potrebbero esserci differenze con i temi e altre impostazioni, cercherò di dare supporto per informazioni e modifiche ma invito tutta la comunità a dare supporto o migliorare il codice.

 

1) In category.tpl è utile mettere due righe per poter gestire le traduzioni nella pagina della categoria facilmente, queste saranno nascoste e verranno solo utilizzare poi per pescare le traduzioni:
 

 

    <p id="readmore" style="visibility:hidden">{l s='Read More' d='Shop.Theme.Catalog'}</p>
    <p id="readless" style="visibility:hidden">{l s='Read Less' d='Shop.Theme.Catalog'}</p>

2) aggiungere la classe: text-muted dentro la classe del div Description (normalmente classe: category-description)

Il resto dello script è da inserire in javascript.

Nella versione 1.7 c'è normalmente il file custom.js dove poter inserire oppure inserire direttamente nel theme.js in fondo.

 

 

$(function(){ /* to make sure the script runs after page load */
	$('.text-muted').each(function(event){ /* select all divs with the item class */

		var max_length = 550; /* set the max content length before a read more link will be added */
		
		if($(this).html().length > max_length){ /* check for content length */
			
			var short_content 	= fixhtml($(this).html().substr(0,max_length)); /* split the content in two parts */
			var long_content	= $(this).html();
            var readmore = $("#readmore").text();
            var readless = $("#readless").text();

			$(this).html('<span class="less_text">'+short_content+'</span>'+
						 '<a href="#" class="read_more" style="color:red"><br/>'+readmore+'</a>'+
						 '<span class="more_text" style="display:none;">'+long_content+'<a href="#" class="read_less"  style="color:red;display:none;" >'+readless+'</a></span>'); /* Alter the html to allow the read more functionality */
			
			$(this).find('a.read_more').click(function(event){ /* find the a.read_more element within the new html and bind the following code to it */
 
				event.preventDefault(); /* prevent the a from changing the url */
				$(this).hide(); /* hide the read more button */
				$(this).parents('.text-muted').find('.read_less').show(); /* show the read less button */
				$(this).parents('.text-muted').find('.more_text').show(); /* show the .more_text span */
				$(this).parents('.text-muted').find('.less_text').hide(); /* hide the short text span */
		 
			});
			
			$(this).find('a.read_less').click(function(event){ /* find the a.read_more element within the new html and bind the following code to it */
 
				event.preventDefault(); /* prevent the a from changing the url */
				$(this).parents('.text-muted').find('.read_more').show(); /* show the read more button */
				$(this).parents('.text-muted').find('.read_less').hide(); /* hide the read more button */
				$(this).parents('.text-muted').find('.more_text').hide(); /* hide the .more_text span */
				$(this).parents('.text-muted').find('.less_text').show(); /* show the short text span */
		 
			});
			
			
			
		}
		
	});
 
 
});

function fixhtml(html){
var div = document.createElement('div');
div.innerHTML=html
return (div.innerHTML);
}

 

Qualche piccola spiegazione:

1) var max_length = 550; .... quanti carattere leggere

2) var readmore = $("#readmore").text();.... serve a leggere il testo tradotto

3) $(this).find('a.read_more').click(function(event){  .... quando clicchi su read more allora mostra e nasconde varie parti

4) $(this).find('a.read_less').click(function(event){  ... stessa cosa ma quando clicchi su read less al contrario

5) function fixhtml(html){ .... serve per sistemare i tag html nella parte tagliata.

 

 

 

 

 

Tks to Richard Bell for the idea.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

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