Neu [Shop 4.04] Ankerlinks in einer Seite funktionieren nicht: Seite scrollt und ?isAjax

[Xantiva]

Hallo zusammen,

ich habe schon den Thread zu den Ankerlinks in der 4.03.1 gefunden, aber der passt auch nicht richtig.

Ich habe meine Kategoriebeschreibung aufgeteilt, so dass ein Teaser oben, über den Produkten angezeigt wird und der Rest unterhalb. Am Ende des Teasers ist ein Link zu einem Anker, der genau über dem unteren Teil der Beschreibung platziert ist. Jetzt zeigt der Shop folgendes, unterschiedliches Verhalten:

• Steuere ich den Anker von einer externen Seite an, ist alles in Ordnung.
• Klicke ich aber auf der Seite selber auf den Link zum Anker (der Link ist absolut, nicht nur der Anker) dann passieren folgende Dinge:
  • Der Browser springt nach unten zum Anker und scrollt dann aber sofort wieder nach oben und
  • der Link zum Anker ist modifiziert worden und enthält jetzt ein GET-Parameter ohne Wert: ?isAjax . Wenn ich jetzt noch mal drauf klicke, wird die Seite neu geladen der Shop ist "kaputt". Header und Footer fehlen im Quellcode.

Wieso fügt der Shop den GET-Parameter isAjax in die URL ein?
Welches JavaScript sorgt dafür, dass der Browser wieder zurück scrollt?

Das ist der Test-Shop (der möglichst nicht indiziert werden soll): jtlfree.basteln -selbermachen. de/Schablonieren/Dekor-Schablonen-XL

Danke,
Mike

 

[FPrüfer]

Hallo,
leider funktionieren relative Ankerlinks durch das Base-Tag nicht. (siehe dazu: https://gitlab.jtl-software.de/jtlshop/shop4/issues/147) Mit der Version 4.05 wird das verbessert und ein "sanftes" Scrollen per Javascript ausgeführt.

 

[Xantiva]

Ich rede nicht von relativen Ankerlinks. Die Links werden - wie bereits geschrieben - absolut inkl. Domain angegeben und funktionieren nicht!

Aber, was ich gestern noch herausgefunden habe: Das Problem besteht nicht auf den reinen Kategorieseiten ohne Produkte und auf Seiten mit Produkten gibt es auch unterschiedliche Fehler ...

In dem oben genannten Shop:

• /Schablonieren/Metall-Struktur-Effekte
  Der absolute Ankerlink funktioniert und kann mehrfach verwendet werden.
• /Schablonieren/Dekor-Schablonen-XL
  Der absolute Ankerlink funktioniert nicht, bzw. der Browser springt nach unten, aber eine Animation der Produktliste sorgt dafür, das er sofort wieder nach oben scrollt. Dazu wird der Ankerlink dann noch per JS modifiziert (isAjax), so das er danach nicht nochmal genutzt werden kann (=> Ergbnis als AjaxResponse, ohne Header und Footer).
  

Ich weiß nicht, ob Ihr Euern Fix auch auf Produktseiten getestet habt?

 

[FPrüfer]

Hallo,

Ich rede nicht von relativen Ankerlinks. Die Links werden - wie bereits geschrieben - absolut inkl. Domain angegeben und funktionieren nicht!

Ja das habe ich verstanden! Das Problem ist jedoch, dass absolute Links vom Shop ggfs. eigenständig per JS gerendert werden, um Inhalt per AJAX nachzuladen - so eben auch bei der Kategorieansicht mit Produkten. Das andere Problem ist, dass - wg. dem Base-Tag - relative, einfache Ankerlinks in "Unterverzeichnissen" (/Schablonieren/) nicht funktionieren, da sie durch dieses Tag IMMER auf das Base-Verzeichnis linken. Für dieses Dilemma haben wir nach einer Lösung gesucht und uns für ein JS-Scrolling entschieden, welches mit der Version 4.05 eingeführt wird. (Siehe dazu meinen Link im vorhergehenden Post.) Sie können natürlich die JS-Änderungen aus dem Commit https://gitlab.jtl-software.de/jtlshop/shop4/commit/bf3f3793f8c709423226c22dc63746ca9b925193 gerne auf eigene Verantwortung schon vorab einbauen. Ich habe das gerade mit einem 4.04er Shop getestet - und ja auch auf Produktseiten . Sollten Sie sich für diesen Weg entscheiden, dann muß natürlich auch der Ankerlink relativiert werden - also zu #more ohne Domain und Pfad.

 

[Xantiva]

Vielleicht verstehe ich es auch nicht ...

Wie muss der Link zum Anker nun aussehen? Absolut mit Domain, oder relativ zum webroot?

Das Problem ist jedoch, dass absolute Links vom Shop ggfs. eigenständig per JS gerendert werden, um Inhalt per AJAX nachzuladen - so eben auch bei der Kategorieansicht mit Produkten.

Nachdem nur der Fix keine Änderung gebracht hat, habe ich die komplette jtl.evo.js ausgetauscht:

Die Links werden auch verändert (isAjax), wenn ich nur relative URLs angebe: /Schablonieren/Dekor-Schablonen-XL#more

Das Scrollverhalten ist weiter falsch. Er scrollt immer wieder nach oben.

(Oder reicht der Austausch der jtl.evo.js nicht?)

 

[ag-websolutions.de]

<a href="#section1">Kapitel 1</a>

und

<foo id="section1">Hier das Sprungziel</foo>

 

[Xantiva]

Danke, das war der springende Punkt:

<foo id="section1">Hier das Sprungziel</foo>

Mein Anker hatte noch die veraltete Schreibweise mit

<a name="section1">Hier das Sprungziel</a>

Da hat das JavaScript nicht gegriffen.

<a href="#section1">Kapitel 1</a>

Ok, mit dem "nackten" Anker funktioniert es jetzt, aber dass Vorgehen verbietet sich eigentlich aus SEO-Gründen: Durch den base zeigt der Link nun auf example.com/#more und nicht mehr auf die Unterseite. Ich bezeifle, dass die Crawler dieses JavaScript auswerten, wenn da ein normaler Link zu einem Anker vorhanden ist. Ich möchte auf Contentseite die Ankerlinks ja nicht nur für die User, sondern auch für die Suchmaschine platzieren. Damit Google auch seine "Weiter zu" Links anzeigen kann:

 

[Xantiva]

Hallo @FPrüfer ,

ich hatte ja zum Test im 4.04'er Shop die jtl.evo.js ausgetauscht. Ich habe gerade festgestellt, dass das noch an anderer Stelle eine (negative) Auswirkung hat:

Ich kann mit der neuen Version der Datei keine Hauptmenüpunkte im MegaMenü mehr öffnen, die noch über Unterkategorien verfügen. Klicke ich auf "Bänder & Kordeln", dann öffnet und schließt sich das Megamenu, aber die Kategorieseite wird nicht geöffnet.

Keine Ahnung, ob das nur daran liegt, dass ich nur die eine Datei ausgetauscht habe. Wenn Ihr für solche Effekte gerade nicht mit coded-UI-Tests arbeitet - vielleicht einfach mal austesten ...

 

[FPrüfer]

Hallo, klickt man im Megamenü auf den Namen einer Kategorie, dann wird die Kategorieseite aufgerufen. Klickt man dagegen nur auf den Pfeil rechts neben dem Kategorienamen, dann wird nur das Menü auf- und zugeklappt.