Hallo zusammen, ich möchte gerne in den Einkaufswelten bei langen html-Seiten Anker verwenden und erreichen, dass zu diesen nicht gesprungen, sondern sanft gescrollt wird. Hier das verwendete Script: $(document).ready(function() { $('a[href\*=#]').on("click", function(event) { event.preventDefault(); var ziel = $(this).attr("href"); $('html,body').animate({ scrollTop: $(ziel).offset().top }, 2000 , function (){location.hash = ziel;}); }); return false; }); Wenn ich den Code in eine .js-Datei auslagere und über meine theme.php einbinde funktioniert es leider nicht. Wenn ich ihn direkt in der Einkaufswelt als plain-html (unter Umgehung des TinyMCE Editors) als Script einbinde, dann funktioniert es mal, mal geht es nicht. Meist beim ersten Mal geht es, sobald ich aber über die Navigation eine andere Seite auswähle und dann wieder zurück komme, geht es nicht mehr und es wird zum Anker gesprungen statt gescrollt. Hat jemand eine Idee oder generell das Thema sanftes Scrollen zu Ankern bereits gelöst? Ich habe leider im Forum nichts gefunden. Vielen Dank für Eure Hilfe vorab. Daniel
Das liegt daran, dass die EK nachgeladen wird. Versuch es mal mit http://api.jquery.com/ajaxcomplete/ Oder du lauschst auf das Event welches die EK nachlädt: https://developers.shopware.com/designe … t-observer
Super, vielen Dank für Deine Hilfe. Nun funktioniert es FAST wie gewollt. Kleines Problem: Es scrollt nun schön sanft an die richtige Stelle. Will ich aber nun z.B. mit der Maus weiter scrollen, dann will Shopware an dieser Stelle bleiben und springt dahin zurück. Erst nach ca. 40-50 Sekunden ist diese „Sperre“ aufgehoben, und ich kann normal auf der Seite weiter scrollen. Hast Du eine Idee, woran das liegen könnte? Vielen Dnak Daniel
So, jetzt geht’s. Ich hatte davor die Seite mit mehreren Einkaufswelten untereinander aufgebaut, und die Anker waren über die unterschiedlichen Einkaufswelten verteilt. Nun habe ich alles in nur 1 Einkaufswelt, jetzt geht es. Falls trotzdem jemand eine Idee hat, wieso das so ist und wie man es lösen kann, dann danke für einen Tipp. Es könnte ja mal sein, dass ich doch wieder mehrere Einkaufswelten parallel aufschalten möchte.
Kannst du die Seite posten damit man sich das Ergebnis ansehen kann? Gern auch per PN.
Hallo,
ich habe das gleiche Problem wie DaSan. Habe 2 Einkaufswelten untereinander und scrollt wunderbar smooth bis dorthin. Auch dann habe ich dort eine Sekunden lang eine „Sperre“. Weiss jemand Rat?
Der Link zur Arbeitsseite http://quicksuit.de/shopware-35/en/
In der Slideshow haben die Buttons der ersten beiden Slides einen Scrolllink zu den Einkaufswelten.
Danke schon mal LG Mike
Hallo,
ich habe auch das Problem mit dem direkten Springen.
Leider wurde nicht gepostet wo welches Script verändert wurde um das zu verhinden.
Kann das jemand nochmal posten?
Danke und VG Michael
ajaxStop() ist die Lösung, denke ich:
emotionLoaded = false;
$(document).ajaxStop(function()
{
if(!emotionLoaded)
{
/** Hier das Script */
emotionLoaded = true;
}
});
Ohne $(document).ready() dann…
Obiger Kommentar ist eigentlich recht unsauber, da es wie gesagt über die Events gelöst wird, oder werden sollte.
Hier die Lösung: https://forum.shopware.com/discussion/36794/jquery-aktivieren#Comment_159215
Hmmm,
danke aber es will noch nicht so richtig. Evtl war auch ein Fehler im Code von DaSan. Ich hatte da was geändert da der a[href*=#] und .top als Fehler in der Console angezeigt wurden. Ich hatte es auch schon mit document ready versucht. Ich hatte auch schon a[href*=//#] probiert, ohne Erfolg.
Kann es sein, dass das Script mit einer neueren Shopware Version nicht mehr geht?
Den Code hab ich als .js File eingebunden:
$.subscribe('plugin/swEmotionLoader/onLoadEmotionFinished', function() {
$('a[href*="#"]').on("click", function(event) {
event.preventDefault();
var ziel = $(this).attr("href");
$('html,body').animate({
scrollTop: $(ziel).offsetTop
}, 2000 , function (){location.hash = ziel;});
});
});
Ich komme dem Problem näher.
$.subscribe('plugin/swEmotionLoader/onLoadEmotionFinished', function() {
$('a[href*="#"]').on("click", function(event) {
event.preventDefault();
var ziel = $(this).attr("href");
$('html,body').animate({
scrollTop: $(ziel).offset().top
}, 2000 , function (){location.hash = ziel;});
});
});
Mit diesem Code sagt er mir:
Uncaught TypeError: Cannot read property ‚top‘ of undefined
Jemand eine Idee?
Oder kann man nicht einfacher den Sprung über 2 # Elemente bei Shopware abfangen?
In jquery.scroll.js und emotions.js ha ich nichts gefunden…
So, ich habe jetzt die Lösung. Das Scrollen wird im swStoryTelling Plugin verwaltet. Mit einem Override kann man hier die Funktion noAnimation überschreiben. Ich habe hier die scrollTo Funktion vollständig überschrieben. Es geht bestimmt auch eleganter mit nur einer Oprtionsänderung und me.superclass.scrollTo.apply(this, arguments). Allerdings hatte ich schon genug Zeit investiert und kann damit leben. Wer es mag, kann es ja noch etwas schlanker machen :)
Als eigenes Script einbinden:
(function ($){
$.overridePlugin('swStoryTelling', {
scrollTo: function (index, noAnimation) {
var me = this,
noAnim = noAnimation || false,
startIndex = (index <= 0),
endIndex = (index > me.sections),
i = (startIndex) ? 0 : (endIndex) ? me.sections + 1 : index,
scroll = (startIndex) ? 0 : (endIndex) ? me.offsetBottom : me.getSectionOffset(index),
hash = (startIndex) ? 'start' : (endIndex) ? 'bottom' : index;
me.activeIndex = i;
me.scroll(scroll); // ,noAnim entfernt
me.setActiveLink(i);
me.setUrlHash(hash);
//(noAnim) ? me.setVisibleContent(i) : delay($.proxy(me.setVisibleContent, me, i), 100);
$.publish('plugin/swStoryTelling/onScrollTo', [me, index, noAnimation]);
},
});
})(jQuery);
Wie genau kriege ich denn jetzt jQuery zum laufen nachdem die Einkaufswelt geladen ist?
$.subscribe(‚plugin/swEmotionLoader/onLoadEmotionFinished‘, function() {
alert(‚Test‘);
});
funktioniert bei mir nicht.