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?
Erfahrungsgemäß braucht man einen Link, um dir helfen zu können. So weiss keiner, welche Fehler du eingebaut hast.
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.
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.
ok, habe nun folgenden code.
wobei die ersten beiden lines hinfaellig sind
[{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.
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.
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
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.
Mal auf den Link geklickt?
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 ?
Im Bug steht wo du suchen musst: oxvariantselect.js. Da findest du:
$('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:
$('input:hidden', obj.parents('div.js-fnSubmit')).val( obj.data("selection-id") );
dann kannst du die Klasse “dropDown” auch ganz weglassen.
Danke hat mir sehr geholfen, war nicht nur die dropdown, sonder auch noch das ich den value nicht mit geliefert habe im form…
[QUOTE=get;140833]ok, habe nun folgenden code.
wobei die ersten beiden lines hinfaellig sind
[{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.
[/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.
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.
[{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}]
Oha. Danke
Das funktioniert. Jetzt noch alles in ein Modul pressen und die Styleanweisungen sind aus dem Code raus.
Ich würde die oxarticlevariants.js ändern
$('input:hidden', obj.parents('div.dropDown, div.colorSelection')).val( obj.data("selection-id") );
Dann kann man statt “dropDown” im Template auch “colorSelection” verwenden.
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
[{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