Wechseln zu: Navigation, Suche

Kategorie:JTL-eazyAuction:eBay:Designvorlagen

(Weitergeleitet von 5. Designvorlagen)


eBay-Designvorlagen (ab 1.0)

Achtung: Seite befindet sich in Bearbeitung!
Bitte haben Sie etwas Geduld. Die Informationen sind noch nicht gültig!

Mithilfe der eBay Designvorlagen können Sie das Aussehen Ihrer Artikel auf eBay attraktiver gestalten. Sie haben die Wahl zwischen vorgefertigten Templates, welche in JTL-eazyAuction standardmäßig zur Verfügung gestellt werden - zu Beispiel dem neuen, an unseren JTL-Shop angelehnten und responsiven EVO-Template - und der Möglichkeiten, eine eigene Designvorlage vollständig neu aufzubauen. Für beide Wege nutzen Sie einen DotLiquid-fähigen Editor, welcher u.a. in der Registerkarte Bearbeiten integriert wurde. Der Editor enthält zahlreiche, gut dokumentierte Variablen, Filter und Code-Blöcke. Solche Bausteine erleichtern Ihnen das Erstellen attraktiver Vorlagen.

Der Umgang mit eBay-Designvorlagen kann besonders für Einsteiger sehr anspruchsvoll sein. Sie werden bei der Verwendung zahlreiche Verknüpfungen zwischen JTL-Wawi und dem Marktplatz eBay berücksichtigen müssen. Wir haben deshalb neben dieser Kurzdokumentation des Editors auch ein Tutorial erstellt, welches Sie durch den Aufbau einer einfachen Designvorlage führt, die aber auf komplexere Einstellungmöglichkeiten in JTL-Wawi zurückgreift (z.B. mehrsprachige Texte, Attribute und Merkmale).

Zum Tutorial: Neue eBay-Designvorlage erstellen


Was passiert beim Umstieg auf JTL-Wawi 1.0?
Wenn Sie bereits eBay-Designvorlagen einsetzen, dann verwendeten Sie bisher eine Platzhalter-Schreibweise wie diese: $#Text.Hersteller#$ . Beim Update auf JTL-Wawi 1.0 werden einige Ihrer bisherigen eBay-Platzhalter durch DotLiquid-Platzhalter ersetzt. Die neuen Platzhalter haben verschiedene Vorteile, zum Beispiel:

1 - Sie stellen eine direkte Verknüpfung zum Artikel dar, d.h. Änderungen an den Artikeldaten werden beim nächsten eBay-Abgleich aktualisiert - ein Nachtragen von Artikeländerungen in der eBay-Vorlage ist nicht mehr notwendig.

2 - Durch die Möglichkeit einer if-Abfrage (z.B.: wenn Textfeld XYZ gefüllt, dann ...) kann die Sichtbarkeit grafischer Elemente wie Listen, Boxen, Bilder usw. präzise gesteuert werden: Für "leere" Variablen wird nun kein unnötiges HTML mehr generiert. Auf Platzhalter, die bisher die Sichtbarkeit regelten, kann verzichtet werden.

3 - Bei der Anzeige von Bildern kann der bisherige Platzhalter zum Generieren eines IMG-Tags jetzt durch eine DotLiquid-Variante ersetzt werden. Diese hat den Vorteil, dass die URL direkt auf ein vom System skaliertes Bild referenziert - so kann die Performanz durch kleinere Bilder gesteigert werden.

Was ist eine Designvorlage?

Designvorlagen sind das grafische Gesicht Ihrer eBay-Angebote. Eine Designvorlage in JTL-eazyAuction ist gewöhnlicher HTML-Code mit speziellen Platzhalter-Variablen für Bilder und Texte. Wird ein eBay-Angebot erstellt, so werden die Platzhalter-Variablen und Bilder durch die entsprechenden Inhalte ausgetauscht und zum eBay-Server gesandt.

Jtl-eazyauction-ebay-designvorlagen-00-startseitenbild.jpg

Die Dateien einer eBay-Designvorlage:
Eine eBay-Designvorlage in JTL-eazyAuction besteht aus zwei Dateien (einer CSS- und einer HTML-Datei) und einem Ordner für Bilder.

HTML-Datei: Die HTML-Datei ist der HTML-Code der Designvorlage und verwendet DotLiquid-Code wie Platzhalter-Variablen, andere Variablen und Filterfunktionen.

CSS-Datei: Die CSS-Datei steuert das Aussehen und Verhalten einzelner HTML-Elemente. Bitte beachten Sie, dass sich einige CSS-Tags auf die ganze Seite und damit auch auf den ebay-Bereich im Kopf- und Fußteil einer Auktion auswirken können!

Ordner gfx: Bilder legen Sie in einem Ordner mit Namen gfx ab. Legen Sie dort alle benötigten Grafiken für die Vorlage ab – ausgenommen der Artikelbilder, welche durch Platzhalter-Variablen verknüpft werden.

Designvorlagen-Verwaltung

Das Dialogfenster eBay Designvorlagen Verwaltung listet alle selbst erstellten, mitgelieferten oder importierten Designvorlagen für eBay auf. Sie können sich die Designvorlage als Vorschau anzeigen lassen sowie das Layout über die zugehörigen Registerkarten steuern. Wenn Sie eine in JTL-eazyAuction enthaltene Designvorlage bearbeiten möchten, müssen Sie eine Kopie der Designvorlage erstellen. Die Designvorlagen selbst lassen sich nicht bearbeiten.

Jtl-eazyauction-ebay-designvorlagen-01-DF-ebay-designvorlagen-verwaltung-000.jpg

A: Vorlagen

Im Bereich Vorlagen sehen Sie alle Ihre Designvorlagen und die zugehörigen Vorlagentypen. Sie können Designvorlagen hinzufügen, löschen, exportieren und aktualisieren.

Jtl-eazyauction-ebay-designvorlagen-01-DF-ebay-designvorlagen-verwaltung-001.jpg

Name: In der Tabellenspalte finden Sie alle aktuell vorhandenen eBay-Designvorlagen gelistet. Sie können den Namen jederzeit ändern (Doppelklick).


Beschreibung: JTL-eazyAuction ordnet jede Designvorlage einem bestimmten Typ zu.

Responsive Referenz-Designvorlage: Responsive Premium-Muster-Designvorlage, die Sie innerhalb von JTL-Wawi kopieren und bearbeiten können. Das Layout dieser Designvorlage passt sich an das Endgerät (Smartphone, Tablet, Desktop-PC) an, von dem aus ein eBay-Angebot aufgerufen wird. Aktuell entspricht nur die EVO-Designvorlage diesem Vorlagentyp: Weitere Informationen zur EVO-Designvorlage.
Muster-Designvorlage: Mitgelieferte Designvorlage, die Sie innerhalb von JTL-Wawi kopieren und bearbeiten können.
Importierte Designvorlage: Designvorlage, die Sie außerhalb von JTL-Wawi erstellt und nachträglich in JTL-Wawi importiert haben.
Standard-Designvorlage: Keine Designvorlage.
Eigene Designvorlage: Vorlage, die Sie auf Basis einer leeren Vorlage in JTL-Wawi selbst erstellt haben.


Hinzufügen: Mit der Schaltfläche öffnen Sie ein kleines Dialogfenster, in welchem Sie den Typ der Vorlage auswählen:

Leere Vorlage: Erstellt eine Vorlage mit minimalem HTML-Rahmengerüst ohne weitere Inhalte.
Eigene Vorlage: Öffnet eine extern abgelegte Designvorlage.
Vorhandene Vorlage: Ermöglicht das Anlegen einer neuen Vorlage auf Basis einer der mitgelieferten Designvorlagen. Hinweis: Wenn Sie eine von Ihnen erstellte Designvorlage duplizieren möchten, exportieren Sie die Vorlage, benennen sie um und importieren sie wieder.

Im Anschluss wird eine neue Designvorlage angelegt. Ändern Sie ggf. den Namen der Designvorlage.


Löschen: Über die Schaltfläche löschen Sie die markierte Designvorlage. Vorlagen, die auf Basis der Designvorlage angelegt wurden behalten vorerst das ursprünglich-zugewiesene Design. Erst beim nächsten Öffnen der Vorlage wird erkannt, das die bisherige Designvorlage nicht mehr existiert und Sie müssen eine neue Designvorlage zuweisen.


Exportieren: Wenn Sie eine eBay-Designvorlange in JTL-Wawi erstellt haben und diese zur externen Weiterverwendung exportieren möchten, können Sie über die Schaltfläche einen Speicherort für die Dateien auswählen. Es wird ein Ordner mit einer HTML-, einer CSS-Datei und dem Bildmaterial generiert.


Aktualisieren: Wenn Sie außerhalb von JTL-Wawi Änderungen an einer eBay-Designvorlage vorgenommen haben, können Sie hier die veränderten Dateien ansteuern (Quellverzeichnis auswählen) und importieren. Die zuvor ausgewählte Designvorlage wird aktualisiert (überschrieben). Bei den mitgelieferten Designvorlagen ist die Schaltfläche ausgegraut.


B: Funktionsleiste

Über die Schaltflächen der Funktionsleiste können Sie sich eine Vorschau der Designvorlagen anzeigen lassen, Kopien der Designvorlagen erstellen und die Galeriebilder aktualisieren.

Jtl-eazyauction-ebay-designvorlagen-01-DF-ebay-designvorlagen-verwaltung-002.jpg

Vorschau Angebot / Vorlage wählen: Wählen Sie hier einen Artikel für die Vorschau aus. Standardmäßig wird der oberste/ erste Artikel verwendet.


Browser-Vorschau (Standardbrowser): Über diese Schaltfläche öffnen Sie eine Vorschau der ausgewählten Designvorlage im aktuellen Bearbeitungsstand in Ihrem Standardbrowser.


Kopie erstellen: Markieren Sie eine Designvorlage im Bereich Vorlagen und erstellen Sie eine Kopie. Wenn Sie eine in JTL-eazyAuction enthaltene Designvorlage bearbeiten möchten, müssen Sie zuerst eine Kopie der Designvorlage erstellen.


Galeriebilder aktualisieren: In den eBay-Designvorlagen verweisen die in den Galerien verwendeten Bild-URLs auf reale Angebote bei eBay. Nur neu eingestellte Angebote erhalten diese URL beim Einstellungsprozess, bei laufenden Angeboten fehlen diese URLs. Zukünftig werden Bild-URLs, wenn sie benötigt werden, nachgeladen. Dies kann beim eBay-Abgleich zu deutlich längeren Übertragungszeiten führen. Führen Sie hier einen Abgleich zum Nachtragen der Bild-URLs durch, wenn Sie Galerien verwenden, die auf viele laufende Angebote verweisen. Wählen Sie, ob Sie Fehlende Bilder oder Alle Bilder aktualisieren möchten und klicken Sie auf die Schaltfläche Starten.


OK: Über die Schaltfläche schließen Sie das Dialogfenster eBay Designvorlagen Verwaltung. Neu angelegte Designvorlagen werden gespeichert.


Abbruch: Über die Schaltfläche brechen Sie den Prozess ab, d.h. Designvorlagen, die Sie seit dem Öffnen der Verwaltung angelegt haben, werden wieder gelöscht.

C: Registerkarte Vorschau

In der Registerkarte Vorschau sehen Sie eine Vorschau der im Bereich Vorlagen ausgewählten Designvorlage im aktuellen Bearbeitungsstand.

Jtl-eazyauction-ebay-designvorlagen-01-DF-ebay-designvorlagen-verwaltung-003-registerkarte vorschau.jpg

D: Registerkarte Bearbeiten

In der Registerkarte Bearbeiten bearbeiten Sie den Quelltext der HTML-Datei. Eine detaillierte Beschreibung der Registerkarte lesen Sie im nachfolgenden Kapitel: Zum Kapitel Dialog: Designvorlage editieren.

Jtl-eazyauction-ebay-designvorlagen-01-DF-ebay-designvorlagen-verwaltung-004-registerkarte bearbeiten.jpg

E: Registerkarte CSS

Die Registerkarte enthält einen einfachen Editor zum Anlegen und Bearbeiten von CSS. Die Registerkarte referenziert auf die erste CSS-Datei, die im Ordner gefunden wird, z.B. die Datei style.css, die für jede Designvorlage standardmäßig angelegt wird. Das Editieren mehrerer CSS-Dateien in der Designvorlagen-Verwaltung ist nicht möglich. Bedenken Sie, wie bereits eingangs erwähnt, dass sich einige CSS-Tags auf die ganze Seite und damit auch auf den ebay-Bereich im Kopf- und Fußteil einer Auktion auswirken können! Die CSS-Dateien der in JTL-Wawi mitgelieferten Designvorlagen können nicht bearbeitet werden, der Editor ist ausgegraut. Wenn Sie eine der mitgelieferten Designvorlagen bearbeiten möchten, müssen Sie zuerst eine Kopie der Designvorlage erstellen.

Jtl-eazyauction-ebay-designvorlagen-01-DF-ebay-designvorlagen-verwaltung-005-registerkarte css.jpg

F: Registerkarte Bilder

In der Registerkarte Bilder verwalten Sie alle Bilder, die Sie in den eBay Designvorlagen verwenden möchten. Sie können Bilder hochladen und entfernen. Wenn Sie Bilder in eine Designvorlage einfügen möchten, wechseln Sie (nachdem Sie das Bild hochgeladen haben) in die Registerkarte Bearbeiten. Wie Sie die Designvorlage editieren, lesen Sie im nächsten Kapitel: Zum Kapitel Dialog: Designvorlage editieren. Jtl-eazyauction-ebay-designvorlagen-01-DF-ebay-designvorlagen-verwaltung-006-registerkarte bilder.jpg

Name: Hier sehen Sie alle Bilder, die Ihnen aktuell in der eBay Designvorlagen Verwaltung zur Verfügung stehen. Klicken Sie auf einen Bildnamen um ein Bild auszuwählen.


Vorschau: Sie sehen eine Vorschau des im Bereich Name ausgewählten Bildes.


Hinzufügen: Über diese Schaltfläche können Sie Bilder in die eBay Designvorlagen Verwaltung hochladen.


Entfernen: Markieren Sie einen Bildnamen und klicken Sie auf die Schaltfläche Entfernen um ein Bild aus der eBay Designvorlagen Verwaltung zu löschen.

Designvorlagen-Editor

Bei der Registerkarte Bearbeiten handelt es sich im Grunde genommen um einen erweiterten DotLiquid-Editor. Hier können Sie den Quelltext Ihrer Designvorlagen bearbeiten. Eine Beschreibung zu DotLiquid finden Sie hier: Zum Kapitel DotLiquid.
Bei der EVO-Designvorlage erhalten Sie im Editor eine grün hervorgehobene Anleitung zu den einzelnen Einstellungsmöglichkeiten. Mehr zur EVO-Designvorlage lesen Sie hier: Zum Kapitel Die EVO-Designvorlage.

Jtl-eazyauction-ebay-designvorlagen-01-DF-ebay-designvorlagen-verwaltung-004a-registerkarte bearbeiten.jpg

A: Globale Texte Verwaltung

Über die Schaltfläche Globale Texte Verwaltung öffnen Sie das Dialogfenster Globale Texte verwalten. Dort können Sie die globalen Texte verwalten, auf welche Sie an vielen Stellen von JTL-Wawi zurückgreifen können. Weitere Informationen zum Dialogfenster Globale Texte verwalten erhalten Sie hier: Zum Kapitel Globale Textvorlagen.

B: Editor/ Registerkarte Rohdaten

HTML-Grundgerüst: Auch beim Anlegen einer leeren Vorlage wird das minimale Grundgerüst einer jeden HTML-Datei standardmäßig in den Editor geschrieben und die grundlegenden Referenzen, z.B. zur Standard-CSS-Datei, angelegt.


Kommentare: Nutzen Sie wie aus anderen Editoren gewohnt die Möglichkeiten, den Quelltext Ihrer Designvorlage zu strukturieren und mit Hinweisen anzureichern. Auch wir nutzen den Kommentar-Tag, um die von JTL angebotenen Designvorlagen zu beschreiben.


HTML-Tags: Nutzen Sie übliches HTML zur strukturellen Gliederung Ihrer Designvorlage. Bedenken Sie das Zusammenspiel mit der CSS-Datei: HTML-Tags können sich auf die ganze Seite und damit auch auf den ebay-Bereich im Kopf- und Fußteil einer Auktion auswirken. Wenn Sie das Layout gezielt steuern möchten, versehen Sie die allgemeinen Tags ggf. mit eigenen Klassen-Attributen oder einer ID.


DotLiquid-Variablen: Datenfelder aus JTL-Wawi wie z.B. Artikeleigenschaften können Sie über DotLiquid dynamisch in Ihre Vorlage einbinden. Wenn Sie in der Designvorlage z.B. den Namen Ihres Artikels in deutscher Sprache anzeigen wollen, schreiben Sie: Vorlage:Vorgang.Artikel.Beschreibung.Artikelname. Wenn Sie nur eine Designvorlage für mehrere Sprachen verwenden möchten und die Information zur Sprache sensitiv aus den Artikeldaten gezogen werden sollen, übergeben Sie an Filter SelectSprache als Wert ebenfalls durch eine Variable, z.B. Vorgang.Sprache (diese Variable übernimmt z.B. die Sprache derjenigen eBay-Plattform, welche der Vorlage zugewiesen wurde). Auf diese Weise können Sie Ihre Designvorlage mehrsprachig gestalten (vgl. auch den Abschnitt zur Mehrsprachigkeit).

C: Vorschau (Text)

In dieser Vorschau werden die Platzhalter-Variablen aus DotLiquid mit den aktuellen Daten des zur Vorschau herangezogenen Artikels ersetzt. Sie sehen somit den HTML-Quelltext, wie er später auch an eBay übergeben wird und vom Browser gerendert wird.

D: Variablen / Platzhalter

Verzeichnisbaum der Variablen: Die aus JTL-Wawi "ansprechbaren" und in Ihrer Designvorlage potenziell verwendbaren Variablen werden in einer ausklappbaren Baumstruktur aufgelistet. Im Zweig Vorgang werden z.B. alle Variablen gelistet, die zum Vorgang eBay-Auction einstellen gehören. Dazu zählt natürlich der Artikelname, wie er in den Artikeldetails auf der Registerkarte Beschreibung für den Ausgabeweg Global oder auch spezifischer für eBay mehrsprachig angelegt werden kann. Die DotLiquid-Variable wird automatisch den Text heranziehen, welche nach der Fallback-Hierarchie als nächsten herangezogen werden kann.

Platzieren Sie den Curser an die passende Stelle innerhalb Ihrer Designvorlage und fügen Sie eine von Ihnen gewünschte Variable durch Doppelklick in den Quelltext ein. Hinweis: Sie können auf direktem Wege teilweise nur die Variablen am Ende eines Zweiges einfügen! Das liegt daran, dass jedes Datenfeld eindeutig angesprochen werden muss. Existiert eine Variable z.B. in mehreren Sprachen, muss in der Designvorlage klar definiert werden, welche Übersetzung primär angesprochen werden soll.


Kontextmenü / Code Snippets: Snippets sind kurze Stücke von Quelltext, die meist eine bestimmte Funktion erfüllen. Typisch wäre die Regelung der Anzeige von Elementen wie Absätze, Auflistungen oder Boxen, wenn die darin angezeigten Variablen mal mit, mal ohne Wert übergeben wurden. Ein solches Snippet heißt im Designvorlagen-Editor z.B. Sichtbarkeit.

Wenn Sie für eine Variable wie den Artikelnamen das Kontextmenü (rechter Mausklick) aufrufen und dann auf das Snippet klicken, wird ein entsprechender Code-Block in den Editor eingefügt, der die DotLiquid-Variable bereits enthält.


Kontextmenü / Filter: Filter ist eine Bezeichnung, die wir von DotLiquid übernommen haben. SelectLanguage ist beispielsweise ein Filter, der Sie bei der Eingabe sprachbezogenen ... unterstützt.

Wenn Sie für eine Variable wie den Artikelnamen das Kontextmenü (rechter Mausklick) aufrufen und dann auf einen Filter klicken, wird ein entsprechender Code-Block in den Editor eingefügt, der die DotLiquid-Variable bereits enthält. Eine ausführliche Dokumentation der Filter finden Sie in der Dokumentation zu DotLiquid sowie in der verweis-sensitiven Info-Box des Editors im Fensterbereich E (vgl. unten)

E: Infobox / Variablendokumentation

Alle verfügbaren Filter werden kontext-sensitiv in dieser Info-Box mit Beispielen beschrieben. Sie kommen zur Anzeige, indem Sie über das Menü mit dem Mauszeiger zum richtigen Filter fahren, und dann das Menü ohne Klick wieder verlassen. Die Box ist ein- und ausblendbar.

Der Umgang mit Bildern

JTL-Wawi übermittelt Ihre Bilder, Artikelbezeichnungen, Beschreibungen sowie Ihre Designvorlagen 1:1 an eBay. Wenn Sie Änderungen an diesen Daten direkt bei eBay durchgeführt haben sollten, so werden diese Änderungen von den Informationen in JTL-Wawi überschrieben. JTL-Wawi hat also die Führung!

Wenn Sie denselben Artikel auf mehreren ebay-Accounts listen möchten, werden dieselben Artikelbilder für alle Listings benutzt! Sie können Bilder von verschiedenen eBay-Accounts nicht mehr wie bisher trennen. JTL-Wawi verwendet stattdessen für Ihre eBay-Angeboten die eBay-Bilder des Wawi-Stammartikels, und zwar in der dort angelegten Reihenfolge. Angebots-spezifische Bilder gibt es nicht mehr. Dies ist zwar eine Einschränkung, jedoch eine starke Vereinfachung der Listing-Pflege.

Näheres zum Wawi-Stammartikel finden Sie hier: Artikeldetails: Bilder für eBay hinterlegen

Die EVO-Designvorlage

Die EVO-Designvorlage ist eine responsive eBay-Designvorlage, welche in ihrem Layout an den aktuellen JTL-Shop4 angelehnt wurde. In ihrer CSS-Datei sind viele wesentliche Design-Elemente (wie z.B. Überschriften, Textblöcke, Listen, Info-Boxen oder die Fußzeile) in einem modernen und attrativen Layout ausgestaltet worden. In der Vorlage können Sie zwischen mehreren Themes wählen. Im Quelltext der Vorlage finden Sie außerdem zahlreiche Kommentare, die Sie beim Verstehen der einzelnen Bausteine unterstützen.

Kopf des EVO-Template definieren

Um das Evo Template nutzen zu können, muss zunächst im head-Element der Inhalt des HTML Textblocks "BootstrapStandardHead" hinzugefügt werden. Dieser Textblock enthält allgemeine Style Definitionen.

Darauf folgt die Auswahl des Evo-Templates. Hier stehen Ihnen verschiedene Themes zur Verfügung. Wählen Sie dazu über den Variablen Baum auf der rechten Seite unter dem Knoten Vorlage:Vorgang.HTMLTextBlöcke.EvoThemes ein Theme aus. Verwenden Sie einen Shop4, können Sie auch auf das Theme Ihres Shops verweisen. Den Link dazu finden Sie im Quelltext des Shops.

Beispiel:

{% assign Template = '<link href="http://demo1.dev.jtl-shop.de/templates/Evo/themes/spacelab/bootstrap.css" type="text/css" rel="stylesheet">' -%} 

body - Artikel Info Boxen

Die Artikel Info Boxen enthalten Artikel spezifische Informationen, welche über Artikel Attribute der Gruppe "eBay Artikel Info Boxen" definiert werden. Diese Attribute müssen dem Artikel zugewiesen und in der jeweiligen Sprache befüllt werden.

    <!-- Start Galerie von Artikelbildern -->
    <div class="text-center" id="image_wrapper">
    <div class="pgwSlider listOnTheLeft narrow">
        <div class="ps-current">
            <ul>
                <li class="col-lg-6 col-md-6 col-xs-9"><img src="{{ Vorgang.Bilder.Dateiname.Bild01 | Groesse: 360,360}}" name="imagechange" align="top" id="top_img" width="100%"/>
                </li>
            </ul>
        </div>
        {% assign existiertZweitesBild = Vorgang.Bilder.Dateiname.Bild | ExistiertBild: 2 -%}\
        {% if existiertZweitesBild -%}\
        <ul class="ps-list clearfix">
            {% for i in (1..12) %}
                {% assign existiertBild = Vorgang.Bilder.Dateiname.Bild | ExistiertBild: i -%}\
                {% if existiertBild -%}\
                    <li class="col-lg-2 col-md-2 col-xs-4"><img class="gallery_img" onclick='imagechange.src="{{ Vorgang.Bilder.Dateiname.Bild | Bild: i | Groesse: 360, 360 }}"' src="{{ Vorgang.Bilder.Dateiname.Bild | Bild: i | Groesse: 55, 55 }}" border="0" width="100%"></li>
                {% endif -%}\
            {% endfor %}\
        </ul>
        {% endif -%}\
    </div>

body - Cross Selling Galerien

eBay-Designvorlagen (vor 1.0)

Zum Archiv: In der Dokumentation vor 1.0 nachschlagen

Designvorlagen sind das grafische Gesicht Ihrer eBay-Angebote. Eine Designvorlage in eazyAuction ist gewöhnlicher HTML-Code mit speziellen Platzhaltervariablen für Bilder und Texte. Wird ein eBay-Angebot erstellt, so werden die Platzhalter-Variablen und Bilder durch die entsprechenden Inhalte ausgetauscht und zum eBay-Server gesandt. Es gibt eine ganze Reihe von vordefinierten Platzhaltervariablen und es sind auch frei definierbare Variablen möglich.

Vorlagen verwenden und ändern

Designvorlagen werden in der Onlineverwaltung von eazyAuction verwaltet. Im Menü Designvorlagen können diese hinzugefügt und aktualisiert werden. Die Designvorlagen von eazyAuction können zusätzlich heruntergeladen werden, um sie etwa an eigene Bedürfnisse anzupassen. Eine Übersicht der aktuellen Designvorlagen finden Sie in der eBay Verwaltung erreichbar über Ihren JTL-Kundencenter Account. Dort besteht auch die Möglichkeit Designvorlagen herunterzuladen und individuell anzupassen.

Angepasste eazyAuction Designvorlagen werden wie eigene Designvorlagen behandelt. Wie sie erstellt und benutzt werden können, erfahren Sie im Abschnitt 5.3 Eigene Designvorlagen verwenden.


Eigene Designvorlagen verwenden

EA-5-3-a.png

Eigene Designvorlagen werden ebenfalls in der Onlineverwaltung von eazyAuction hochgeladen. Jede Vorlage muss einen eindeutigen Namen erhalten; zusätzlich ist es möglich, eine kurze Beschreibung zu hinterlegen.

Eine Designvorlage in eazyAuction besteht aus drei Dateien, nämlich einer CSS-, einer HTML- und einer ZIP-Datei. Die HTML-Datei ist der HTML-Code der Designvorlage mit den jeweiligen Platzhaltervariablen. Die CSS-Datei steuert das Aussehen und Verhalten einzelner HTML-Elemente. Das ZIP-Archiv ist ein gepacktes Verzeichnis mit Bildern. Die Bilder müssen sich alle in diesem Verzeichnis befinden.

Zusätzlich ist es möglich, der hochzuladenden Designvorlage eine »Elternvorlage« zuzuweisen. Durch das auswählen einer Elternvorlage wird die neu hochgeladene Vorlage etwas eingedrückt direkt unterhalb der Elternvorlage angezeigt, dies trägt zu einer besseren Übersichtlichkeit bei. Die Vorlagen werden so in mehreren Ebenen dargestellt, wie Sie es z.B. aus dem Windows Datei-Explorer gewohnt sind.

Sobald die Vorlage hochgeladen wurde, muss diese noch aktiviert werden:

EA-5-3-b.png

Die Aktivierung bewirkt, dass die Vorlage bei der nächsten eBay-Synchronisation heruntergeladen wird und in eBay-Angeboten verwendet werden kann.


Vorlage aktualisieren

Um eine Vorlage zu aktualisieren bzw. zu ersetzen, wird diese markiert und die Option aktualisieren gewählt.

EA-5-3-c.png


Der Rest erfolgt wie beim Neueinstellen von Designvorlagen.

EA-5-3-d.png


ACHTUNG: Selbst erstellte Designvorlagen müssen von ihnen selbst gesichert werden. Sie werden nicht als Download in eazyAuction bereitgestellt!


Aufbau von Designvorlagen

Format

Eine Designvorlage in eazyAuction besteht aus einem einfachen HTML-Dokument mit zusätzlichen Platzhaltervariablen für Texte, Bilder, Links, usw.

Dateien

Eine Vorlage setzt sich aus folgenden Dateien zusammen:

  • einer HTML-Datei - der HTML-Code
  • einer CSS-Datei - der Stylesheets der HTML-Seite (hierbei bitte beachten, dass sich einige Tags auf die ganze Zeit und damit auch auf den ebay Bereich im Kopf- und Fußteil einer Auktion auswirken können)
  • einem gfx.zip Archiv - dort sind alle benötigten Grafiken für die Vorlage im Ordner "gfx" hinterlegt - ausgenommen die Artikelbilder die durch Platzhaltervariablen zugewiesen werden.

In der HTML-Datei, wird ganz normaler HTML-Code verwendet, zusätzlich kann er spezielle Platzhaltervariablen (Tags) enthalten.

Tags / Platzhaltervariablen

Folgende Typen an Platzhaltervariablen gibt es:

  • $#Text.#$ - Platzhalter von Typ Text
  • $#Link.#$ - Platzhalter vom Typ Link
  • $#Picture.#$ - Platzhalter vom Typ Bild
  • $#Sichtbarkeit.#$ - besagt das der Platzhalter sichtbar ist, sobald gesetzt z.B. $#Sichtbarkeit.Text:Rückgaberecht und -folgen#$

Eine Text - Platzhaltervariable ist wie folgt aufgebaut:

$#Text.Textname#$ - z.B. $#Text.Impressum#$

Diese Platzhaltervariablen erscheinen in JTL-Wawi beim eBay Angeboterstellen im Reiter "Texte" auf der linken Seite.

EA-5-4-2-a.png

Einige Platzhaltervariablen werden automatisch mit Artikeldaten gefüllt. Diese sind zur Zeit:

  • $#Text.Beschreibung#$
  • $#Text.Kurzbeschreibung#$
  • $#Text.Anmerkung#$
  • $#Text.Hersteller#$
  • $#Text.Auktionsname#$
  • $#Text.Artikelname#$
  • $#Text.Artikelnummer#$
  • $#Text.Artikelpreis#$
  • $#Text.Gewicht#$
  • $#Text.Einheit#$
  • $#Text.Barcode#$
  • $#Text.ISBN#$
  • $#Text.UNNummer#$
  • $#Text.Gefahrnummer#$
  • $#Text.VPEWert#$
  • $#Text.VPEEinheit#$
  • $#Text.Grundpreis#$
  • $#Text.Garantie#$
  • $#Text.Batterierückgabeverordnung#$
  • $#Text.Impressum#$
  • $#Text.Kaufabwicklung#$
  • $#Text.Rückgaberecht#$
  • $#Text.Versand#$
  • $#Text.Zahlung#$

Zusätzlich können auch direkt Attribute (nicht Funktionsattribute) eines Artikels angesprochen werden. Die Platzhaltervariablennamen für Artikelattribute fangen immer mit einem @ an.

Beispiel: $#Text.@breite#$ - diese Platzhaltervariable würde mit dem Attribut mit dem Namen breite automatisch vorausgefüllt werden - falls so ein Attribut existiert.

Ein Bild - Platzhalter ist wie folgt aufgebaut:

$#Picture.NR:BREITExHOEHE#$ - z.B. $#Picture.1:235x220#$

Die Bilder erscheinen in JTL-Wawi beim eBay Angeboterstellen im Reiter "Bilder".

EA-5-4-2-b.png

Die Bildnummer entspricht der NR in der Variable. Die Bilder werden dabei auf max. Breite und max. Höhe automatisch vom System skaliert. Die Bildgroßansicht wird nicht von dieser Skalierung beeinflusst.

Ein Link - Platzhalter ist wie folgt aufgebaut:

  • $#Link.Picture:BildNr#$ - Link zur Bildgroßansicht mit der Nr. "BildNr"
  • $#Link.Mich#$ - Link zur eBay Mich Seite
  • $#Link.EigeneBewertungen#$ - Link zur eBay Eigene Bewertungen Seite
  • $#Link.WeitereAuktionen#$ - Link zu weiteren eigenen Auktionen Seite bei eBay

Soll ein Element nur dann erscheinen, wenn es auch in JTL-Wawi gesetzt / gefüllt wird, so wird der Tagtyp Sichtbarkeit benutzt:

$#Sichtbarkeit.Typ#$ z.B. für Text-Platzhalter $#Sichtbarkeit.Text:Rückgaberecht und -folgen#$

Dieser Text erscheint nur dann, wenn er beim eBay Angeboterstellen als Text gesetzt wurde.

Beispiele für Designvorlagen

In der Designvorlagen Verwaltung können Beispiele der Vorlagen aus eazyAuction heruntergeladen werden.

EA-5-4-3-a.png

Gewünschte Vorlage markieren und "ausführen" starten.

Diese Kategorie enthält zurzeit keine Seiten oder Medien.