Kategorie: TYPO3

share

Twitter einfach in TYPO3-Template einbinden.

Vorstatz für’s neue Jahr wie üblich „Weniger aufschieben“. Gesagt getan, auf unserer Website hat sich einiges angesammelt gehabt an Kleinigkeiten, die ich immer schon mal angehen wollte. Eines davon war der defekte Twitter-Feed im Footer unserer Seite. Nachdem das einfache einbinden nicht mehr möglich war, haben wir einige Zeit auf den Inhalt verzichtet. Dafür wieder ein PlugIn / Extension bemühen?

Zugegeben, mein erster Versuch ging wieder in diese Richtung. Nachdem ich zwei Extensions (beide noch alpha laut Entwickler) ausprobiert hatte, dachte ich, das muss doch auch einfacher gehen. Schließlich soll einfach von Twitter ein JSON abgefragt und formatiert wieder ausgegeben werden.

Nach kurzer Suche habe ich in der Doku die ContentObjects „USER“ und „USER_INT“ gefunden. USER_INT ist im Gegensatz zu „USER“ ungecacht und daher das gesuchte, schließlich soll der Inhalt von Twitter jedesmal neu geladen werden. Mit beiden lässt sich der Content aus eigenen PHP-Scripten im TypoScript verwenden.

Auf GitHub habe ich dann eine schöne schlanke Klasse gefunden, mit der sich die Twitter-API ansprechen lässt.

Damit habe ich mit dann ein entsprechendes Scriptchen gebaut und in die Seite eingefügt. Hier die kurze Schritt-für-Schritt-Anleitung

1) Twitter API freischalten

Die Twitter-API-Credentials müssen im eigenen Konto aktiviert werden. Diese benötigen wir gleich für den Zugang. Das ganze findet ihr im App-Bereich. Dort legt ihr eine neue App an und erhaltet die entsprechenden Daten.

2) Script erstellen

Erstellt das PHP-Script, dass ihr in eurem Template aufrufen wollt. Einfach als PHP-Datei auf dem Server ablegen, am besten dort, wo ihr auch euer Template liegen habt.

Der Inhalt besteht zum einen aus zwei Funktionen für den Aufruf aus dem TypoScript und am Ende aus der Klasse von GitHub.


<?php
function getTweets()
{
$settings = array(
'oauth_access_token' => "YOUR_OAUTH_ACCESS_TOKEN",
'oauth_access_token_secret' => "YOUR_OAUTH_ACCESS_TOKEN_SECRET",
'consumer_key' => "YOUR_CONSUMER_KEY",
'consumer_secret' => "YOUR_CONSUMER_SECRET"
);

$url = 'https://api.twitter.com/1.1/statuses/user_timeline.json';
$getfield = '?screen_name=marmalade_web&count=5';
$requestMethod = 'GET';

$twitter = new TwitterAPIExchange($settings);
$response = $twitter->setGetfield($getfield)
->buildOauth($url, $requestMethod)
->performRequest();

return $response;
}

function getTweetsInHtml($content, $conf)
{
$json = getTweets();
$array = json_decode($json);

$html = '<ul>';
foreach($array as $tweet)
{
$html .= '<li>';
$html .= '<p>' . $tweet->text;
$html .= ' <span class="tweetTime"> ' . date('d.m.Y H:i ',strtotime($tweet->created_at)) . '</span>';
$html .= '</p>';
$html .= '</li>';
}
$html .= '</ul>';

return $html;
}
[HIER KOMMT DIE KLASSE VON GITHUB]

 

3) Ausgabe im TypoScript-Template

Nachdem wir die Datei erstellt und auf unserem Server abgelegt haben, könne wir im TypoScript-Template darauf zugreifen.

includeLibs.time = Pfad/zu/eurem/Script.php
lib.twitter = USER_INT
lib.twitter {
userFunc = getTweetsInHtml
}

 

Das wars auch schon. Ziemlich simpel. Oder? Für unsere Zwecke allemal gut genug. Das ergebnis seht ihr am Ende dieser Seite.

share

TYPO3: Fluid und Grid Elements gemeinsam verwenden

Wie man Partials und ViewHelper für Gridelements nutzen kann: Alternativ zur normalen TypoScript-Konfiguration ist es möglich, die Darstellung eines Grid-Elements in einem einfachen HTML-Template zu definieren und dabei auf die Fähigkeiten von Fluid zurückzugreifen.

Die folgende Anleitung beschreibt die Verwendung von Fluid für die Frontendausgabe von Raster-Elementen. Sie wurde mit gridelements 2.0.2 unter TYPO3 6.1 getestet. Es wird vorausgesetzt, dass die gridelements-Extension bereits installiert ist und das statische TypoScript der Extension im Template eingebunden wurde.

Als Beispiel legen wir ein neues Gridelement (CE Backend Layout) mit zwei Zeilen und drei Spalten an, hierbei werden die beiden linken Elemente zu einer Sidebar und die beiden rechten oberen Spalten zu einer Spalte zusammengefasst. Dies kann entweder über die Raster-Konfiguration oder den Assistenten erfolgen.

Folgende Raster-Konfiguration liefert das gewünschte Ergebnis:

backend_layout {
    colCount = 3
    rowCount = 2
    rows {
        1 {
            columns {
                1 {
                    name = Left
                    rowspan = 2
                    colPos = 11
                }
                2 {
                    name = Top
                    colspan = 2
                    colPos = 12
                }
            }
        }
        2 {
            columns {
                1 {
                    name = BottomLeft
                    colPos = 22
                }
                2 {
                    name = BottomRight
                    colPos = 23
                }
            }
        }
    }
}

Anschließend geht es an die TypoScript-Konfiguration für das Gridelement im Template-Setup.

tt_content.gridelements_pi1.20.10.setup {
    # ID des Gridelements
    1 < lib.gridelements.defaultGridSetup
    1 {
        # FLUIDTEMPLATE konfigurieren
        cObject = FLUIDTEMPLATE
        cObject {
            file = fileadmin/template/gridelements/layout.html
        }
    }
}

Zum Schluss noch das Fluid-Template. Zum Einbinden des Spalteninhalts des Raster-Elements wird auf die entsprechende Spalte im data-Objeḱt zugegriffen.

<div class="row">
    <div class="column small-4">
        <f:format.raw>
            {data.tx_gridelements_view_column_11}
        </f:format.raw>
    </div>
    <div class="column small-8">
        <div class="row">
            <div class="column small-12">
                <f:format.raw>
                    {data.tx_gridelements_view_column_12}
                </f:format.raw>
            </div>
        </div>
        <div class="row">
            <div class="column small-6">
                <f:format.raw>
                    {data.tx_gridelements_view_column_22}
                </f:format.raw>
            </div>
            <div class="column small-6">
                <f:format.raw>
                    {data.tx_gridelements_view_column_23}
                </f:format.raw>
            </div>
        </div>
    </div>
</div>

Wenn das Gridelement auf einer Seite hinzugefügt und mit Inhalt gefüllt wurde, sollte man im Frontend folgendes Ergebnis erhalten:

layout
share

TYPO3Camp Berlin 2013

DSC_0459 DSC_0462 DSC_0461         Spannende Sessions rund um das CMS TYPO3 und nette Social Events, so lässt sich das Feedback zum diesjährigen TYPO3Camp Berlin aus meiner Sicht zusammenfassen.

An dem Wochenende vom 10. bis 12. Mai trafen sich rund 120 Teilnehmer im Berliner SAE-Institut am Rande der Hauptstadt. Die Veranstaltung startete am Freitagabend in lockerer Meet & Greet-Runde, um am Samstagmorgen nach erfolgreicher Sessionplanung mit den ersten Vorträgen und Disskusionsrunden zu starten.

Persönlich sehr spannend fand ich die Session von Jo Hasenau über Projektfinanzierung und Crowdfunding zu Grid Elements 2.0. Die Weiterentwicklung der Extension wurde über www.starnext.de finanziert und bietet damit eine spannende Perspektive für eigene Open-Source-Entwicklungen.

Nach vier Sessions endete der Tag in einer schönen Abendveranstaltung mit liebevoll und äußerst präzise zusammengelegten Burgern sowie Lagerfeuer-Romantik. Am Sonntagmorgen ging es dann auch pünktlich wieder los mit vier weiteren lebhaften Sessions.

An dieser Stelle möchte ich noch ein kurzes Lob an die Organisatoren für den reibungslosen Ablauf und schönen Transfer zur Abendveranstaltung aussprechen. Im direkten Vergleich zum letzten Jahr hat sich das Camp insgesamt nochmals ein wenig nach oben skaliert.

Bilder vom Camp findet man bei Flickr über die Suche nach dem Hashtag t3cb13. Weiterführende Informationen gibt es unter www.typo3camp-berlin.de

Es hat viel Spaß gemacht, wir sehen uns wieder!

share

Von Bürostühlen, Erfrischungsgetränken und Betriebssystemen

Liebe Clubmate-Trinker und sonstige Koffeinjunkies!

beendet ihr in absehbarer Zeit euer Studium und seid nicht sicher, wie ihr danach einem potentiellen Arbeitgeber eure Abhängigkeit von Koffein beichten sollt? Seid ihr es mit der Zeit leid geworden, euren Mac gegenüber neidischen Windows-User zu verteidigen – oder wisst ihr einfach, dass euer Linux-System indiskutabel besser ist, als alle Alternativen am Markt und könnt die Diskussionen nicht mehr hören? Das sind gute Grundlagen!

Nahezu perfekt wird es dann, wenn ihr von Open-Source genauso überzeugt seid wie wir und darüber hinaus große CMS- sowie vor allem  E-Commerce-Projekte spannend findet. Wir kennen nämlich alle Clubmate-Händler in der Umgebung, interessieren uns nicht für eure Betriebssysteme, solange ihr diese beherrscht und – das ist das Wichtigste – wir suchen ab April, oder zur Not auch später, begeisterungsfähige Kollegen zur Unterstützung unseres Teams im Bereich Frontend- und Backend-Entwicklung.

Wir, das ist das Team von marmalade.de: Was uns auszeichnet, ist unsere simple Überzeugung, dass Open-Source funktioniert. So haben wir uns in den letzten Jahren stark auf TYPO3 als CMS und OXID eSales als Shopsystem spezialisiert. Eines der Resultate daraus ist „unser Baby“ TOXID: eine Schnittstelle zwischen diesen beiden Systemen zur einfachen Integration von Content in einem Onlineshop. Sauberer Code ist bei uns grundlegend, Barrierefreiheit ein wiederkehrendes Thema und selbstredend wichtig ist das Vorantreiben der Weiterentwicklung der Systeme. Fortbildungen und Teilnahmen an Konferenzen sind somit für unsere Kollegen also nicht nur selbstverständlich sondern explizit erwünscht!

Falls wir es soweit geschafft haben, euer Interesse zu wecken, sollten die weiteren Schritte die Folgenden sein:

  1. Eine Tasse frischen Kaffee holen.
  2. Weitere Infos auf unserer Seite anschauen.
  3. Uns wissen lassen, dass es euch gibt!

Wir freuen uns darauf, von euch zu hören!

share

Interview OXID Commons 2011

Die OXID Commons öffnete am 5. und 6. Mai 2011 im sonnigen Freiburg ihre Pforten, mittlerweile schon zum dritten mal. Die rund 500 Besucher erwartete zahlreiche Vorträge rund um das Thema eCommerce. Spezielle Themen waren unter anderem OXID eShop 4.5-Templates, Mobile-Commerce & Cross-Channel-Commerce.
Unser eigener Beitrag beschäftigte sich mit der Schnittstelle zwischen OXID und Content-Management-Systemen wie TYPO3 und WordPress. Anschließend gaben Chris Jolly (Ontraq)  & Joscha Krug (marmalade.de) OXID eSales ein Interview über die Vorteile einer Community, Stärken von TOXID und Unterschiede zwischen den OXID eShop Versionen.