Artikel Varianten als Bild ?

EVR_Andy · April 10, 2013, 10:04am

Guten Morgen helfende OXID Gemeinde.

Da es keine Frage für Anfänger an sich ist, eröffne ich dieses Thema mal hier,

Ich hab viele Beiträge (durch Suchfunktion) zum Thema Artikelvarianten als Bild im Shop gelesen. Jedoch macht mich das ganze nicht schlauer, da selbst die Erfahrenen anscheinend nicht so genau wissen wie!?

Gibt es nun ein Modul oder eine genaue Anleitung, wie man die Farbvarianten im SHop auch als Bild einfügen kann?

Könnte da jemand mal eine genaue ANgabe machen. ?

Würde mich freuen. Das ist das einzige was ich noch unbedingt in meinem Shop haben möchte.

Grüßle Andy

EVR_Andy · April 10, 2013, 6:02pm

Mag wieder keiner sagen wie es genau geht?

marco.steinhaeuser · April 10, 2013, 6:26pm

Hallo EVR_Andy,

prinzipiell kannst Du einem Variantenartikel auch eigene Bilder zuweisen. Aber Du willst sicher etwas anderes erreichen, oder? Was genau?

Gruß

vanilla_thunder · April 10, 2013, 6:35pm

er möchte die Varianten-Dropdowns für Farben eben mit Farben. (siehe hier: http://coraline.oxid-design.com/Digital-Cameras/Sony-Cyber-shot-DSC-HX30V.html )

EVR_Andy · April 10, 2013, 10:25pm

Hallo

Richtig, wie es Vanilla schon sagte. Oft bekommt man diverse Artikelbilder mit deren Farbvarianten nicht. Dann sind diese Dropdown-Lösungen besser.

acpi · April 11, 2013, 12:08am

Da gibt es diverse Möglichkeiten das zu machen, die einfachste die mir gerade so auf Anhieb einfällt:

setz den Namen der Farbe (eventuell nach Filtern von Umlauten), als Klasse für die Dropdown Zeile ein. Dann kommt ja so etwas raus wie

dann kannst du die Dinger im CSS einfach stylen:

.gelb {
background-color: yellow;
}

Alternativ könntest du auch was cooles mit JS bauen, aber die Methode ist wohl schnell und einfach.

EVR_Andy · April 11, 2013, 6:43am

[QUOTE=acpi;121007]Da gibt es diverse Möglichkeiten das zu machen, die einfachste die mir gerade so auf Anhieb einfällt:

setz den Namen der Farbe (eventuell nach Filtern von Umlauten), als Klasse für die Dropdown Zeile ein. Dann kommt ja so etwas raus wie

dann kannst du die Dinger im CSS einfach stylen:

.gelb {
background-color: yellow;
}

Alternativ könntest du auch was cooles mit JS bauen, aber die Methode ist wohl schnell und einfach.[/QUOTE]

Moin acpi

Das Problem ist, dass ich von “bauen” keine Ahnung habe und mit dem Styler sowieso schon meine Probleme hab.
Deswegen frage ich ja, ob es direkte Module oder Anleitungen gibt.
Sehe ja, dass sehr viele Shops diese Drop-Downs haben.

EVR_Andy · April 12, 2013, 9:13am

Kann doch nicht sein, dass jeder Shop sowas hat und keiner weiß, wie es geht.

vanilla_thunder · April 12, 2013, 9:23am

So ist es auch nicht, denn es wurde schon mehrmals gesagt, wie es geht. Aber er kann gut sein, dass niemand es für dich kostenlos bauen will.

nickname · April 12, 2013, 9:26am

Hi,

warum sollte keiner wissen wie es geht?

acpi hat dir doch eine einfach zu integrierende und zudem kostenlose Lösung präsentiert, vanilla thunder eine fertige, kostenpflichtige Möglichkeit verlinkt.

acpi · April 12, 2013, 9:56am

[QUOTE=EVR_Andy;121137]Kann doch nicht sein, dass jeder Shop sowas hat und keiner weiß, wie es geht. :D[/QUOTE]

Steht doch oben wie es geht, sehr genau sogar. Es gibt dafür kein Modul, das müsstest du im Template einbauen oder ein Template kaufen das dies kann.

nickname · April 12, 2013, 10:08am

Was solls, hab es eben mal eingebaut, es sind ja wirklich nur wenige Worte:

In der application/views/azure/tpl/widget/product/selectbox.tpl Zeile 11 wie folgt ändern:


<span class="[{$oActiveSelection->getName()|regex_replace:"/[^A-Za-z0-9]/":""}]">[{$oActiveSelection->getName()}]</span>

Ebenfalls in der application/views/azure/tpl/widget/product/selectbox.tpl Zeile 34 wie folgt ändern:


<li class="[{if $oSelection->isDisabled()}]js-disabled disabled[{else}][{$oSelection->getName()|regex_replace:"/[^A-Za-z0-9]/":""}][{/if}]">

Und noch ein wenig CSS (einfach mit in die selectbox.tpl am Ende einfügen (=für Faule), oder die erste und letzte Zeile weglassen und in die oxid.css am Ende einfügen (=bessere Möglichkeit)).
Anstelle der Beispiel-Klassen (S, L, M,…) müssen die exakten Namen der Varianten eingesetzt werden wie sie im Dropdownmenü angezeigt werden, allerdings ohne Leerzeichen, Umlaute und sonstige Sonderzeichen (zB grün=grn):


<style type="text/css">
.S{background-color:red;padding:0 10px}
.L{background-color:green;padding:0 10px}
.M{background-color:blue;padding:0 10px}
.grau{background-color:grey;padding:0 10px}
.orange{background-color:orange;padding:0 10px}
.grn{background-color:green;padding:0 10px}
</style>

Dann sieht es so aus wie hier unter “Größe” und “Farbe”: Demo

Bitteschön !

vanilla_thunder · April 12, 2013, 10:19am

Noch zu erwähnen wäre, dass keine Umlaute und scharfes S oder sonstige Sonderzeichen benutzt werden dürfen.

acpi · April 12, 2013, 10:38am

[QUOTE=vanilla thunder;121145]Noch zu erwähnen wäre, dass keine Umlaute und scharfes S oder sonstige Sonderzeichen benutzt werden dürfen.[/QUOTE]

Das war ja im ersten Post von mir schon erwähnt, ich denke mal das wird er noch hin bekommen, fall nicht:


|regex_replace:"/[^A-Za-z0-9]/":""

nickname · April 12, 2013, 10:52am

Danke, der Code wurde entsprechend aktualisiert.
Man sollte nun Umlaute, Leerzeichen usw. in der CSS einfach weglassen.

EVR_Andy · April 12, 2013, 11:39am

Danke. Sieht sehr gut aus

Der CSS Code auch in die selectbox.tpl ? Zeile Darunter?

nickname · April 12, 2013, 12:03pm

Du kannst den so wie er ist einfach mit in die Templatedatei mit einfügen, oder die erste und letzte Zeile weglassen und ihn in die oxid.css mit einfügen (=bessere Möglichkeit).

nickname · April 12, 2013, 1:25pm

Du kannst den so wie er ist einfach mit in die Templatedatei mit einfügen, oder die erste und letzte Zeile weglassen und ihn in die oxid.css mit einfügen (=bessere Möglichkeit).

Ich habe nochmal eine Zeile Code hinzugefügt, damit die Variantenfarben dann auch neben dem Label angezeigt werden, wenn eine Auswahl getroffen wurde (siehe Screenshot im Post oben).

EVR_Andy · April 12, 2013, 2:03pm

[QUOTE=nickname;121143]Was solls, hab es eben mal eingebaut, es sind ja wirklich nur wenige Worte:

In der application/views/azure/tpl/widget/product/selectbox.tpl Zeile 11 wie folgt ändern:


<span class="[{$oActiveSelection->getName()|regex_replace:"/[^A-Za-z0-9]/":""}]">[{$oActiveSelection->getName()}]</span>

Ebenfalls in der application/views/azure/tpl/widget/product/selectbox.tpl Zeile 34 wie folgt ändern:


<li class="[{$oSelection->getName()|regex_replace:"/[^A-Za-z0-9]/":""}][{if $oSelection->isDisabled()}]js-disabled disabled[{/if}]">

Und noch ein wenig CSS (einfach mit in die selectbox.tpl am Ende einfügen (=für Faule), oder die erste und letzte Zeile weglassen und in die oxid.css am Ende einfügen (=bessere Möglichkeit)):


<style type="text/css">
[B].S{background-color:red;padding:0 10px}
.L{background-color:green;padding:0 10px}
.M{background-color:blue;padding:0 10px}
.grau{background-color:grey;padding:0 10px}
.orange{background-color:orange;padding:0 10px}
.grn{background-color:green;padding:0 10px}[/B]

</style>

Dann sieht es so aus wie hier unter “Größe” und “Farbe”: Demo

Bitteschön ![/QUOTE]

Sooo …

Den 1. Code in die selectbox.tpl eingefügt. Bzw den rot gekennzeichneten Abschnitt. Dabei drauf geachtet, dass er wirklich zwischen den Zeichen eingefügt ist.

Danach den fett makierten Teil der CSS in die oxid.css in die letzte neue Zeile eingefügt.

Beide Dateien in ihren Orden überschrieben. Natürlich binär hochgeladen und /tmp gleert (außer smarty Ordner und htaccess.

Shop aufgerufen.

Shop ziemlich weg. Bis auf ein “Frisch eingetroffen und einem Bild” alles weg.

[B]Da hab ich die Dateien jeweils eingefügt.[/B]
/application/views/[B]MEIN-TEMPLATE[/B]/tpl/widget/product/selectbox.tpl

//out/MEIN-TEMPLATE/src/css/

Irgendwas vergessen?

Muss ich, trotz eigenm Template, alles in Azure überschreiben?

nickname · April 12, 2013, 2:18pm

Diese langen Zitate tragen zur Unübersichtlichkeit des Thread bei und nützen niemanden etwas. Bitte benutze den Antworten-Button um zu antworten. Danke.

Natürlich soll der Code in dein eigenes Template, der Ordnung halber. Direkt im Azure-Template würde das aber genauso funktionieren.
Beachte, dass die beiden Codes für Zeile 11 und 34 nicht identisch sind! Kopiere und ersetze am besten gleich die ganzen Zeilen, nicht nur das rot markierte.

Ansonsten kann es sein, das durch das Leeren des tmp-Ordner andere Fehler ans Licht kamen, die vorher schon vorhanden waren. Poste mal bitte einen Link zum Shop, dann sehen wir weiter.

Das die Codes einwandfrei funktionieren, siehst du in meinem Demoshop.