Lange Texte ausblenden und einblenden

caladan · August 9, 2011, 12:56pm

Huhu,

da ich aktuell das problem hatte, das gewisse Texte einfach zu lang sind und ich nicht alles sofort sichtbar haben möchte kam ich auf den Gedanken diese einfach auszublenden und mit einem klick auf “mehr” einfach komplett einzublenden.

Warum das Ganze? Für SEO ist es wichtig viel Text zu haben. Für Kunden eher weniger und sinnvolleren Text. So hat man beides

Hier post ich mal für andere, die das brauchen können das Beispiel für 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}]

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 erstellen wir eine neue datei namens “HideText.js” im Verzeichnis: “/out/azure/src/js” mit dem Inhalt:

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.

das ganze sieht dann so wie auf den screenshots aus

Hebsacker · August 9, 2011, 8:15pm

Schick! …und Danke fürs Teilen!
Soll, darf, kann das ins Wiki -> Tutorials?

coarsy2 · August 9, 2011, 8:21pm

Würde das Ganze noch gerne nach JQuery umbauen, denn wenn man schon n JavaScript Framework verwendet, sollte man das auch nutzen. Schaffs aber heute net mehr

caladan · August 10, 2011, 10:02am

ach das kann ich auch machen coarsy… dafür hab ich auch quellcode da… mit einem tollen “slide” effekt ^^

oh und ray: kannste gerne ins wiki in der jetzigen version. man kann ja beide reinmachen

Hebsacker · August 10, 2011, 9:14pm

caladan · August 11, 2011, 11:57am

kewl! thx

ich post hier demnächst mal das update mit jquery rein…wer es denn unbedingt haben mag und auch so tolle slide effekte nutzen will

aber erstmal am 4.5.1 template basteln

Hebsacker · August 11, 2011, 12:33pm

yes baby - Text mit 148.723 Slide-Effekten!

caladan · August 11, 2011, 12:34pm

ach aus seo sicht sind die slide effekte oder scroll effekte die NCIHT funktionieren die besten fg

ct-admin · January 20, 2012, 10:44am

Hallo,

ich bin recht neu hier und kümmere mich in der Firma um den Onlineshop. Momentan nutzen wir (noch!) Veyton, aber muss sagen, Oxid gefällt mir vom Handling einfach besser. Zur Zeit habe ich eine Lokale Installation und bin gerade am Einstellen von allem möglichen.

Wir haben leider immer wieder recht lange Artikelbeschreibungen, von denen ich gerne ab einer gewissen Zeilenanzahl kürzen würde.
Ich nutze allerdings das Basic Template und eine Kopie als Child für meinen Shop.

Meine Frage ist dabei: wie binde ich die super Idee hier in das Template ein? Hab schon viel probiert, aber geklappt hat es bisher leider nicht. Kenne mich leider auch nicht soooo gut in php etc aus. Es reicht für einfache Änderungen und so, aber jetzt scheiter ich daran.

Hoffe ihr könnt mir helfen.

Vielen Dank schon mal im Vorraus

Hebsacker · January 20, 2012, 11:26am

Ich meine, dass das im Prinzip genau so auch in Basic gehen müsste - nur das Template bzw. Java-Script ist eben an einer anderen Stelle.

Hier findest Du das gewünschte Template:
http://oxid-tpl-debug.stahlwarenhaus-hebsacker.de/basic/

ct-admin · January 20, 2012, 1:01pm

Gut, danke schonmal. Dann werde ich nochmal schauen. Wohl allerdings erst nach dem Wochenende.

jake · September 20, 2012, 6:06pm

[QUOTE=coarsy;64752]Würde das Ganze noch gerne nach JQuery umbauen, denn wenn man schon n JavaScript Framework verwendet, sollte man das auch nutzen. Schaffs aber heute net mehr :-)[/QUOTE]

hat das schon jemand mit jquery umgesetzt?

GPassin · October 8, 2012, 7:23pm

Hallo,

ich nutze das Script nun schon eine Weile und es funktionierte problemlos.

Nun habe ich eine kleines Problem und weis nicht, wo ich ansetzen soll. Wenn ich das Script richtig interpretiere, werden Langbeschreibung nach 400 Zeichen abgeschnitten.

Nun habe ich eine Langbeschreibung, bei der schon nach ca. 100 Zeichen “mehr Informationen…” erscheint:confused:

Bei weiteren Testen ist mir aufgefallen, dass das auch ein “<p> </p>” schon ausreicht.

Wo kann ich hier suchen?

mfg

Gert

aritark · October 9, 2012, 1:25am

Mit einer etwas abgeänderten Basis aus dem Tutorial

[{if $actCategory->oxcategories__oxlongdesc->value }]
   <div id="catLongDesc" class="categoryDescription">
      <div>
         [{oxeval var=$actCategory->oxcategories__oxlongdesc|truncate:400:" ...":false}]
      </div>
      <div style="display:none;">
         [{oxeval var=$actCategory->oxcategories__oxlongdesc}]
      </div>
    <button>
     <span>mehr Informationen.. </span>
     <span style="display:none;">weniger Informationen</span>
    </button>
   </div>
[{/if}]

für Jquery


$('#catLongDesc').find('button').on('click', function(e){
     $(this).siblings('div').slideToggle().end().children('span').toggle();
 });

$(’#catLongDesc’).find(‘button’) ist etwas schneller als $(’#catLongDesc button’). und macht sonst nix besonderes.

Die inline CSS regeln kann man natürlich auch in eine externe Datei schreiben um das Mark-up schmal zu halten


#catLongDesc>div:last-child, #catLongDesc button span:last-child { display: none; }

GPassin · October 9, 2012, 6:22pm

Hallo aritark,

ich habe jetzt

[{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}]

mit

[{if $actCategory->oxcategories__oxlongdesc->value }]
   <div id="catLongDesc" class="categoryDescription">
      <div>
         [{oxeval var=$actCategory->oxcategories__oxlongdesc|truncate:400:" ...":false}]
      </div>
      <div style="display:none;">
         [{oxeval var=$actCategory->oxcategories__oxlongdesc}]
      </div>
    <button>
     <span>mehr Informationen.. </span>
     <span style="display:none;">weniger Informationen</span>
    </button>
   </div>
[{/if}]

ersetzt, mit dem Ergebnis, dass jetzt immer "mehr Informationen… " steht, es aber als Button nicht funktioniert. Ich kann nicht mehr Informationen abrufen.

Habe ich einen Fehler gemacht, oder war alles ganz falsch?

mfg

Gert

aritark · October 9, 2012, 11:31pm

Das ist nur der HTML Teil. Wenn du jquery benutzt hast du irgendwo eine ready Funktion.

Im standard Azure ist das glaube ich etwas umständlich da es keine feste Datei für Benutzerscripte gibt.

Du kannst eine *.js Datei mit


$(document).ready(function() {
  $('#catLongDesc').find('button').on('click', function(e){
     $(this).siblings('div').slideToggle().end().children('span').toggle();
   });
});

anlegen und die mit oxscript include auf deiner page/list/list.tpl dazuladen.

Aber wenn du sonst garnix mit jquery machst bist du mit der originalen Version des Scriptes besser bedient.

GPassin · October 10, 2012, 8:01am

Hallo aritark,

danke, ich werde am WE mal testen.

mfg

Gert