3D-Modelle für Varianten

Alpha

Diese Komponente befindet sich noch im Alpha-Zustand. Gesichtspunkte können sich bis zur Release Version verändern.

shop-variant-model ist ein optionales Plugin, welches die Nutzung von 3D-Modellen in Verbindung mit Varianten im Shop ermöglicht. 3D-Modelle können genutzt werden, um Varianten eines Artikels optisch besser darzustellen. Eine Variante bildet in diesen Fällen einen Zustand aus der Zustandskonfiguration des Modells ab. Die Verwaltung der gewählten Varianten wird von dem JavaScript shop-variant-model/src/View/VariantModel/js/viewerControls.js gehandhabt.

Konfiguration

Grundinformationen zur Zustandskonfiguration können hier(LINK) abgerufen werden. Im Grunde liegt die Zustandskonfiguration für Varianten nah an der Standardkonfiguration der Zustände. Es sollte beachtet werden, die IDs der Zustände entsprechend zu wählen. Die IDs sind nach dem folgenden Schema aufgebaut "{ID des Merkmals}_{ID des Merkmalwertes}". Wird nun eine Variante ausgewählt, werden die gewählten Werte der Merkmale ausgelesen, die IDs erstellt, und der zugehörige Zustand wird mit der öffentlichen Methode "Viewer.showElementById" aktiviert. Dabei werden die Elemente unter "visibility" > "show" eingeblendet und die Elemente unter "visibility" > "hide" ausgeblendet.

Zustandskonfiguration

{
    "states": {
        "0": {
            "id": "6_6",
            "label": "Ringloch",
            "visibility": {
                "show": {
                    "0": "fholeshow",
                    "1": "fholeshow1"
                },
                "hide": {
                    "0": "fholehide",
                    "1": "fholehide1"
                }
            }
        },
        "1": {
            "id": "6_7",
            "label": "Ringloch",
            "visibility": {
                "show": {
                    "0": "fholehide",
                    "1": "fholehide1"
                },
                "hide": {
                    "0": "fholeshow",
                    "1": "fholeshow1"
                }
            }
        }
    }
}