Abhängige Attribute bei Isotope

[k-webdesign]

Hi,

kann ich denn abhängige Attribute setzen? Ein Produkt in einem Shop hat z.B. die Select-Auswahlmöglichkeit "Schleifchen: ja/nein". Und erst wenn "Ja" gewählt wird, sollen die möglichen Farben dazu erscheinen. Hat das jemand schon mal umgesetzt?
Contao 3.5.3 und Isotope 2.3.1

Danke und VG,
Kim

[k-webdesign]

*schieb*

[pepesale]

Meinst Du so etwas:
www.ginflut.com/shop/sylt.html

Wenn man dort beispielsweise 750er Gold auswählt, fällt das dritte Dropdown weg.

[KATgirl]

Ja, dazu musst du ein wenig JS Code zusätzlich einbauen. Oder du löst es über Varianten, dann fällt das automatisch weg.

Gesendet von meinem ONE A2003 mit Tapatalk

[k-webdesign]

@pepesale, genau so - nur umgekehrt. Wenn etwas bestimmtes ausgewählt wird, erscheint ein neues Select zum Auswählen. Wird vermutlich mit einem Onchange JS gehen?

[KATgirl]

Wenn du Hilfe brauchst sag bescheid, ich habe sowas schon fertig ;-)

Gesendet von meinem ONE A2003 mit Tapatalk

[KATgirl]

Hier das Ganze mal in jQuery für ein Select-Feld:

NAME => Name des Feldes, welches versteckt werden soll
EVENT => Name des Feldes, welches einen bestimmten Wert annehmen soll, damit das Feld NAME sichtbar wird.
VALUE => Wert auf den die Auswahl im Feld EVENT geprüft werden soll

<script> 
  jQuery("select[name='NAME']").hide();

  setInterval(function() {
    if(jQuery("select[name='EVENT']").val() == VALUE)  {
      jQuery("select[name='NAME']").show();
    } else {
      jQuery("select[name='NAME']").hide();
   }   
  }, 1000);  
</script>

Das Intervall setze ich da der IE das OnChange nach dem Ajax-Request verliert.

Gruß Kirsten

[soweit_ok]

Schonmal ein guter Ansatz, dankeschön Kirsten. Allerdings geht die Kundenanforderung in einem akt. Projekt noch etwas weiter. Bei vorstehender Lösung werden gleich ganze Selects angezeigt/versteckt. Ich muss desweiteren auch umsetzen, dass manche abhängige Selects zwar generell angezeigt werden, jedoch weniger oder zusätzliche Optionen enthalten. Man könnte zwar entsprechend mehrere abhängige Selects erzeugen und nur das jeweils benötigte anzeigen. Fände ich aber etwas umständlich, insbesondere bei sogar mehrstufigen Abhängigkeiten.

Gibts dafür evtl. auch eine Möglichkeit oder womöglich sogar ebenso bereits eine schon vorhandene Lösung, also "nur" Optionen zu entfernen oder hinzuzufügen?

Edit:
Ach und eine Frage noch - gibts beim bloßen Verstecken von Selects (in denen dann ja auch keine Auswahl stattfinden kann) denn nicht das Problem mit dem Zurücksetzen auf das Basisprodukt, wenn in einem Select keine der enthaltenen Optionen gewählt wurde? Obwohl, ich glaube, da mach ich jetzt einen Denkfehler, oder? Denn entweder gibts ein abhängiges Select je nach Vorauswahl übergeordneter Auswahl garnicht, oder eben weniger/mehr Optionen. Aber grad mit letzterem tu ich mich in der Vorstellung schwer. Denn es würde doch garnichts nützen, mit Javascript Optionen hinzuzufügen, die nicht bereits in der Konfiguration angelegt wurden. Wenn ich es richtig sehe, kann ich also nur konfigurierte Optionen mit JS entfernen und hinzufügen gäbe Probleme? Unabhängig davon ringe ich um Verständnis bzgl. des verbleibenden Problems, wenn in einem Select garnichts gewählt wurde, z. B. weil versteckt, siehe dieses Ticket ...
https://github.com/isotope/core/issues/1395

[KATgirl]

Hallo, an sowas Sitze ich die Woche auch, da kann ich gerne dann berichte

Gesendet von meinem ONE A2003 mit Tapatalk

[soweit_ok]

Hallo, an sowas Sitze ich die Woche auch, da kann ich gerne dann berichte

Super, das freut mich. Werde ich natürlich auch umgekehrt tun, allerdings gehe ich an diese Teilaufgabe wahrscheinlich erst ca. in der letzten Märzwoche, weil ich vorher erstmal die Contao-Webseite bauen muss. Denn die braucht der Kunde wegen eines ziemlich sportlichen Zeitplans schon vorher zum Content einpflegen.

[soweit_ok]

@Katgirl: Dein Tipp bzgl. setInterval erwies sich jedenfalls als sehr wertvoll. Nicht nur wg. des IE, der sich auch in den neuesten Versionen noch als Zicke gibt. Genauso wie Webkit-Browser nicht selten identisch. Ich wäre wohl auch selber darauf gekommen, doch vermutlich erst nach verschiedenen nicht zum Erfolg führenden Tests. Ansonsten erwies neben diversem anderen auch als nötig, zur Laufzeit bei einigen abhängigen Optionen mit JS das "required"-Attribut zu überschreiben. Denn in der Attributkonfiguration bei Isotope kann man ja nur absolut sagen, ob ein Attribut ein Pflichtfeld ist oder nicht. Dass es stattdessen abhängig von der Auswahl eines übergeordneten Attributs bzw. spezieller Attribut-Opitonen erst zur Laufzeit zum Pflichtfeld werden kann und nach Auswähländerung umgekehrt nicht mehr, unterstützt Isotope nicht. Ich habe beispielsweise ein Select zur Farbwahl. Nur wenn man darin eine sog. Sonderfarbe wählt, wird ein verstecktes Feld zur Eingabe des Hersteller-Sonderfarbcodes sichtbar. Anderenfalls bleibt es versteckt bzw. wird bei späterer Änderung der übergeordneten Auswahl erneut versteckt. Ist ja klar, ein Plichtfeld darf eigentlich nur versteckt werden, sofern es einen Standardwert enthält. Denn bliebe es leer, könnte das Produkt nicht in den Warenkorb gelegt werden.

Im beschriebenen Fall muss es jedoch leer bleiben, wenn keine der übergeordneten Sonderfarben selektiert wurde. Oder man müsste irgendeinen Quatschkram als Standardwert vorbelegen und nach Übernahme in den Warenkorb extra wieder entfernen, um diesen Quatschkram nicht anzuzeigen.

Wir wollten ja über den Fortgang berichten ...

Alles in allem gelangte ich zum an sich erfreulichen Fazit, dass Isotope die wesentlichen Voraussetzungen zur Erstellung auch komplexer Produktkonfiguratoren bereits an Bord hat - es sich also auf Basis von Isotope recht gut umsetzen lässt. Andererseits aber auch noch einige dafür nötige Features fehlen. So sind die standardmäßigen Möglichkeiten der Attributverarbeitung noch erheblich zu schlicht gestrickt (das im vorigen Absatz genannte Problem ist nur eines von einer ganzen Reihe). Desweiteren wird u. a. auch keine Galerie mitgeliefert, welche die Produktbilder so anzeigen kann, wie bei vielen Produktkonfiguratoren typischerweise nötig. Nämlich Varianten-Abbildungen statt separat oder nebeneinander als Stapel transparenter Layer (Photoshop - Alphakanal) in Echtzeit während der Änderung von Auswahloptionen zu visualisieren. So etwa, wenn der Kunde Anbau-/Zubehörteile hinzufügt oder wieder abwählt.

Letztlich ließ sich alles erfolgreich realisieren. Insgesamt mehrere hundert Zeilen JS, dazu reichlich PHP-Templatecode, sowie ein neuartiger Galerie-Typ. Meine Projektanforderung wird damit abgedeckt. Ich sah allerdings in vereinzelten Webseiten auch schon Produktkonfiguratoren, in welchen statt Visualisierung mittels Bildlayern 3D-Animationen verwendet wurden. Sogar 360°-Views wären denkbar (daran ist besonders die Oberbekleidungsbranche hochinteressiert, es fehlt aber noch an optimalen Lösungen). Desweiteren wird das aus Layern zusammengesetzte Produktfoto auch genauso im Warenkorb angezeigt, wofür ebenfalls nicht geringe Anpassungen nötig waren. Der todschicke Konfigurator für diese Kundenwebseite ist inzwischen komplett fertiggestellt und der Kunde vom Ergebnis begeistert. Derzeit werden 12 ähnliche, aber in Details unterschiedliche Produkttypen konfiguriert. Nach dem Launch der Webseite habe ich bei Interesse nichts dagegen, sie mal in diesem Thread vorstellen.

Falls dann jemand Fragen bzgl. vergleichbarer Vorhaben haben sollte, helfe ich gerne mit Tipps zu auftretenden Problemen und Aussagen zur jeweiligen Machbarkeit weiter. Ein komplettes Tutorial inkl. Code wäre momentan zu aufwändig und wohl bestenfalls auch nur als Ideenvorlage bedingt hilfreich, weil in weiten Teilen noch zu applikationsbezogen. Schon eher würde ich eine universell verwendbare Contao- bzw. Isotope-Erweiterung daraus stricken (geschätzter Aufwand nochmal ca. 30 - 50 PT).

[intradesign]

Hallo zusammen,

ich benötige für einen Kunden eine Möglichkeit, in einem Shop ähnlich wie hier beschrieben, einen Konfigurator einzubauen. Dabei sollen nach Auswahl von verschiendenen Optionen verschiedene Möglichkeiten in den nachfolgenden Auswahlen zur Verfügung stehen.

Das ganze soll aber visuell ausgewählt werden, statt einem Dropdown sollen kleine Bildchen für Material und Farbauswahl sowie Formen anklickbar sein.

Nach der Auswahl soll auch das entsprechende Artikelbild inkl. Material, Farbe, und Form gezeigt werden.

Ist sowas grundsätzlich mit Isotope möglich? Der Rest der Website läuft schon mit Contao und deshalb würde sich das ja anbieten.
Oder sollte ich besser gleich einen anderen Ansatz wählen und ein etablierets Shop-System verwenden?

Vielen Dank und viele Grüße
Timo

[soweit_ok]

Ja, das ist grundsätzlich gut mit Isotope machbar. Allerdings nicht allein mit Bordmitteln ohne zusätzliche Programmierung.

Dabei sollen nach Auswahl von verschiendenen Optionen verschiedene Möglichkeiten in den nachfolgenden Auswahlen zur Verfügung stehen.

Wenn ich es richtig verstand, bedeutet dies also von übergeordneten Auswahlen abhängige Attribute, die je nach Selektion verfügbar sein können oder nicht. In der Attributbearbeitung von Produkttypen kann man Variantenattribute als Grundgerüst anlegen, welches derlei ermöglicht. Darüberhinaus brauchts aber Javascript, um im Frontend die ebenso nötige plausible Benutzeroberfläche darzustellen. Außerdem sind auch Templateanpassungen/-erweiterungen mit PHP nötig. Wie umfangreich, hängt bei beidem von der Komplexität der hier von Dir nur vage beschriebenen Anforderungen ab. Nicht zu bergessen besteht ein Onlineshop nicht nur aus den Produktansichten. Wurde diese stark modifiziert, müssen die Produktkonfigurationen ja auch richtig in Warenkorb und Checkout übernommen werden.

Das ganze soll aber visuell ausgewählt werden, statt einem Dropdown sollen kleine Bildchen für Material und Farbauswahl sowie Formen anklickbar sein.

Wo ist das Problem? Nimm einfach normale Formularfelder, egal ob Selectoptionen, Checkboxen oder Radios und blende sie mit display:none aus. Dann gibtst Du die Bildchen einfach mit dem gewünschten Layout aus. Und schreibst mit JS bei Klick den passenden Wert in das verbundene (versteckte Formularfeld). Das war´s.

Nach der Auswahl soll auch das entsprechende Artikelbild inkl. Material, Farbe, und Form gezeigt werden.

Auch das ist für eine definitive Aussage zu schwammig beschrieben. Immerhin kann man es auf unterschiedlichste Art zeigen. Beschäftige Dich am besten ausreichend mit der Isotope Demoinstallation. Dazu guckst Du ins Handbuch. Dann weißt Du schonmal wesentlich mehr darüber, was die Shoperweiterung kann und wofür Du wahrscheinlich zusätzlich was programmieren musst. Gilt ebenso auch für die Standard-Galerien, brauchst sie Dir ja bloß anschauen.

Falls Du hoffst, hier klicken, da klicken, dort klicken und fertig - vergiss es . Gilt für ca. 80 % Deiner genannten Anforderungen. Aber die verbleibenden 20 % ergeben wahrscheinlich 80 % des Gesamtaufwands.

Oder sollte ich besser gleich einen anderen Ansatz wählen und ein etablierets Shop-System verwenden?

Wenn Du eines kennst, welches von Haus aus alles kann, was Du für dieses Projekt brauchst und auch sonst gut ist, wäre diese Entscheidung zumindest ernstlich zu erwägen. Vorausgesetzt, die Nachteile wie fehlende Einbindung in Contao überwögen in der Gesamtbetrachtung nicht die Vorteile.

Die Entscheidungskriterien werden zudem davon beeinflusst, ob Du Auftraggeber bist und eine Kosten-/Nutzenanalyse zur Angebotsprüfung benötigst. Oder reiner Webdesigner und für Deine Angebotskalkulation die wahrscheinlichen Kosten externer Entwickler einbeziehen musst. Oder selbst Entwickler und auf welchem Skill-Level.

Ich denke, ein Forenthread wird nicht reichen, die gesamten Anforderungen des Vorhabens zu evaluieren. Aber je präzisere Fragen Du dazu stellst, umso größer die Wahrscheinlichkeit, Dir zumindest bei Dir besonders wichtigen Fragen weiterhelfen zu können. An der Bereitschaft unter den Mitgliedern mit entsprechenden Erfahrungen mangelt es gewiss nicht. Vielleicht trägt es bis hierhin schonmal ein bisschen zu Deiner Entscheidungsfindung bei.

[Newbie138]

Hallo an alle Spezialisten,
ich suche schon eine ganze weile nach einer einfach nachzuvollziehenden Lösung des hier angesprochenen Problems.
Leider konnte ich noch keine Lösung finden und hoffe ihr könnt mir helfen.
Ich möchte ebenfalls ein abhängiges Auswahlmenü über die Attribute machen.
Beispiel:
Im Shop ist ein T-Shirt in der Größe s, m und l und in den Farben blau, rot und gelb.
jede der Farb/Größenkombination hat einen anderen Preis.
Wenn jemand die Größe m auswählt werden nur die Farben angezeigt, welche in der Größe möglich sind.
Wählt er die entsprechende Größe aus wird der dazu passende Preis angezeigt.

Kann mir jemand für Dummies erklären wie das umgesetzt wird?
Oder kann mir das jemand gegen Bezahlung machen?

Schönen Dank
Newbie138