Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: Ankerlink direkt auf Tab

    downset

    • Mitglied
    • Beiträge: 176
    Ankerlink direkt auf Tab
    am: 04. Dezember 2019, 20:15:05
    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

    FräuleinGarn

    • Fördermitglied
    • Beiträge: 4.019
    Re: Ankerlink direkt auf Tab
    Antwort #1 am: 04. Dezember 2019, 23:00:41
    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

    • Mitglied
    • Beiträge: 143
    Re: Ankerlink direkt auf Tab
    Antwort #2 am: 05. Dezember 2019, 11:11:13
    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

    • Mitglied
    • Beiträge: 176
    Re: Ankerlink direkt auf Tab
    Antwort #3 am: 05. Dezember 2019, 19:25:25
    Hallo!
    Alles was ich hin bekomme funktioniert leider nur nach nochmaligen Seitenreload...
    Mal sehen ob ich es noch anders hinkriege...

    sEdeMi

    • Mitglied
    • Beiträge: 143
    Re: Ankerlink direkt auf Tab
    Antwort #4 am: 05. Dezember 2019, 19:53:48
    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

    • Mitglied
    • Beiträge: 176
    Re: Ankerlink direkt auf Tab
    Antwort #5 am: 11. Dezember 2019, 19:57:55
    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

    • Mitglied
    • Beiträge: 143
    Re: Ankerlink direkt auf Tab
    Antwort #6 am: 11. Dezember 2019, 20:15:36
    Ich glaub ich weiß woran es liegt, aber um sicher gehen zu können, müsste ich mir das live anschauen können.

    downset

    • Mitglied
    • Beiträge: 176
    Re: Ankerlink direkt auf Tab
    Antwort #7 am: 11. Dezember 2019, 22:16:43
    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

    • Fördermitglied
    • Beiträge: 157
    Re: Ankerlink direkt auf Tab
    Antwort #8 am: 11. Dezember 2019, 23:22:06
    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

    • Mitglied
    • Beiträge: 143
    Re: Ankerlink direkt auf Tab
    Antwort #9 am: 12. Dezember 2019, 06:42:27
    @Tante Uschi

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

    sEdeMi

    • Mitglied
    • Beiträge: 143
    Re: Ankerlink direkt auf Tab
    Antwort #10 am: 12. Dezember 2019, 08:04:38
    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

    • modified Team
    • Gravatar
    • Beiträge: 5.497
    • Geschlecht:
    Re: Ankerlink direkt auf Tab
    Antwort #11 am: 12. Dezember 2019, 08:40:08
    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

    • Mitglied
    • Beiträge: 143
    Re: Ankerlink direkt auf Tab
    Antwort #12 am: 12. Dezember 2019, 11:42:34
    @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....?!
    2 Antworten
    1239 Aufrufe
    24. November 2014, 09:40:03 von timopaul
    6 Antworten
    3806 Aufrufe
    09. April 2012, 09:48:45 von didi-tec
    18 Antworten
    5109 Aufrufe
    21. November 2014, 09:36:37 von ShopUser
    11 Antworten
    3634 Aufrufe
    03. Dezember 2011, 18:27:58 von h-h-h