Link auf Einkaufswelt mit Anker

iLuHa · 7. September 2016 um 08:59

Hallo zusammen,

wir versuchen aktuell innerhalb einer Einkaufswelt einen Link auf eine andere Einkaufswelt zu setzen.
Zusätzlich soll hier ein Anker verwendet werden, damit die Seite direkt zur entsprechenden Stelle innerhalb der Einkaufswelt springt.

Leider öffnet er die Einkaufswelt aber immer ganz normal (ganz oben).

Die URL sieht wie folgt aus: www.domain.com/einkaufswelt/#anker

Wenn ich den Anker innerhalb der Einkaufswelt selbst aufrufe, funktioniert dies problemlos.
Versuche ich aber den Anker aus einer anderen Einkaufswelt aufzurufen, ruft er mir die Einkaufswelt auf ohne zum Anker zu springen.

Woran könnte das liegen?

iLuHa · 7. September 2016 um 13:48

Ok, muss wohl per JavaScript realisiert werden, da die Einkaufswelten per JS nachgeladen werden und die Anker zum Zeitpunkt der Standard-Funktion noch nicht geladen sind.

Wurde nun mit einem JS-Skript realisiert.

echse · 14. Oktober 2016 um 10:22

Hallo,

ist zwar schon ein wenig her das Thema aber hast du dafür eine Lösung gefunden bzw. hat das mit dem JS funktioniert?
Falls du deine Lösung nicht teilen möchtest würdest du eventuell trotzdem einmal genauer erklären wie und wo genau dies umgesetzt wurde?

Vielen Dank.
LG
Tim

iLuHa · 14. Oktober 2016 um 21:21

Ja die Lösung mit JavaScript hat so weit funktioniert.

Wie genau ich das gelöst habe müsste ich am Montag mal nachsehen, gebe anschließend gerne nochmal Rückmeldung.

iLuHa · 17. Oktober 2016 um 11:51

So, nochmal zur Umsetzung mit JavaScript.

Ich bin das Ganze wie folgt angegangen und habe eine JS-Datei erstellt mit folgendem Inhalt:

function scrollToAnker() {
    if(location.hash) {
        var anker = $('a[name='+location.hash.substr(1)+']');
        if($(anker).offset()) {
            $("html, body").animate({
                scrollTop: $(anker).offset().top
            }, 100);
        }
    }
}

$(document).ready(function() {
    $.subscribe("plugin/swEmotionLoader/onLoadEmotionFinished", function(me) {
        scrollToAnker();
    });
});

Die JavaScript Datei muss dann natürlich noch im Template entsprechend eingebunden wurde.
Ich hab dies in der index/index.tpl von meinem Theme gemacht.

Ich hoffe ich konnte dir damit helfen

echse · 17. Oktober 2016 um 13:25

vielen vielen Dank, werde es morgen direkt mal ausprobieren!

Edit: Funktioniert wunderbar, nochmals Danke!

shopmax · 9. März 2018 um 18:51

Hallo iLuHa,

vielen Dank für deinen Input. Aber irgendwie funktioniert das bei mir nicht. Nach mehreren Reloads dann manchmal schon (als ob js zunächst nicht geladen wird) und bei Chrome gar nicht (wobei das vermutlich eher an dem bekannten Hashproblem von Chrome liegt, was öfters diskutiert wird). Ist der oben beschriebene Code in der aktuellen Shopwareversion bei dir in allen Browsern noch funktionsfähig?

Vielen Dank schon mal

iLuHa · 13. März 2018 um 08:28

Hallo @shopmax‍,

bei uns funktioniert diese Lösung auch mit Chrome.
Ich verwende hauptsächlich den Google Chrome Browser und habe es damit eben nochmal bei uns getestet, konnte aber keine Probleme feststellen.

Welche Shopware Version verwendet Ihr?
Evtl. wird das Problem durch das Async-JS von Shopware > 5.3 ausgelöst? (Wir verwenden bei uns aktuell Shopware 5.3.4)

Ich habe mein Skript wie folgt für das Async angepasst, vielleicht hilft das weiter.

document.asyncReady(function(){

    function scrollToAnker() {
        if(location.hash) {
            var anker = $('a[name='+location.hash.substr(1)+']');
            if($(anker).offset()) {
                $("html, body").animate({
                    scrollTop: $(anker).offset().top
                }, 100);
            }
        }
    }

    $(document).ready(function() {
        $.subscribe("plugin/swEmotionLoader/onLoadEmotionFinished", function(me) {
            scrollToAnker();
        });
    });

});

ELL · 15. März 2018 um 15:58

Hallo @iLuHa‍

vielen Dank für dein JS. Als ich das heute versucht habe einzubinden, hat meine Shopseite nicht mehr geladen und mich zur Startseite katapultiert. Hast Du eine Idee, woran das liegen kann?

Eingebunden habe ich das JS wie folgt:

In meinem Theme habe ich eine header.tpl angelegt und ergänzt:

{extends file="parent:frontend/index/header.tpl"}

{block name="frontend_index_header_javascript_jquery"" append}
   
{/block}

In meinem Theme Ordner
/themes/Frontend/MeinTheme/frontend/_public/src/js/

habe ich die JS Datei abgelegt mit dem Inhalt:

document.asyncReady(function(){

    function scrollToAnker() {
        if(location.hash) {
            var anker = $('a[name='+location.hash.substr(1)+']');
            if($(anker).offset()) {
                $("html, body").animate({
                    scrollTop: $(anker).offset().top
                }, 100);
            }
        }
    }

    $(document).ready(function() {
        $.subscribe("plugin/swEmotionLoader/onLoadEmotionFinished", function(me) {
            scrollToAnker();
        });
    });

});

Anschließend natürlich Cache geleert und Themes kompliiert. Das Ergebnis war eben, dass ich die Einkaufswelt nicht mehr aufrufen konnte und zur Startseite zurückgeworfen wurde. Würde mich über einen Tipp freuen. Vielen Dank!

ELL

Moritz_Naczenski · 15. März 2018 um 17:56

Wenn du Javascript in Smarty verwendest, musst du das in einen {literal}{/literal}-Tag passen, sonst machen die geschweiften Klammern Probleme. Kannst ja mal versuchen.

shopmax · 15. März 2018 um 19:36

Komisch, komisch,
leider klappt es nicht.
Der Shop läuft auch auf 5.3.4.
Dein JS-Code lliegt 1:1 wie bei dir unter /frontend/_public/src/js
und die Einbindung erfolgt über die theme.php mit
protected $javascript = [
‚src/js/anker_scroll.js‘
];

Habe bspw. auf der Startseite einen Link https://www.domain.de/kontakt/#telefon und auf der Seite /kontakt eine

telefon

(der Anker kommt auch nur 1x vor)aber wenn ich auf den Link klicke lande ich einfach am oberen Ende von /kontakt und nicht beim enstprechenden Anker.

malzfons · 15. März 2018 um 19:50

Bindet ihr den Anker denn auch mit dem ankersymbol des tiny Editor ein?

iLuHa · 16. März 2018 um 07:48

@ELL‍ der Block “frontend_index_header_javascript_jquery” befindet sich unter index/index.tpl, nicht header.tpl

@shopmax‍ ich habe die JavaScript File über mein Custom Theme eingebunden unter “index/index.tpl” im Block “frontend_index_header_javascript_jquery” (Sollte über die Theme.php aber auch problemlos funktionieren)
Das sieht ungefähr so aus:

{extends file="parent:frontend/index/index.tpl"}

[...]

{block name="frontend_index_header_javascript_jquery"}
    {$smarty.block.parent}
    
{/block}

Wir setzen diese wie folgt:

Über uns

ELL · 16. März 2018 um 08:47

@iLuHa‍ : da war mein Fehler – vielen Dank!
Jetzt wird das JS geladen (Source liegt im Dev.Tool vor). Leider funktioniert die Positionierung nicht ganz richtig. Wenn ich die Seite aufrufe springt er ein Stück nach unten, jedoch nicht an die korrekte Stelle des Ankers. Hier ein Screenshot:

Die Seite ist über diesen Link zu erreichen: https://shop.ellerfoodpackaging.de/get-the-best/burger-packaging
Der Anker ist erstellt als:
Aufruf des Ankers über:
https://shop.ellerfoodpackaging.de/get-the-best/burger-packaging#liefer

Manchmal klappt es, manchmal nicht. :-S Vielen Dank für eure Hilfe!
ELL

iLuHa · 16. März 2018 um 09:12

@ELL‍ Ich kann das Problem nachstellen bei mir.

Ich vermute mal es liegt daran, dass der “Scroll” Vorgang zu früh greift, und diverse Bilder (nachdem die Seite bereits zur richtigen Stelle gescrollt ist) nachgeladen werden.
Ab und zu sehe ich (für einen ganz kurzen Augenblick) beim Aufruf der URL, dass er zuerst an der richtigen Stelle steht, dann aber doch an eine andere Stelle springt.

Evtl. versuchen die Funktion etwas verspätet aufrufen zu lassen oder etwas in dieser Richtung

(Wenn die Seite aufgerufen wird aber an der falschen Stelle landet, dann sieht es aus, als würde er zuerst ans Ende der Seite scrollen und dadurch, dass dann die Bilder nachgeladen werden, wieder hoch hüpfen, weil er bereits an die nötige Stelle gescrollt hat, der Inhalt sich aber durch die Bilder verlängert)

ELL · 16. März 2018 um 09:57

@iLuHa‍

Danke für deine Rückmeldung. Kann ich das JS mit einem onload Event verzögert aufrufen oder lieber mit einem Delay?
Was wäre denn die technisch schönste/beste Lösung? JavaScript ist nicht gerade mein Steckenpferd

shopmax · 16. März 2018 um 17:57

@malzfons‍

Vielen Dank für eure Unterstützung. Ich habe mich heute etwas in js (war bisher völliger Laie) und den obigen code eingearbeitet und meinen Hauptfehler gefunden. Meine Ankerung läuft über id´s nicht über den a-tag. Entsprechend klappt´s mit folgenden Veränderung:

var anker = $("[id='+location.hash.substr(1)+']");

Aber, es taucht in der Tat auch das gleiche Problem wie bei ELL auf, dass die Positionierung manchmal falsch ist. Wenn ich dann einen Reload der Seite mache, klappt es. Ist vermutlich wirklich zeitliches Ladeproblem. Deswegen würde ich mich sehr gerne der Frage von ELL anschließen, ob es denn da die Möglichkeit einer wie auch immer gearteten Verzögerung gibt. Herzlichen Dank schon mal.

lappies · 17. März 2018 um 10:17

vielen Dank, funktionieret auch bei mir in die Einkaufswelten.

lappies · 18. März 2018 um 08:48

Es geht allerdings nicht auf mein Samsung Handy, geht es denn bei euch im Mobile ansicht?

shopmax · 18. März 2018 um 08:55

@lappies‍ Ich habe es gerade auf Samsung A3 mit Chrome getestet. Da geht´s (bis auf das oben beschriebenen Verzögerungsproblem). Werden bei dir vielleicht in Mobile evtl. andere Einkaufswelten geladen bzw. findest du, wenn du auf dem Rechner in den Chrome Developertools den Viewport auf Mobile stellst, die Anker auf der Seite?

Thema		Antworten	Aufrufe
Einkaufswelt (Javascript erzeugte Elemente) in html wandeln Administration	8	437	7. Oktober 2018
Link im Hauptmenü verweist auf Einkaufswelt Allgemein	5	611	27. April 2016
Einkaufswelten ohne Javascript Shopware 3.5 general	4	1217	21. September 2016
Einkaufswelt auf Seite anspringen Allgemein	4	615	13. März 2016
Anker setzen für bestimmte Positionen in Einkaufswelten m. HTML funktioniert nicht. Wie realisieren? Themes & Design	4	1042	10. September 2016

Link auf Einkaufswelt mit Anker

Verwandte Themen