[Tuto] Leggi tutto - Meno in pagina categoria

[disarci 65]

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.