Neu preselect einer Varkombi Auswahl

[Conny]

Ich versuche mal mein Problem zu beschreiben.
Es gibt viele Haarfarben, deswegen habe ich über die Selectbox eine "Preview" gelegt welche einfach nur alle vorhandenen Miniaturbilder anzeigt.
Jetzt würde ich es gerne noch so machen, dass wenn man auf ein solches "Preview" Bildchen klichk (1) sich der entsprechende Artikel in der Selectbox (2) auf aktiv anzeigt.




Folgendes habe ich in "productdetails/variation.tpl" geändert.

ab Zeile 22 habe ich folgendes eingebaut:

                {* Vorschaubilder anzeigen *}
                {foreach name=Variationswerte from=$Variation->Werte key=y item=Variationswert}   
                    <span class="label-variation">
                        {if !empty($Variationswert->cBildPfadMini)}
                            <img src="{$Variationswert->cBildPfadMini}" alt="{$Variationswert->cName|escape:'quotes'}"
                                 data-list='{prepare_image_details item=$Variationswert json=true}'
                                 title="{$Variationswert->cName}" />
                        {else}
                                {* kein Preview Bild vorhanden*}
                        {/if}
                    </span>
                {/foreach}

{* ab hier kommt der Standard Code der Selectbox*}
 <dd class="form-group{if $Variation->cTyp !== 'FREIFELD' && !$showMatrix} required{/if}">
                    {if $Variation->cTyp === 'SELECTBOX'}
                        {block name="productdetails-info-variation-select"}
                        <select class="form-control" title="{if isset($smallView) && $smallView}{$Variation->cName} - {/if}{lang key="pleaseChooseVariation" section="productDetails"}" name="eigenschaftwert[{$Variation->kEigenschaft}]"{if !$showMatrix} required{/if}>
                            {foreach name=Variationswerte from=$Variation->Werte key=y item=Variationswert}
                                {assign var="bSelected" value=false}
                                {if isset($oVariationKombi_arr[$Variationswert->kEigenschaft])}
                                    {assign var="bSelected" value=in_array($Variationswert->kEigenschaftWert, $oVariationKombi_arr[$Variationswert->kEigenschaft])}
                                {/if}
                                {if isset($oEigenschaftWertEdit_arr[$Variationswert->kEigenschaft])}
                                    {assign var="bSelected" value=$Variationswert->kEigenschaftWert == $oEigenschaftWertEdit_arr[$Variationswert->kEigenschaft]->kEigenschaftWert}
                                {/if}
                                {if ($Artikel->kVaterArtikel > 0 || $Artikel->nIstVater == 1) && $Artikel->nVariationOhneFreifeldAnzahl == 1 &&
                                $Einstellungen.global.artikeldetails_variationswertlager == 3 &&
                                !empty($Artikel->VariationenOhneFreifeld[$i]->Werte[$y]->nNichtLieferbar) && $Artikel->VariationenOhneFreifeld[$i]->Werte[$y]->nNichtLieferbar == 1}
                                {else}
                                    {include file="productdetails/variation_value.tpl" assign="cVariationsWert"}
                                    <option value="{$Variationswert->kEigenschaftWert}" class="variation"
                                            data-type="option"
                                            data-original="{$Variationswert->cName}"
                                            data-key="{$Variationswert->kEigenschaft}"
                                            data-value="{$Variationswert->kEigenschaftWert}"
                                            data-content="{$cVariationsWert|escape:'html'}{if $Variationswert->notExists}<span class='label label-default label-not-available'>{lang key='notAvailableInSelection'}</span>{elseif !$Variationswert->inStock}<span class='label label-default label-not-available'>{lang key='ampelRot'}</span>{/if}"
                                            {if !empty($Variationswert->cBildPfadMini)}
                                                data-list='{prepare_image_details item=$Variationswert json=true}'
                                                data-title='{$Variationswert->cName}'
                                            {/if}
                                            {if isset($Variationswert->oVariationsKombi)}
                                                data-ref="{$Variationswert->oVariationsKombi->kArtikel}"
                                            {/if}
                                            {if $bSelected} selected="selected"{/if}>
                                        {$cVariationsWert|trim}
                                    </option>
                                {/if}
                            {/foreach}
                        </select>
                        {/block}

Ich denke mal man müsste wahrscheinlich ein "JS" einbauen. Aber mit JS kenne ich mich leider nicht aus.
Kann mir jemand helfen ?

 

[waldemar.p]

Hm, ja bei deinem Weg müsstest du das mit JS arbeiten und die Drop-Down-Liste einsprechend selektieren.

Aber ist es für dich nicht einfacher die Darstellung von Dropdown auf Swatches zu ändern?
Denn die Swatches Variante sieht ebenfalls fasst genau so wie du dir das mit Vorschaubildern zurecht gebaut hast. Und wenn diese angeklickt werden, wird auch die passende Variation geladen.
Diese könntest du dann per CSS höchstens an deine Darstellungswünsche dann anpassen und kommst eventuell auch ohne JS-Code aus.