Hallo,
ich habe mir ein eigenes Theme mit php bin/console theme:create erstellt. Meine styles kann ich auch kompilieren. Jetzt will ich aber natürlich auch Javascript in mein Theme einbauen und soweit ich das bisher verstanden habe muss ./psh.phar storefront:build ausgeführt werden um das Script zu “kompilieren”, richtig?
Frage: wo genau kann ich diesen Command ausführen, in welchem Verzeichnis? Stehe da wie der Ochse vorm Berg…
Danke schon mal…
LG Basti
Die psh.phar steht nur in der Developer Version zur Verfügung, entsprechend findest du diese Datei nicht im offiziellen EA Release. Im Normalfall werden durch das Kompilieren des Themes die nötigen CSS / JS Dateien erstellt.
Hast du das Javascript in die “all.js” in storefront/dist/script deines Theme-Plugins platziert? Nach einem bin/console theme:compile wird dies dann auch kompiliert.
Als Verständnisfrage: Das psh.phar macht doch nur Sinn wenn man schnell etwas entwicklen will und macht nur Sinn für Developermodus? Oder?
Danke und Gruss
Hallo Andre,
danke für Deine schnelle Antwort. Ja in der “all.js” in storefront/dist/script liegt das. Wenn ich da einen Alert reinschreibe gehts auch.
In meinem Fall gehts um ein jQuery Smooth Scroll. Soweit ich gesehen habe ist jQuery bereits in Shopware installiert. Wenn ich nochmal jQuery und mein Script mit
Wenn ich nochmal jQuery und mein Script mit in die footer.html.twig einbaue gehts auch.
Dann ist es aber extra/ausserhalb vom Hauptjs und jQuery.
. Wie also bekomme ich das hin das das Script in der all.js auch ausgeführt wird?
Mittels Eventlistener und indem du es IN die all.js schreibst, und nicht ins Theme.
Danke @brettvormkopp,
ich habe alles in der all.js und es funzt. Aber ich habe da auch den Code der jquery.js dort reingeschrieben. hab also jetzt eine Datei mit 10000 Zeilen. Es muss doch möglich sein die jquery.js ausserhalb und vor der all.js zu laden, bzw auf die bereits in SW integrierte Version zu zu greifen. Hab die jquery.js auch mal über die theme.json eingebunden, geht nichts.
Wo ist da der Fehler (bin kein Supercrack)
LG Basti
Eine jQuery brauchst du dort nicht hinzufügen. Die jQueryVersion 3.4.1 ist da schon drin. Ich habe keine Ahnung wie dein Code aussieht. ggf ist da etwas nicht korrekt.
Das Ding ist, das es nicht funktioniert wenn ich da nicht eine jquery.js davor einbinde. Mein Code ist nichts besonderes:
jQuery(document).ready(function($) {
// Smooth Scroll
$(function() {
$('a[href*="#"]:not([href="#review-tab-pane"]):not([href="#description-tab-pane"]):not([href="#tab-additional_information"]):not([href="#tab-description"]):not([href="#reviews"]):not([href="#carouselExampleIndicators"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length
? target
: $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
// Change your offset according to your navbar height
scrollTop: target.offset().top - 64
}, 1000);
return !1
}
}
})
});
});
gibts in Sw6 noch das “document.asyncReady(function()…)” ?
gibts in Sw6 noch das „document.asyncReady(function()…)“ ?
Anscheinend leider nicht mehr, jedenfalls funktioniert es bei mir nicht.
Hey zusammen,
bitte beachtet dass wir jQuery 3.4.1 in der Slim Variante im Einsatz haben. Im Unterschied zum Full Build fehlen hier das @craftwerk wie ich in deinen Code sehe verwendest du hier die „animate“-Methode, die nicht im Slim Build enthalten ist.
Viele Grüße,
Stephan 
Hallo [@Stephan Pohl](http://forum.shopware.com/profile/2/Stephan Pohl “Stephan Pohl”),
danke für Deine Antwort. Dann muss ich also jQuery nochmal einbinden, richtig? Wenn ja, ist es dann möglich die jquery.min.js auszulagern und nicht direkt in die all.js zu schreiben? Habe es versucht und in der theme.json eingetragen. Funktioniert nicht, sowohl vor der all.js wie auch danach.
LG Basti
Hey @craftwerk
du hast mehrere Möglichkeiten. Entweder du bindest jQuery neu ein aber diesen Weg würde persönlich einen anderen Weg gehen. Du kannst in der Webpack Config statt jQuery Slim durch den Fullbuild ersetzen. Hier die entsprechende Datei: https://github.com/shopware/platform/blob/master/src/Storefront/Resources/build/webpack.base.config.js
Bitte sei dir hierbei aber bewusst dass ggf. Änderung von unsererseits durchgeführt werden und deine Änderungen an dieser Datei durch ein Update hinfällig werden. Entsprechend ist dies eher als ein Hotfix anzusehen.
Ein besserer Weg wäre es den Code entsprechend umzubauen, dass kein „animate“ mehr verwendet. „window.scrollTo“ unterstützt mittlerweile ein Scroll-Behavior, welches das gleiche Verhalten aufweist: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Examples
Viele Grüße,
Stephan
Hallo [@Stephan Pohl](http://forum.shopware.com/profile/2/Stephan Pohl „Stephan Pohl“),
danke, damit kann ich was anfangen. Letzte Frage: Das
document.asyncReady(function() {
// Stuff here
});
ist in SW6 noch drin?
LG Basti
Hallo [@Stephan Pohl](http://forum.shopware.com/profile/2/Stephan Pohl „Stephan Pohl“),
danke, damit kann ich was anfangen. Letzte Frage: Das
document.asyncReady(function() {
// Stuff here
});ist in SW6 noch drin?
LG Basti
Hey Basti,
aktuell ist diese Methode noch nicht implementiert. Der Varianten-Wechsel funktioniert aktuell über einen harten Reload. Die Methode wurde für den AJAX Variantenwechsel benötigt. Falls du dennoch mitbekommen möchtest ob eine Variante gewählt wurde kannst du auf das „onChange“ Event vom „VariantSwitchPlugin“ hören und entsprechend deine Logik implementieren.
Viele Grüße,
Stephan 
Hallo @craftwerk - ich habe auch das jQuery/slim-Problem und habe dazu ein Ticket eröffnet. Wenn Du magst, vote doch dafür, dann steigt die Chance einer Umsetzung: https://issues.shopware.com/issues/NEXT-4368
@netzperfekt
ist erledigt