Hallo zusammen,
ich stelle mein Emotion-Template auf das responsive-Theme um. In der Einkaufswelt habe ich eine kleine jQuery-Abfrage drin.
Beim alten emotion-Template wird jQuery eingebunden, beim neuen responsive nicht. Wo / wie kann ich jQuery wieder einbinden?
Gibt es da im Backend etwas oder ändere ich eine .tpl-Datei indem ich dort den Pfad zu jQuery angebe?
DAnke und lg Nadja
Hallo,
jQuery wird bei Shopware standardmäßig eingebunden.
Da es aber ganz als letztes eingebunden wird, kann es natürlich sein, das wenn du deine Abfrage machst, es noch gar nicht geladen ist. So etwas müsstest du dann in der Abfrage berücksichtigen.
Beste Grüße
Sebastian
Hm, ich habe es im Quelltext nirgends gefunden.
Ich bekomme auch die Fehlermeldung
ReferenceError: $ is not defined
$(document).ready(function(){
Kann es sein, dass es bei mir doch nicht eingebunden wird?
lg Nadja
Wie Sebastian bereits sagte liegt es daran, dass der Content der EK nachgeladen wird.
Und ob jQuery geladen wird oder nicht wissen wir nicht, wir sind ja keine Hellseher.
Du könntest das Problem auch einfach umgehen mit der Funktion .ajaxComplete()
$( document ).ajaxComplete(function() {
var = 'mein code'
});
Saubrer wäre es natürlich sich an ein Event dranzuhängen, wenn die EK geladen worden ist. Die EK Datei ist übrigens hier: shopware/jquery.emotion.js at 5.1 · shopware/shopware · GitHub
Ich habe jetzt im Footer folgendes eingebunden:
$(document).ajaxComplete(function(){
function show(id)
{ alert("drin");
var div = document.getElementById(id);
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
});
Doch leider bekomme ich im Firebug den Fehler, dass $ not defined ist.
Ich will eigentlich nur bei Klick auf ein Bild ein Div ein-bzw. ausblenden. Biser habe ich das mit einem Link auf dem Bild und onclick=„javascript:show(‚divid‘); return false;“ realsiert. Doch das funktioniert nicht mehr.
lg Nadj
Poste doch einfach mal den Link zur Seite … dann kann man mal schauen.
https://wasd-magazin.de/test-update
wasd2
Je5oofiM
Vielen Dank
lg Nadja
Hallo,
wie erwähnt - auch bei dir ist jQuery eingebunden, siehe (/test-update/web/cache/1461515068_797affe28c27dfaec3f19047ce8371f6.js):
<script src="/test-update/web/cache/1461515068_797affe28c27dfaec3f19047ce8371f6.js">
<div class="js--overlay"></div>
<script>
<script type="text/javascript">
</body>
</html></code></pre>
<p>Somit ist jQuery bzw. $ einfach noch nicht geladen / verfügbar, wenn du es nutzen möchtest.</p>
<p>Und noch komplizierter hätte man den Code nicht schreiben können <img alt="Angry-Face" src="http://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/angry-face.png" style="height:16px; width:16px" title="Angry-Face" />. Thema jQuery - show() und hide(). Oder noch einfacher - toggleClass().</p>
<p>Beste Grüße</p>
<p>Sebastian</p>
Schreib den Code auch einfach mal nachdem die JS Datei geladen ist und nicht darüber.
Übrigens, dein JS Code geht sehr viel simpler mit jQuery.
Schau mal mein Beispiel hier: https://jsfiddle.net/9bha5m8w/
Mehr ist das ganze nicht etwas bei Click ein oder auszublenden.
Erst einmal vielen Dank fürs nachsehen.
Und wie kann ich jetzt mein Problem umgehen / beheben?
Danke und lg Nadja
Hi,
häng dich an folgenden Block {block name=„frontend_index_header_javascript_jquery“ append}
und schreib dort dein Script rein. Damit wird es nach jQuery geladen.
Edit:
{extends file="parent:frontend/index/index.tpl"}
{block name="frontend_index_header_javascript_jquery" append}
hier dein Script
{/block}
Aber nicht deinen JS Code, sondern am besten mein Beispiel anschauen. Das ist ja auch gar kein jQuery was du da hast 
Code: https://jsfiddle.net/9bha5m8w/
PS: Packe deinen JS Code noch in die literal Tags: http://www.smarty.net/docsv2/en/language.function.literal
Also als Erweiterung von @Creatixx
{extends file="parent:frontend/index/index.tpl"}
{block name="frontend_index_header_javascript_jquery" append}
{literal}
$( "#deine-image-element-id" ).click(function() {
$('#dein-div-zum-ausblenden').toggleClass( "display" );
});
{/literal}
{/block}
Natürlich dann noch entsprechend die Class .display oder sonst was entsprechend anlegen.
Erst einmal vielen Dank fürs nachsehen.
Und wie kann ich jetzt mein Problem umgehen / beheben?
Danke und lg Nadja
Hallo,
wenn du nicht gerade das Script nach der jQuery-Einbindung einbinden möchtest (bspw. über {block name=„frontend_index_header_javascript_jquery“ append}), könntest du es beispielsweise so lösen:
window.addEventListener("load", onloadEvent, false);
function onloadEvent(){
$( document ).ready(function() {
$( "button" ).click(function() {
Der auszuführende JavaScript-Code
});
});
}
Du solltest natürlich button noch durch den Klassennamen des entsprechenden Buttons ersetzen.
Beste Grüße
Sebastian
Aber was mir gerade einfällt - Ich würde mich eher an ein Event hängen bzw. eben an das EK Plugin.
$.subscribe('plugin/swEmotionLoader/onLoadEmotionFinished', function() {
$( "#klick" ).click(function() {
$("#test").toggle();
});
});
Hier auch mehr dazu: jQuery plugins and the StateManager
PS: Habe meine Antwort noch einmal editiert. Habe es gerade auch noch einmal getestet - funktioniert ohne Probleme.
Den Code entsprechend in einer eigenen JS Datei anlegen und diese über die Theme.php laden.
Man hängt sich hier praktisch an das Emotion Plugin / onLoadEmotionFinished Event und sobald die EK fertig geladen ist wird der entsprechende Code erst ausgeführt.
Erst einmal vielen lieben Dank für eure schnelle und ausführliche Hilfe.
Leider bekomme ich es immer noch nicht hin.
Ich habe eine js-Datei erstellt:
$.subscribe('plugin/swEmotionLoader/onLoadEmotionFinished', function() {
$( "#podbild" ).click(function() {
$("#podinfo").toggleClass( "nondisplayinfo" );
});
});
Diese habe ich unter meinTemplate/frontend/_public/src/js hochgeladen.
Die Theme.php habe ich wie folgt abgeändert:
class Theme extends \Shopware\Components\Theme
{
/** @var array Defines the files which should be compiled by the javascript compressor */
protected $javascript = array(
'src/js/toggle.js'
);
protected $extend = 'Responsive';
Wenn ich den Cache leere und die Seite neu lade funktioniert es leider trotzdem nicht.
Ich kann auch wenn ich nach #pod suche mein Javascript nicht finden.
lg Nadja
Hast du dein Theme auch neu kompiliert? Denn da du eine neue JS Datei hinzugefügt hast, musst du auch hier das Theme erneut kompilieren / erneut zuweisen im Theme Manager, wie bei den Less Files.
Die Class nondisplayinfo musst du natürlich auch entsprechend irgendwo in deinen Less/CSS Dateien definiert haben.
Ansonsten kannst du auch noch statt toggleClass einfach toggle() verwenden:
// Togglet die Class
$("#podinfo").toggleClass( "nondisplayinfo" );
// ODER
// Setzt einfach ein style="display:none";
$("#podinfo").toggle();
Wenn du jetzt nicht weiter kommst, kannst du mir gerne mal FTP / Backend Daten an info@shopwareianer.com schicken und ich schaue flott drüber.
Ja, ich habe es neu kompiliert. Hat leider auch nichts gebracht.
Danke für dein Angebot.
lg Nadja
Muss funktionieren, habe es wie gesagt ausprobiert.
Allerdings sehe ich auf deiner Seite auf der Startseite kein einziges Element mit der ID podinfo oder podbild.
In dem Unterordner test-update auf der Startseite gibt es ein oranges Bild “Podcast” dies hat die ID podbild. Im Quelltext findest du darunter ein Div mit der ID podinfo.
Hab gerade auch nochmal nachgesehen: bei mir ist beides so benannt.
lg Nadja