Variant select menu as HTML select

Hello,

I need to change the fancy variant drop-down box of the Azure theme to a standard HTML <select> box.

From looking at widget/product/selectbox.tpl and oxarticlevariant.js, I simply can’t figure out how to achieve this. The code from here seems to be old as it creates template errors.

Here is what I have in selectbox.tpl so far:


[{assign var="oSelections" value=$oSelectionList->getSelections()}]
[{assign var="oActiveSelection" value=$oSelectionList->getActiveSelection()}]

[{if $oSelections}]
<div class="variantSelector">
    <label>[{$oSelectionList->getLabel()}]</label>
    <select class="variants">
        <option>
            [{if $sFieldName == "sel" }]
                [{ oxmultilang ident="PLEASE_CHOOSE" }]
            [{else}]
                [{ oxmultilang ident="CHOOSE_VARIANT" }]
            [{/if}]
        </option>
    [{foreach from=$oSelections item=oSelection}]
        [{if !$oSelection->isDisabled()}]
            <option value="[{$oSelection->getValue()}]" [{if $oSelection->isActive()}]selected="selected"[{/if}]>[{$oSelection->getName()}]</option>
        [{/if}]
    [{/foreach}]
    </select>
</div>
[{else}]
    <a href="[{ $_productLink }]" class="variantMessage">
    [{if $sFieldName == "sel" }]
        [{ oxmultilang ident="PLEASE_CHOOSE" }]
    [{else}]
        [{ oxmultilang ident="CHOOSE_VARIANT" }]
    [{/if}]
    </a>
[{/if}]

This will create the standard html drop-down box just fine. It also contains some sort of variant ids as the value for the option tags and the name of the variants. But I don’t know how to go about it from there. The oxarticlevariant.js heavily confuses me and I don’t really get what most of the code in there is supposed to do.

When I changed the drop-down menus for the listlocator, I could simply create an onChange-event that redirects to the link that’s saved as the value of the <option>-tag. Ideally, I’d want something like that in this case, but calling the “getLink()” Method of “oSelection” only yields a ‘#’.

It doesn’t need to be fancy AJAX-magic. A full page reload with the variant selection saved would be just fine.

Hi, you can do it like this. Just view the source and you’ll know. how it works.

http://487.foxido.de/Bekleidung/Fashion/Fuer-Sie/Shirts-Co/Stewart-Brown-Shirt-Kisser-Fish.html

Ah thank you. That was easier than expected. While I still don’t get how the JS-Magic works in detail, I could get it to work.

Just have a look to the scripts and compare :slight_smile:

That’s what I did. Still all I did was adjusting the selectors for JQuery without getting a deeper understanding what is actually happening, apart from the fact that there is some AJAX involved. That’s fine, I managed to achieve my goal.