Monat: November 2012

Nachdem mein Theme im wesentlichen fertig ist, möchte ich hier in lockerer Folge alle Dinge zusammenstellen, die mir im Verlauf mit der Arbeit am Jigoshop aufgefallen sind

Benutzerverwaltung

Jigoshop nutzt die WordPress Benutzerverwaltung, also die users und usermeta Datenbanktabellen von WordPress.

Jeder Käufer, der sich im Shop registriert, wird in diese Tabellen eingetragen und kann sich daher auf der Seite über das WordPress login  anmelden. Auf seinem Level 0 (der Administrator hat den Level 10) darf er allerdings nur seine Profildaten verändern. Für große Shops mit Tausenden von Käufern halte ich diese Vorgehensweise aber für intolerabel.

Übersetzungen

Jigoshop ist leider an (für mich) wesentlichen Stellen bisher (jigosho 1.4.3 Oktober 2012) unübersetzbar. Bei der Übersicht seiner Bestellungen wird einem Käufer als Versandort Germany genannt. Das kann man zwar patchen – jigoshop/classes/jigosho_order.class.php – Zeile 145 einfügen

if ($country==’Germany‘) $country=’Deutschland‘; –

aber ein Patch ist ein Patch und eine Rose ist eine Rose. Die classes lassen sich leider nicht überschreiben wie die templates (siehe dazu Teil 3). Warten wir halt mal auf eine neue Version.

Die Begrüßung, nachdem man sich registriert hat, ist englisch-amerikanisch. Ein Käufer namens Bram Stoker wird mit

„Hallo, Bram. Von Ihrer Benutzerkonto-Übersicht aus können Sie neue Bestellungen sehen, den Versand und die Rechnungsadresse verwalten sowie Ihr Passwort ändern.“
empfangen.

Für Bram ist das ok, aber für Otto Müller vielleicht nicht…

Bestellungen

Die Bestellungen landen in serialisierter Form in der postmeta Tabelle des Themes und können von einem externen Auswertungsprogramm nicht ohne weiteres analysiert werden.

Beispiel:

a:1:{i:0;a:9:{s:2:“id“;s:3:“122″;s:12:“variation_id“;s:0:““;s:9:“variation“;a:0:{}s:13:“customization“;s:0:““;s:4:“name“;s:37:“2011 – Riesling – Trocken“;s:3:“qty“;s:1:“1″;s:4:“cost“;s:5:“10.84″;s:12:“cost_inc_tax“;s:2:“-1″;s:7:“taxrate“;s:7:“19.0000″;}}

5. Featured Products / der Bestseller

Ein featured product ist ein normales Jigoshop Product, bei dem im Backend ein zusätzliches Kennzeichen gesetzt wurde

Die Darstellung im Frontend ist dieses Mal sehr einfach. Im Template Weinshop muss nur an geeigneter Stelle der folgende jigoshop-shortcode eingefügt werden

<?php echo do_shortcode( '[featured_products per_page="1" columns="1"]' ) ?>

Dadurch wird unsere modifizierte loop-shop.php aufgerufen, die das Produkt über die vorhandene Funktion nf_product_display(…) darstellt.

6. Styling der weiteren Seiten des Jigoshops

Die restlichen Seiten des Shops werden relativ unverändert übernommen. Das Styling dieser Seiten steht in der Datei plugins/jigoshop/assets/css/frontend.css im Jigoshop.

Wenn es z.B. durch veränderte Seitendimensionen nicht ganz passt und verrutscht, kann man das jigo-css über die obligatorische  style.css im WordPress Theme überschreiben.

Z.B. habe ich im Warenkorb das standardmässige Produktbild-Thumbnail mit display: none verschwinden lassen und die Gesamtbreite der Shopseiten verändert.

7. https

Zu diesem Thema werde ich mich später mal wieder melden, wenn ich damit beim Launch meines Projekts mehr Erfahrung gesammelt habe

4. Einzelproduktdarstellung

Die wichtigste Datei ist hier … plugins/jigoshop/templates/single-product.php. Die Umstände sind ähnlich wie bei der Produktdarstellung in der  loop-shop.php.

Also wird auch single-product.php in das Theme in den Ordner jigoshop kopiert und modifiziert.

Anschließend sieht die Datei wie folgt aus, gleicht also eher der bekannten single.php

<?php get_header('shop'); ?>
<div ...>
<div ...>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); global $_product; $_product = new jigoshop_product( $post->ID ); ?>
<?php do_action('jigoshop_before_single_product', $post, $_product); ?>
<?php nf_single_product_display($post,$_product,$loop); ?>
<?php endwhile; ?>
</div>
</div>
<?php get_footer('shop'); ?>

Die  (hier viel aufwändigere) Umsetzung der grafischen Vorlage wird in der Funktion nf_single_product_display(..) in der functions.php durchgeführt.

3. Produktdarstellung

Verantwortlich für die Anzeige des Shops bzw. in meinem Fall der einzelnen Produkte in ihren Kategorien ist die Datei …plugins/jigoshop/templates/loop-shop.php

Sie wird über den entsprechenden Shortcode auf den WordPress-Produktseiten (z.B.

[ jigoshop_category slug="weissweine” ]

aufgerufen.

In loop-shop.php sind bereits einige action-hooks enthalten. Diese Hooks werden über

…. plugins/jigoshop/template_actions.php  und

…. plugins/jigoshop/template_functions.php  bedient.

Alles in allem ist das etwas unübersichtlich, weil template_actions.php und  template_functions.php selbst wieder neue action-hooks erzeugen und bedienen.

Der Demo-Shop im Theme twentyeleven lässt sich damit perfekt erzeugen, aber eine Änderung der Produktanzeige nur über die Hooks ist entsetzlich mühselig.

Ich habe daher auf all diese Hooks verzichtet, in meinem Theme einen Ordner jigoshop erstellt, die loop-shop.php dort hinein kopiert und modifiziert. Ähnlich wie WordPress mit den Childthemes verfährt, greift Jigoshop auf diese Datei zu, wenn loop-shop.php geladen werden soll.

Meine loop-shop.php sieht jetzt so aus:

global $columns, $per_page;
$nf_flag=is_shop('Weinshop');
if (!$nf_flag) do_action('jigoshop_before_shop_loop');

$loop = 0;
ob_start();

if (have_posts()) : while (have_posts()) : the_post(); $_product = new jigoshop_product( $post->ID ); $loop++;

nf_product_display($post,$_product,$loop,$nf_flag);

endwhile; endif;

if ($loop==0) :

if ($nf_flag) echo '';
else echo '<p class="info">'.__('No products found which match your selection.', 'jigoshop').'</p>';

else :

$found_posts = ob_get_clean();

if ($nf_flag) {echo $found_posts;}

else {echo '<div id="product_wrapper">' . $found_posts . '</div><div class="clear"></div>';}

endif;

In der Funktion nf_product_display (…), die in der functions.php steht, wird das Produkt so wie in der Werbeagentur-Vorlage grafisch vorgegeben aus den vielen Einzelteilen über get_post_meta( $post->ID, …. ) zusammen gebaut und direkt ausgegeben.

Wenn man genau hingesehen hat, sind zwei Loops notwendig für die Produktausgabe.

Über loop-shop.php werden alle in Frage kommenden Produkte gesammelt und formatiert und über die zweite Loop in dem WordPress-Seiten-Template dann in einem Satz ausgegeben.

Für einige Funktionen wie „Preis ausgeben“ und „in den Warenkorb legen“ habe ich mich noch an Methoden der wichtigen Produktklasse plugins/jigoshop/classes/ jigoshop_product.class.php, die in der Loop für jedes Produkt neu instanziiert wird, bedient ($_product->get_price_html() bzw. $_product->add_to_cart_url())

Man sollte noch daran denken, in der Nähe des Preises den Hinweis „inkl. MwSt. zzgl. Versand“ anzufügen.

2. Seiten

Für die Produktseiten  lege ich ein Template an

<?php
/*
Template Name: Weinshop_leer_ohne_Kommentare
*/
?>
<?php
get_header(); ?>
<div …
<div ….
<?php if (have_posts()) : while (have_posts()) : the_post();

the_content()

endwhile; endif; ?>
</div>
</div>
<?php get_footer(); ?>

Hier ist nur das notwendigste enthalten.

Für jedes Produkt (Rotweine, Weißweine, …) erzeuge ich dann eine WordPress-Seite, der dieses Template zugeordnet wird.

Auf der WordPress-Seite wird der Jigoshop-Shortcode für das entsprechende Produkt eingetragen.

Also für Weißweine:

[ jigoshop_category slug="weissweine" ]

Ein zweites Template bekommt die WordPress-Seite „Weinshop“. Hier werden aber keine Produkte (Ausnahme: das featured product – Bestseller, aber davon später mehr) angezeigt, sondern nur allgemeine Informationen. Deshalb enthält dieses Template auch keinen Loop.

<?php
/*
Template Name: Weinshop_ ohne_Kommentare
*/
?>
<?php
get_header(); ?>
<div …
<div ….
<?php do_action('jigoshop_before_shop_loop');?>
</div>
</div>
<?php get_footer(); ?>

Der action-hook ‚jigoshop_before_shop_loop‘ wird benötigt, um Jigoshop Meldungen anzuzeigen (z.B. „Produkt erfolgreich in den Warenkorb gelegt“)

Um die Sidebar auszublenden, die wir in diesem Theme nicht benötigen, muss man in die functions.php folgendes eintragen:

remove_action('jigoshop_sidebar', 'jigoshop_get_sidebar', 10);

Damit Jigoshop zufrieden ist, lege ich noch eine WordPress-seite “shop” an und weise in der Jigoshop Konfiguration, „Katalog&Preise“ dem Eingabefeld „Basisseite Produktkatalog“ diese Seite, die aber sonst im Weinshop überhaupt keine Rolle spielt, zu.

Das nächste Eingabefeld auf der gleichen Seite  „Weiter zum Shop“ bekommt die Startseite des Shops, die Seite „Weinshop“ zugewiesen.

Als letztes müssen WordPress Seiten für die einzelnen Shop- Funktionen (Benutzerkonto, Warenkorb usw. )angelegt werden. Auf jeder Seite muss der in der Jigoshop Konfiguration „Seiten“ angezeigte Shortcode eingetragen werden.

Damit hätten wir den 2. Teil erledigt

In den nächsten Artikeln möchte ich beschreiben, wie ein neues Theme für einen Jigoshop entsteht.

Der Shop ist online unter diesem Link

English Summary: This is a description of how to set up a new Jigosgop theme, not a description of the installation and configuration. The foundation of the theme is an ad agency design which requires extensive modifications of the simple twentyeleven demo shop layout.

Warum Jigoshop und nicht woocommerce?

Jigoshop und woocommerce sind (noch) funktional fast identisch. Das meiste, was hier über Jigoshop gesagt wird, trifft auch auf woocommerce zu. Den Ausschlag für Jigoshop gab, dass hier alle im Projekt benötigten Zahlungsmodule in der Basisversion bereits enthalten waren, und nicht dazu gekauft werden mussten.

Vorgehensweise:

Die Vorlage für das Theme ist ein Entwurf einer Werbeagentur. Das Produkt, hochwertiger Wein, soll in einem kleinen aber feinen Weinshop vom Winzer direkt vermarktet werden.

Teil 1: Backend

Mit dem Backend (Jigoshop/ Produkte) fangen wir an. Zum Anlegen der Produkte (die Jigoshop Produkte sind „custom posts“ und heißen schlicht „product“) brauchen wir die Möglichkeit, mehrere verschiedene Bilder zu hinterlegen und über 20 Produktzusatz-Angaben zu erfassen. Der Jigoshop bringt hier bereits einiges mit (z.B. die Preiseingabe), aber leider reicht es nicht aus.

Zum Glück ist „Wein“ ansonsten ein „einfaches“ Produkt, so dass wir uns nicht auch noch mit „gruppierten“ oder „variablen“ Produkten herumschlagen müssen.

Der Jigoshop benutzt als  Produktbild das quadratische WordPress Artikelbild. Das gefällt nicht so sehr.

Produktzusatz-Angaben kann man über die mitgelieferte Metabox „Produktdaten“ machen. Die Bedienung dieser Metabox ist gewöhnungsbedürftig und lässt auch keine komfortable Eingabe von zusätzlichen Bildern zu.

Wer damit leben kann, braucht jetzt nicht weiter zu lesen, d.h. vielleicht noch den Abschnitt „Zu guter Letzt“ ganz unten. Für die Bilder gibt es noch den Plan B auch weiter unten. Die zusätzlichen Daten aus der Metabox „Produktdaten“ werden in die postmeta Tabelle der WordPress Datenbank in komprimierter Form eingetragen.

Das ist ok für wenige Produkte. Für viele Produkte sollte man einen anderen Ansatz (=eigene Datenbanktabelle) oder einen anderen Shop wählen.

Weil ich nicht so gut mit der vorhandenen Metabox leben kann (der Kunde soll die Webseite später selbst pflegen können), wird das Backend (Produkt hinzufügen) um zwei Eingabefelder für Bilder und 20 Text- bzw. Textarea-Felder in zwei neuen Metaboxen erweitert. Dazu benutze ich das von Steve Taylor  beschriebene Verfahren. Er hat auch ein Plugin  für Entwickler geschrieben, das ich aber noch nicht ausgetestet habe.

Warum kein fix & fertiges Plugin wie Magic Boxes? Das ist Geschmacksache. Ich würde dies Plugin sofort einsetzen, wenn es von WordPress anstelle von Hello Dolly ausgeliefert würde. Im Falle meines Kundenprojekts verlasse ich mich auf die Sachen, die ich kenne, und weiß, wo ich hinfassen muss, wenn es mal nicht funktioniert. Der Jigoshop ist schon kompliziert genug.

Der Code, der die Metaboxen erzeugt, sieht etwas anders aus als bei Steve Tylor:

 add_meta_box('jigo_shop_prod','weitere Produktdaten', array( &$this, 'displayCustomFields1' ), 'product','normal','core');
 add_meta_box('jigo_shop_prod_detail','Weindetails', array( &$this, 'displayCustomFields2' ), 'product','normal','core');

Hier steht explizit der Posttyp ‚product‘ drin.

So sieht es fertig aus (Ausschnitt):

Von den Jigoshop Standard Feldern wird nur das Preisfeld benutzt.

Ganz oben kann man den Bild-Uploader sehen. Informationen dazu gibt es z.B. hier

Wenn man den so nicht hinbekommt (ihr könnt auch einen Kommentar schreiben, ich helfe gerne) gibt es den Plan B: ein einfaches Textfeld erzeugen, Bilder in die Mediathek laden, Bild aufrufen, den Link kopieren und in das Textfeld eintragen. Ist etwas aufwendiger, funktioniert aber auch.

Auch in diesem ohne Zweifel aufwändigerem Verfahren werden die Daten in die postmeta Tabelle von WordPress eingetragen, allerdings ohne serialisiert zu werden. Da wir aber nur wenige Produkte haben, ist das so in Ordnung.

Und wenn es mehr werden? Die Struktur der zusätzlichen Eingabefelder ermöglicht einen leichten Übergang auf Datenspeicherung in einer eigenen Tabelle.

Zu guter Letzt:

Im Backend werden Jigoshop-Kategorien für die einzelnen Produkte angelegt, in meinem Fall also Weißwein, Rotwein, Sekt usw