[Tuto] Leggi tutto - Meno in pagina categoria

[disarci]

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.

[SalDan]

ciao ho provato ma il risultato è il seguente ...uso vers 1.7.7.2 mi aiuti grazie

[SalDan]

ciao a tutti qualcuno che mi aiuti su come mettre il tag leggi tutto

grazie

[prestapp]

On 17/3/2021 at 6:21 PM, SalDan dice:

ciao ho provato ma il risultato è il seguente ...uso vers 1.7.7.2 mi aiuti grazie

Ciao Saldan,

ho lo stesso problema, alla fine hai risolto?

grazie

[AlexTed]

io ho usato questo per inserire il leggi tutto nella descrizione delle categorie (non ho un negozio mi diletto a capire) e funziona perfettamente 

[prestapp]

21 minuti fa, AlexTed dice:

io ho usato questo per inserire il leggi tutto nella descrizione delle categorie (non ho un negozio mi diletto a capire) e funziona perfettamente 

Grazie mille, provo. ciao

[AlexTed]

3 minutes ago, prestapp said:

Grazie mille, provo. ciao

di nulla è molto semplice da inserire e funziona alla grande non è un modulo ma una spiegazione molto precisa su come fare, pensa che ho visto dei moduli che costano anche 69 euro per aggiungere questa opzione invece con una semplice modifica come spiegato da quel link ci metti 2 secondi

[prestapp]

Purtroppo questa guida non mi funziona.

Questo script l'avevo anche già provato ma mi metteva il leggi tutto ad ogni <p> inserendo nella descrizione <p class="addReadMore showlesscontent"> ma non a tutto il testo...

[AlexTed]

32 minutes ago, prestapp said:

Purtroppo questa guida non mi funziona.

Questo script l'avevo anche già provato ma mi metteva il leggi tutto ad ogni <p> inserendo nella descrizione <p class="addReadMore showlesscontent"> ma non a tutto il testo...

scusa volevo dire scrivi a loro una mail 

 

questo 

<p> inserendo nella descrizione <p class="addReadMore showlesscontent">

non deve essere inserito nella descrizione ma devi modificare con il codice che ti ha inviato il file category-header.tpl 

Edited August 3, 2021 by AlexTed (see edit history)

[AlexTed]

sostituisci il contenuto (fai prima una copia di quello originale) il contenuto del file category-header.tpl con quello che lui ti ha inviato e vedrai che funziona, il testo che è presente lato prestashop non deve essere modificato, quindi scrivi e basta

[prestapp]

20 ore fa, AlexTed dice:

sostituisci il contenuto (fai prima una copia di quello originale) il contenuto del file category-header.tpl con quello che lui ti ha inviato e vedrai che funziona, il testo che è presente lato prestashop non deve essere modificato, quindi scrivi e basta

Ciao, ho fatto proprio così ma non va. Ho scritto una email, vediamo cosa rispondono.

Grazie

Edited August 4, 2021 by prestapp (see edit history)