Multidimensionale Varianten in Produkdetailansicht

Deutsches Forum
1

Guten Tag,

ich verwende Oxid 6.1.5 CE.

Ich habe für einen Artikel Varianten mit 3 Dimensionen erstellt : Breite, Farbe, Stückzahl
Es erscheinen demnach 3 Dropdowns auf der Artikeldetailseite.

Nun ist aufgefallen, dass bei einer ungültigen Auswahlkombination, die gesamte Dropdownauswahl zurückgesetzt wird und man jedes mal wieder seine Auswahl treffen muss. Das würden ich gerne ändern.

Besteht die Möglichkeit, Einstellungen vorzunehmen, dass bei Auswahl eines Merkmals in einer der Dropdowns, die nicht möglichen Kombinationen in den anderen Dropdowns ausgeblendet/ausgegraut werden, so dass man diese einfach nicht mehr auswählen kann?
Gibt es ein Modul, welches diese Aufgabe übernimmt?

Ein kleiner Beispiel zum besserern Verständnis.

Namen der Auswahl: Breite | Farbe | Stückzahl
Variante 1 : 10 cm | rot | 10
Variante 2 : 20 cm | grün| 100
Variante 3 : 10 cm | blau| 100

Wenn ich nun Breite 10 cm auswähle in Dropdown 1, dann soll automatisch nur Farbe rot, blau und Stückzahl 10, 100 in den anderen Dropdowns auswählbar sein. Farbe grün soll demnach nicht mehr auswählbr oder angezeigt werden.

Vielen Dank für eure Antworten

2

Normalerweise dürfte dies nicht vorkommen, denn nicht wählbare Einheiten markiert oxid im Quellext mit der Klasse “disabled js-disabled”, damit diese nicht ausgewählt werden können.
Kannst mal den Quelltext der selectbox posten?

3

Danke für deine Antwort.
Ich habe neben dem Quelltetx auch in der Entwicklerkonsole nach einer Auswahl in Dropdown geschaut.
Ein “disabeld js-disabled” hätte ich ebenso erwartet.

Hier der Quelltext:

<div class="form-group dropDown">
                <p class="variant-label"><strong>Durchmesser:</strong></p>
            <div class="dropdown">
        <button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">
                                                <span class="float-left">
                                                Durchmesser Variante wählen
                                        </span>
                        </button>
                        <input type="hidden" name="varselid[0]" value="">
            <ul class="dropdown-menu  vardrop" role="menu">
                                                            <li class="dropdown-menu-item">
                        <a href="#" data-selection-id="f7601f476bc5cfa7b7bfda56cef99074" class="dropdown-menu-link">25 mm</a>
                    </li>
                                        <li class="dropdown-menu-item">
                        <a href="#" data-selection-id="40c2b7ef45dff727cb899edb494b0f72" class="dropdown-menu-link">40 mm</a>
                    </li>
                                        <li class="dropdown-menu-item">
                        <a href="#" data-selection-id="ee7f9eba38fee80d618e06ab3d0b6c05" class="dropdown-menu-link">50 mm</a>
                    </li>
                                        <li class="dropdown-menu-item">
                        <a href="#" data-selection-id="19ed09220ca58cfc7d03da25217aa3a9" class="dropdown-menu-link">60 mm</a>
                    </li>
                                </ul>
                </div>
</div>
                                                                                                    
<div class="form-group dropDown">
                <p class="variant-label"><strong>Stück:</strong></p>
            <div class="dropdown">
        <button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">
                                                <span class="float-left">
                                                Stück Variante wählen
                                        </span>
                        </button>
                        <input type="hidden" name="varselid[1]" value="">
            <ul class="dropdown-menu  vardrop" role="menu">
                                                            <li class="dropdown-menu-item">
                        <a href="#" data-selection-id="0acd5220a8009aecb13aa3c8e0e28f0f" class="dropdown-menu-link">10 Stück</a>
                    </li>
                                        <li class="dropdown-menu-item">
                        <a href="#" data-selection-id="9c7b8c0415affbacab3c29dedb580d47" class="dropdown-menu-link">100 Stück</a>
                    </li>
                                </ul>
                </div>
</div>
                                                                                                    
<div class="form-group dropDown">
                <p class="variant-label"><strong>Farbe:</strong></p>
            <div class="dropdown">
        <button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">
                                                <span class="float-left">
                                                Farbe Variante wählen
                                        </span>
                        </button>
                        <input type="hidden" name="varselid[2]" value="">
            <ul class="dropdown-menu  vardrop" role="menu">
                                                            <li class="dropdown-menu-item">
                        <a href="#" data-selection-id="d2a50ce29b7596f3bfe2d464c8446390" class="dropdown-menu-link">vernickelt</a>
                    </li>
                                        <li class="dropdown-menu-item">
                        <a href="#" data-selection-id="bc8a3f7c7a4f73a8a623387ae96374f9" class="dropdown-menu-link">altkupfer</a>
                    </li>
                                        <li class="dropdown-menu-item">
                        <a href="#" data-selection-id="f635348df4ebd171657224d4e8d6c375" class="dropdown-menu-link">silberfarbig nickelfei</a>
                    </li>
                                </ul>
                </div>
</div>
                                                        </div>
                                        
            </div>
4

OK, das sieht ja nach originalem Shop aus. Dann ist einfach zu prüfen, warum “$oSelection->isDisabled()” nicht reagiert. Die Ursache dazu ist zu 95% in den Artikeleinstellungen (Lager, Zuweisungen etc.) zu finden, sofern keine Module die Verarbeitung beeinflussen…

5

Versuch mal das folgende CSS. Das hat bei mir in einem Shop mit dem Wave Theme funktioniert, so dass man die nicht kaufbaren Auswahlen nicht wählen kann. Ich weiß nur nicht mehr welche OXID Version das war.

.selectorsBox .dropDown li.disabled {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=.45);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .45;

}

1 Like
6

Genau das fehlt ihm doch.

7

Vielen Dank für eure Antworten:
Wie sich herausstellte, lag es tatsächlich am CSS.
In Theme Flow ging es. In Theme Wave nicht mehr. Hier musste dann die CSS-Anpassung her.

8

Das mag ja sein, es muss aber, nicht wie im oben geposteten Quelltext “disabled” vorkommen. Sonst greift da nix.

9

Soweit ich mich erinnere hatte das CSS bei mir auch mit dem original Wave Theme geholfen ohne Anpassungen am Template. Ist aber schon länger her und so ganz sicher bin ich mir auch nicht mehr.

10

Solange die Klasse ‘disabled’ vorhanden ist, sicher. Mit obigem Quelltext sicher nicht.

11

Der o.g. Quelltext ist ja auch nur die Ausgabe und nicht der Code aus der selectbox.tpl. Der entsprechende Block sieht dort im aktuellen Wave Theme so aus:

[{foreach from=$oSelections item=oSelection}]
  <li class="dropdown-menu-item[{if $oSelection->isDisabled()}] disabled js-disabled[{/if}]">
      <a href="[{$oSelection->getLink()}]" data-selection-id="[{$oSelection->getValue()}]" class="dropdown-menu-link[{if $oSelection->isActive()}] active[{/if}]">[{$oSelection->getName()}]</a>
  </li>

[{/foreach}]

12

Die Frage war, warum etwas auswählbar ist, was es eigentlich nicht sein dürfte. Und wenn wenn es nun plötzlich mit obigem CSS-Zusatz funktioniert, passt das nicht zum geposteten Quelltext. Steht eigentlich oben beschrieben, denn da fehlt die Klasse, ohne die es nicht funktionieren kann.

13

Also ich vermute dass in dem Quelltext gar keine Auswahl vorhanden war die nicht auswählbar sein sollte. In dem foreach in der TPL ist in einem Standard Wave Theme die oben gepostete Abfrage drin. Diese setzt dann ja die Klasse disabled. Aber der CSS Code fehlt im Wave Theme und deswegen funktioniert das nicht, auch wenn die Klasse vorhanden ist.

14

Es war wie tesolution in seinem letzten Beitrag es beschreibt. Danke noch einmal für eure Unterstützung.

15

Genau. Weil es an dem Punkt unstimmig ist, habe ich nachgefragt.

16

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.