Neu per Plugin Variationen ein/ausblenden (Javascript/Jquery)

[dercoderkm]

Moin,

Gerne möchte ich per Plugin bei einem Artikel eine Variation ausblenden und dieser einen Standardwert geben also eine Option vorauswählen.
Eine Option vorauswählen ist absolut kein Problem aber
wie kann ich eine Variation per Plugin/JS ein bzw. wieder einblenden?
Ich weiß natürlich wie ich per JS/Jquery Elemente ein und ausblende aber bei den Variationen gibt es keinen richtigen Selector um das zu machen..
Die Überschrift einer Variation sieht so aus:

                        <dt>{$Variation->cName}&nbsp;
                            {if $Variation->cTyp === 'IMGSWATCHES'}
                                <span class="swatches-selected text-success" data-id="{$Variation->kEigenschaft}">
                                {foreach $Variation->Werte as $variationValue}
                                    {if isset($oVariationKombi_arr[$variationValue->kEigenschaft])
                                        && in_array($variationValue->kEigenschaftWert, $oVariationKombi_arr[$variationValue->kEigenschaft])}
                                        {$variationValue->cName}
                                        {break}
                                    {/if}
                                {/foreach}
                                </span>
                            {/if}
                        </dt>

Wie man sieht hat das Element dt keine ID und auch keinen Namen. Wie also per JS Ausblenden/Einblenden für die eine Variation.
Bei vielen Variationen hat DT auch keine ID oder einen Namen.
Das gleiche gilt für die Variation / dem Feld an sich zum auswählen / ausfüllen.
Das ganze Feld wird mit dem Tag DD umschlossen und hat auch keine klar erkennbare ID pro Variation:

 <dd class="form-group text-left-util">

Das ist für jede Variation der Fall.

Wäre super wenn mir hier jemand helfen könnte und mir sagt wie ich das am besten mache?
Jetzt habe ich gerade die productdetails/variation.tpl so angepasst das dass Element DT die ID "UeberschriftVariation_kEigenschaft" hat so kann ich diese ansprechen.
Das gleiche gilt für den Tag DD.
Allerdings ist es ja nicht Sinn der Sache das dass Template bearbeitet werden muss für ein Plugin.

 

[css-umsetzung]

Es ist eigentlich möglich das komplett über ein Plugin zu regeln, indem man sich an den Namen der Variation hält, du gehst also die Variationen eines Artikels durch und merkst dir die ID der Variation dessen Namen dann eben immer "Farbe" ist, dann kannst du ja über phpQuery darauf zugreifen.

 

[dercoderkm]

Hi @css-umsetzung ,
auf das Feld an sich ja - aber nicht auf die Tags DD / DT um das ganze auszublenden oder übersehe ich da etwas?

 

[css-umsetzung]

da hangelt man sich dann hoch

mein Code sieht da bei Varianten, wenn es Dropdowns sind etwas anders aus, die 96 ist die ID der Variante.

$("dt:nth-child(" + $("[name='eigenschaftwert[96]']").closest("dd").index() + ")").slideUp();
$("[name='eigenschaftwert[96]']").closest("dd").slideUp();

Und das war jetzt mein html code dazu:

<div class="row variations switch-variations">
                    
<div class="col ">
                    <dl>
                    
                    <dt>Größe&nbsp;</dt>
<dd class="form-group text-left-util"><div class="dropdown bootstrap-select show-tick form-control custom-select"><select name="eigenschaftwert[95]" title="Bitte wählen Sie eine Variation." required="" class="form-control custom-select selectpicker" data-size="10" tabindex="-98"><option class="bs-title-option" value=""></option>
    <option value="368" class="variation" data-content="<span data-value='368'>S</span>" data-type="option" data-original="S" data-key="95" data-value="368" data-ref="600">S</option>
<option value="369" class="variation" data-content="<span data-value='369'>M</span>" data-type="option" data-original="M" data-key="95" data-value="369" data-ref="603">M</option>
<option value="370" class="variation" data-content="<span data-value='370'>L</span>" data-type="option" data-original="L" data-key="95" data-value="370" data-ref="606">L</option>
<option value="371" class="variation" data-content="<span data-value='371'>XL</span>" data-type="option" data-original="XL" data-key="95" data-value="371" data-ref="609">XL</option>
</select><button type="button" class="btn dropdown-toggle bs-placeholder btn-light" data-toggle="dropdown" role="button" title="Bitte wählen Sie eine Variation."><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Bitte wählen Sie eine Variation.</div></div> </div></button><div class="dropdown-menu " role="combobox"><div class="inner show" role="listbox" aria-expanded="false" tabindex="-1"><ul class="dropdown-menu inner show"></ul></div></div></div></dd>
                    
                    <dt>Farbe&nbsp;</dt>
<dd class="form-group text-left-util"><div class="dropdown bootstrap-select show-tick form-control custom-select"><select name="eigenschaftwert[96]" title="Bitte wählen Sie eine Variation." required="" class="form-control custom-select selectpicker" data-size="10" tabindex="-98"><option class="bs-title-option" value=""></option>
    <option value="372" class="variation" data-content="<span data-value='372'>Rot</span>" data-type="option" data-original="Rot" data-key="96" data-value="372" data-ref="600">Rot</option>
<option value="373" class="variation" data-content="<span data-value='373'>Grau</span>" data-type="option" data-original="Grau" data-key="96" data-value="373" data-ref="601">Grau</option>
<option value="374" class="variation" data-content="<span data-value='374'>Gr&amp;uuml;n</span>" data-type="option" data-original="Grün" data-key="96" data-value="374" data-ref="602">Gr&amp;uuml;n</option>
</select><button type="button" class="btn dropdown-toggle bs-placeholder btn-light" data-toggle="dropdown" role="button" title="Bitte wählen Sie eine Variation."><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Bitte wählen Sie eine Variation.</div></div> </div></button><div class="dropdown-menu " role="combobox"><div class="inner show" role="listbox" aria-expanded="false" tabindex="-1"><ul class="dropdown-menu inner show"></ul></div></div></div></dd>
                                        </dl>
                
</div>
            
</div>

 

[dercoderkm]

Danke das hat super geklappt - soviel CSS ist dann doch nicht mein Spezialgebiet

 

[ecki]

Moin,

Gerne möchte ich per Plugin bei einem Artikel eine Variation ausblenden und dieser einen Standardwert geben also eine Option vorauswählen.
Eine Option vorauswählen ist absolut kein Problem aber
.....

Hallo dercoderkm,
wie gebe ich der Variation einen Standardwert bzw. wähle diese aus?