Link auf Einkaufswelt mit Anker

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?

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.

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
 

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.

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 :wink:

2 „Gefällt mir“

vielen vielen Dank, werde es morgen direkt mal ausprobieren! :slight_smile:

Edit: Funktioniert wunderbar, nochmals Danke!

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

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();
        });
    });

});

 

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

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.

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.

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

@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

 

@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:

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

@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)

@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  Sticking-out-tongue

@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.

vielen Dank, funktionieret auch bei mir in die Einkaufswelten.

 

 

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

@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?