Handbuch TweetMeetsMage für Version 0.1.0 Handbuch Version 0.1 Zuletzt geändert 21.01.2012
Inhaltsverzeichnis 1 Einleitung... 3 1.1 Voraussetzungen... 3 1.2 Funktionsübersicht... 3 2 Installation... 4 2.1 Vorbereitung / eigenständige Installation... 4 2.2 Installation Extension... 4 3 Benutzung der Extension... 5 3.1 Allgemeiner Aufbau... 5 3.2 Einbinden via Block... 5 3.3 Einbinden via Widget... 8 4 Anpassung der Extension... 11 4.1 Template Files... 11 4.2 Services... 11 (c) 2012 meets-ecommerce Online Agentur GmbH v0.1 Seite 2 von 11
1 Einleitung In diesem Handbuch finden Sie eine Übersicht über die Installation und Funktionsweise von TweetMeetsMage sowie eine kurze Anleitung. Wenn Sie zu einem bestimmten Thema keine Antworten in dieser Anleitung finden, schreiben Sie uns eine E-Mail support@meets-ecommerce.de. 1.1 Voraussetzungen TweetMeetsMage hat folgende Voraussetzungen: PHP Version 5.3.x Magento Commerce Community Edition 1.4.x, 1.5.x, 1.6.x PHP Extensions: php-curl Verfügbare Sprachen: Deutsch (de_de), Englisch (en_us) 1.2 Funktionsübersicht TweetMeetsMage besitzt zwei Grundfunktionalitäten: Twitter Anzeige der letzten Tweets eines Accounts Angabe des eines beliebigen Twitter Accounts Anzahl der letzten Posts Anzeige des Bilds des Twitter Accounts Wenn Sie weitere Funktionalitäten wünschen oder brauchen, schreiben Sie uns via E-Mail an support@meets-ecommerce.de. (c) 2012 meets-ecommerce Online Agentur GmbH v0.1 Seite 3 von 11
2 Installation Die Installation von LexMeetsMage ist gesplittet in zwei Schritte: erstens die Installation der Extension selbst und zweitens die Erstellung einer Lizenz. 2.1 Vorbereitung / eigenständige Installation Eigenständige Installation Warnung: für die eigenständige Installation von TweetMeetsMage übernimmt meets-ecommerce keinerlei Haftung. Wir empfehlen die Installation auf einem Test Shop von Ihnen durchzuführen. Des Weiteren empfehlen wir bei der Übernahme in den Live Shop folgendes zu tun: Backup Ihrer Datenbank Backup Ihres kompletten Magento Ordners Extension installieren 2.2 Installation Extension Die Installation der Extension gestaltet sich sehr einfach. Folgen Sie bitte den folgenden Schritten: 1. Laden Sie sich die Extension herunter 2. Entpacken Sie das Archiv 3. Kopieren Sie den gesamten Inhalt aus dem Ordner src/ in Ihren Magento Hauptordner 4. Loggen Sie sich in Ihr Magento Backend > dort sollten Sie den Punkt meetsecommerce sehen. 5. Fahren Sie mit dem Mauszeiger über meets-ecommerce und klicken dann auf Extension Verwaltung 6. Unter Ihre installierte Extensions sollte TweetMeetsMage zu sehen sein Bitte bedenken Sie, dass wenn die Extension nicht sichtbar sein sollte, Sie den Cache löschen und sich neu einloggen im Adminbereich. (c) 2012 meets-ecommerce Online Agentur GmbH v0.1 Seite 4 von 11
3 Benutzung der Extension Hier finden Sie alle Details zur Nutzung der Extension. 3.1 Allgemeiner Aufbau Die Extension ist prinzipiell sehr simpel aufgebaut! Man kann Sie über zwei Wege in das Shop System integrieren: via Block (siehe 3.2) oder via Widget (siehe 3.3). Beide Varianten haben Pflichtangaben. Pflichtangeben und deren Bedeutung: Feld Twitter Account Post Count Headline Bedeutung Der Account der ausgelesen werden soll. Die Anzahl der Beiträge, die angezeigt werden sollen (neuste zuerst) Die Überschrift über der Box, in der die Tweets angezeigt werden sollen. 3.2 Einbinden via Block Das Einbinden über das Magento Block System kann auf zwei Wege passieren. Zum einen über die so genannten Layout XMLs oder im CMS System von Magento. Layout XMLs In diesem Beispiel soll die TweetMeetsMage Box immer in der rechten Spalte oben angezeigt werden. Damit diese Vorhaben gelingt, muss eine so genannte Layout XML bearbeitet werden. Wir nutzen dafür die Standard Layout XML, die Magento in jedem Fall immer läd die page.xml. Wenn Sie nach wie vor das Standard Layout von Magento nutzen, finden Sie die XML unter app/design/frontend/default/default/layout/page.xml Diese Datei öffnen Sie bitte mit einem beliebigen Editor Ihrer Wahl. (c) 2012 meets-ecommerce Online Agentur GmbH v0.1 Seite 5 von 11
Ziemlich weit oben in der XML Struktur finden Sie <default>...</default>. Bitte fügen Sie den nachfolgenden XML Code in zwischen <default>...</default> ein. <reference name="right"> <block type="tweet/widget" before="-" name="tweet.widget" template="tweet/widget.phtml"> <action method="setheadline"> <value>our tweets</value> </action> <action method="setpostcount"> <value>5</value> </action> <action method="settwitteraccount"> <value>meetsecommerce</value> </action> </block> </reference> Listing 1: Einbinden in Layout XML Bevor Sie nun die Datei schließen, können Sie noch die Werte für sich einstellen. Aktuell sind folgende Werte konfiguriert: Überschrift (headline): Our tweets Tweet Anzahl (postcount): 5 Twitter Account (twitteraccount): meetsecommerce Ändern Sie ruhig die Werte nach Ihrem belieben. Danach speichern Sie die XML Datei und schließen Ihren Editor. Im nächsten Schritt sollten Sie Ihren Cache löschen (damit die Änderung der XML sichtbar wird). Gehen Sie dazu in Ihr Magento Admin Bereich auf System > Cache- Verwaltung und wählen Layouts aus und führen eine Aktualisierung durch. Abbildung 1: Cache leeren (c) 2012 meets-ecommerce Online Agentur GmbH v0.1 Seite 6 von 11
Jetzt sollten Sie Ihren Tweet Block in Ihrem Shop sehen. Abbildung 2: Ansicht Frontend Ein gutes Tutorial finden Sie auf http://t3n.de/magazin/einfuhrung-magentos-layoutxml-magento-layouts-griff-224023/2/. Magento CMS System Die Einbindung im Magento CMS System gestaltet sich ein wenig simpler wie die Einbindung über die Layout XML. Dennoch bringt diese Variante einen Nachteil mit sich: die Konfiguration bzw. Anzeige wird auf der Seite angezeigt, wo Sie diese auch tatsächlich konfigurieren. Im Endeffekt bedeutet das, dass Sie diese Einstellung auf jeder Seite konfigurieren müssen, wo Sie den Block angezeigt haben möchten. Zur Einbindung über das CMS System loggen Sie sich zu nächst in das Backend ein. Sobald Sie einloggt sind gehen Sie im oberen Menü auf CMS > Seiten verwalten. Abbildung 3: CMS > Seiten verwalten Wählen Sie nun eine beliebe Seite aus, in der Sie den Block einbinden möchten. Zum Beispiel Home page. (c) 2012 meets-ecommerce Online Agentur GmbH v0.1 Seite 7 von 11
Wenn Sie Bearbeitungsseite geöffnet haben, sehen Sie links an der Seite eine Reiter-Bar. Klicken Sie dort auf den Punkt Gestaltung - es erscheint einer neuer Inhaltsbereich. Abbildung 4: CMS Seite bearbeiten / Gestaltung In Abbildung 4 sehen den bereits eingefügten Code. Den Code dazu finden Sie in Listing 1 (Seite 6). Bitte beachten Sie, dass die Box sich nun in die Rechte Spalte einfügen wird und zwar ganz oben. Die Positionierung der Box hängt natürlich von verschiedenen Parametern ab. Wenn Sie mehr über die Positionierung erfahren möchten, empfehlen wir Ihnen folgendes Tutorial: http://magebase.com/magento-tutorials/demystifying-magentoslayout-xml-part-1/. 3.3 Einbinden via Widget Eine weitaus komfortable Variante ist die Nutzung von Widgets. Widgets können über den Adminbereich in beliebige Textfelder eingetragen werden. Die einfachste Form der Nutzung ist über den so genannten WYSIWYG Editor. Nehmen wir folgendes Beispiel an. Wir möchten gerne unsere letzten Tweets auf der Home page anzeigen. (c) 2012 meets-ecommerce Online Agentur GmbH v0.1 Seite 8 von 11
Loggen Sie sich dazu bitte in Ihren Adminbereich ein. Gehen Sie auf CMS > Seiten verwalten und wählen Sie dort eine beliebige Seite (in unserem Beispiel Home page ). Jetzt wählen Sie Links in den Tabs Inhalt. Abbildung 5: Home page Tab Inhalt Bitte blenden Sie nun den Editor aus ( Editor anzeigen / ausblenden ). Jetzt können Sie via Oberfläche neue Widgets einfügen. Drücken Sie dazu auf den Button Insert Widget..., ein neues Fenster öffnet sich. Abbildung 6: Insert Widget... In dem Fenster können Sie nun verschiedene Widgets wählen. Klicken Sie nun Tweet Widget an. Abbildung 7: Widget-Auswahl (c) 2012 meets-ecommerce Online Agentur GmbH v0.1 Seite 9 von 11
Sobald Sie das Tweet Widget ausgewählt haben, läd ein neuer Inhalt in dem Fenster. Abbildung 8: Widget konfiguration Nun können Sie das Widget konfigurieren. Bitte tragen Sie die erforderlichen Daten ein. Feld Twitter Account Post Count Headline Frontend Template Bedeutung Der Account der ausgelesen werden soll. Die Anzahl der Beiträge, die angezeigt werden sollen (neuste zuerst) Die Überschrift über der Box, in der die Tweets angezeigt werden sollen. Das Template das Sie zur Anzeige nutzen möchte. Wir nehmen nun die folgenden Daten: Twitter Account meets-ecommerce Post Count 5 Headline Our Tweets Frontend Template Standard Widget Sobald Sie Ihre Daten eingetragen haben, bestätigen Sie bitte das Einfügen des Widgets mit Widget einfügen. Jetzt sollte das der eingefügte Code in etwa so aussehen: {{widget type="tweet/widget" twitteraccount="meetsecommerce" headline="our Tweets" postcount="5" template="tweet/widget.phtml"}} (c) 2012 meets-ecommerce Online Agentur GmbH v0.1 Seite 10 von 11
Speichern Sie nun nur die Content Seite. Nun können Sie den Eintrag auf Ihrer gewählten Seite prüfen. 4 Anpassung der Extension Abbildung 9: Widget im Frontend TweetMeetsMage ist 100% Open Source und daher lassen sich unsere Extensions so anpassen wie Sie das möchten. 4.1 Template Files Wir releasen alle unsere Extension für das Standard Layout von Magento. Wir wissen aber, dass die meisten Shop Besitzer Ihre eigenen Layouts haben. Daher bieten wir die Möglichkeit die Extensions anzupassen. Sie finden das Standard Widget File unter: app/design/frontend/default/default/template/tweet/widget.phtml 4.2 Services meets-ecommerce bietet seinen Kunden auch individuelle Anpassung Ihrer Extensions. Bitte fragen Sie dazu unter support@meets-ecommerce.de an. (c) 2012 meets-ecommerce Online Agentur GmbH v0.1 Seite 11 von 11