Flattr

Social

Plugins

Apps

Lab

Kategorien

8. Dezember 2010 / E-Commerce, WordPress

E-Commerce: Simpler Shop in WordPress zur Demonstration

Shop-Lösung in WordPress? Der Artikel zeigt, wie ein einfacher Shop in WordPress umgesetzt werden kann. Theme zum Download.
E-Commerce

Ein in WordPress integrierter Shop – früher eine kaum realisierbare Vision mit zahlreichen Tücken, Tricks und Umwegen. Mit neusten Versionen des Content-Management-Systems ein wahres Kinderspiel. Der Artikel legt die Möglichkeit nahe, eine smarte E-Commerce-Lösung auf Grundlage von WordPress aufzubauen, die ausschließlich auf interne Funktionen der Blogsoftware zugreift – also gänzlich ohne Erweiterungen. Der resultierende Shop dient alleinig der Demonstrationszwecken, besitzt die Aufgabe die Stärken, die Vielfalt und die Fähigkeit des WordPress als ausgereiftes CMS zu verdeutlichen.

Shop in WordPress von Sergej Müller: Mögliche Ausgabe der Produkte
Shop in WordPress: Mögliche Ausgabe der hinterlegten Produkte

Zusammenfassung
Die in WordPress frisch eingeführten Custom Post Types legen den Grundstein des initiierten Vorhabens und erlauben die Verwaltung weiterer Beitragsarten: u.a. Produkte. Im separaten Menüpunkt eingenistet können einzelne Produktelemente beliebig oft angelegt, editiert und gelöscht werden. Die Eigenschaften der Verkaufsartikel sind ebenfalls variabel und werden auf Wunsch im Code hinzugefügt, umpositioniert oder entfernt. Die Vergabe des Endpreises und die Zuweisung eines Produktbildes gehören in der vorgestellten Lösung zum Funktionsumfang.

Im Frontend: Ein Query-Filter holt die eingestellten Produkte analog zu den Blogposts ins Theme-Template und gibt diese samt Preise und direkter Kaufmöglichkeit bei PayPal aus.

Ressourcen
Der Reihe nach kommen nun Abbildungen der Produktverwaltung im Backend, danach das Script für die functions.php und das exemplarisch angelegte SimpleWPCommerce-Theme zu Testzwecken. Viel Spaß beim Experimentieren und Weiterentwickeln.

Verwaltung der Produkte über eigenen Menüpunkt
Praktisch: Verwaltung der Produkte über den eigenen Menüpunkt

Produkt kann einen Titel und eine Kurzbeschreibung erhalten
Produkt kann einen Titel und eine Kurzbeschreibung erhalten…

Aber auch einen Preis und ein Produktbild
…aber auch einen Preis und ein Produktbild

In WordPress angelegte Produkte als Übersicht
In WordPress angelegte Produkte als tabellarische Übersicht

PHP-Klasse für eine beispielhafte Shop-Einbindung in WordPress

<?php
class SimpleWPCommerce {
  function SimpleWPCommerce() {
    register_post_type(
      'products',
      array(
        'label' => 'Produkte',
        'singular_label' => 'Produkte',
        'public' => true,
        'show_ui' => true,
        '_builtin' => false,
        '_edit_link' => 'post.php?post=%d',
        'capability_type' => 'post',
        'hierarchical' => false,
        'query_var' => 'products',
        'supports' => array(
          'title',
          'excerpt',
          'thumbnail'
         )
      )
    );

    add_action(
      'admin_init',
      array(
        $this,
        'add_meta'
      )
    );
    add_action(
      'wp_insert_post',
      array(
        $this,
        'save_meta'
      ),
      10,
      2
    );

    add_filter(
      'manage_edit-products_columns',
      array(
        $this,
        'edit_columns'
      )
    );
    add_action(
      'manage_posts_custom_column',
      array(
        $this,
        'posts_column'
      )
    );
  }

  function edit_columns() {
    return array(
      'cb'              => '<input type="checkbox" />',
      'title'           => 'Produkt',
      'sm_shop_excerpt' => 'Kurzbeschreibung',
      'sm_shop_price'   => 'Preis',
    );
  }

  function posts_column($column) {
    switch($column) {
      case 'sm_shop_excerpt':
        the_excerpt();
        break;

      case 'sm_shop_price':
        echo sprintf('&euro; %s', get_post_meta($GLOBALS['post']->ID, 'sm_shop_price', true));
        break;

      default:
      break;
    }
  }

  function add_meta() {
    add_meta_box(
      'sm_shop',
      'Preis',
      array(
        $this,
        'display_meta'
      ),
      'products',
      'side',
      'low'
    );
  }

  function display_meta() {
    echo sprintf(
      '<input name="sm_shop_price" value="%s" />',
      esc_attr(get_post_meta($GLOBALS['post']->ID, 'sm_shop_price', true))
    );
  }

  function save_meta($id, $post) {
    if ($post->post_type == 'products') {
      update_post_meta(
        $id,
        'sm_shop_price',
        number_format_i18n(@$_POST['sm_shop_price'], 2)
      );
    }
  }
}

add_action(
  'init',
   create_function(
     '',
     'new SimpleWPCommerce();'
   )
);
?>

Query-Filter für den Abruf der Produkte im Template

<?php query_posts('post_type=products'); ?>

Simpler Shop in WordPress: Exemplarisches Theme
› SimpleWPCommerce Theme zum Download ↓
› Screenshot der Produkt-Auflistung im Theme

Sergej Müller

[Der Autor]Sergej Müller ist enthusiastischer Software Engineer mit Schwerpunkten Webentwicklung, Apps und WordPress. Seit 2007 programmiert und vertreibt er wpSEO, das zugkräftige SEO-Plugin für WordPress-Blogs.