Zu einem Anchor Tag in Artikelbeschreibung Tab springen

Shopware 5 Programmierung
1

Hallo liebes Forum,

ich habe auf der Artikel-Detailseite im Beschreibung Tab einen Anchor-Tag zu dem ich gerne per Klick hinspringen würde. Funktioniert nur leider nicht, weil der Tab ja mit Javascript nachgeladen wird. Sowohl über URL # als auch Javascript-Versuche hat irgendwie nicht gegriffen. Hat da jemand eine Idee wie ich in der Beschreibung im Tab zum Anchor Tag springen kann?

2

Hallo @KayPi‍,

wenn du im Beschreibungstext z.B. den folgenden Code implementiert: 

Sollte es eigentlich funktionieren, so lang der Tab geöffnet ist. Diesen Anker kannst du jetzt z.B. so aufrufen: www.deine_domain.de/hauptartikel-mit-abverkauf#example

Er sollte dann genau zu deinem Ankerpuntkt hin springen.

Hier ein kleiner Test: https://www.shopwaredemo.eu/lebensmittel/backwaren/11/hauptartikel-mit-abverkauf#example

VG

enerSpace Webhosting
Tel.: +49 511 - 219 568 76 | Web: https://www.enerspace.de

3

Vielen Dank enerSpace,

aber genau das funktioniert hier leider nicht. Unter dem Link:
C25 Crosstrainer & Ergometer vom Hersteller | AsVIVA

sollte die Seite eigentlich direkt zum Produktvideo gehen. Im Absatz darüber habe ich einen Anchortag mit name und ID „produktvideolink“ abgelegt.

Aber so funktioniert es aktuell leider nicht. Bin da auch ratlos und hatte vermutet, dass es mit dem nachladen von Javascript zu tun hat. Anscheinend ist die ID dort nicht im DOM vorhanden und kann auch nicht per Javascript oder Jquery angesprochen werden. Vielleicht hat jemand eine Idee dazu.

4

Hallo @KayPi‍,

du solltest darauf achten, dass deine ID nicht auch als NAME vorhanden ist. Bitte nehm den Linknamen raus oder benenne den Link anders. Dann sollte das auch funktionieren.

Falls nicht, nehm einfach mal die ID: “videolink” ohne NAME.

VG

enerSpace Webhosting
Tel.: +49 511 - 219 568 76 | Web: https://www.enerspace.de

5

Diese Varianten hatte ich auch schon durch. Auch solo mit id passiert nichts:

C25 Crosstrainer & Ergometer vom Hersteller | AsVIVA

 

6

Guten Abend @KayPi‍,

die ID darf im gesammten Quelltext nur ein einziges mal vorkommen. Ich sehe die ID zweimal.

Jetzt funktioniert auch bei mir der folgende Code ohne Probleme:

var hash = window.location.hash;
if(hash) {
	$("html, body").animate({
			scrollTop: $(hash).offset().top
	}, 2000);
}

VG

enerSpace Webhosting
Tel.: +49 511 - 219 568 76 | Web: https://www.enerspace.de

7

Hallo enerSpace,

hast du das im Editor eingebunden. Ich suche immer noch ein weg den ich verstehe.

Was heißt der Tab muss offen sein.

Habe in einer Einkaufswelt noch keinen Sprung nach untern geschafft.

Kann mir jemand helfen?

Gruß Thomas

8

Hallo Thomas,

wir haben das direkt in der Chrome Console getestet. Regulär lässt sich das relativ einfach übertragen.

Wenn der Marker springen soll, muss dieser auch wissen wohin. Wenn ein Tab nicht geöffnet ist, hat der Inhalt vermutlich ein „display: none“. Es kann nur in einen sichbaren Bereich gesprungen werden. Wenn der Tab somit unsichbar ist, weiß auch der Anker nicht wohin.

Um dir helfen zu können, müsste ich mir das einmal ansehen. Du kannst mir natürlich auch eine Private Nachricht zukommen lassen.

VG

enerSpace Webhosting
Tel.: +49 511 - 219 568 76 | Web: https://www.enerspace.de