Ankerlink direkt auf Tab

[downset]

Hallo!

Vorab, ja ich habe in der Suche einiges gefunden. Ist aber wohl alles veraltet und funzt net wirklich.

Ich möchte in der product_info_tabs.html  einen Link/Anker einbauen, der (in meinem Fall) firekt auf den dritten tab leitet (sprich scroll an die Stelle und Öffnen des 3. Tabs).

Nutze die aktuelle 2er Version. Ist das irgendwie machbar?

Gruß

jens

Linkback: https://www.modified-shop.org/forum/index.php?topic=40616.0

[Timm]

Abend

Vielleicht kannst du aus diesen Vorschlägen was für dich ableiten, wo mir geholfen wurde einen Anker bei den Filtern im Artikellisting zu setzen.

Responsive Template für Modified

Gruß Timm

[sEdeMi]

Hallo!

Vorab, ja ich habe in der Suche einiges gefunden. Ist aber wohl alles veraltet und funzt net wirklich.

Ich möchte in der product_info_tabs.html  einen Link/Anker einbauen, der (in meinem Fall) firekt auf den dritten tab leitet (sprich scroll an die Stelle und Öffnen des 3. Tabs).

Nutze die aktuelle 2er Version. Ist das irgendwie machbar?

Gruß

jens

Schau mal hier: https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion

Dort findest Du die Info, wie das bei dem verwendeten jQuery Plugin geht.

[downset]

Hallo!
Alles was ich hin bekomme funktioniert leider nur nach nochmaligen Seitenreload...
Mal sehen ob ich es noch anders hinkriege...

[sEdeMi]

Mehr kann das Teil auch nicht und ist auch nicht dafür vorgesehen, dass man es von der gleichen Seite aus nutzen kann. Es können andere TAB Scripte auch nicht, was ich vielleicht hätte gleich dazusagen sollen. Du brauchst also zusätzlich noch einen Schnipsel der wie folgt aussehen könnte.

Code: Javascript  [Auswählen]

$("#link").click(function() {
    $("html, body").animate({
        scrollTop: $("#anker").offset().top + (-50)
    }, 500)
});

#link == die ID des Links von dem man aus zum jeweiligen TAB kommt. <a href="" id="link"> Idealerweise und damit der Link auch von extern oder von einer anderen Seite aus funktioniert, solltest Du die SMARTY Variable für die URL der Seite verwenden, die es standardmäßig aber nicht gibt. Füge also das folgende in die includes/modules/product_info.php nach Zeile 204 ein.

Code: PHP  [Auswählen]

$info_smarty->assign('PRODUCTS_LINK', xtc_href_link(FILENAME_PRODUCT_INFO, xtc_product_link($product->data['products_id'], $product->data['products_name'])));

Dann würde der HTML Kram in der Template Seite so aussehen.

<a href="{PRODUCTS_LINK}#anker" id="link">Linktext</a>

#anker == ist idealerweise die ID des TAB Menüs, also z.B. <ul id="anker">

top + (-50) == Mit der Zahl stellst Du die Pixel bis zu dem gescrolled werden soll, also der Abstand zum Tab vom oberen Rand des Browser Fensters, nachdem man auf den Link geklickt hat.

}, 500) == Mit der Zahl stellst die Geschwindigkeit ein wie schnell gescrolled werden soll

[downset]

Danke erstmal.

Bin erst jetzt dazu gekommen es zu probieren. Hatte leider keinen Erfolg.
Die URL der Seite und der Link auf den Tab werden richtig gebildet. Soweit so gut. Im template alles OK.
Das Javascript habe ich in eine Datei gepackt und lade es es über die general.js.php mit.

Effekt ist wie vorher. Erst nach Seitenreload wird der richtige TAb geöffnet. Was mache ich nur falsch? Stehe da echt ein wenig auf dem Schlauch.

Gruß

Jens

[sEdeMi]

Ich glaub ich weiß woran es liegt, aber um sicher gehen zu können, müsste ich mir das live anschauen können.

[downset]

http://p455261.webspaceconfig.de/product_info.php?products_id=2

Hier ist es der Link unter dem Deutschlandfähnchen rechts (Versand ins Ausland).

Wäre toll, wenn du das hinbekommst.

Danke im Voraus.

Gruß

Jens

[Tante Uschi]

Dir fehlt die Anweisung in der js den Tab zu öffnen ScrollTop sagt nur das er dahin scrollen soll, nicht aber den Tab zu öffnen, schau Dir mal das hier an, das sollte die Lösung beinhalten:

http://jsfiddle.net/Pr9hj/

Der Tab öffnet sich bei Dir nach dem Seitenrefresh da in der Url der Anker#horizontalTab3 direkt aufgerufen wird und genau diesen Refresh muss das js Schnippsel übernehmen, wie im Link.

Edith sagt: wenn Du dein versandkostenslider.js am Ende fertig hast, dann jag es noch über folgende Seite, speichere und rufe es dann so auf versandkostenslider.min.js, dann freut sich Tante Google:

https://javascript-minifier.com/

[sEdeMi]

@Tante Uschi

Das, was Du ansprichst ist doch schon im TAB Script enthalten....

[sEdeMi]

http://p455261.webspaceconfig.de/product_info.php?products_id=2

Hier ist es der Link unter dem Deutschlandfähnchen rechts (Versand ins Ausland).

Wäre toll, wenn du das hinbekommst.

Danke im Voraus.

Gruß

Jens

Ich hab auf die Schnelle schon ein paar Fehler entdeckt, kann aus der Distanz aber nicht sagen, ob diese Fehler die Ursache sind, aber fangen wir mal von vorne an.

1.) Dieses Scroll Script funktioniert schon mal nicht, weil Du es falsch eingebunden hast. Inline Scripting ist zwar nicht nur verpöhnt, sondern schon im Original Modified Shop ein No-Go hinsichtlich der Content Security Policy und aus Performance Gründen. Ich versteh nicht, warum man das auch in der kommenden Version nicht ändert?! Aber egal, pack dieses Scroll Script mal wie folgt in die jquery-1.8.3.min.js. Einfach das Nachfolgende reinkopieren.

Code: Javascript  [Auswählen]

$(document).ready(function(){
        $("#link").click(function() {
                $("html, body").animate({
                        scrollTop: $("#horizontalTab").offset().top + (-50)
                }, 500)
        });    
});

Wenn Du Dir diesen oben eingebundene Schnipsel anschaust, dann hat dieses eine andere ID als Du verwendet hast. #horizontalTab ist der Parent Container der das Tab Menü umschließt und eben nicht die ID des Tabs, das sich öffnen soll. Nimm bitte den Identifier "horizontalTab3" im betreffenden Tab wieder raus. Wenn Du das wie beschrieben geändert hast, dann sollte schon mal das Scroll Script wie gedacht funktionieren.

Dem TAB Menü verpasst Du dann einen Identifier, also z.B. <ul class="resp-tabs-list"> ändern in <ul class="resp-tabs-list" id="resp-tabs">

Ändere erstmal das, weil es dann leichter ist herauszufinden, ob dieses TAB Script nicht doch für das Gewünschte ungeeignet ist.

[GTB]

Hi,

das Problem ist, dass bei einem Ankerlink kein Seitenreload stattfindet und das Javascript in der tabs.js nicht mehr ausgeführt wird. Deshalb bleibt der Tab auch geschlossen und öffnet sich erst nach einem Seitenreload.

Ich würde an der Stelle mit einem onclick Event arbeiten.

Verpasse deinem Link eine id.

Code: PHP  [Auswählen]

<a id="tablink" ...

und füge das in deine general_bottom.js.php ein.

Code: Javascript  [Auswählen]

  $('#tablink').on('click', function() {
    var hash = $(this).attr('href').split('#')[1];
    var tabNr = parseInt(hash.replace('horizontalTab', '')) - 1;    
    $(".resp-tab-item").each(function( index ) {
      if ($(this).attr('aria-controls') == 'tab_item-'+tabNr) {
        $(this).trigger('click');
      }
    });      
  });

Gruss Gerhard

[sEdeMi]

@GTB

Das kannst Du nicht gänzlich ausschließen, wenngleich es in diesem Fall zutreffen könnte. Es gibt unzählige TAB Scripte bei denen es auch ohne Reload funktioniert. Problem ist aktuell nur, dass sich das nicht so ohne weiteres prüfen lässt, weil die Dokumentation dieses TAB Scriptes nicht wirklich hinreichend ist. Ich wundere mich nur, warum Ihr dieses nun wirklich nicht mehr "frische" TAB Script immer noch zumindest in der aktuellen Entwicklerversion verwendet....?!