Direktverlinkung auf Tabs

[Glera77]

Hallo,

ich wollte mal nachfragen, ob es möglich ist, auf einen Tab direkt zu verlinken in der Produktdetailansicht.

Bin waehrend der Suche nur auf einen Demoshop gestossen, aber das dazugehörige Modul hat damit leider nix zu tun gehabt, und half auch nicht weiter, aber ich benutze es mal zum besseren Verstaendnis.

https://demo.modified-shop.org/trunk/Testkategorie-1/Testartikel-1::1.html

hier landet man ganz normal auf der Ansicht.

und hier:

https://demo.modified-shop.org/trunk/Testkategorie-1/Testartikel-1::1.html#tab_more_images

landet man auf dem gleichen produkt, nur das da der Reiter "Mehr Bilder" geöffnet ist.

Wie gesagt, es geht darum, innerhalb der Produktdetails einen Button zb zu setzen, der direkt auf einen Tab linkt und den natuerlich öffnet, sobald man auf den Button klickt.

Danke schon mal im vorraus

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

[WayneTsun]

Hi Glera77,

wenn das im Trunk zu finden ist, dann wird es wohl in der kommenden Version verwendet werden.

Ich hatte mir das mal zusammengebastelt. Keine Garantie, dass das perfekt so ist, aber es funktionierte.

In die /includes/modules/product_info.php einsetzen:

Code: PHP  [Auswählen]

  $tab_link = xtc_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $product->data['products_id'] . '&action=\'\'&' . xtc_session_name() . '=' . xtc_session_id() . '#tab_more_images', $request_type, TRUE);
  $info_smarty->assign('BUTTON_TAB', '<a href="' . $tab_link . '">' . xtc_image_button('button_tab.gif', IMAGE_BUTTON_TAB) . '</a>');
 

dann in der /DeinTemplate/modules/product_info/product_info_tabs_v1.html einfügen an gewünschter Stelle:

Code: PHP  [Auswählen]

{$BUTTON_TAB}

Du solltest ein button_tab.gif noch in das Buttonsverzeichnis legen und IMAGE_BUTTON_TAB in der /lang/*language*/language.php definieren. Dann sollte das gehen.

Beste Grüße,
Wayne

PS: Der Link ging bei mir aber in ein Formular, das in dem Tab steckte. Daher das "action". Vielleicht kann hier einer der Profis noch korrigieren.

[Marcus Kreusch]

Noch eine Alternative von mir:

In /templates/DEINTEMPLATE/general.js.php zwischen jQuery und Thickbox das hier einfügen:

Code: XML  [Auswählen]

<script type="text/javascript">
    $(document).ready(function(){
        $('.openTab').click(function(e){
            e.preventDefault();
            var href = $(this).attr('href');
            $('.ui-tabs-nav a[href="'+href+'"]').click();
            $('html, body').animate({ scrollTop:  $('.ui-tabs-nav a[href="'+href+'"]').offset().top }, 300);
        });
    });
</script>  

Der Link sollte dann so aussehen:

Code: XML  [Auswählen]

<a href="#tab_more_images" class="openTab">Bilder anzeigen</a>

"href" muss in diesem Fall mit dem des entsprechenden Tabs übereinstimmen...

Vorteile:
HTML Syntax ist i.O.
Ein kleiner Scroll-Effekt zeigt dem Nutzer was passiert (Geschwindigkeit verbirgt sich hinter der 300 - je größer desto langsamer)

Viele Grüße
Marcus

[WayneTsun]

@Marcus
Ist deutlich besser weil im Template und nicht im Code und einfacher einzubauen. 

Beste Grüße,
Wayne

[Glera77]

Vielen Dank euch beiden. Ich hab die Version von MK genommen und funktioniert super.

Besten Dank

[voodoopupp]

Noch eine Alternative von mir:

In /templates/DEINTEMPLATE/general.js.php zwischen jQuery und Thickbox das hier einfügen:
...

Hi Marcus,

funktioniert sehr gut, nur eine Frage: warum zwischen jquery und Thickbox einfügen? Warum nicht woanders? Gibt es sonst Probleme?

Grüße
Dominik

[noRiddle (revilonetz)]

Es gibt eine ganz einfache Variante.
Diesen Code in die jquery-ui.js unter allem anderen Code einfügen.

Code: Javascript  [Auswählen]

/*BOC added to be able to link directly to tab contents, noRiddle*/
var hash = window.location.hash;
if(hash != 0)
{
setTimeout(function() {if (location.hash) {window.scrollTo(0, 380);}}, 1);
$(hash).bind('click', function(e) {e.preventDefault();}).trigger('click');
}
/*EOC added to be able to link directly to tab contents*/

Der Wert 380 ist der y-Wert und muß an die Gegebenheiten angepasst werden. Er dient dazu zu bestimmen wo die Seite stehen bleibt damit der Tab nach Link-Aufruf nicht oben am Browser-Fenster klebt.

Alle Varianten haben den Nachteil, daß man nicht von der selben Seite aus in einen Tab linken kann sondern nur von externen Seiten (auch shop-interne andere Seiten).
Von der selben Seite aus reagiert der Link mit Öffnen des Tabs erst nach einem Reload der Seite.
Für die meisten Ansprüche reicht das aber ja auch.

Ich selbst benutze ein eigene Plugin für Tabs welches

• mit einem Bruchteil an Code auskommt
• die aufgeblasene jQuery-UI nicht benötigt
• auch Links in Tabs von der selben Seite zulässt
  und
• meine bekannte Erweiterung für die Erstellung beliebig vieler Tabs über den Backend-Editor beinhaltet.

Das Teil gibt's jedoch nicht für lau .

Gruß,
noRiddle

[voodoopupp]

...
Alle Varianten haben den Nachteil, daß man nicht von der selben Seite aus in einen Tab linken kann sondern nur von externen Seiten (auch shop-interne andere Seiten).
Von der selben Seite aus reagiert der Link mit Öffnen des Tabs erst nach einem Reload der Seite.
Für die meisten Ansprüche reicht das aber ja auch.
...

Wobei die Versionvon MK direkt auf der gleichen Seite funktioniert: einfach mal hier oben rechts in der "Preisbox" auf 1 Bewertung klicken
http://www.spuersinn24.com/Nuss-Draengler-im-Umschlag::1095.html

Grüße
Dominik

[noRiddle (revilonetz)]

Ah, okay, Link von fremder Seite aus aber nicht ganz..., mom. nur in Opera getestet...

Egal, jetzt haben wir ja genügend Möglichkeiten zur Auswahl.

Gruß,
Oli (aka noRiddle)