Moin,
kann mir jemand helfen eine Art Designer umzusetzen.
Der Besucher soll eine Farbe anklicken können und im Bild ändert sich dann auch die Farbe des Produktes.

Danke erstmal. Geht das ganze auch ohne Shopprodukt? Also nur mit Java

Ich wollte eigentlich einfach nur, dass ich die Farbpalette als einzelne Bilder erstelle und dann verlinke. Wenn man dann auf eine Farbe klickt soll einfach das dazugehörige Bild geladen werden (ohne das die Seite komplett neu lädt sondern nur die Spalter in dem sich das Bild befindet).
Dachte die Bilder des Raumes kann ich einfach auf einer Unterseite hochladen.

PS: Der Raum usw. war nur zu Veranschaulichung hier im Forum gemacht. Auf der richtigen Seite sind das photorealistische 3D-Render.

Du willst also gar nicht, dass man dann das Produkt in der entsprechenden Farbe in den Warenkorb legen kann?

Nein, es gibt auf der Seite keinen Shop. Es geht mehr um eine Dienstleistung.
Das mit dem Sofa sollte die Sache einfach nur verdeutlichen, hat aber wohl für mehr Verwirrung gesorgt.
Das ganze soll nur zur Ansicht für die Besucher sein.

ah, jetzt verstehe ich das.

Ich sehe 2 Möglichkeiten für die Farbpalette:
1. du machst das in dem Stil: Link mit Elementen auf Bild oder
2. du nimmst für jede Farbe ein einzelnes Bild und fügst das mit CSS zu deiner Farbpalette zusammen.

Um bei der Farbauswahl das entsprechende Bild zu laden:
Hier würd ich alle Bilder gleich auf der ensprechenden Seite einfügen und alle transparent machen oder ausblenden. Wird eine Farbe ausgewählt, "einfach" das entsprechende Bild einblenden oder die Transparenz ändern.

Für alles findest du recht simple Codeschnipsel im Netz. Wenn dann konkrete Frage auftauchen, nicht zögern und einfach fragen.

Und noch eine Kleinigkeit: du möchtest das nicht mit Java, sondern mit JavaScript machen. Das ist NICHT das Gleiche. ;)

Kannst du mir sagen welche Begriffe ich suchen soll? Was ich mir so ausdenke führt nicht zum Ziel.
Gewünscht hätte ich es mir ungefähr so: https://charles-test.jimdo.com/designer/
Also einfach 3 Spalten, links der Raum der sich dann ändern soll, rechts dann 2 Spalten für die Farben die einfach verlinkte Bilder sind.

mal auf die Schnelle gemacht.

https://www.w3schools.com/code/tryit.asp...me=FOXF56VDZ935

geht bestimmt auch schöner. Aber damit kannst du vielleicht ein paar Begriffe finden.

Sieht das so vernünftig aus vom Code? :https://www.w3schools.com/code/tryit.asp...me=FOXOOGZCOPTF

Die Placeholder Bilder haben nur andere Größen damit ich sehe ob sich die Bilder auch ändern.

Leider kriege ich es nicht hin, dass sich auch die Höhe des Containers responsiv mit anpasst. Wie krieg ich das hin? :)

Und kann man den Wechsel der Bilder mit einer Überblendung versehen? ;)

Kann man es so einstellen, dass die aktuelle Farben einen Rahmen bekommt? Mit active krieg ich immer bloß einen Rahmen beim Klick, der geht dann wieder weg.
Und mit focus kriege ich kein Ergebnis.

ich hoffe, das beantwortet all deine Fragen ;)

https://www.w3schools.com/code/tryit.asp...me=FOYP11V8LVYV

Großen Dank. Ohne deine Hilfe hätte ich das nie hingekriegt. :)

Eine Sache vielleicht doch noch. In der Mobilen Ansicht ragt das alles über den Footer hinaus:

puh, harte Nuss.
Wie hast du denn das jetzt eingefügt? Hast du eine URL wo ich mir das mal anschauen könnte?

Evtl weiß auch @az_ was?

https://charles-test.jimdo.com/neue-seite-2/

Ich habs zwar auch hinbekommen, weiß aber nicht ob das elegant gelöst ist.

<div class="raum">
    <img id="ONE" src="https://via.placeholder.com/500x400" name="ONE"> 
   <img id="TWO" src="https://via.placeholder.com/510x400" name="TWO"> 
<img id="THREE" src="https://via.placeholder.com/520x400" name="THREE">
</div>
 

.raum {
    padding-bottom: 800px;
}
 

schön ist es jetzt nicht unbedingt. Aber wohl funktional.
Hast du den kompletten Code als Widget eingegeben?

Ich würde das, wie du es am Anfang wolltest, in ein Spaltenelement einfügen.

Du meinst die Palette in eine Spalte und den Raum in eine Spalte?

Zitat von Charles im Beitrag #20

---

Du meinst die Palette in eine Spalte und den Raum in eine Spalte?

---

Wirds leider nicht, hatte ich als erstes ausprobiert.

Hallo Ihrs,

ich bin neu hier und überhaupt neu in der Welt des Javascript. Für meine Zwecke wäre der Code von @az_ genau, was ich suche, nämlich ein Konfigurator für Shopvarianten, die dann im Warenkorb landen.
Dafür fehlt allerdings noch die automatische Änderung für Preis und Verfügbarkeit, auch auf der Test-Seite ("Miami Designtest") .

Man kann die Varianten nicht wirklich kaufen, weil der Preis nicht stimmt und es im Warenkorb eine Fehlermeldung gibt.
Ich habe mich daran versucht, kenne mich aber wie gesagt zu wenig aus und bekomme es nicht hin - hat jemand von Euch eine Idee?

Viele Grüße,
Rebecca

Hallo @az_,
super, dass Du gleich selbst antwortest :-)

Das Problem ist ja, dass, wenn die Varianten verschiedene Preise haben (und das haben sie bei mir, und auf der Miami-Designtest-Seite ja auch) - dass dann eben zwar die gewählte Variante in der Selectbox erscheint, nicht aber der Preis und die Verfügbarkeit sich entsprechend anpassen. Hier bleibt immer die Variante 0 ausgewählt.

Das ergibt dann im Warenkorb einen ungültigen Artikel. (ist auch auf der Designtest Seite so!)

Ich habe schon allerlei rumprobiert,
z.B. an das Attribut "selected" heranzukommen:

document.querySelector("#product-desc-13086815987 > form > select > option:nth-child(1)" .setAttribute("selected", "selected");
document.querySelector("#product-desc-13086815987 > form > select > option:nth-child(0)" .removeAttribute("selected", "selected");
 
 

oder an den Preis:

$(' p.cc-shop-product-price-item').change();
 
 

...aber ich kriege das einfach nicht hin, ich weiß nicht, ob es ein Schreib- oder ein Denkfehler bei mir ist...


LG Rebecca