[4.5] Text anteasern, auf Klick vollständig einblenden

Gewisse Texte sind einfach zu lang und sollen/müssen nicht sofort komplett sichtbar sein. Hier bietet sich an, einige Zeilen zu zeigen und dem User durch einen Klick auf  „mehr Informationen…“ den vollen Text zu zeigen.  Warum das Ganze? Für SEO ist es wichtig viel ausführlichen Text mit vielen Infos zu haben, für User/Kunden eher weniger und dafür prägnanter Text. So hat man beides, und das ganze sieht noch schick aus.

Hier das Beispiel für die Kategorie-Beschreibungen:

in der /out/azure/tpl/page/list/list.tpl nach folgenden Code suchen:

[{if $actCategory->oxcategories__oxlongdesc->value }]
   <div id="catLongDesc" class="categoryDescription">[{oxeval var=$actCategory->oxcategories__oxlongdesc}]</div>
[{/if}]<span id="1313001127165S" style="display: none;"> </span>

und ersetzen mit:

[{if $actCategory->oxcategories__oxlongdesc->value }]
   <div id="catLongDesc" class="categoryDescription">
      <div id="short_text">
         [{oxeval var=$actCategory->oxcategories__oxlongdesc|truncate:400:" ...":false}]
            <a onclick="return tricker('hidden_text')" href="javascript:void(0)" style="color:red;cursor:pointer;"> mehr Informationen..</a>
      </div>
      <div id="hidden_text" style="display:none;">
         [{oxeval var=$actCategory->oxcategories__oxlongdesc}]
            <a onclick="return tricker('hidden_text')" href="javascript:void(0)" style="color:red;cursor:pointer;"> ...weniger Informationen</a>
      </div>
   </div>
[{/if}]

danach eine neue Datei HideText.js im Verzeichnis:/out/azure/src/js mit folgendem Inhalt erstellen:

function tricker(a)
{
   var e=document.getElementById(a);
   var x=document.getElementById('short_text');
   if(!e)return true;
   if(e.style.display=="none")
   {
      e.style.display="block";
      x.style.display="none";
   }
   else
   {
      e.style.display="none";
      x.style.display="block";
   }
   return true;
}

und dann passen wir noch die base.tpl an und fügen unsere javascript datei hinzu:

[{oxscript include='js/HideText.js'}]

fertsch!

Dank an caladan fürs Teilen!



0 Kommentare

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.