Sie haben die Möglichkeit Checkboxen oder Dropdownboxen durch anklickbare Felder (HTML-Text oder eigene Grafiken) zu ersetzen.
Hierzu müssen Sie auf Sellector.com keine weiteren Einstellungen treffen. Passen Sie den HTML-Code an, den Sie in Ihre Seite integriert haben. Vorteil: Sellectoren können auf unterschiedlichen Seiten unterschiedlich gestaltet werden, trotz gleicher Basistabelle.
<div id="Auswahlbereich" style="width:200px; height:600px"> //geben Sie für width: die Breite an Pixeln an, die Ihr Ausgabebereich erhalten soll
<script type="text/javascript" src="/http://www.sellector.com/scripts/sellectorControl.js"></script> // Sellector wird von unserem Server geladen
<a href="/www.sellector.com">initialize Sellector product configurator</a> // und initialisiert
<script type="text/javascript">
var sellectorPresentation = { // hier beginnt die Änderung und dem Script wird mitgeteilt, dass es Änderungen in der Darstellung gibt
inputAreaTemplate: { // Es handelt sich um Änderungen im Eingabebereich
choicePresentation: [ // Die Auswahl wird angepasst
{
id: 'e2', // Mehr zur Nummerung unter: FAQ Nummerung
Beachten Sie: jedes Element innerhalb einer geschweiften Klammer wird mit einem Komma getrennt. Das letzte Element vor der geschlossenen geschweiften Klammer darf dann keines mehr haben.
type: 'clickPanel', // Beschreibt, welchen Typ Sie haben möchten: clickPanel, checkBox, dropDown
width:48, // Bilderbreite innerhalb des Clickpanels
height: 60, // Bilderhöhe innerhalb der Clickpanels
content: '<sellectorCellContent>', // Hier werden die Daten vom Sellector Server ausgegeben. (overrridden by 'mapping')
floating: 'left', // Ausrichtung des Clickpanels Mögliche Werte sind für nebeneinander left oder right und für untereinander: none
spacing: 0, // Abstand in Pixeln zwischen den Bildern im Clickpanel
frameColor: '#851E1F', // Rahmenfarbe des Bildes nach einem Klick auf das Bild
frameWidth: 2, // Dicke des Rahmens
opacity: 50, // Durchscheingrad der Bilder wenn sie nicht aktiviert sind (nur bei pngs)
highlight: 'frame', //frame für den farbigen Rahmen, fade ohne Rahmen, dafür dann mit opacity
mapping: [ // hier können Sie die Werte, die in der Tabelle stehen gegen beliebigen HTML Code tauschen
{
sourceValue: 'englandfahne', //Wert in ihrer Tabelle der ersetzt werden soll
displayValue: '<img src="/http://www.sellector.com/components/com_joomfish/images/flags/en.gif" /><center>en</center>' //HTML Code, der den SourceValue also den Tabelleneintrag englandfahne ersetzt
}, //die einzelnen Werte können Sie durch mehrere geschweifte Klammern anordnen.
{
sourceValue: 'deutschlandfahne',
displayValue: '<img src="/http://www.sellector.com/components/com_joomfish/images/flags/de.gif" /><center>de</center>'
} // nach der letzten geschweiften Klammer bitte kein Komma mehr setzen
]
}
]
}
};
sellectorLoader(IHRE SELLECTOR NUMMER, "Auswahlbereich", "Ergebnisbereich")</script>
</div>
<div id="Ergebnisbereich" style="width:600px; height:600px"></div>
Fehlerquelle: Sellector erscheint nicht mehr: Ursache: irgendwo ist ein Semikolon oder ein Komma. Hierbei bitte genau die Notationsregeln beachten. Es gilt die JSON Notation.
Häufig verwendete Beispiele:
- farbige Flächen oder Bilder für eine Farbauswahl
- Icons für Eingenschaften wie Früchte für Geschmacksrichtungen, Länderflaggen, Zubehörteile, Größenangaben (kleines s großes XXL)
- Sterne für Produktbewertungen
- Icons für Angebots-, neue, ausgezeichnete oder Premiumprodukte
- Grafiken und Texte kombinieren
