---

Sehr geehrte POWERGAP Shopbetreiber,

nach langer Entwicklungszeit ist nun das nächste wichtige Feature, was sich schon so viele gewünscht haben fertiggestellt.

Bisher gab es ja nur die Möglichkeit über die Infogruppen- und Typen die Artikeldetailanzeige per Mausklick mit wenig Aufwand zu konfigurieren. Das bleibt natürlich auch weiterhin der Standard. Komfortabel, schnell und ohne HTML Kentnisse.

Zusätzlich können Sie ab sofort Ihre Artikeldetailanzeige auch komplett per eigenem HTML Template selbst gestalten. Nicht nur das, es ist damit möglich nicht nur wie bisher je Artikelgruppe unterschiedliche Designs einzustellen, sondern sogar für Untergruppen, Hersteller oder gar für einzelne Artikelzusätze. Was letztendlich sogar ein eigenes Design für einen einzelnen Artikel möglich macht, wenn man das möchte.

---

Entscheidet man sich für dieses Template und hat mehr als eine Artikelgruppe aktiv, will aber nur in einer ein Template verwenden und in allen anderen Artikelgruppen die "alte Standardanzeige" beibehalten, ist das nicht möglich! Es müssen somit zwingend zwei Templates angelegt werden, eines für die entsprechende Artikelgruppe und das zweite dann für die restlichen aktiven Artikelgruppen!

---

Wie schon oben in der Grafik erwähnt ist die Konfiguration für die Shopbetreiber gedacht, die auch das nötige Wissen in Sachen HTML/CSS mitbringen. Wir bitten drum das nicht selbst zu versuchen, wenn man nicht absolut sicher im Umgang mit diesen Formatierungssprachen ist. Denn die Auswirkungen können so aussehen, dass z.B. das reinlegen von Artikeln in den Warenkorb plötzlich nicht mehr funktioniert.

Einrichtung:

Über den folgenden Pfad gibt es zwei neue Menüpunkte:



Der Klick auf Template > Pflege öffnet die folgende Maske:



In dieser können Sie ganz oben neue Templates anlegen. Die Bezeichnung ist nur für interne Zwecke, damit Sie diese für such unterscheiden können. Das Standard-Template mit der ID 1 ist nicht löschbar.

Die Pflege der Templates mit Klick auf das Symbol mit dem gelben Stift erfolgt mehrsprachig:



Für die Bearbeitung kann man die Felder mit dem bereits bekannten Button vergrößern. Die anderen Sprachen sind zunächst ausgeblendet, mit Klick auf die Fahne werden diese Felder auch sichtbar.

Beim Template sind im Grunde keine Grenzen gesetzt. Hier kann man sich mit DIVs und dem nötigen CSS beliebig austoben.  8)
Die Einbindung der bekannten Module oder einzelner Werte erfolgt wie immer über Synonyme. Die fangen bekanntlich mit einem #-Symbol an. Bei einigen muss auch ein #-Symbol am Ende stehen, dazu später mehr.

Die einsetzbaren fertigen Module sind im Grunde die bisher als Infotyp bekannten Elemente, die man nun per Synonym einbindet.

Ein einfaches Beispiel:



welches diese Artikeldetailanzeige ausgeben würde:



Das Prinzip mit den Synonymen ist relativ einfach. Die meisten sind selbsterklärend. Hier die komplette Auflistung:

#anr	Artikelnummer
#url	URL des Artikels
#urlencode	URL des Artikels encodet, z.B. um diese in einer URL als GET-Parameter anzuhängen
#basket
#features_n	nebeneinander
#features_u	untereinander
#weiterempfehlung	Artikel weiterempfehlen
#email_formular	meist genutzt für "Haben Sie eine Frage zum Artikel?"
#menue_foto	Zusatzfoto (bei z.B. DVDs um das DVD Menü als Thumb anzuzeigen)
#banner1 bis #banner16	Banner, die m an in der Bannerverwaltung mit dem Bannerort "Artikelbanner" angelegt hat. Hat man mehrere Banner einem Bannerort zugeordnet werden diese per Zufallsgenerator rotierend eingeblendet.
#produktserien_info_u	untereinander
#produktserien_info_ddk	DROP-DOWN kurz
#produktserien_info_dd	DROP-DOWN
#produktserien_info_th	Thumb
#produktserien_info_th_css	Thumb per CSS
#schauspieler_db_n	nebeneinander
#schauspieler_db_u	untereinander
#bilder_screenshots_k	kurz
#bilder_screenshots_g	grafisch
#mini_bilder	alls 10 Vergrößerungen als Mini-Thumb mit Highslide-Funktoin. Sie auch Update!
#bilder_k	A&B kurz
#bilder	A&B
#screenshots_k	kurz
#screenshots
#pic	Artikelfoto
#farb_varianten_dd	DROP-DOWN
#farb_varianten_th	Thumb
#artikel_name	Nur der Artikelname (unformatiert!)
#artikel_name1	Infotyp Artikelname1
#artikel_name2	Infotyp Artikelname2 mit Artikelzusatzgrafiken und darunter die Angabe des verlinkten Herstellers
#artikel_text	Artikelbeschreibung
#artikel_html	Musik/HTML Feld
#artikel_link	Link zum Artikel (wenn DHE aktiv, dann DHE-Link)
#artikel_zoomify	Zoomify-Link
#artikel_pic	Link zum Artikelbild, wenn kein Pic P vorhanden, dann wird "img/foto_p_de.gif" geladen (Wenn DPE (1) aktiv, dann auch DPE-Link)
#basket
#bewertungen
#cross_selling
#cross_selling_css
#mod1	Artikelanzeigemodul1
#mod2	Artikelanzeigemodul2
#herstellerinfo	Herstellerinformation, die je Hersteller gepflegt wird
#diff1	Differenz zwischen Listenpreis und Standardpreis
#diff2	Differenz zwischen Listenpreis und Standardpreis in Prozent
#diff3/#diff4	Text wird ausgeblendet, wenn keine Differenz vorhanden bzw. wenn Listenpreis kleiner dem Standardpreis ist! Beispiel: #diff3Sie sparen #diff1 #curk, das sind wahnsinnige #diff2%!#diff4

Passendes CSS zu "#cross_selling_css" bzw. "#produktserien_info_th_css":





Die folgenden Synonyme (da teilweise dynamisch) müssen auch mit einem #-Symbol geschlossen werden:

#feld_ag#	Name der Artikelgruppe des Artikels
#feld_her#	Name des Herstellers von diesem Artikel
#feld_her_grafik_link#	Grafik des Herstellers von diesem Artikel (verlinkt)
#feld_aug_komma#	Auflistung aller Artikeluntergruppen mit Komma getrennt. Ist ein Artikel nur einer AUG zugeordnet, wird der Name der AUG selbstverständlich ohne Komma angezeigt.
#feld_aug_liste#	Auflistung der Artikeluntergruppen als <ul><li>...</li></ul> Konstrukt. Damit kann man dann über die zugeordneten CSS-Klassen eine Darstellung nach eigener Vorstellung umsetzen.
#feld_aug2_komma#
#feld_aug2_liste#
#feld_zk1_komma#
#feld_zk1_liste#
#feld_zk2_komma#
#feld_zk2_liste#
#feld_azu_grafik#

---

Beispiel für eine Krümelpfad/Breadcrumb-Navigation (http://www.powergap.de/forum/index.php?topic=917.0):



Die Synonyme werden mit den Links ersetzt:

#feld_ag_link# = Link zur Artikelgruppe
#feld_aug_link# = Link zur Artikeluntergruppe
#feld_aug2_link# = Link zur Artikeluntergruppe 2

Sollte die DHE aktiv sein werden entsprechende Links auch als DHE-Links verwendet.

---

Mit dem Synonym "#db_feld_..#" lassen sich sämtliche Datenbankfelder der Artikeltabelle abgreifen. Hier die wichtigsten in der Übersicht:

#db_feld_bn#	Artikelnummer
#db_feld_ag#	ID der Artikelgruppe
#db_feld_lp#	Listenpreis (UVP)
#db_feld_vk#	VK (Preisgruppe 0)
#db_feld_st#	SteuerID
#db_feld_ean#	EAN Nummer
#db_feld_studio#	ID des Herstellers
#db_feld_gewicht#	Gewicht in Kg mit 3 Nachkommastellen und Punkt als Dezimaltrenner (wie in der DB gespeichert)
#db_feld_name_de#	nur Artikelname
#db_feld_text_de#	Artikeltext in Deutsch. Achtung! Bitte eigentlich nur das Synonym #artikel_text benutzen, denn dieses hier direkt aus der DB ist unbehandelt, enthält z.B. BB-Code und auch sind keine Funktionen ausgeführt wie der Replace Glossar usw.
#db_feld_feat_de#	Feld Features in Deutsch
#db_feld_tformat_de#	Tonformat in Deutsch
#db_feld_untert_de#	Untertitel
#db_feld_x3#	Feld x3
#db_feld_x4#	Feld x4
#k_aa	damit läßt sich ein eigenes individuell entwickeltes Script einbinden, das dann alle erdenklichen dynamischen Möglichkeiten bietet. Sprechen Sie dazu bitte den POWERGAP Support an.

Sollten Sie noch weitere benötigen, bitte einfach bei uns anrufen. Wir haben hier bewusst nicht alle über 140 Datenbankfelder aufgeführt.

Wenn Sie eine "dynamische Reiterfunktion" einbinden möchten ist das mit folgendem Code möglich:

HTML für Template:


CSS:


Grafiken:
Grafik inaktiver Reiter
Grafik aktiver Reiter

Das kann dann z.B. so aussehen.. jeder Reiter lässt sich anklicken und nach Klick wird entsprechender Inhalt darunter angezeigt:



Bitte genau auf die IDs innerhalb des Codes achten.. wenn Reiter enrfernt werden, dann müssen auch die IDs angepasst werden.. sowahl im Javascript ganz oben, als auch in beiden Blöcken!

Was wenn ein Synonym fehlt?

Sehr einfach, bitte uns kurz anschreiben. Wir können letztendlich für alles ein Synonym programmieren. Die o.a. Auswahl zeigt die Synonyme, die man benötigt, um alle bisherigen Möglichkeiten auszuschöpfen. Es werden hier in den nächsten Wochen sicher noch viele Synonyme hinzukommen und wir werden diesen Beitrag selbstverständlich wie immer erweitern.

Mit der individuellen Programmierung von Synonymen ist es möglich noch so ausgefallene Wünsche umgesetzt zu bekommen.

Bisher war es ja auch möglich eine Artikeldetailanzeige komplett auf eigene Vorstellung programmiert zu bekommen. Das kostete uns in der Vergangenheit immer viel Zeit für die Entwicklung. Mit diesem neuen Feature heute kann der Shopbetreiber selbst eine eigene Anzeige unabhängig unserer Programmierkapazitäten programmieren.

Mögliche Zuordnung der Templates zu Artikeleigenschaften:

Und damit kommen wir zu der eigentlichen Besonderheit dieser neuen Funktion! Mit dieser Zuweisung ist es möglich nicht nur wie bisher je Artikelgruppe eigene Layouts der Artikeldetailanzeige zu erstellen, sondern nun auch auf alle anderen Strukturen wie Untergruppen, Hersteller oder gar Artikelzusätze.

In der Maske für die Zuordnungen:



kann man oben zunächst das Standardtemplate festlegen. Ausgeliefert ist als Standard zunächst bei allen Shops die ID 1.

Darunter nun die Möglichkeit Regeln festzulegen. Hat man keine Regel festgelegt gilt für alle Artikel das eine Standard-Template.

Möchte man nun z.B. für die Artikelgruppe "DVDs" ein separates zuweisen, dann einfach die Artikelgruppe im Dropdown auswählen und dann das zuvor angelegte Template zuweisen:



Die neue Regel erscheint sofort nach der Zuweisung in der Anzeige darunter.

Wenn sich Templates überschneiden, gilt die folgende Reihenfolge:

1. Artikelgruppe
2. Artikeluntergruppe
3. Artikeluntergruppe2
4. Zusatzkategorie1
5. Zusatzkategorie2
6. Hersteller
7. Artikelzusatz

Das Template für einen Artikelzusatz hat eine höhere Priorität als die für z.B. eine Artikelgruppe. Sprich, wenn Sie gleichzeitig ein Template für die Artikelgruppe ..DVDs.. eingestellt haben, und auch eine separate für den Artikelzusatz ..Sonderangebot.., dann wird das Template was bei ..Sonderangebot.. hinterlegt ist verwendet, wenn der Artikel für beide Bedingungen zutrifft.

Wie teste ich das Template live im Shop?

Sehr einfach. Mit einem GET Parameter (aat=[Template-ID]), den man an die URL hängt! Also entweder mit:

http://www.[meineShop-URL].de/s01.php?shopid=s01&cur=eur&sp=de&ag=1&pp=aa&bnr=101110&aat=1

oder bei DHE-Links:

http://www.[meineShop-URL].de/Mein_Artikel.html?aat=1

Das "aat" steht für ArtikelAnzeigeTemplate.

Das Testen aller Funktionen der neuen Anzeige ist natürlich Voraussetzung, bevor man auf den Template-Betrieb umschaltet. Auch Artikel in den Warenkorb legen, auch unterschiedliche Artikel, wenn man z.B. auch Konfiguratorartikel nutzt.

Zum Schluss: Artikeldetailanzeige per HTML-Template aktivieren:

Wenn alles getestet ist, dann kann man über Sonstiges > Grundeinstellungen > Abschnitt 9 > Feld Artikel-Detailanzeige-Layout die Umschaltung vornehmen.

---

Sollten Fragen aufkommen hilft unsere Hotline selbstverständlich bei der Erklärung der neuen Funktion. Wer sich schon immer eine neue Anzeige ganz individuell gewünscht hat und die bisher immer gut 4-stelligen Kosten der Individualprogrammierung gescheut hat, kann das nun entweder selbst in die Hand nehmen, oder auch uns beauftragen. Wir können mit Hilfe dieses Features nun deutlich schneller individuell Layouts realisieren.

Keyword: atemplate