Vasenkonfigurator - Bild ändern bei Klick auf Button

  • Hallo! Ich erstelle Vasen, handbemalt, dazu bastele ich gerade in Wordpress einen Konfigurator, so ähnlich wie wenn man sich ein neues Auto bestellt, aber es klappt hinten und vorne nicht. Ich möchte erreichen, dass wenn der Seitenbesucher auf einen Button klickt, dass sich links daneben das Bild der Vase ändert. Also beispielsweise stehen 3 Grundfarben zur Verfügung und wenn der Nutzer auf weiß-rosa-hellgrün klickt soll ebenfalls das Bild links daneben wechseln. Bilder hätte ich bereits hochgeladen aber ich weiß nicht wie ich das ganze anstellen soll. Die Seite habe ich mit Elementor entworfen und stehe nun irgendwie an der Wand...

    LG! Laura.

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren


  • dass wenn der Seitenbesucher auf einen Button klickt, dass sich links daneben das Bild der Vase ändert. Also beispielsweise stehen 3 Grundfarben zur Verfügung und wenn der Nutzer auf weiß-rosa-hellgrün klickt soll ebenfalls das Bild links daneben wechseln.
    .


    https://wordpress.org/plugins/yith-c…or-woocommerce/
    - YITH WooCommerce Color and Label Variations: Dieses Plugin erlaubt es dir, verschiedene Variationen bezüglich der Etiketten, Farben und Bilder deiner Produkte zu erstellen. Du kannst auch benutzerdefinierte Attribute hinzufügen, um Deine Produkte besser zu beschreiben. Das Plugin ist in einer kostenlosen und einer Premium-Version erhältlich.

    https://wordpress.org/plugins/woo-variation-swatches/
    - WooCommerce Variation Swatches: Dieses Plugin verwendet direkt Farben bzw. zugehörige Buttons zur Auswahl der Produktvarianten. Du kannst auch Bilder oder Texte als Swatches verwenden. Das Plugin ist einfach zu bedienen und bietet verschiedene Optionen zur Anpassung des Aussehens und Verhaltens der Swatches.

    Mit offenen Augen träumen

  • so ähnlich wie wenn man sich ein neues Auto bestellt ....

    ok. versuche ich. danke.

    Als alternative fällt mir noch 3D im Internet ein. Dies könnte bei Autos ähm Vasen interessant sein

    https://threejs.org/examples/#webgl_materials_car


    Um die Oberfläche eines 3D-Objekts per Klick zu ändern, kann man auch die Babylon GUI verwenden, die eine Erweiterung ist, die du nutzen kannst, um eine benutzerfreundliche Schnittstelle zu erzeugen. Du kannst entweder einen Vollbildmodus oder einen Texturmodus verwenden, je nachdem, wie du deine GUI in die Szene integrieren möchtest. Du kannst auch verschiedene Arten von Containern und Steuerelementen verwenden, um Deine GUI zu organisieren und zu gestalten.

    Babylon.js Beispiel für Autokonfiguration in 3d
    https://modest-leavitt-9fa711.netlify.app/

    Zurück zu Autos im Internet bestellen und verlassen wir mal die demos...

    Lamborghini hat mit threejs dies hier gezaubert
    https://www.lamborghini.com/en-en/3d

    Mit offenen Augen träumen

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!