In einem Content zu einer bestimmten Stelle springen (Anker)

Hi Roger,
haben wir für Rafal vom www.kruemelladen.at gemacht.
Schau mal ob es dem Gewünschten nahe kommt:
http://www.kruemelladen.at/Kinderwa...eme/Bebetto-Kinderwagen-Fabio-div-Farben.html
Bewertungen lesen und Produktbeschreibung im Artikelkopf sind die auslösenden Anker.
Müsste ich dann ggf. raussuchen, ist schon paar Tage her.

 

aber das hat der Holger doch gemeint!
Wenn Du beim Krümelladen auf "Bewertungen lesen" etc, klickst, kommst Du direkt nach unten, so wie Du das doch haben willst..............

 

Hi!

Einen html-Anker definierst Du mit:

PHP:

<a name="ANKERTEXT">Hier, der zu markierende Text</a>

Willst Du den dann aufrufen, erstellst Du einen Link:

PHP:

<a href="http://www.deine-seite.de/deine-unterseite.html#ANKERTEXT">Linktext</a>

Klickst Du dann auf den Link. "springst" Du direkt zum Anker...

Bitte achte darauf, dass Du in der URL zum Link, die komplette URL angibst, zum Anker, sonst funktioniert das nicht. Den Fehler hatte ich zuerst gemacht und immer nur den Anker versucht anzusprechen, weil man ja schon auf der Seite ist, aber man muss trotzdem die komplette URL angeben.

 

Nach oben Scrollen Button: (Link nur für registrierte Nutzer sichtbar.)
Der Post von Timo enthält die wichtigsten Hinweise, Link zum Download im 1. Post. Selber noch nicht probiert

 

Aber wie funktioniert das innerhalb der Produktansicht? Dass man von oben zur Artikelbeschreibung scrollt? Also zur description-1...

 

Auf normalen Contentseiten geht das mit dem Anker, auf der Produktdetailseite nicht so einfach ;-)
Ich guck ja.

 

gefällt mir nämlich gut , habe dazu auch was ergooglet, funzt aber nicht bei mir. Ob es nun an mir liegt?

 

Sodele, so gemacht:
In die Zieldatei wohin gescrollt werden soll den "Anker" als ID eingefügt, z. B. in /tempaltes/EyeCandy/module/product_reviews-USERMOD.html folgendes:

PHP:

...
<div class="headline" id="anker_rating">{$txt.heading_reviews}</div>
...


In der html-Datei, in der die Anker angesteuert werden sollen ein kleines Javascript reingekloppt und den Event formuliert:

Der Flexibilität wegen statt fester Werte (oben; $anker_link) variable Werte ermöglicht, kann man aber auch "fixieren" und direkt die Zielwerte einsetzen; aber im Beispiel durch Anhängen an das template angehängt.

/user_classes/overloads/ProductReviewsContentViewNew/anker_ProductReviewsContentViewNew.inc.php:

PHP:

class anker_ProductReviewsContentViewNew extends anker_ProductReviewsContentViewNew_parent
{
    function get_html($p_coo_product)
    {
            parent::get_html($p_coo_product);
            $this->set_content_data('anker_link', 'scrollTo("anker_rating")');
            $t_html_output = $this->build_html();
            return $t_html_output;
    }
}


Wie gesagt, es spricht nicht viel dagegen anstelle der Variable für den Ankernamen auch einen fixen Wert zu benutzen ;-)

 

Danke, probier ich aus

aber interessanter finde ich den Sprung zur description-1, das geht dann wohl so nicht, oder?!

 

Doch, genau so nur in anderen Dateien, auch wieder die flexible Lösung...

/templates/EyeCandy/module/product_info/standard-USERMOD.html:

/user_classes/overloads/ProductInfoContentView/anker_ProductReviewsContentViewNew.inc.php:

PHP:

class anker_ProductReviewsContentViewNew extends anker_ProductReviewsContentViewNew_parent
{
    
    function get_html($p_coo_product)
    {
            parent::get_html($p_coo_product);
            $this->set_content_data('desc_link', 'scrollTo("description-1")');
            $t_html_output = $this->build_html();
            return $t_html_output;
    }
}


Gleiches Javascript wie oben und den "Auslöser" nicht vergessen:

 

Hallo Holger,

diese Erweiterung klingt für mich interessant. Mit den Codes kenne ich mich nicht wirklich aus, habe es aber schon ab und zu geschafft, etwas genau nach Anleitung zu kopieren und dann hat es auch funktioniert... ;-)

Daher noch eine kurze Frage, ob ich richtig verstanden habe, was ich mit dieser Lösung anfangen kann...

Wenn man einen Artikel in unserem Shop anklickt, kommen Bild, Name, Lieferzeit, Preis, dann erstmal eine "weiße Lücke" (wenn der Artikel nur ein Artikelbild hat) und danach erst die Artikelbeschreibung. Je nach Bildschirm sieht man also zuerst einmal gar nicht, dass weiter unten noch die Artikelbeschreibung kommt. Deshalb hätte ich gerne direkt unter der Lieferzeit einen Link "zur Artikelbeschreibung" oder "Artikeldetails" und wenn man darauf klickt, soll die Seite einfach ein Stück nach unten scrollen, sodass man die Artikelbeschreibung lesen kann.

Kann ich sowas mit den von dir geposteten Codes bauen?

Hier mal noch ein Bild zur Veranschaulichung:

http://compa-versand.de/Weihnachten...Vogelfutterstelle-Pinguin-Set-zweiteilig.html

Wäre schön, wenn du mir bei Gelegenheit mal Rückmeldung dazu geben könntest, es eilt auch nicht.

Grüße und ein schönes Wochenende
Lena

 

Hi

ich würde das auch gerne einbauen das oben unter der Lieferzeit ein Link zur Produktbeschreibung ist und wenn man den klickt dann zur Beschreibung gescrollt wird. Ich habe das schon nach der Anleitung hier versucht komm damit aber nicht wirklich weiter.

Zb.:

/user_classes/overloads/ProductInfoContentView/anker_ProductReviewsContentViewNew.inc.php

gibts bei mir gar nicht und wenn ich das Verzeichnis + Datei mit dem geposteten Inhalt anlege gibts nur ne Fehlermeldung.

Könnte vieleicht nochmal jemand genau beschreiben wo was rein gehört?

 

steht doch oben genau.

 

Ok Fehlermeldung taucht nicht mehr auf aber der Link funktioniert trotzdem nicht. Wo muss das Javascript rein damit das funktioniert? Wenn ich über den Link "Produktbeschreibung" gehe kommt unten: javascript:void(0);

Ich hab das:

PHP:

...
<a href="javascript:void(0);" onclick={$anker_link}>  {$module_content|@count} {$txt.text_read_reviews}</a> | <a  href="{$BUTTON_LINK}"  class="lightbox_iframe">{$button.opinion}</a> | <a href  ="javascript:void(0);" onclick={$desc_link}> Produktbeschreibung </a></div>
...
<!-- (swgx2_Ankerpunkte (Start) -->
<script type="text/javascript">
    function scrollTo(id) {literal} { {/literal}
    $('html,body').animate({literal} { {/literal}scrollTop: $("#"+id).offset().top{literal} } {/literal},'slow');
{literal} } {/literal}
</script>
<!-- (swgx2_Ankerpunkte) (Ende) -->

in meine standard.html gepackt. Ist das der Fehler oder was anderes?

Meine Arbeitschritte:

/user_classes/overloads/ProductInfoContentView/anker_ProductReviewsContentViewNew.inc.php

erstellt mit Inhalt wie oben.

und dann meine standard.html um:

PHP:

<div id="description-1">

erweitert zusätzlich noch javascript wie oben ebenfalls in standard.html eingefügt und Verlinkung an die Stelle in meiner standard.html gepackt wo ich den Link zum Anker eben haben will.

Funktioniert wie gesagt leider nicht.