JS Sticky Navigation: ReferenceError: $ is not defined

var menu = $(".navigation-main");
menuscrolled = "main-nav-scrolled";
headr = $('.header-main').height();
wdth= $('.container').width();

$(window).scroll(function() {
  if( $(this).scrollTop() > headr ) {
    menu.addClass(menuscrolled);
    menu.css('width', wdth+'px');
  } else {
    menu.removeClass(menuscrolled);
  }
});

Hallo, ich verzweifle gerade an obigem Code, den ich als JS-Datei eingebunden habe. In der Konsole steht “ReferenceError: $ is not defined” und ich habe keine Idee, wie ich das lösen kann. Was fehlt Shopware hier, bzw. was läuft da falsch? Vielen Dank für Tipps und Tricks!

Ich vermute, dass an dieser Stelle das jQuery noch gar nicht geladen ist/wurde und somit kann kann JS mit $ nichts anfangen.

Ich habe das gerade mal vom header.tpl an das Ende der index.tpl gepackt - der Fehler bleibt bestehen.

Hallo,

mach mal folgenden Code noch um deinen JavaScript - Code:

$(function() {
    /* Dein Code */
});

Grüße 

Sebastian

{block name="frontend_index_header_javascript_jquery_lib"}
  {$smarty.block.parent}
				
					{literal}
				    var menu = $(".navigation-main");
					menuscrolled = "main-nav-scrolled";
					headr = $('.header-main').height();
					wdth= $('.container').width();
					
					$(window).scroll(function() {
					  if( $(this).scrollTop() > headr ) {
					    menu.addClass(menuscrolled);
					    menu.css('width', wdth+'px');
					  } else {
					    menu.removeClass(menuscrolled);
					  }
					});
					{/literal}
				
  {/block}

So müsste es doch eigentlich funktionieren, dennoch “$ is not defined”.

Hallo,

siehe mein Beitrag oben - als Inline - JavaScript würde ich es aber auf keinen Fall machen (sondern wie von Shopware vorgesehen wie hier: https://developers.shopware.com/designers-guide/css-and-js-files-usage/#add-javascript-files ).

Grüße

Sebastian

addiere dein javascript datei durch theme:
Using CSS and JavaScript in themes

oder durch plugin:
Plugin quick Startup Guide

damit kann shopware diese javascript datein in die eine javascript datei zusammenstellen, und sicherstellen das jquery zuerst geladen wird.

ps. oder irgendwann in zukunft  import - JavaScript | MDN

1 Like

Vielen Dank, so klappt es. Gebe ich mehrere Scripte mit “,” getrennt an?

    protected $javascript = [
    ‘src/js/vendors/file1.js’,
    ‘src/js/vendors/file2.js’
    ]; 

 

 

Eventuell geht es auch so:

window.onload = function () {

 // hier dein jQuery 

};

 

Ich habe hier ein simples jQuery sticky Plugin, welches Ihr nutzen könnt.