SelctorsBox / Varianten (Azure Theme)

Deutsches Forum
1

Hallo liebe Oxidler!

Bräuchte Hilfe bei folgendem Problem: Im Azure-Theme wird beim Varianten-Dropdown (hier: “Farbe”) das “selectorlabel” und “Bitte wählen” wiederholt. Irgendwo in der selectbox.tpl müsste das geändert werden können, sehe aber den Wald vor lauter Bäumen nicht mehr…

Möchte gern, dass sowohl “Farbe” als auch “Bitte wählen” aus der Dropdownbox (siehe Bild “varianten2.png”) verschwinden, in der zusammengeklappten Ansicht jedoch erhalten bleiben (siehe Bild “varianten1.png”). Wie bekomme ich das raus? Habe Euch mal zwei Bilder und den Quelltext aus meiner selectbox.tpl angehängt.

Herzlichen Dank schonmal im Voraus!
Dylan


selectbox.tpl:

<div class="dropDown" id="selectlist_[{$iKey}]">

    <p class="selectorLabel underlined[{if $editable === false}] oxdisabled[{/if}]">
        <label><strong>FARBE</strong></label>
        [{assign var="oActiveSelection" value=$oSelectionList->getActiveSelection()}]
        [{if $oActiveSelection}]
            <span class="bitteWaehlenBox">[{$oActiveSelection->getName()}]</span>
        [{elseif !$blHideDefault}]
            <span class="bitteWaehlenBox">[{ oxmultilang ident="WIDGET_PRODUCT_ATTRIBUTES_PLEASECHOOSE"}]</span>
        [{/if}]
    </p>

    [{if $editable !== false}]
        <input type="hidden" name="[{$sFieldName|default:"varselid"}][[{$iKey}]]" value="[{if $oActiveSelection }][{$oActiveSelection->getValue()}][{/if}]">
        <ul class="drop vardrop FXgradGreyLight shadow">
            [{if $oActiveSelection && !$blHideDefault}]
                <li><a rel="" href="#"></a></li>
            [{/if}]
            [{foreach from=$oSelectionList->getSelections() item=oSelection}]
                <li class="[{if $oSelection->isDisabled()}]oxdisabled disabled[{/if}]">
                    <a rel="[{$oSelection->getValue()}]" href="[{$oSelection->getLink()}]" class="[{if $oSelection->isActive()}]selected[{/if}]"><div id="farbwahl"><img src="http://www.jalousita.de/webshop/out/pictures/icon/[{$oSelection->getName()}]_ico.jpg" alt="[{$oSelection->getName()}]" class="iconFarbwahl"><div class="textFarbwahl">[{$oSelection->getName()}]</div></div></a>
                </li>
            [{/foreach}]
        </ul>
    [{/if}]

</div>
2

Ist die Problematik zu banal oder warum antwortet niemand?

3

Hi,

man kann sich so nur schwer vorstellen, was denn genau das Problem sein soll. Wie gibst Du denn die Farben aus, bzw. woher kommen denn die Farbbilder.

Welche Änderungen hast Du denn vorgenommen, damit das so wie abgebildet aussieht,
kann man sich das Ganze irgendwo live ansehen? Sonst wirds schwierig…

Ansonsten dürftest Du das ziemlich schnell mit JavaScript umsetzen können.

Viele Grüße vom Chris

4

Hallo Chris! Vielen Dank für Deine Antwort.

Die Farben stammen aus einer im Backend erstellten Auswahlliste; die passenden Farbbilder rufe ich auf, indem ich den Namen der SelectBox-Auswahl (hier: die Farbbezeichnung) erfrage und einfach ein “_ico.jpg” anhänge (Codeschnipsel:

[{$oSelection->getName()}]_ico.jpg

). Das ganze dann als img-link. Die Bilder habe ich vorher manuell auf den Server hochgeladen.

Live sieht das folgendermaßen aus. Ist alles noch ein wenig beta, also bitte nicht wundern :wink:
http://www.jalousita.de/webshop/INSEKTEN-SCHUTZ/Fenster-Insektenschutzgitter-Einfach.html

Wenn man unter “Personalisieren” => “Farbe” auf “Bitte wählen” klickt, erscheint das Dropdown. Das Problem besteht nun darin, dass sowohl das Label “Farbe” als auch das Span “Bitte wählen” im Dropdown auftaucht. Meiner Meinung nach hat’s da einfach nichts verloren…

Ich hoffe dass ich hiermit ein wenig verdeutlichen konnte, was das Porblem ist. Schonmal vielen Dank für Deinen Lösungsansatz :wink:

Herzliche Grüße,
Dylan

5

Hat denn keiner einen Vorschlag?

6

Habe es soeben endlich selbst hinbekommen. So viel zu Thema: Sehe den Wald vor lauter Bäumen nicht mehr…
Lösung: Einfach in der Elements.css das erste Listenelement (“li”) in der ungeordneten Liste (“ul”) ausblenden. Meine Güte, war das eine schwere Geburt ^^

.dropDown li:first-child {
    visibility: hidden;
}
7

Alternative und bessere Lösung mittels JS:
In der gui.js unter “showDropdown : function ()” (ab Zeile 664) einfach am Schluss die Zeile

$("ul.drop li.value").remove();

ergänzen, damit der Schnipsel wie folgt aussieht:

    showDropdown : function () {
        oxid.hideDropdown();
        targetObj = $(this);

        targetObj.removeClass('underlined');
        sublist = targetObj.nextAll("ul.drop");

        sublist.prepend("<li class='value'></li>");
        targetObj.clone().appendTo($(".value", sublist));

        if (sublist.length) {
            sublist.slideToggle("fast");
            targetObj.toggleClass("selected");
        }

		$("ul.drop li.value").remove();

    },