Simples Online-Shop mit WordPress und dem PayPal-Warenkorb

Update 2014/01/31: Aus historischen Gründen lasse ich den Artikel online, empfehle aber diese Anleitung nicht mehr. Mittlerweile gibt es Shop-Plattformen wie z.B. Ecwid, mit denen sich auch mit relativ wenig Aufwand ein kleines Shop einrichten lässt.You have been warned! 🙂


Immer wieder taucht er auf: der Wunsch, ein einfaches Online-Shop zu betreiben. Für „nur wenige Produkte, nichts kompliziertes, und günstig soll es sein“. Große Shop-Lösungen, wie xt:Commerce fallen damit aus, weil die Einrichtung üblicherweise mehrere Wochen Aufwand verschlingt, und bei gemieteten Lösungen, wie von epages oder jimdo, kann das Design des Shops nur eingeschränkt beeinflußt werden, ohne sich wieder große Aufwände aufzuhalsen.

Im folgenden skizzieren wir eine mögliche WordPress-Lösung ganz ohne Plugins wie WP e-Commerce. Weitere Pluginbeschreibungen finden Sie in einem englischen Artikel auf wpmu.org, und eine interessante kommerzielle Lösung für elektronische Produkte finden Sie mit dem eStore Plugin.



Wir benutzen den PayPal-Warenkorb. Der PayPal-Warenkorb ermöglicht es, dass mehrere Produkte in einem einzigen Bestellvorgang bestellt werden können. Sie können sogar Produktvarianten („Farbe“, „Größe“) anbieten. Der PayPal-Warenkorb ist nichts anderes als ein Button, der in Ihre Seiten zum jeweiligen Produkt eingebaut wird.

Natürlich kann man einfach den HTML-Code, den Paypal pro Produkt zur Verfügung stellt, in beliebige Seiten oder Artikel einbauen, die das Produkt beschreiben, und das war es auch schon. Das wäre die flexible Lösung, aber auch die aufwändige Lösung.

Wir wollen hingegen eine simple Produkt-Detailseite für alle Produkte anbieten. Wir wollen eine Produktübersicht in Form einer WordPress-Bildgalerie darstellen, und wir wollen neue Produkte mit möglichst geringem Zeitaufwand einstellen können. Wenn ein Bild angeklickt wird, dann soll man die dazugehörende Produkt-Detailseite mit dem Warenkorb-Button erreichen.

Der Zeitaufwand zur Einrichtung hängt von der Anzahl der angebotenen Produkte in Ihrem Shop ab. Die Basisarbeiten bringen Sie vermutlich in 2 Stunden hinter sich. Die Einrichtung von Produkten benötigt danach pro Produkt vermutlich 2 Minuten bei PayPal  und 2 bis 5 Minuten bei Ihrer WordPress-Website. Das ist die schnelle Lösung, die wir anstreben.

Konzept

Hier unser Konzept:

  • Nutzung der Mediathek als Produktdatenbank
  • Codierung der Artikelnummern im Bildnamen
  • Nutzung des Anhang-Templates (attachment.php) als Produkt-Detailseite
  • Darstellung der Produktübersicht als Bildgalerie

Wir wollen das sogenannte Anhang-Template (attachment.php) als Produktdetailseite benutzen. Dort soll ein Formular-HTML-Code eingebaut werden, den uns PayPal für jedes Produkt zur Verfügung stellt, und der den Produkt-individuellen Warenkorb-Button sichtbar macht.

Wir wollen also in die Datei attachment.php das PayPal Button Formular dynamisch einbauen. Das heißt, je nach dem welches Produkt gezeigt wird, soll der entsprechende PayPal-Warenkorb Button gezeigt werden.

Um eine einheitliche Basis zu haben, halten wir uns an das Thema TwentyTen.

Das werden wir daher in WordPress an Themen-Dateien (technisch) vorbereiten:

  • einen Code in die Datei attachment.php einbauen
  • einen neue Datei paypal_array.php erstellen und in den Themen-Ordner legen

Hinweis: wenn wir im Folgenden von einer Artikelnummer sprechen, dann meinen wir damit Ihre Produkt-Nummer (PayPal sagt dazu: Referenznummer), nicht aber die Artikel-ID von WordPress.

Und los geht’s. Beginnen wir mit der Arbeit bei PayPal.

Paypal

Ohne Händlerkonto können Sie keine Warenkorb-Buttons generieren. Erstellen Sie also bei PayPal ein Händlerkonto, bzw. führen Sie ein Upgrade von Ihrem Kundenkonto durch.

Erstellung „PayPal Warenkorb“-Button für ein Produkt

Über die Navigation Händlerportal -> „PayPal Warenkorb“ erreichen Sie die Maske, um einen Warenkorb-Button zu erstellen.

Im Schritt 1 wählen Sie als Buttontyp: „Warenkorb“

Tragen Sie wesentliche Inhalte wie Artikelname, Referenznummer (= Ihre Artikelnummer), Betrag und Währung ein. Vergessen Sie auch nicht auf Steuersatz und Verpackungskosten.

Paypal-Warenkorb Schritt 1

Im Schritt 3 geben Sie die Zielseiten für den Bestellvorgang an. Das sind Seiten, auf die Besucher geleitet werden, wenn sie die Bestellung abbrechen oder aber erfolgreich beenden.

Paypal-Warenkorb Schritt 3

Wenn Sie alle notwendigen Felder ausgefüllt haben, klicken Sie auf „Button erstellen“.

Sie erhalten nun den Code für den Warenkorb-Button. Der Code wird so ähnlich aussehen, wie:

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="XXXPAYPALCODEXXX">
<input type="image" src="https://www.paypal.com/de_DE/AT/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal.">
<img alt="" border="0" src="https://www.paypal.com/de_DE/i/scr/pixel.gif" width="1" height="1">
</form>

Beachten Sie den Inhalt des Felds hosted_button_id, hier steckt der PayPal-Code für Ihr Produkt (ein Gemisch aus Buchstaben und Ziffern, in unserem Beispiel der fiktive Code XXXPAYPALCODEXXX).

Speichern Sie sich die Zuordnung der generierten PayPal-HTML Codes zur Artikelnummer (in einer Textdatei *.txt):

Artikelnummer 1000:

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
 <input type="hidden" name="cmd" value="_s-xclick">
 <input type="hidden" name="hosted_button_id" value="XXXPAYPALCODEXXX">
 <input type="image" src="https://www.paypal.com/de_DE/AT/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal.">
 <img alt="" border="0" src="https://www.paypal.com/de_DE/i/scr/pixel.gif" width="1" height="1">
 </form>

Artikelnummer 2000:

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="YYYPAYPALCODEYYY">
<table>
<tr><td><input type="hidden" name="on0" value="Optionen">Optionen</td></tr><tr><td><select name="os0">
 <option value="Option 1">Option 1 </option>
 <option value="Option 2">Option 2 </option>
 <option value="Option 3">Option 3 </option>
</select> </td></tr>
</table>
<input type="image" src="https://www.paypal.com/de_DE/AT/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal.">
<img alt="" border="0" src="https://www.paypal.com/de_DE/i/scr/pixel.gif" width="1" height="1">
</form>

etc.

Im gezeigten Beispiel sind 1000 und 2000 unsere Artikelnummern, jeweils dahinter folgt der HTML-Code, den uns PayPal zur Verfügung stellt.

Bei mehreren Produkten muss diese Prozedur für jedes Produkt durchgeführt werden. Aber wir wollen die Warenkorb-Funktionalität ja deswegen (im Gegensatz zu einer „Jetzt-Kaufen“-Funktionalität), weil wir mehrere Produkte anbieten.

Dazu ein Hinweis: Sie gelangen im Schritt 1 der Warenkorberstellung (im oberen Teil von Schritt 1 etwas versteckt) zu Ihren bereits erstellten Buttons, und können neue Buttons auf Basis der bereits existierenden Buttons erstellen. Das kann Zeit sparen.

PayPal eigene Button-Vorlagen

WordPress

Zielseiten

Legen Sie nun auf der Website die beiden Zielseiten für Bestellabbruch und Bestellbestätigung an (deren URLs wurden bei der Produktion des PayPal-Warenkorbs im Schritt 3 angegeben). Sorgen Sie dafür, dass diese beiden Seiten nicht über irgendein Menü der Website zu erreichen sind, sondern ausschließlich nur über PayPal.

Auf der Zielseite für Abbruch können Sie nach dem Grund des Abbruchs fragen und sich für Fragen zur Verfügung stellen. Auf der Zielseite für die erfolgreiche Bestellung können Sie sich bedanken, und Informationen zum weiteren Ablauf der Bestellung anführen.

Bildproduktion

Um die Artikelnummer auf den jeweiligen Produktdetailseiten zu erhalten, wird die Artikelnummer in den Namen der Bilddatei gesteckt:

Produktname__Artikelnummer.jpg (2 Unterstriche __ trennen den Produktnamen von der Artikelnummer)

Beispiel:

LED-Lauflicht__1000.jpg

Wir nehmen deswegen gleich zwei Unterstriche, damit gewährleistet ist, das wir später auch tatsächlich die Artikelnummer korrekt im Bildnamen identifizieren können (der Teil zwischen __ und dem Punkt). Wenn das Bild Schuhe_Herren_Leder_999.jpg heißen würde, dann hätten wir ein Problem. Mit dem Namen Schuhe_Herren_Leder__999.jpg aber nicht.

Laden Sie das Produktbild in die WordPress-Mediathek hoch und tragen Sie zum Bild passende Bildbeschreibungen ein.

Bild-Bearbeitung

Vergessen Sie nicht, bei „URL“ die Artikel-URL anzuklicken. Denn bei Klick auf das Bild soll sich die Anhang-Seite (unsere Produkt-Detailseite) öffnen.

Zuordnung Artikelnummer zu PayPal-Code

Jetzt geht es darum, unsere Artikelnummern mit dem passenden PayPal-HTML-Code zu  verknüpfen. In der Produkt-Detailseite (dem Anhang-Template attachment.php) wird der HTML-Code für den PayPal Warenkorb-Button eingetragen. Welcher der richtige ist, das lassen wir uns durch die Artikelnummer sagen. Und die Artikelnummer steckt ja im Bildnamen.

Am besten schaffen wir eine eigene Datei für die Zuordnung von Artikelnummern zu PayPal-HTML-Codes unter dem Namen paypal_array.php, die wir in das Verzeichnis des WordPress-Themas legen. In die Datei paypal_array.php schreiben wir ein sogenanntes PHP Array (PHP Feld) hinein, in dem Artikelnummern und PayPal-Codes als Paare abgespeichert werden:

<?php
$paypal_array = array(
 '1000' => '<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
 <input type="hidden" name="cmd" value="_s-xclick">
  ....
 </form>',

 '2000' => '<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
  ....
</form>',

);
?>

Dieses Array sieht im Realfall vermutlich auf dem ersten Blick furchtbar aus, aber folgt in Wirklichkeit einem simplen Schema:

$paypal_array = array(
 'Artikelnummer' => 'PayPal-HTML-Code',
 'Artikelnummer' => 'PayPal-HTML-Code',
 'Artikelnummer' => 'PayPal-HTML-Code',
);
?>

Achten Sie nur darauf, dass die einfachen Anführungszeichen erhalten bleiben, und dass im PayPal-HTML-Code auch tatsächlich kein einfaches Anführungszeichen (‚) enthalten ist, denn das würde unser Array zerstören, und die Website teilweise lahmlegen. Doppelte Anführungszeichen stellen dagegen kein Problem dar.

Das Array dient uns damit als eine Art kleine Datenbank. Jeder Artikelnummer ist nun der passende PayPal-HTML-Code zugeordnet, der den Warenkorb-Button anzeigt.

Produkt-Detailseite attachment.php

Der Einfachkeit halber bleiben wir in unserer Beschreibung beim Standardthema TwentyTen. Beachten Sie bitte gleich vorab, dass im Folgenden Änderungen an der Datei attachment.php vorgenommen werden. Bei einem WordPress-Update werden Ihre Änderungen aber wieder überschrieben! Es wäre also sinnvoll, sich ein Child-Thema zu Twenty Ten zu erstellen, in das Verzeichnis des Child-Themas die Dateien attachment.php und paypal_array.php zu kopieren, und an diesem Ort mit den Dateien zu arbeiten. Denn bei weiteren WordPress-Updates bleibt die Datei attachment.php, wenn sie sich im Ordner des Child-Themas befindet, vom Update unberührt.

Rufen Sie im Editor (Design -> Editor) die Datei attachment.php (Anhang-Template) auf.

Suchen Sie die Stelle

</div><!-- .entry-content -->

Unmittelbar davor fügen Sie folgenden Code ein:

<?php
require_once 'paypal_array.php';
$image_url = TEdeQ_get_attachment_url( $post->ID );
$bestellnummer = preg_replace("/.*\\_\_(.*)\\..*/", "$1", $image_url, 1);
if ( array_key_exists($bestellnummer, $paypal_array) ) {
  $paypal_code = $paypal_array[$bestellnummer];
} else {
  $paypal_code = '';
}
if ( strlen($paypal_code) > 1 ) { ?>
  <div>
    <?php echo $paypal_code; ?>
  </div>
<?php } else { ?>
  <div>
    <p>Derzeit ist eine Bestellung leider nicht möglich.</p>
  </div>
<?php } ?>

Was macht der Code:

  1. Einlesen der Datei mit den Zuordnungen Artikelnummer/PayPal-Code
  2. Auslesen der Bild-URL
  3. Auslesen der Artikelnummer aus der Bild-URL mittels Regular Expression
  4. Auslesen des PayPal-HTML-Codes mit Hilfe der Artikelnummer aus dem Array $paypal_array
  5. Wenn das erfolgreich gelingt:
    • Aufbau des Formulars unter Nutzung des korrekten PayPal-HTML-Codes
    • Andernfalls Anzeige, dass eine Bestellung nicht möglich wäre

Fertig.

Sie können nun mit den hochgeladenen Bildern Ihrer Produkte eine Galerie erstellen. Achten Sie dabei darauf, das bei Klick auf ein Bild die Anhang-Seite geöffnet wird.

So kann die Produktdetailseite mit Warenkorb-Button aussehen (Verschönerungen sind natürlich möglich, aber hier halten wir’s erst einmal einfach):

Fertige Produktdetailseite

Als Seitentitel taucht der Name des Bilds auf („LED-Lauflicht__1000“). Falls Sie das stört, geben Sie an der Stelle die Bildbeschreibung (Caption) aus.

Sollte Ihre Kundin nun den Button „In den Warenkorb“ anklicken, dann kann sie auf PayPal die Stückzahl aktualisieren, und danach entweder zu Ihrer Website zurückkehren, um weitere Produkte in den Warenkorb zu legen, oder den Kauf abschließen.

PayPal-Warenkorb

Fazit

Diesen Weg haben wir für jemanden beschritten, der gemalte Bilder online verkaufen möchte. Der redaktionelle Aufwand in WordPress beschränkt sich pro Bild auf die  richtige Namensgebung der Bilddatei, und den Eintrag von Artikelnummer und PayPal-Code in das PHP Array.

Wie bereits gesagt: das dürften die Zeitaufwände bei der Einrichtung von Produkten sein

  • 2 Minuten bei PayPal (zur Erstellung des sogenannten PayPal-Codes für Ihr Produkt) und
  • 2 bis 5 Minuten bei Ihrer WordPress-Website (zur Zuordnung von Artikelnummer zu PayPal-Code und Erstellung eines Bildnamens sowie Erstellung der Bildbeschreibung).

Bitte beachten Sie, dass hier nur die technische Möglichkeit besprochen wurde, mithilfe von PayPal zu einer einfachen e-Commerce Lösung zu kommen. Die rechtlichen Aspekte wurden im Artikel ausgespart.

Ist etwas unklar, haben Sie Anmerkungen? Dann bitte um Ihren Kommentar.

Und noch ein Wink mit dem Zaunpfahl: haben Sie schon unseren „Spenden“-Button in der Seitenleiste rechts bemerkt?

Beteilige dich an der Unterhaltung

8 Kommentare

  1. Hallo,

    tolle Anleitung,
    leider gibt es im Theme Twentytwelve keine attachment.php, wo müsste das dann eingebunden werden oder geht es dort nicht?
    Ginge es überhaupt, das Ganze mit einem Belegungsplan wie auf meiner Seite zu kombinieren?

    Danke für eine Antwort,
    beste Grüße, A. I. Schindler

  2. Sehr interessantes Konzept! Das Handling gefällt mir sehr gut. Man könnte das vielleicht noch weiter individualisieren, in dem man mit einem Custom Post Type „Produkte“ arbeitet. Das würde dann die Problematik mit der Attachment.php entschärfen. Dann konnte man dem CPT im Backend noch ein Meta-Feld zum Eintragen der PayPal-Nummer anbieten. Vielen Dank für diese Anleitung!

  3. Diese Lösung dürfte so ziemlich jeden Abmahner in Deutschland auf den Plan rufen, weil sie fast keine Anforderungen erfüllt, die für Online Shops bei uns verbindlich vorgeschrieben sind. Würde ich auf keinen Fall so machen.

  4. hallo…ich kriege den paypal-code nicht in den wordpressblog-eingebaut… ?
    funktioniert dies nur bei eine bezahlversion von wordpress oder auch sonst ?
    es ist das werkzeug … code vorhanden den klicke ich an und den code paypal ..jedoch es erscheint nichts ?
    kannst du mir hilfestellung ,rat geben ?

    danke

    hg.frank

  5. Hier ist die Rede von selbstgehostetem WordPress, also nicht von einer Installation auf wordpress.com. Aber vielleicht kannst Du Dein Problem deutlicher beschreiben?

  6. danke erstmal für das wirklich gut erklärte tutorial. jedoch hänge ich an der stelle, an der man in die attachment.php den code eintragen muss. denn ich habe keine attachment.php und auch keine image.php.
    Ich arbeite mit dem Theme Dandelion von pexto. vielleicht weiss jemand rat wo genau ich den code schnipsel einfügen muss?
    hab schon diverse php versucht – aber entweder passiert gar nichts – oder mir zerschiesst es die komplette seite… 🙁

    herzlichen gruss
    Susan

  7. Liebe Susan,

    der Artikel bezieht sich eine eine mittlerweile recht alte WordPress-Version. Aus diesem und aus einer Reihe anderer Gründe empfehle ich diese Anleitung nicht mehr. Vielleicht kommst Du mit eine Shop-Anbieter wie Eciwd (http://www.ecwid.com/) besser durch?

Schreib einen Kommentar

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