Tutorial: Eine ABOUT YOU App erstellen

6. Oktober 2014 · Kategorien: Internet, JavaScript, PHP, Webentwicklung

ABOUT YOU App erstellen

ABOUT YOU ist ein relativ neuer Online-Shop, der über eine API sämtliche Produktdaten zur Verfügung stellt. Hier wird Dir erklärt, wie Du ohne großem Aufwand eine ABOUT YOU App erstellen kannst.

Was ist ABOUT YOU?

ABOUT YOU ist ein vor kurzem gestarteter Online-Shop der gleichnamigen GmbH aus Hamburg.
Wie der Name des Shops verrät, liegt der Fokus des Shops darauf, das Angebot dem Kunden anzupassen. Das heißt, statt im Sinne eines Kaufhauses einfach eine Vielzahl an Produkten aufzulisten, sollen jedem Kunden individuelle Vorschläge gemacht werden.
Das besondere an ABOUT YOU ist der so genannte Open Commerce Ansatz: Sämtliche Produkte, die im Shop verfügbar sind, können nämlich über eine API abgefragt werden.

Was sind ABOUT YOU Apps?

Genauso wie bei Facebook kannst Du auch eine ABOUT YOU App erstellen.
Das heißt, Apps sind Webseiten (die Du selber hostest), die dann auf ABOUT YOU eingebunden werden:
http://www.aboutyou.de/apps

Aktuell gibt es etwa 30 Apps. Davon sind einige relativ schlicht (Fashion Horoskop, Wetterfest oder Hot or Not), andere schon durchaus interessant (Fashion Scan, ABOUT Green usw.).

Über die Schnittstelle können Produkte von ABOUT YOU ausgelesen und in den Warenkorb gelegt werden. Für jeden Verkauf gibt es dann eine Provision.

ABOUT YOU App erstellen

Damit Du eine ABOUT YOU App erstellen kannst, musst Du Dich im Developer Center registrieren:
http://developer.aboutyou.de

Nach dem Einloggen wirst Du dann Schritt für Schritt zu Deiner ersten App geführt.
Es ist erst einmal egal, was Du bei URL einträgst. Du kannst sie später noch ändern.
Die URL sollte erst spätestens dann korrekt sein, wenn Du die App freischalten lassen möchtest.

Developer Center App anlegen

Developer Center App anlegen

Im nächsten Schritt werden Dir Deine Zugangsdaten genannt (App-ID + Passwort). Diese benötigst Du, um die API zu benutzen.

PHP SDK installieren

Lege zuerst ein neues Verzeichnis an, in dem Du Deine App programmieren möchtest.
Lege dort dann eine Datei an mit dem Namen composer.json und folgendem Inhalt:

{
    "require":{
        "aboutyou/app-sdk": "~0.1"
    }
}

Öffne dann Dein Terminal und wechsle in dieses Verzeichnis. Folgendermaßen lädst Du Composer und darauf mit Composer das SDK herunter:

php -r "readfile('https://getcomposer.org/installer');" | php
./composer.phar install

Es kann ein paar Sekunden dauern, bis das SDK und sämtliche Abhängigkeiten installiert sind.

Lege nun eine Datei index.php an, mit folgendem Inhakt:

<!--?php require_once('vendor/autoload.php'); // liest sämtliche Abhängigkeiten ein, die über Composer installiert wurden. Also auch das SDK   if (!session_id()) {     session_start(); // Session starten, falls keine Session automatisch gestartet wurde. } $appId = 100; // Deine App-ID  $appPassword = '3ed93394c2b5ebd12c104b177b928ad0'; // Dein App-Passwort   $api = new \Collins\ShopApi($appId, $appPassword); // Initialisierung des SDKs 
Über das $api-Objekt können nun Produkte abgefragt werden. In folgendem Beispiel werden alle Produkte ausgelesen, die rot sind.

 // Objekt erstellen, das der Filterung von Produkten dient. Die Session-ID dient dem // Tracking des Kunden $criteria = $api->getProductSearchCriteria(session_id());

// IDs für alle Farben finden, die "rot" im Namen haben
$colorIds = array();
$colors = $api->fetchFacets(array(Collins\ShopApi\Constants::FACET_COLOR));
foreach ($colors as $color) {
    if (strpos($color->getValue(), 'rot') !== false) {
        $colorIds[] = $color->getId();
    }
}

// Filter auf die roten Farben setzen
$criteria->filterByFacetIds(array(
    Collins\ShopApi\Constants::FACET_COLOR => $colorIds
));

// Limit auf das Maximum von 200 Produkten setzen
$criteria->setLimit(200);

// Standardmäßig wird nur der Produktename und die ID zurückgegeben.
// Wir möchten aber noch das Produktbild und die Marke
$criteria->selectProductFields(array(
    Collins\ShopApi\Criteria\ProductFields::DEFAULT_IMAGE,
    Collins\ShopApi\Criteria\ProductFields::BRAND
));

$result = $api->fetchProductSearch($criteria);

$products = $result->getProducts();

Die nun gefundenen Produkte können folgendermaßen ausgegeben werden. Über das JavaScript, das in Zeile 6 eingelesen wird, wird automatisch der Header von ABOUT YOU in Deine Webseite eingebaut.

<!DOCTYPE html>
<html>
<head>
    <title>Rote Produkte</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <?php echo $api->getJavaScriptTag()?>
</head>

<body>
    <ul>
        <?php foreach ($products as $product):?>
            <li>
                <?php echo htmlspecialchars($product->getBrand()->getName())?><br />
                <?php echo htmlspecialchars($product->getName())?>
                <img src="<?php echo $product->getDefaultImage()->getUrl(200,200)?>" alt="Produktbild" />
                <button class="add-to-cart" data-id="<?php echo $product->getId()?>">in den Warenkorb legen</button>
            </li>
        <?php endforeach;?>
    </ul>
</body>
</html>

Jetzt fehlt noch die Funktionalität, um ein Produkt in den Warenkorb zu legen.
Hierfür gibt es zwar eine Methode AY.addToCart, aber hier verwende ich AY.openProductLayer

Füge dazu folgenden Code in den <head>-Tag ein:

<script type="text/javascript">
    window.ayAsyncInit = function() {
        $('.add-to-cart').click(function() {
            var id = $(this).data('id');
            AY.openProductLayer(
                '<?php echo session_id()?>',
                id
            )
        });
    };
</script>

Das war es schon! Weitere Hilfestellungen und Beispiele gibt es in der offiziellen Dokumentation.
Wenn Du noch Fragen hast, kannst Du sie gerne hier in den Kommentaren stellen.

Autor: | Kategorien: Internet, JavaScript, PHP, Webentwicklung

3 Kommentare zu Tutorial: Eine ABOUT YOU App erstellen

  1. Wunderbar :) Vielen Dank für den Artikel.
    Werd’ mir demnächst mal die Android API anschauen :)

  2. Puzzlepoint sagt:

    About You ist ein sehr interessantes Projekt. Wir sind ein kleiner Online Shop aus der Schweiz und können solche Ideen nicht umsetzen.

    Wir finden es aber toll, dass es in Deutschland Innovative Online Shops gibt. Ob es erfolgreich ist, wird sich zeigen. Aber besser als immer nur alle erfolgreichen Projekte von Amis zu kopieren.

    Natürlich auch vielen Dank für den Beitrag! Das ganze scheint ziemlich einfach zu sein :)

  3. Valetina sagt:

    Ich selbst bin ein totaler Fan von About You und bestelle dort regelmäßig. Zufällig bin ich auf diese Seite gestoßen und fand den Beitrag wirklich spannend und die Umsetzung ist auch wirklich gut beschrieben!

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *