Internetagentur 8works

Integration eines Social-Bookmarks-Menu in xt:commerce

In diesem Tutorial wollen wir Ihnen erläutern, wie Sie ein Social-Bookmarks-Menu in Ihrem xt:Commerce Onlineshop integrieren. Hier im Beispiel handelt es sich um einen xt:Commerce Shop in der Version 3.0.4 SP2.1.

Social Bookmarking in xt:Commerce, so sieht es aus
Detailansicht - Bild klicken

Um die nötigen Änderungen zu realisieren, benötigen Sie folgende Software:

  • Einen beliebigen HTML-Editor (z.B. PSPad)
  • Einen beliebiges FTP-Programm (z.B. Filezilla)
  • Ein Programm zum entpacken von .rar-Dateien (z.B. WinRar)

Außerdem benötigen Sie die Icons der unterschiedlichen Social-Bookmarking-Anbieter, welche wir in einem Paket für Sie zusammengestellt haben.

IconPack Download

Anmerkung:

Auf den Bildern binden wir die "social bookmarks" in das Template "LostMe" ein, welches Sie auch bei uns im Online-Shop finden.

Unser Shop liegt im Ordner

"/httpdocs/"

und das Template im Ordner

"/httpdocs/templates/LostMe/"

1. Erstellen des Backups

Laden Sie den Ordner in dem sich Ihr Template befindet auf Ihren lokalen Rechner, um jederzeit ein Backup zurückspielen zu können.

"/IHR_SHOP/templates/IHR_TEMPLATE/"

Falls Ihnen ein Fehler unterläuft, können Sie jederzeit die entsprechenden Dateien auf dem Server hochladen, um den Originalzustand wieder herzustellen.

Der Verzeichnisbaum
Detailansicht - Bild klicken

2. Icons entpacken und auf den Server laden

Entpacken Sie das Icon-Pack und laden Sie es auf Ihren Server in das Verzeichnis:

"/IHR_SHOP/templates/IHR_TEMPLATE/buttons/social_bookmarking/"

(Natürlich müssen Sie "IHR_SHOP" durch das Verzeichnisses in dem Ihr Shop liegt und "IHR_TEMPLATE" durch das Verzeichnis in dem Ihr aktives Template liegt ersetzten.)

3. Einbinden des Codes in das Template

Sie sollten an dieser Stelle bereits wissen, an welcher Stelle Sie gerne das Social-Bookmarking-Menu einblenden möchten.
In diesem Beispiel nehmen wir die Produktdetailansicht, da sich diese Stelle dazu anbietet.

Öffnen Sie hierzu die Datei:

"/httpdocs/templates/LostMe/module/product_info/product_info_v1.html"

und fügen Sie an der gewünschten Stelle folgenden Code ein:

  1. {php}
  2. $url = $_SERVER["HTTP_HOST"].''.$_SERVER["REQUEST_URI"];
  3. {/php}
  4.  
  5. <div style="margin:auto; width: 400px;">
  6. <a href="http://www.mister-wong.de/index.php?action=addurl&bm_url={php}echo $url;{/php}" target="_blank"> 
  7.     <img src="templates/LostMe/buttons/socialbookmarking/wong.gif" alt="wong it" border="0">
  8. </a> 
  9. <a href="http://del.icio.us/post?url={php}echo $url;{/php}" target="_blank"> 
  10.     <img src="templates/LostMe/buttons/socialbookmarking/delicio.gif" alt="del.icio" border="0">
  11. </a> 
  12. <a href="http://de.blinklist.com/?Action=Blink/addblink.php&Url={php}echo $url;{/php}" target="_blank"> 
  13.     <img src="templates/LostMe/buttons/socialbookmarking/blinklist.gif" alt="de.blinklist" border="0">
  14. </a> 
  15. <a href="http://technorati.com/faves/seoportal?add={php}echo $url;{/php}" target="_blank"> 
  16.     <img src="templates/LostMe/buttons/socialbookmarking/technorati.gif" alt="technorati" border="0">
  17. </a> 
  18. <a href="http://www.google.com/bookmarks/mark?op=add&hl=de&bkmk={php}echo $url;{/php}" target="_blank"> 
  19.     <img src="templates/LostMe/buttons/socialbookmarking/google.gif" alt="google" border="0">
  20. </a> 
  21. <a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u={php}echo $url;{/php}" target="_blank"> 
  22.     <img src="templates/LostMe/buttons/socialbookmarking/yahoo.gif" alt="yahoo" border="0">
  23. </a> 
  24. <a href="http://www.blogmarks.net/my/marks,new?url={php}echo $url;{/php}" target="_blank"> 
  25.     <img src="templates/LostMe/buttons/socialbookmarking/blogmarks.gif" alt="blogmarks" border="0">
  26. </a> 
  27. <a href="http://www.furl.net/storeIt.jsp?u={php}echo $url;{/php}" target="_blank"> 
  28.     <img src="templates/LostMe/buttons/socialbookmarking/furl.gif" alt="furl" border="0">
  29. </a> 
  30. <a href="http://www.spurl.net/spurl.php?url={php}echo $url;{/php}" target="_blank"> 
  31.     <img src="templates/LostMe/buttons/socialbookmarking/spurl.gif" alt="spurl" border="0">
  32. </a> 
  33. <a href="http://www.webnews.de/einstellen?url={php}echo $url;{/php}" target="_blank"> 
  34.     <img src="templates/LostMe/buttons/socialbookmarking/webnews.gif" alt="webnews" border="0">
  35. </a> 
  36. <a href="http://www.stumbleupon.com/submit?url={php}echo $url;{/php}" target="_blank"> 
  37.     <img src="templates/LostMe/buttons/socialbookmarking/stumbleupon.gif" alt="stumbleupon" border="0">
  38. </a>
  39. <a href="http://digg.com/submit?phase=2&url={php}echo $url;{/php}" target="_blank"> 
  40.     <img src="templates/LostMe/buttons/socialbookmarking/digg.gif" alt="digg it" border="0">
  41. </a> 
  42. </div>

Erklärung des Codes:

Die Zeile:

  1. {php}
  2. $url = $_SERVER["HTTP_HOST"].''.$_SERVER["REQUEST_URI"];
  3. {/php}

liest die Url der Unterseite Ihres Shops aus und Speichert diese in die Variable $url.
In unserem Fall:
hat "$url" den Wert

"http://shop.8works.de/xtCommerce-Templates/2-Spalten-Design/LostMe--31.html"

Die Weiteren Zeilen stellen Links mit der Parameterübergabe($url) an die Socialbookmarkinganbieter da.
Natürlich müssen Sie nicht alle Anbieter in Ihr Menu aufnehmen,
zum Löschen eines Anbieters entfernen Sie einfach die Zeilen wie in folgendem Beispiel.

Beispiel:

Wir entfernen digg.com indem wir folgendes Zeilen Code löschen:

  1. <a href="http://digg.com/submit?phase=2&url={php}echo $url;{/php}" target="_blank"> 
  2.     <img src="templates/LostMe/buttons/social_bookmarking/digg.gif" alt="digg it" border="0">
  3. </a>

Ergebnis:

Das Endergebnis - Google Bookmarks als Beispiel
Detailansicht - Bild klicken

Klickt nun ein Benutzer auf einen der Social-Links, wird wie im Screenshot der Anbieter aufgerufen.

Wir benutzen den Dienst von www.google.com/bookmarks/, um die Funktionalität zu demonstrieren.
Nachdem klicken auf das Google-Bookmarksymbol erscheint das Formular zum Speichern der Webseite, das Url-Feld ist bereits ausgefällt, da wir die Url Parameter übergeben haben.
Der Benutzer braucht also nur noch Name, Label(Beschriftung) und einen Hinweis ausfällen und mit "Lesezeichen hinzufügen" zu bestätigen.

In unserem Onlineshop für xt:Commerce Templates können Sie das Social-Bookmarking-Menu am Ende der Produktbeschreibung in Aktion sehen.

BERATUNGSLEISTUNGEN

PROGRAMMIERLEISTUNGEN

SCHNELLKONTAKT

8WORKS INTERNETAGENTUR IN ESSEN

RUFEN SIE UNS AN: +(49) 201 29 88 588

SENDEN SIE EIN FAX: +(49) 201 29 88 586

MAILEN SIE UNS: info(at)8works.de