# Varianten dropdown veraendern

**URL:** <https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515>\
**Category:** Deutsches Forum\
**Tags:** templates-design\
**Created:** [March 3, 2014, 8:27pm UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515 "2014-03-03T20:27:21Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![get](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/g/a5b964/32.png) [@get](https://forum.oxid-esales.com/u/get)\
**Post date:** [March 3, 2014, 8:27pm UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515/1 "2014-03-03T20:27:21Z")

</div>

Hallo,  
ich wollte die dropdown varianten ansicht aendern …  
statt dropdown eine horizontale liste mit varianten (fuer farbe farbkaestchen, fuer groessen, s l m xl bilder)  
doch dann funktioniert die auswahl / refresh funktion nicht mehr.

muss ich was beachten?

---

<div class="post-metadata">

**Author:** ![adamweber](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/a/da6949/32.png) [@adamweber](https://forum.oxid-esales.com/u/adamweber)\
**Post date:** [March 3, 2014, 9:22pm UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515/2 "2014-03-03T21:22:35Z")

</div>

Erfahrungsgemäß braucht man einen Link, um dir helfen zu können. So weiss keiner, welche Fehler du eingebaut hast.

---

<div class="post-metadata">

**Author:** ![get](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/g/a5b964/32.png) [@get](https://forum.oxid-esales.com/u/get)\
**Post date:** [March 3, 2014, 9:33pm UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515/3 "2014-03-03T21:33:59Z")

</div>

widget/product/selectbox.tpl  
hier geht noch alles, aber im dem moment wo ich aus zb:  
\<div class=“dropDown [{$sJsAction}]”\>  
\<p class=“selectorLabel underlined [{if $editable === false}] js-disabled[{/if}]”\>

einfach class=“xdropDown [{$sJsAction}]”\>  
\<p class=“selectorLabel underlined [{if $editable === false}] js-disabled[{/if}]”\>  
mache, um zu sehen wie es ausieht “ohne” style, geht dies nicht mehr.

---

<div class="post-metadata">

**Author:** ![foxido.de](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/f/ce7236/32.png) [@foxido.de](https://forum.oxid-esales.com/u/foxido.de)\
**Post date:** [March 4, 2014, 12:19pm UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515/4 "2014-03-04T12:19:07Z")

</div>

Wenn ein Selector (div.dropDown) umbenannt wird, kann das nicht mehr funktionieren. Die Befehle müssen dann auch in jQuery und CSS angepasst bzw. kopiert und umbenannt werden.

Besser wäre wohl, eine neue Klasse hinzuzufügen (bzw. “hinzu zu fügen”) und Befehle einzupflegen, die nur für diese Klasse gelten.

---

<div class="post-metadata">

**Author:** ![get](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/g/a5b964/32.png) [@get](https://forum.oxid-esales.com/u/get)\
**Post date:** [March 4, 2014, 2:53pm UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515/5 "2014-03-04T14:53:20Z")

</div>

ok, habe nun folgenden code.  
wobei die ersten beiden lines hinfaellig sind

```auto
[{oxscript include="js/widgets/oxdropdown.js" priority=10 }]
[{oxscript add="$('div.dropDown p').oxDropDown();" }]
<div id="variants" class="[{$sJsAction}]">
        [{assign var="oActiveSelection" value=$oSelectionList->getActiveSelection()}]
    [{if $editable !== false}]
        <input type="hidden" name="[{$sFieldName|default:"varselid"}][[{$iKey}]]" value="[{if $oActiveSelection }][{$oActiveSelection->getValue()}][{/if}]">
        <div style="float:left; clear:right; height:35px;">
        <label style="float:left; font-weight:700;font-size:13px;">[{$oSelectionList->getLabel()}] </label><br clear="all" />
        [{if $oActiveSelection}]
            <span style="font-weight:normal; float:left">[{$oActiveSelection->getName()}]</span>
       [{/if}]</div>
       <ul id="ArtAuswahl" class="drop [{$sSelType|default:"vardrop"}]">
            [{foreach from=$oSelectionList->getSelections() item=oSelection}]
                <li class="[{if $oSelection->isDisabled()}]js-disabled disabled[{/if}]" style="float:right;">
                    <a rel="[{$oSelection->getValue()}]" href="[{$oSelection->getLink()}]" class="[{if $oSelection->isActive()}]selected[{/if}]" title="[{$oSelection->getName()}]"><img src="/out/palette/img/[{$oSelection->getName()|cat:'.png'}]" class="imgDrop" alt="[{$oSelection->getName()}]"/></a>
                </li>
            [{/foreach}]
        </ul>   
    [{/if}]
    <br clear="all" />
</div>

```

was auch schon ganz gut aussieht, aber eben nichts macht beim anklicken.

 ![](http://i.imgur.com/B12Yser.png)

daher frage ich was da alles noch zu aender waere damit der select krams wieder geht, bin selber leider nicht erfahren mit js,jquery.

Wozu ich noch eine frage habe, hatte das template azure komplett kopiert um darin zu arbeiten, dieses im backend auch aktiviert, nun gehen da aber die einstellungen, die aber bei azure gehen, nicht mehr. muss ich ggf noch etwas anpassen?  
kopiert hatte ich application/views/azure und in out auch den azure ordner zum neuen Namen.

---

<div class="post-metadata">

**Author:** ![leofonic](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/leofonic/32/58_2.png) [@leofonic](https://forum.oxid-esales.com/u/leofonic)\
**Post date:** [March 4, 2014, 3:34pm UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515/6 "2014-03-04T15:34:10Z")

</div>

Das Problem ist dass das js nach div.dropDown sucht, das muss man im js ändern wenn man kein Dropdown will: [https://bugs.oxid-esales.com/view.php?id=5532](https://bugs.oxid-esales.com/view.php?id=5532)

---

<div class="post-metadata">

**Author:** ![get](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/g/a5b964/32.png) [@get](https://forum.oxid-esales.com/u/get)\
**Post date:** [March 4, 2014, 6:58pm UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515/7 "2014-03-04T18:58:06Z")

</div>

ja, klar , im .js finde ich aber nichts unter “div.dropDown” nur in zeile 2:  
[{oxscript add="$(‘div.dropDown p’).oxDropDown();" }]

Obwohl dier dropdown, doch nur fuer den “dropdown” effekt steht… worum es mir geht, ist die aktion die nicht ausgeführt wird beim select von einer variante.

---

<div class="post-metadata">

**Author:** ![leofonic](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/leofonic/32/58_2.png) [@leofonic](https://forum.oxid-esales.com/u/leofonic)\
**Post date:** [March 4, 2014, 8:47pm UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515/8 "2014-03-04T20:47:57Z")

</div>

Mal auf den Link geklickt?

---

<div class="post-metadata">

**Author:** ![get](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/g/a5b964/32.png) [@get](https://forum.oxid-esales.com/u/get)\
**Post date:** [March 5, 2014, 11:02pm UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515/9 "2014-03-05T23:02:30Z")

</div>

klar, er spricht von einem bug, ist ja nett, kann mir jemand sagen wass ich im .js aendern muss damit dieser mit meinem tpl zusammen arbeitet ?

---

<div class="post-metadata">

**Author:** ![leofonic](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/leofonic/32/58_2.png) [@leofonic](https://forum.oxid-esales.com/u/leofonic)\
**Post date:** [March 6, 2014, 10:30am UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515/10 "2014-03-06T10:30:31Z")

</div>

Im Bug steht wo du suchen musst: oxvariantselect.js. Da findest du:

```php

$('input:hidden', obj.parents('div.dropDown')).val( obj.data("selection-id") );

```

Wenn du also wie in deinem Beispiel

> aus zb:
> 
> einfach class=“xdropDown [{$sJsAction}]”\>
> 
> mache, um zu sehen wie es ausieht "ohne" style, geht dies nicht mehr.

dann musst du in oxvariantselect.js ebenfalls aus ‘div.dropDown’ ‘div.xdropDown’ machen, dann geht das js wieder ohne Dropdown-Effekt, und du kannst anfangen die Struktur und die Styles anzupassen.

Oder du nimmst die Zeile aus einer Version vor dem Bug:

```php

$('input:hidden', obj.parents('div.js-fnSubmit')).val( obj.data("selection-id") );

```

dann kannst du die Klasse “dropDown” auch ganz weglassen.

---

<div class="post-metadata">

**Author:** ![get](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/g/a5b964/32.png) [@get](https://forum.oxid-esales.com/u/get)\
**Post date:** [April 17, 2014, 4:05pm UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515/11 "2014-04-17T16:05:40Z")

</div>

Danke hat mir sehr geholfen, war nicht nur die dropdown, sonder auch noch das ich den value nicht mit geliefert habe im form…

---

<div class="post-metadata">

**Author:** ![Hideandseek](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/h/7c8e57/32.png) [@Hideandseek](https://forum.oxid-esales.com/u/Hideandseek)\
**Post date:** [November 18, 2014, 3:11pm UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515/12 "2014-11-18T15:11:10Z")

</div>

[QUOTE=get;140833]ok, habe nun folgenden code.  
wobei die ersten beiden lines hinfaellig sind

```auto
[{oxscript include="js/widgets/oxdropdown.js" priority=10 }]
[{oxscript add="$('div.dropDown p').oxDropDown();" }]
<div id="variants" class="[{$sJsAction}]">
        [{assign var="oActiveSelection" value=$oSelectionList->getActiveSelection()}]
    [{if $editable !== false}]
        <input type="hidden" name="[{$sFieldName|default:"varselid"}][[{$iKey}]]" value="[{if $oActiveSelection }][{$oActiveSelection->getValue()}][{/if}]">
        <div style="float:left; clear:right; height:35px;">
        <label style="float:left; font-weight:700;font-size:13px;">[{$oSelectionList->getLabel()}] </label><br clear="all" />
        [{if $oActiveSelection}]
            <span style="font-weight:normal; float:left">[{$oActiveSelection->getName()}]</span>
       [{/if}]</div>
       <ul id="ArtAuswahl" class="drop [{$sSelType|default:"vardrop"}]">
            [{foreach from=$oSelectionList->getSelections() item=oSelection}]
                <li class="[{if $oSelection->isDisabled()}]js-disabled disabled[{/if}]" style="float:right;">
                    <a rel="[{$oSelection->getValue()}]" href="[{$oSelection->getLink()}]" class="[{if $oSelection->isActive()}]selected[{/if}]" title="[{$oSelection->getName()}]"><img src="/out/palette/img/[{$oSelection->getName()|cat:'.png'}]" class="imgDrop" alt="[{$oSelection->getName()}]"/></a>
                </li>
            [{/foreach}]
        </ul>   
    [{/if}]
    <br clear="all" />
</div>

```

was auch schon ganz gut aussieht, aber eben nichts macht beim anklicken.

 ![](http://i.imgur.com/B12Yser.png)

[/QUOTE]

Ich würde das so gerne im “Canvas Red Theme” umsetzen, allerdings bekomme ich zwar die Felder ausgegeben, diese sind aber nicht klickbar. Auch ein Austauschen des von leofonic angesprochenen oxvariantselect.js Teils hat nicht geholfen.

Wie komme ich hier zum Ergebnis, denn die Anzeige finde ich echt gut und würde diese gern übernehmen.

---

<div class="post-metadata">

**Author:** ![Medicus](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/m/f475e1/32.png) [@Medicus](https://forum.oxid-esales.com/u/Medicus)\
**Post date:** [January 11, 2016, 1:40pm UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515/13 "2016-01-11T13:40:37Z")

</div>

Die Lösung würde mich auch interessieren.  
Aber mit

> Danke hat mir sehr geholfen, war nicht nur die dropdown, sonder auch noch das ich den value nicht mit geliefert habe im form…  
> kann man nicht sehr viel anfangen.

Es wäre schön wenn es denn funktioniert auch die Lösung zu posten.

Oder hat jemand ein fertiges Modul auf Lager? Ich hätte Interesse.

---

<div class="post-metadata">

**Author:** ![leffty\_ruggiero](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/l/dec6dc/32.png) [@leffty\_ruggiero](https://forum.oxid-esales.com/u/leffty_ruggiero)\
**Post date:** [January 12, 2016, 12:05pm UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515/14 "2016-01-12T12:05:54Z")

</div>

```php

[{oxscript include="js/widgets/oxdropdown.js" priority=10 }]
[{assign var="oSelections" value=$oSelectionList->getSelections()}]
[{if $oSelections}]
<style>
.dropDown ul {display: block; position:relative; border: none; cursor: auto}
.selectMessage, .selectorLabel {cursor:auto;}
.dropDown p {color: #000000;margin: 0;background: none;padding-right: 20px;}
.dropDown ul a {border: none;}
.drop li {float:left; height: 20px; margin: 2px; padding: 5px; border: 1px solid #ccc}
</style>
<div class="dropDown clear [{$sJsAction}]">
    <p class="selectorLabel[{if $editable === false}] js-disabled[{/if}]">
        <label>[{$oSelectionList->getLabel()}]:</label>     
        [{assign var="oActiveSelection" value=$oSelectionList->getActiveSelection()}]
        [{if $oActiveSelection}]
            <span>[{$oActiveSelection->getName()}]</span>
        [{elseif !$blHideDefault}]
            <span [{if $blInDetails}]class="selectMessage"[{/if}]>
                [{if $sFieldName == "sel" }]
                    [{ oxmultilang ident="PLEASE_CHOOSE" }]
                [{else}]
                    [{ oxmultilang ident="CHOOSE_VARIANT" }]
                [{/if}]
            </span>
        [{/if}]   
    </p>
    [{if $editable !== false}]
        <input type="hidden" name="[{$sFieldName|default:"varselid"}][[{$iKey}]]" value="[{if $oActiveSelection }][{$oActiveSelection->getValue()}][{/if}]">
        <ul class="drop [{$sSelType|default:"vardrop"}]">            
            [{foreach from=$oSelections item=oSelection}]
                <li class="[{if $oSelection->isDisabled()}]js-disabled disabled[{/if}]">
                    <a data-selection-id="[{$oSelection->getValue()}]" href="[{$oSelection->getLink()}]" class="[{if $oSelection->isActive()}]selected[{/if}]">[{$oSelection->getName()}]</a>
                </li>
            [{/foreach}]
        </ul>
    [{/if}]
</div>
[{else}]
<a href="[{ $_productLink }]" class="variantMessage">
[{if $sFieldName == "sel" }]
    [{ oxmultilang ident="PLEASE_CHOOSE" }]
[{else}]
    [{ oxmultilang ident="CHOOSE_VARIANT" }]
[{/if}]
</a>
[{/if}]

```

---

<div class="post-metadata">

**Author:** ![Medicus](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/m/f475e1/32.png) [@Medicus](https://forum.oxid-esales.com/u/Medicus)\
**Post date:** [January 13, 2016, 10:15am UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515/15 "2016-01-13T10:15:16Z")

</div>

Oha. Danke  
Das funktioniert. Jetzt noch alles in ein Modul pressen und die Styleanweisungen sind aus dem Code raus.

---

<div class="post-metadata">

**Author:** ![leofonic](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/leofonic/32/58_2.png) [@leofonic](https://forum.oxid-esales.com/u/leofonic)\
**Post date:** [January 13, 2016, 12:32pm UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515/16 "2016-01-13T12:32:57Z")

</div>

Ich würde die oxarticlevariants.js ändern

```php
$('input:hidden', obj.parents('div.dropDown, div.colorSelection')).val( obj.data("selection-id") );

```

Dann kann man statt “dropDown” im Template auch “colorSelection” verwenden.

---

<div class="post-metadata">

**Author:** ![Medicus](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/m/f475e1/32.png) [@Medicus](https://forum.oxid-esales.com/u/Medicus)\
**Post date:** [January 13, 2016, 1:32pm UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515/17 "2016-01-13T13:32:17Z")

</div>

Wenn mann Bilder haben möchte, habe ich das mit folgenden Code gelöst.  
Der Ordner “deinOrdner\_mit\_den\_Bildern” ist dann im out/azure/img

```auto
[{if $editable !== false}]
        <input type="hidden" name="[{$sFieldName|default:"varselid"}][[{$iKey}]]" value="[{if $oActiveSelection }][{$oActiveSelection->getValue()}][{/if}]">
        <ul class="drop [{$sSelType|default:"vardrop"}]">            
            [{foreach from=$oSelections item=oSelection}]
                <li class="[{if $oSelection->isDisabled()}]js-disabled disabled[{/if}]">
                    <a data-selection-id="[{$oSelection->getValue()}]" href="[{$oSelection->getLink()}]" class="[{if $oSelection->isActive()}]selected[{/if}]">[{$oSelection->getName()}]<img src="[{$oViewConf->getImageUrl('deinOrdner_mit_den_Bildern/')}][{$oSelection->getName()|cat:'.png'}]" alt="[{$oSelection->getName()}]"/></a>
                </li>
            [{/foreach}]
        </ul>
    [{/if}] 

```

Ach so: Bezieht sich natürlich auf diesen Code: [http://forum.oxid-esales.com/showthread.php?p=177043#post177004](http://forum.oxid-esales.com/showthread.php?p=177043#post177004)

---

<div class="post-metadata">

**Author:** ![system](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/system/32/4245_2.png) [@system](https://forum.oxid-esales.com/u/system)\
**Post date:** [July 13, 2026, 8:21pm UTC](https://forum.oxid-esales.com/t/varianten-dropdown-veraendern/68515/18 "2026-07-13T20:21:28Z")

</div>

Closed on July 13, 2026, 8:21pm UTC