# Javascript: Viewport bzw. StateManager

**URL:** <https://forum.shopware.com/t/javascript-viewport-bzw-statemanager/64966>\
**Category:** Programmierung\
**Created:** [24. Februar 2020 um 15:06 UTC](https://forum.shopware.com/t/javascript-viewport-bzw-statemanager/64966 "2020-02-24T15:06:32Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [24. Februar 2020 um 15:06 UTC](https://forum.shopware.com/t/javascript-viewport-bzw-statemanager/64966/1 "2020-02-24T15:06:32Z")

</div>

Hallo,

in SW5 konnte man über den StateManager in JS ja den Viewport abfragen… wie gehts in SW6? Den StateManager gibts ja wohl nicht…

hab schon versucht, es über new ViewportDetection() zu machen wie im Core. Aber das erzeugt nur Syntaxfehler…&nbsp;ViewportDetection is not defined

---

<div class="post-metadata">

**Author:** ![StefanPoensgen](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/stefanpoensgen/32/14750_2.png) [@StefanPoensgen](https://forum.shopware.com/u/StefanPoensgen)\
**Post date:** [24. Februar 2020 um 15:24 UTC](https://forum.shopware.com/t/javascript-viewport-bzw-statemanager/64966/2 "2020-02-24T15:24:11Z")

</div>

Hast du den Helper auch in deinem Javascript importiert?

Schau mal im hier&nbsp;[https://github.com/shopware/platform/blob/6.1/src/Storefront/Resources/app/storefront/src/plugin/header/account-menu.plugin.js](https://github.com/shopware/platform/blob/6.1/src/Storefront/Resources/app/storefront/src/plugin/header/account-menu.plugin.js)

---

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [24. Februar 2020 um 15:33 UTC](https://forum.shopware.com/t/javascript-viewport-bzw-statemanager/64966/3 "2020-02-24T15:33:54Z")

</div>

@StefanPoensgen‍

ja ich hatte die Zeile eingebunden.

```
import ViewportDetection from 'src/helper/viewport-detection.helper';

```

bekomm dann allerdings den Fehler

```
Uncaught SyntaxError: Cannot use import statement outside a module

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![Misengo](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/misengo/32/21446_2.png) [@Misengo](https://forum.shopware.com/u/Misengo)\
**Post date:** [26. Februar 2020 um 06:43 UTC](https://forum.shopware.com/t/javascript-viewport-bzw-statemanager/64966/4 "2020-02-26T06:43:25Z")

</div>

Gibt es dazu bisher irgendwelche Docs?

---

<div class="post-metadata">

**Author:** ![ShapeAndShift](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@ShapeAndShift](https://forum.shopware.com/u/ShapeAndShift)\
**Post date:** [26. Februar 2020 um 07:06 UTC](https://forum.shopware.com/t/javascript-viewport-bzw-statemanager/64966/5 "2020-02-26T07:06:42Z")

</div>

Der Fehler steht ja da: Du scheinst es außerhalb eines modules zu verwenden.

Zeig doch einmal den Code, am besten als git Repo damit man helfen kann.&nbsp;

@Misengo‍ Was suchst du denn genau? Prinzipiell ist das ganz simples Javascript. Das Plugin gibt einfach nur true/false zurück bei den verschiedenen methods. Schaut euch einfach das Plugin an -\>&nbsp;[https://github.com/shopware/platform/blob/fb4bc791e185512bfde8cd0ea462b0cf527cf82f/src/Storefront/Resources/app/storefront/src/helper/viewport-detection.helper.js#L110-L158](https://github.com/shopware/platform/blob/fb4bc791e185512bfde8cd0ea462b0cf527cf82f/src/Storefront/Resources/app/storefront/src/helper/viewport-detection.helper.js#L110-L158)

Du hast eigentlich nur die paar methods &&nbsp;getCurrentViewport().

getCurrentViewport() gibt dann entsprechend einfach&nbsp;isXS,&nbsp;isM usw&nbsp;zurück. Und isXS() usw. gibt einfach true/false zurück. Mehr ist es nicht.

---

<div class="post-metadata">

**Author:** ![Misengo](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/misengo/32/21446_2.png) [@Misengo](https://forum.shopware.com/u/Misengo)\
**Post date:** [27. Februar 2020 um 08:04 UTC](https://forum.shopware.com/t/javascript-viewport-bzw-statemanager/64966/6 "2020-02-27T08:04:11Z")

</div>

“Prinzipiell ganz simpel”, “Mehr ist es nicht”

Könnte, hätte, wollte 😃 Wäre trotzdem schön hier eine Doku zu haben auf die man auch verweisen kann, bzw. wo man nochmal explizit auf&nbsp;Fettnäpchen hinweist. Gerade wenn man solche Docs / Tutorials macht, fallen oft noch Sachen auf und man hat eine Bestpractice. Komme demnächst zu dem Punkt wo ich es brauche, wenn ich Zeit hab mach ich nen kurzen Beitrag dazu.

---

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [2. März 2020 um 10:50 UTC](https://forum.shopware.com/t/javascript-viewport-bzw-statemanager/64966/7 "2020-03-02T10:50:10Z")

</div>

könnte Shopware hier bitte noch eine Doku liefern? Mal ganz zu schweigen davon, dass ich Javascript über mein Theme nicht ausgeliefert bekomme… wegen diesem komischen Webpack Zeug…

vielleicht wisst ihr hier ja auch Rat:&nbsp;[https://forum.shopware.com/discussion/66305/plugin-javascript-file-wird-nicht-geladen#latest](https://forum.shopware.com/discussion/66305/plugin-javascript-file-wird-nicht-geladen#latest)

---

<div class="post-metadata">

**Author:** ![claudio](https://avatars.discourse-cdn.com/v4/letter/c/7cd45c/32.png) [@claudio](https://forum.shopware.com/u/claudio)\
**Post date:** [2. März 2020 um 22:48 UTC](https://forum.shopware.com/t/javascript-viewport-bzw-statemanager/64966/8 "2020-03-02T22:48:12Z")

</div>

Unter&nbsp;[https://academy.shopware.com/](https://academy.shopware.com/)&nbsp;gibt es im Template Training Advanced (SW6) in dem “Plugin Sticky Header” kurz um ViewportDetection (zum Ende hin).

Hab das allerdings nur kurz mal “durchgesprungen”. Geht in dem Beispiel darum rauszufinden, ob der Viewport ‘XS’, ‘SM’ oder&nbsp;‘MD’ ist, um ein JS Plugin dann zu laden oder halt nicht.
