Text Teaser

Some texts are just too long for showing them always complete. A nice option would be to create a teaser and after clicking on “more information…” showing the complete text. Why all those efforts? Because it is important for SEO to have long text and describe in detail. Users / Customers like it more summarily and short. With this snippet you have both and it´s quite fancy as well!

Here an example for the category long description:

search for this part of the code in /out/azure/tpl/page/list/list.tpl:

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

then replace it with:

[{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;"> more information..</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;"> ...less information</a>
      </div>
   </div>
[{/if}]

create a new file named HideText.js in the directory /out/azure/src/js with following content:

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;
}

after that adjust base.tpl and include the new script:

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

…and Bob’s your uncle!

Don´t forget to clear /tmp!

Thanks to caladan for sharing!



0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *