HBSO-Shop: Partfinder

Aus NULLRAFFER
Wechseln zu: Navigation, Suche

Partfinder

Partfinder ist ein Zusatzmodul, mit dem man zB Explosionszeichnungen anzeigen lassen kann und die einzelnen Teile mit Artikeln aus dem Shop verknüpft.

So kann ein Kunde direkt auf den Zeichnungen seine gewüschten Artikel (meistens Ersatzteile) aussuchen und in den Warenkorb legen, ohne dass er explizit eine Bestellnummer kennt oder umständlich suchen muss.


Voraussetzungen

  • Das Partfinder-Modul muss installiert sein.
  • Im Verzeichnis [shop/]images/partfinder/ liegen die Bilder (Modelle und Explosionszeichnungen) und die Thumbnails der Explosionszeichnungen.
  • Die Bilder wurden zB aus einem PDF generiert (siehe unten)
Bilder (am Besten im Format jpg) mit GIMP (oder anderem Bildbearbeitungsprogramm) auf die gewünschte Grösse skalieren
Explosionszeichnungen max 840 x 1200px
Thumbnails sollten max. 250x400px groß sein


  • Sie müssen folgendes angelegt haben:
  • Die Teile mit den Verknüpfungen zu den entsprechenden Artikeln
Die Teile sind ein Zwischenschritt, weil man evtl. auch mehrere Artikel einem bestimmten Element (einer Position in der Explosionszeichnung) zuordnen kann
  • Ein oder mehrere Modelle bei den entsprechenden Lieferanten
  • Ein oder mehrere Explosionszeichnungen je Modell (mit Bild und Thumbnail=kleines Vorschaubild)
  • Für jede Explosionszeichnung die entsprechenden Bereiche (ImageMap) mit den Verknüpfungen zu den Teilen


Vorgehensweise

Einfacher Start

Los gehts

  • Produkte - PARTFINDER aufrufen
  • Den Lieferanten suchen und auf das Ordner-Symbol davor klicken

Das Bild, das beim Lieferanten hinterlegt ist (Lieferant bearbeiten), wird im Frontend statt des Textes angezeigt, also ändern Sie das Bild im Lieferanten Produkte - Lieferanten


Modelle

  • Neues Modell klicken und neues Modell eingeben
oder aber
  • Bearbeiten klicken und die Daten ändern
  • Auf das Ordner-Symbol vor dem Modell klicken
Man gelangt zu den Explosionszeichnungen

Das Bild für das Modell kann man aus der Liste auswählen. Diese Liste zeigt alle Bilder im Verzeichnis images/partfinder/. Das Bild, das Sie hier auswählen, wird dann statt des Textes im Frontend angezeigt.


Klicken Sie auf das Ordner-Symbol vor dem Modell, so wechseln Sie zu den Explosionszeichnungen


Explosionszeichnungen

  • Neue Zeichnung klicken und neue Explosionszeichnung eingeben
oder aber
  • Bearbeiten klicken und die Daten ändern
  • Auf das Ordner-Symbol vor der entsprechenden Explosionszeichnung klicken
Man gelangt zu den Bereichen

Die Explosionszeichnung und das Thumbnail (kleine Vorschau) kann man aus der Liste auswählen. Diese Liste zeigt alle Bilder im Verzeichnis images/partfinder/.

Das Bild, das Sie hier auswählen sollte natürlich das Bild sein, für das Sie auch die ImageMap angelegt haben.


Bereiche

  • Einfügen für einen neuen Bereich (hierbei muss alles manuell ausgefüllt werden)
oder
  • von Imagemap importieren, wenn Sie eine ImageMap erstellt haben
Öffnen Sie die ImageMapDatei (xxxx.map) mit einem Text-Editor (zB WordPad)
Gehen Sie dazu in den Windows-Explorer und suchen die Datei
Markieren Sie den Bereich von <map name="map"> bis </map> (jeweils inklusive)
Rechte Maus und Kopieren klicken
Wieder in das Fenster des Partfinders wechseln
Ersetzen Sie im Textfenster unten den Bereich Areas durch die ImageMap aus dem Text-Editor und klicken dann auf Importieren
Den Text Areas im Textfenster mit Doppelklick markieren
Rechte Maus und Einfügen klicken
Nun unten (unter dem Textfenster) auf Importieren' klicken

Damit sind dann die Bereiche gefüllt (zumindestens mit Position=Name, Koordinaten und Form) und können nun mit den Teilen verknüpft werden.

TeileNummer und TeileName sind also noch leer, wenn Bereiche neu importiert wurden.


  • Bearbeiten klicken und ein Teil aus der Liste mit allen Teilen auswählen
oder
  • Teile generieren klicken - damit werden alle Teile neu generiert

Jede Position hat jetzt einen Button Teil bearbeiten. Klicken Sie diesen, damit Sie das Teil bearbeiten können und einen Artikel (oder auch mehrere) mit dem Teil verknüpfen können.

Wählen Sie den entsprechenden Artikel aus der Liste (Suche, indem Sie die Bestellnummer eintippen) und klicken auf das + hinter dem Artikel. Damit wird dieser zur Liste dazugefügt.

Hinter verknüpfte Artikel: erscheint nun ein Pfeil nach oben (ist evtl. auch vorher zu sehen, wenn mindestens ein Artikel verknüpft ist).

Wenn Sie darauf klicken, so wird die Teilenummer durch eine lesbarere Variante ersetzt (Bestellnummer und Artikelbezeichnung). Dies verbessert die Anzeige im Frontend für den Kunden.



Teile anlegen / bearbeiten

Aufrufen der Teile

Rufen Sie direkt den Menüpunkt Produkte und dort Partfinder - Teile auf

oder

nutzen Sie eine der anderen Möglichkeiten, wenn Sie sich bei der entsprechenden Explosionszeichnung befinden (zB wenn Sie die Bereiche eingefügt haben) - Überschrift der WebSeite ist Partfinder - Bereiche für Explosionszeichnungen:

  • Teil bearbeiten, wenn schon dem Bereich ein Teil zugewiesen wurde
Wird nicht angezeigt, wenn dem Bereich noch kein Teil zugewiesen wurde
  • Teile bearbeiten
Dieser Menüpunkt befindet sich weiter unten und damit wechseln Sie in das Teilebearbeitungs-Modul
  • Teile generieren
Damit werden für die Bereiche die noch nicht mit einem Teil verknüpft sind entsprechende Teile generiert

Wenn kein Teil angezeigt wird (und damit auch nicht der Button Teil bearbeiten), dann sollten Sie auf jeden Fall die Position bearbeiten und ein Teil damit verknüpfen oder eben Teile generieren und diese Teile später bearbeiten


Teile bearbeiten

Wenn Sie Teile generiert und nicht angelegt haben, dann müssen Sie die Teile noch bearbeiten (mit Artikeln verknüpfen).

Wie Sie in die Bearbeitung der Teile springen, ist schon oben beschrieben (Aufrufen der Teile)


Sie können neue Teile hinzufügen, ein Teil markieren (auf die Zeile klicken) und es dann bearbeiten oder löschen.

Wenn Sie ein Teil löschen, das mit Bereichen verknüpft ist, werden Sie darauf hingewiesen und beim Löschen werden die Verknüpfungen mit den Bereichen aufgelöst.

Beim Einfügen / Bearbeiten können Sie die Teilenummer manuell eingeben oder später generieren lassen (siehe unten). Die Teilenummer wird später im Frontend angezeigt, wenn der Kunde mit der Maus darüberfährt.

Geben Sie noch Name und Beschreibung ein und verknüpfen dann einen oder mehrere Artikel, indem Sie einen Artikel aus der Liste auswählen und dann auf das + hinter der Auswahl klicken (In die Liste klicken, Bestellnummer eingeben und beim richtigen Artikel Return drücken und dann auf das + klicken).

Sobald mindestens ein Artikel verknüpft ist, erscheint hinter der Überschrift verknüpfte Artikel: ein Pfeil nach oben (kleines Symbol). Damit können Sie die Teilenummer (die nur aus dem Text der Position besteht) durch den Namen des Artikels (Bestellnummer und Artikelname) ersetzen lassen.




Vorgehensweise (ausführlich)

Lieferanten


Modelle

Das hinterlegte Bild sollte eine Grösse von 250x400px nicht überschreiten.



Explosionszeichnungen

Zuerst zur Grösse der Bilder:

  • Thumbnails
max. 250x400px
  • Explosionszeichnungen
max 840 x 1200px

Skalieren Sie die Bilder ggf mit einem Bildbearbeitungsprogramm wie GIMP auf die entsprechende Höhe oder Breite, wobei die Grössenänderung immer proportional erfolgen sollte !!

Am allerwichtigsten ist immer die Breite, die nicht überschritten werden soll, damit die Anzeige dann nicht verschoben oder verzerrt wirkt.



Bereiche

Bereiche eintragen

Sie können Bereiche für eine Zeichnung manuell hinzufügen oder aus einer ImageMap importieren.

Einfügen

Klicken Sie auf Einfügen, wenn Sie manuell einen Bereich hinzufügen wollen.

Sie geben dann folgende Daten ein:

  • Position
  • Koordinaten
  • Form
  • Teil


Importieren einer Imagemap

Wenn Sie eine ImageMap für das Bild erstellt haben, können Sie diese importieren, indem Sie die Map in den Kasten unter von Imagemap importieren kopieren.

Ersetzen Sie dabei nur den Text Areas und lassen die erste Zeile

<?xml version="1.0" encoding="ISO-8859-1" ?>

einfach so stehen.

Im Endeffekt steht im Kasten dann

<?xml version="1.0" encoding="ISO-8859-1" ?>
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:hhaertel -->
<area shape="rect" coords="465,91,575,130" alt="70664" href="http://xxxx" />
<area shape="rect" coords="391,159,487,189" alt="80164" href="file:/" />
<area shape="rect" coords="475,246,568,283" alt="80181" href="file:/" />
</map>

Mit Klicken auf Importieren wird nun die Imagemap importiert und es werden Positionen daraus erstellt.

Gefüllt werden aber nur folgende Felder:

  • Position
  • Koordinaten
  • Form



Teile generieren

Wenn Sie eine ImageMap importiert haben, so können Sie die neuen Teile einfach generieren lassen und dann mit Artikeln versehen. So sparen Sie sich die umständliche Neueingabe von Teilen mit Namen und Beschreibung.



ImageMaps & Explosionszeichnungen

Voraussetzung

Für die ImageMap benötigt man ein passendes Bild (also die gewünschte Explosionszeichnung, die später auch hochgeladen und eingebunden wird), für das man die ImageMap erstellen will.

Das Bild sollte im JPG, GIF oder PNG Format vorliegen.

Natürlich muss es keine Explosionszeichnung sein, sondern kann einfach ein beliebiges Bild sein, das mit ImageMaps versehen später im Shop zum Suchen von Artikeln angezeigt wird.


Bilder aus PDFs

Hat man Bilder in einem PDF vorliegen, so bedient man sich auch der Hilfe von GIMP.

Liegt ein Bild nicht schon als JPG (GIF oder PNG) vor, so bedient man sich der Hilfe von GIMP, um ein oder mehrere Bilder aus einem PDF zu extrahieren.

Hier kann man auch gleich das Bild an sich und das Vorschaubild (Thumbnail) erstellen.

ACHTUNG:

Achten Sie beim Erstellen des Bildes darauf, dass die Breite nicht zu groß wird, da das Bild später im Partfinder immer in der Originalgröße dargestellt wird.

Wenn Sie ein sehr großes Bild haben, dann skalieren Sie das Bild erst auf eine maximale Breite von ca 900px !!

Hat das Bild eine entsprechende Grösse, so können Sie daraus direkt das Thumbnail erstellen, ansonsten aber skalieren Sie es vor dem Abspeichern auf eine Breite von 840px, wobei Sie die Proportionen beibehalten.

Als eine optimale Grösse hat sich 840 x 1200 px herausgestellt.

Natürlich können Sie auch die Höhe skalieren und damit die Breite proportional verändern.


  • Datei - Öffnen
  • Als Format dann Portable-Document-Format (*.pdf) auswählen
  • Das PDF in der Liste suchen
  • Auf Öffnen klicken
Es werden nun alle Seiten als Grafik angezeigt.

TIP: Bevor Sie nun die Grafik importieren, können Sie die gewünschte Grösse schon einstellen und sich damit ein nachträgliches Skalieren ersparen.

  • Die gewünschte Grafik wählen und auf Importieren klicken

Evtl. müssen Sie vor dem exportieren mit Bild - Bild skalieren das Bild auf eine maximale Grösse von 840x1200px bringen

  • Datei - Exportieren als... anwählen
  • Als Format dann JPEG-Bild (*.jpg *.jpeg *.jpe) wählen und einen korrekten Namen mit der Endung .jpg eingeben
  • Auf Exportieren klicken
Dann noch die Qualität einstellen und nochmal auf Exportieren klicken
  • Bild - Bild skalieren wählen
  • Neuen Wert bei Breite eingeben (zB 200)
TIP: Thumbnails sollten von der Grösse 250 x 400 px nicht überschreiten, also skalieren Sie die Vorschaubilder entsprechend
  • Auf Skalieren klicken
  • Das enstandene Bild dann wieder (wie oben beschrieben) exportieren und zB einfach ein _thumb an den Dateinamen anhängen
Damit hat man das Thumbnail (Vorschaubild) gleich mit erstellt


Was ist eine ImageMap

Eine ImageMap ist eine Text-Datei, die sogenannte Bereiche = Areas enthält.

Diese Datei kann einen Inhalt in folgender Form haben:

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Ersteller -->
<area shape="rect" coords="465,91,575,130" alt="70664" href="http://xxxx" />
<area shape="rect" coords="391,159,487,189" alt="80164" href="file:/" />
<area shape="rect" coords="475,246,568,283" alt="80181" href="file:/" />
</map>

Und ist (in diesem Fall) mit GIMP erstellt worden.

Wichtig sind für jeden Bereich die Abschnitte shape (gibt an, ob es ein Rechteck/Quadrat, Kreis oder Polygon ist), dann coords (die Koordinaten in der Bilddatei) und alt (der "Name" des Bereiches, der später auch für die Benamung der Teile benutzt wird)


Erstellen einer ImageMap mit GIMP

Neu erstellen

  • Datei öffnen (die Explosionszeichnung, die im Partfinder benutzt wird)
Wählen Sie auf der linken Seite das entsprechende Verzeichnis aus, bis Sie bei den Bildern, die Sie benötigen angekommen sind.
(in ein Verzeichnis wechseln Sie mit einem Doppelklick)
Wählen Sie den Namen des Bildes aus.
Klicken Sie auf den Button Öffnen (unten rechts neben Abbrechen)
  • Wählen Sie im Menü Filter - Web - Imagemap
Das neue Fenster auf volle Grösse bringen und loslegen
  • Auf der linken Seite die Form auswählen (rect / circle / poly)
Unter dem Pfeilsymbol sind die Symbole für Quadrat, Kreis und Polygon.
  • um den gewünschten Bereich die Form zeichnen
  • rect = Viereck (Quadrat/Rechteck)
1. Klick ist der Startpunkt (Ecke)
jetzt das Viereck zeichnen (mit gedrückter SHIFT-Taste wird es ein Quadrat)
2. Klick schließt den Bereich
  • circle = Kreis
1. Klick legt den Mittelpunkt des Kreises fest
SHIFT-Klick legt den äusseren Äquatorpunkt fest
2. Klick schließt den Bereich
  • poly = Polygon (Vieleck)
Hiermit erstellt man unregelmäßige Formen
Jeder Klick ergibt einen Eckpunkt
Ein Doppelklick schließt den Bereich
  • wenn der Bereich gezeichnet ist, muss man dem Bereich noch eine Verknüpfung zuordnen und einen Namen geben
Nach dem Schließen des Bereiches kommt dieses Fenster automatisch
  • Geben Sie die zu öffnende Adresse ein (zB einfach die Teilenummer auf dem Bild)
  • 4 x TAB drücken
  • Geben Sie den ALT-Text ein.
Hier auf jeden Fall die Teilenummer auf dem Bild eingeben, damit später beim automatischen Generieren ein aussagekräftiger Name generiert wird
  • ALT W drücken
  • ALT O drücken
  • nächster Bereich

Wenn alle Bereiche gezeichnet sind, dann wählen Sie Datei - Speichern unter und speichern die map-Datei ab.

Wählen Sie auf der linken Seite das entsprechende Verzeichnis aus, bis Sie bei dem Verzeichnis, das das Bild enthält angekommen sind.
(in ein Verzeichnis wechseln Sie mit einem Doppelklick)
Wählen Sie den Namen des Bildes aus, das Sie gerade bearbeitet haben.
WICHTIG: Ändern Sie die Erweiterung .jpg in .map ab !!!
Klicken Sie auf Speichern (unten rechts)

ACHTUNG: Wenn Sie Speichern wählen, so gibt GIMP den Namen der Bilddatei als Vorschlag vor, also ändern Sie die Erweiterung (zB .jpg) ab in .map !!
Haben Sie Speichern unter... gewählt, dann wechseln Sie noch in das entsprechende Verzeichnis, damit die Map-Datei auch im gleichen Verzeichnis wie die Bilddatei abgelegt ist.

Nun können Sie ImageMap schließen.


ANMERKUNG:
Diese Datei kann mit einem beliebigen Text-Editor geöffnet werden und der Inhalt (die Areas) können dann zum Importieren in den Partfinder kopiert werden


TIP: Klickt man während des Zeichnens einer Form mit der rechten Maustaste, so wird das Zeichnen abgebrochen


Weiterarbeiten im GIMP

Will man an einer begonnenen ImageDatei weiterarbeiten, so geht man wie folgt vor:

  • GIMP starten
  • Datei - Öffnen... (die Explosionszeichnung, die im Partfinder benutzt wird)
Auswählen wie beim Neuerstellen beschrieben
Die jpg-Datei auswählen
  • Menü Filter - Web - Imagemap
Das neue Fenster auf volle Grösse bringen
  • In der ImageMap jetzt Datei - Öffnen... wählen
  • Jetzt die passende ImageMap auswählen und auf Öffnen klicken

Die schon vorhandenen Bereiche werden angezeigt und man kann wie oben beschrieben weitere Bereiche zeichnen und die ImageMap wieder speichern