JS Sticky Navigation: ReferenceError: $ is not defined

Shopware 5 Programmierung
1 
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!

2

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

3

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

4

Hallo,

mach mal folgenden Code noch um deinen JavaScript - Code:

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

Grüße 

Sebastian

5 
{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”.

6

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

7

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 „Gefällt mir“
8

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

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

 

 

9

Eventuell geht es auch so:

window.onload = function () {

 // hier dein jQuery 

};

 

10

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