Individuelle Vorschau

In diesem Video erfahrt ihr, wie komplexere Vorschaubilder generiert werden können. Das Beispiel aus dem Tutorial seht ihr unter: https://configurator.onco-plugins.de/Bild-konfigurieren/SW10010

Verwendeter Code

Debug Ausgabe der Konfiguration

window.addEventListener('gaia.newstate', function(e){
    console.log(e.detail.app.configurationState);
    console.log(JSON.stringify(e.detail.app.configurationState.colorValues));
    console.log(JSON.stringify(e.detail.app.configurationState.fontValues));
    console.log(JSON.stringify(e.detail.app.configurationState.inputValues));
});

Generieren des Vorschaubilds

Quickstart

Ihr könnt diesen Code 1:1 zum Testen verwenden, wenn ihr die ID in der ersten Zeile anpasst und eure Konfigurator-ID eintragt

const gaiaConfiguratorId = 34;
const gaiaPreviewId = 'gaiaPreview'+gaiaConfiguratorId;

//CREATE PREVIEW STAGE
document.addEventListener('readystatechange', e=>{
    //add our base svg to the page
    if(document.getElementById(gaiaPreviewId)){
        return;
    }
    const previewStage = document.querySelector('.product-detail-media');
    if(previewStage) {
        previewStage.innerHTML = '';
        const previewElementContainer = document.createElement('div');
        previewElementContainer.id = gaiaPreviewId;
        previewElementContainer.style.position = 'relative';


        previewStage.append(previewElementContainer);
        fetch('https://gaia.onco-plugins.de/downloads/demo.svg')
            .then(e=>e.text())
            .then(text=>{
                previewElementContainer.innerHTML = text;
                previewElementContainer.querySelector('svg').style.maxWidth = '100%';
                const previewTextContainer = document.createElement('div');
                previewTextContainer.id = 'preview-text';
                previewTextContainer.innerHTML = 'Yippie!';
                previewTextContainer.style.fontSize = '50px';
                previewTextContainer.style.textAlign = 'center';
                previewTextContainer.style.position = 'absolute';
                previewTextContainer.style.bottom = '25px';
                previewTextContainer.style.left = '0';
                previewTextContainer.style.right = '0';
                previewTextContainer.style.color = 'black';
                previewElementContainer.append(previewTextContainer);
            });
    }
});

//ADJUST PREVIEW
window.addEventListener('gaia.newstate.' + gaiaConfiguratorId, function(e){
    const previewElementContainer = document.getElementById(gaiaPreviewId);
    if(!previewElementContainer){
        return;
    }
    const previewSvg = previewElementContainer.querySelector('svg');
    if(!previewSvg){
        return;
    }

    try {
        if (e.detail.app.configurationState.colorValues.farbe1) {
            previewSvg.querySelector('#car-color').style.fill = e.detail.app.configurationState.colorValues.farbe1;
        }
    }catch(error){}
    try {
        if (e.detail.app.configurationState.fontValues.schrift1) {
            document.getElementById('preview-text').style.fontFamily = e.detail.app.configurationState.fontValues.schrift1;
        }
    }catch(error){}
});