Hallo,
ich möchte gerne gemäß dieser Anleitung mir ein einfaches jquery Accordion einbinden.
Leider habe ich Probleme damit in der productmain.tpl Datei die die jquery.js einzubinden und den Code zum ausführen der Accordion.
Aus den alten Threads bin ich nicht schlauer geworden, da es wohl mehrere Wege gibt, aber keine hat mich zu meinem Ziel geführt.
Für einen Hinweis wäre ich dankbar.
Mit freundlichen Grüßen
BB
Sowas gehört eigentlich in ein Modul und über einen Block eingebunden:
base_js
Der Block selbst könnte so aussehen:
[{$smarty.block.parent}]
[{oxscript include=".../deinedatei.js"}]
Um das gleich noch zu beantworten: Eine einzelne JS-JQuery-Datei kannst Du in der productmain.tpl einfach so einbinden:
[{oxscript include=".../deinedatei.js"}]
... = Ordnerstruktur
Hallo,
vielen Dank für den Tipp. Ich werde dann einfach die jquery.js einbinden und das Skript in eine zweite Datei packen und zusätzlich einbinden. Dann bläh ich die productmain.tpl nicht zusätzlich auf.
Eingebunden sind die beiden Dateien, aber sie werden nicht ausgeführt. Das heißt, das Menü klappt weder ein, noch aus, sondern die Inhalte stehen einfach untereinander.
So einfach wie es aussah, ist es dann doch wohl nicht :(.
Wie bekomme ich es denn hin, das die Javascript-Dateien auch ausgeführt werden ?
Gruß BB
Link?
Wenn offline, was sagt denn Firebug?
Hinweis: Wichtig ist, dass, wie im Bsp., die JS-Dateien in einer bestimmten Reihenfolge geladen werden und, dass jQuery nicht doppelt geladen wird. Je nach Template ist jQuery in oxid drin.
Hallo Foxido,
ich will das Accordion in einem Popup anzeigen lassen.
Das Pop-up funktioniert auch problemlos.
Hier mal der Code, wie ich ihn jetzt in der productmain.tpl habe:
Zeile 2:
[{oxscript add=“$( ‘#novalgin’ ).oxModalPopup({ target: ‘#novaRocks’,width:‘650px’});”}] [{*Pop-Up-Box *}]
Ab Zeile 211:
<a id=“novalgin” href=“#”>–> Die richtige Größe ermitteln</a>
<div id=“novaRocks” class=“popupBox corners FXgradGreyLight glowShadow”>
<img src=“[{$oViewConf->getImageUrl(‘x.png’)}]” alt=“” class=“closePop” /><strong>Klicken Sie einfach auf die entsprechende Rubrik und sehen Sie alle Maße auf einem Blick: </strong><br>
<br>
[{oxscript include=“jquery.js”}]
[{oxscript include=“accordion.js”}]<h3 class=“trigger”>Herrengrößen Hosen</h3>
<div class=“toggle_container”>
Dann folgt die Tabelle mit den Größen.
Das ganze sieht derzeit so aus wie in der popup.jpg abgebildet.
Die Firebug-Anzeige habe ich auch angehängt, ich hoffe das ist die richtige Anzeige.
Gruß BB
Ab Zeile 211 würde ich es so wie unten machen. Sollte funktionieren. Die Datei http://www.normansblog.de/demos/wp-content/themes/flora_demos/js/custom.js sollte natürlich vom Shopserver kommen. Bitte anpassen. 
<a id="novalgin" href="#">--> Die richtige Größe ermitteln</a>
<div id="novaRocks" class="popupBox corners FXgradGreyLight glowShadow">
<img src="[{$oViewConf->getImageUrl('x.png')}]" alt="" class="closePop" />
<strong>Klicken Sie einfach auf die entsprechende Rubrik und sehen Sie alle Maße auf einem Blick: </strong><br>
<br>
[{oxscript include="http://www.normansblog.de/demos/wp-content/themes/flora_demos/js/custom.js"}]
[{capture assign=pageScript}]
$(document).ready( function() {
$('.trigger').not('.trigger_active').next('.toggle_container').hide();
$('.trigger').click( function() {
var trig = $(this);
if ( trig.hasClass('trigger_active') ) {
trig.next('.toggle_container').slideToggle('slow');
trig.removeClass('trigger_active');
} else {
$('.trigger_active').next('.toggle_container').slideToggle('slow');
$('.trigger_active').removeClass('trigger_active');
trig.next('.toggle_container').slideToggle('slow');
trig.addClass('trigger_active');
};
return false;
});
});
[{/capture}]
[{oxscript add=$pageScript}]
<h3 class="trigger">Herrengrößen Hosen</h3>
<div class="toggle_container">
Hallo Foxido,
jetzt klappt, vielen vielen Dank !
Aber eines ist mir nicht ganze klar: wozu brauch ich die custom.js ? Die errechnet doch nen MD5 Hash und gibt den aus ?
Gruß BB
Ich habe mir die Dateien nicht angeschaut und nur das Offensichtliche entfernt bzw. hinzugefügt. Wenn dem so ist, kannst Du die natürlich auch entfernen.