Zwijanie tekstu/opisów

[tonspeed]

Witam

 

Mam problem, tworząc sklep wprowadzamy bardzo długie opisy produktów, chcielibyśmy aby te opisy wyświetlały się w formie skróconej (nie wiem np. 250 znaków). Pod tym opisem powinien być przycisk np. "Rozwiń" lub "Pokaż więcej". Po kliknięciu w niego opis powinien się rozwinąć. Czy ktoś ma jakiś pomysł jak to zrobić w presta 1.6? Oczywiście chodzi o moduł product.tpl.

 

Pozdrawiam

AM

Edited August 9, 2016 by tonspeed (see edit history)

[electriz]

Edytuj product.tpl (/themes/default-bootstrap/product.tpl)

 

Znajdź:

<div  class="rte">{$product->description}</div>

Zamień na:

<div  class="rte short-desc">{$product->description|truncate:120}
<p><a href="#" class="read-more">{l s='Read more'}</a></p>
</div>
<div  class="rte full-desc" style="display:none;">{$product->description}
<p><a href="#" class="read-less">{l s='Hide'}</a></p>
</div>

Przy czym wartość po "truncate", to ilość znaków które mają być wyświetlone w skróconym opisie (w tym przypadku 120 znaków).

 

 

I na samym końcu pliku dodaj:

{literal}
<script>
	$(function() {
		$(".read-more").click(function(e) {
			e.preventDefault();
			$(".full-desc").fadeIn();
			$(".short-desc").hide();
		});

		$(".read-less").click(function(e) {
			e.preventDefault();
			$(".full-desc").hide();
			$(".short-desc").fadeIn();
		});
	});
</script>
{/literal}

Edited August 11, 2016 by electriz (see edit history)

[vekia]

o który opis chodzi? długi czy krótki?

[tonspeed]

długi, a dokładniej chodzi o:

{$product->description}

Edited August 9, 2016 by tonspeed (see edit history)

[tonspeed]

 

Edytuj product.tpl (/themes/default-bootstrap/product.tpl)

 

Znajdź:

<div  class="rte">{$product->description}</div>

Zamień na:

<div  class="rte short-desc">{$product->description|truncate:120}
<p><a href="#" class="read-more">{l s='Read more'}</a></p>
</div>
<div  class="rte full-desc" style="display:none;">{$product->description}
<p><a href="#" class="read-less">{l s='Hide'}</a></p>
</div>

Przy czym wartość po "truncate", to ilość znaków które mają być wyświetlone w skróconym opisie (w tym przypadku 120 znaków).

 

 

I na samym końcu pliku dodaj:

{literal}
<script>
	$(function() {
		$(".read-more").click(function(e) {
			e.preventDefault();
			$(".full-desc").fadeIn();
			$(".short-desc").hide();
		});

		$(".read-less").click(function(e) {
			e.preventDefault();
			$(".full-desc").hide();
			$(".short-desc").fadeIn();
		});
	});
</script>
{/literal}

 

 

działa świetnie dzięki!!

[Tendina]

Jak to wykonać dla opisu kategorii bloga?

[Andrejkov]

 
 Trochę odkopię temat, próbuje to wdrożyć na PS 1.7 dla opisów kategorii w pliku category.tpl dodałem:

    {if $category.description}
    <div id="category-description short-desc" class="text-muted rte">{$category.description|truncate:120 nofilter}
    <p><a href="#" class="read-more">{l s='Read more'}</a></p></div>
    <div id="category-description full-desc" style="display:none;" class="text-muted rte">{$category.description nofilter}
    <p><a href="#" class="read-less">{l s='Hide'}</a></p>
    </div>
    {/if}

Na samym dole pliku dodałem skrypt od kolegi @electriz. 

Lecz niestety po kliknięciu w "Read more", nic się nie dzieje, do adresu URL dopisuje się jedynie znak #.

Może ktoś podpowiedzieć co musze zrobić aby to zadziałało w moim przypadku? 

Pozdrawiam. 

 

Edited April 14, 2022 by Andrejkov (see edit history)

[endriu107]

Skrypt powyżej nie jest idealnym ponieważ niepotrzebnie dubluje się treść. Można to zrobić łatwiej nadając kontenerowi maksymalną wysokość np. 300px a po kliknięciu nadawać klasę która będzie miała wysokość 100%. Czyli zwykły toggle w js i kilka styli w css.

[Andrejkov]

22 hours ago, endriu107 said:

Skrypt powyżej nie jest idealnym ponieważ niepotrzebnie dubluje się treść. Można to zrobić łatwiej nadając kontenerowi maksymalną wysokość np. 300px a po kliknięciu nadawać klasę która będzie miała wysokość 100%. Czyli zwykły toggle w js i kilka styli w css.

A mógłbym Cię prosić o podesłanie przykładowego skryptu w JS? Z góry bardzo dziękuję. Dodatkowo nie chce mi działać żaden skrypt który dodaję do pliku. W konsoli mam błąd:

jQuery('#') is not a valid selector

bottom-aae11f170.js:92

e.fn.init       @bottom-aae11f176.js:92

e                 @bottom-aae11f176.js:28

e. _getParentFromElement       @bottom-aae11f176.js:684

e  ._clearMenus                         @bottom-aae11f176.js:684

dispatch                                     @bottom-aae11f176.js:39

m.handle                                    @bottom-aae11f176.js:39

Edited April 16, 2022 by Andrejkov (see edit history)

[endriu107]

Jaki efekt finalnie chcesz uzyskać? Coś takiego jak tu: https://youtu.be/mb6QDH0bHGs ?

 

[Los_Milos]

Dzień dobry,

chciałbym odkopać temat i poprosić o pomoc w utworzeniu opcji zwijania opisów kategorii. Efekt jaki chciałbym uzyskać to coś takiego jak na stronce: https://polskieregaly.pl/50-regaly-metalowe-helios . W tym przypadku jest to opcja zapewniona przez moduł szablonu. Na stronce na której mam coś takiego wprowadzić jest tylko opcja włączenia/wyłączenia opisu kategorii.