Avatar billede pstidsen Novice
30. november 2013 - 11:11 Der er 18 kommentarer og
1 løsning

Hvordan kan jeg det her?

Jeg er ved at lave en hjemmeside i WordPress, men er løbet ind i et problem. Jeg skal lave en form som ser sådan her ud: http://webintas.dk/How%20can%20I....html
Den skal virke som følger:
1. Kunden vælger brand
2. Kunden vælger model
3. Kunden taster hvilke og hvor mange af hver farve der ønskes

Først prøvede jeg at bruge variations i WordPress. Det virkede fint med brand og model, men man kan ikke som standard lave input felter til farverne.

Derefter kiggede jeg på markedet for plugins. Jeg fandt et plugin (Product Add-ons fra WooThemes - http://www.woothemes.com/products/product-add-ons/) som kunne lave farve formen. Så jeg prøvede at køre variations på brand og model og så formen til farvevalg, men problemet er jo, at farverne skal tilpasses efter hvilken model og brand man har valgt. Det duede altså ikke...

Jeg fandt jeg et andet plugin (Composite Products fra WooThemes - http://www.woothemes.com/products/composite-products/) som kan kombinere flere produkter. Det regnede jeg med virkede. Jeg lavede et produkt for hver model hvor der var en Add-on (lavet med det første plugin) med farvevalg. Jeg brugte så Composite Products til at samle alle modeller i brands og derefter alle brands i et samlet produkt, men HOV! Det virkede ikke.. Man kan åbenbart ikke samle et produkt, som allerede er sammensat af andre produkter.

Nu står jeg altså lidt og ved ikke hvad jeg skal stille op. Jeg har tænkt lidt på at bruge første mulighed og så som standard vise alle farvemuligheder jeg har. Derefter vil jeg bruge noget JavaScript (eller andet???) til at skjule de farver som ikke skal vises for netop denne model. Lyder det fornuftigt?

ALLE idéer vil blive værdsat!
Avatar billede claes57 Ekspert
30. november 2013 - 12:00 #1
lav alle farver usynlige (men sæt plads af i form, så den ikke hopper) - og først når der er valgt brand/model, så via javascript vise de mulige farver. Kassen udenom farverne skal derfor være så stor, at den kan rumme den model med flest farver.
Avatar billede pstidsen Novice
30. november 2013 - 15:12 #2
Problemet med det forslag er lidt at når jeg selv laver farvevalgskasserne skal jeg sørge for at de spiller sammen med woocommerce og derfor tænkte jeg det var smartere at skjule dem, hvis der ikke er brug for dem. Er det ikke muligt?
Avatar billede pstidsen Novice
30. november 2013 - 15:22 #3
Burde dette ikke virke?:

function test() {
    if (document.getElementById('model').value == 'model1') {
        document.getElementById('gul').style.display = 'none';
        document.getElementById('blå').style.display = 'none';
        document.getElementById('grøn').style.display = 'none';
    }
}


Hvis ja, hvor skal det så være i min kode?
Avatar billede claes57 Ekspert
30. november 2013 - 15:26 #4
det kan  jeg godt se - lidt css-kode http://www.w3schools.com/css/css_display_visibility.asp
med display:none på de farver, der ikke kan bruges til en model.
Avatar billede claes57 Ekspert
30. november 2013 - 15:32 #5
jeg ville undgå æøå i id/navne på felter. Og husk korrekte store/små bogstaver i id/navne hvis javascript skal finde ud af det.
Avatar billede pstidsen Novice
30. november 2013 - 16:01 #6
#4: Det er vel det scriptet i #3 gør? Bør jeg ikke bruge display: remove?

#5: Yes sir!
Avatar billede claes57 Ekspert
30. november 2013 - 16:14 #7
Se på link i #4, none gør det, du vil have (fjerner, og frigiver plads). På link er box1 none, box2 er vidden, og box3 resetter synlighed.
Avatar billede pstidsen Novice
30. november 2013 - 18:39 #8
Jeg er kommet til at tænke på, at hele denne metode ikke dur, for afhængig af hvilket brand og model man vælger skal det være forskellig pris på farverne..
Avatar billede claes57 Ekspert
30. november 2013 - 18:44 #9
Du skal have en tabel der har modelnavn, farve, pris oprettet i javascript. Så bruger du denne tabel til at lukke for ukurante farver, og har samtidig prisen på modellerne.
Avatar billede pstidsen Novice
30. november 2013 - 18:54 #10
Nu bliver det meget omfattende programmeringsmæssigt - mere end jeg kan lave tror jeg..
Avatar billede claes57 Ekspert
30. november 2013 - 19:02 #11
Prøv at oprette opgaven - evt med link til dette - under javascript. Så kommer der nok en nørd forbi (næppe før mandag - giv det et par dage). Det er ikke en stor opgave for den rette koder.
Avatar billede pstidsen Novice
30. november 2013 - 19:50 #12
Jeg har fået en ny idé: Jeg laver selv første dropdown.

I starten lægger alle modeller i model-dropdown.

Når kunden så har valgt et brand fjerner mit hjemmelavede JavaScript alle modeller som ikke kommer fra det brand.

Det lyder vel rimeligt? Nu mangler jeg bare den JS funktion der fjerner en option fra en select.
Avatar billede pstidsen Novice
30. november 2013 - 19:56 #13
Har Googlet lidt rundt efter funktionen, men det skal jo virke lige når man har valgt mærke. Altså uden at skulle klikke på en button. Kan man det?
Avatar billede claes57 Ekspert
30. november 2013 - 20:10 #14
igen css - fra start har du kodet alle model-dropdown, alle med display:none. Når der så vælges en i mærke, så trigger den en synlig dropdown med modeller.
noget i stil med
<select id="antdag" onchange="reCalc();">
hvor reCalc() så er en javascript funktion der sætter display:none på alle model-dropdows, og derefter viser den ene, der er mulig.
Den, der skal vises ligger i (this.value) hvis du navngiver det ens.
Avatar billede pstidsen Novice
30. november 2013 - 20:21 #15
Men ville det ikke være smartere med en liste hvor man bare hiver alle options der ikke skal være det ud? Jeg tænker lidt:

if (document.getElementById('brand').value == 'brand3') {
  document.getElementById('model').option[value='fjernmig'].remove();
  document.getElementById('model').option[value='fjernogsåmig'].remove();
  }

Burde det ikke virke?
Avatar billede claes57 Ekspert
30. november 2013 - 20:40 #16
jo - hvis du holder 'model' usynlig til der er valgt noget i 'brand', og kalder via onchange= fra 'brand' så model skiftes hvis brand skiftes. Tilsvarende, så bør du lukke alle farver når der vælges 'brand', og vise den når der vælges i 'model'

for overskueligheden i koden, så kan jeg bedre lide modellen, hvor
1) sletter alle eksisterende model-muligheder
2) if (document.getElementById('brand').value == 'brand3') {
opretter de tilladte ved hvert skifte i 'brand'
så kan du let se hvilke ting der vises på de enkelte varer.
Avatar billede pstidsen Novice
30. november 2013 - 20:48 #17
#16: Det lyder som en god idé det der..!

Jeg holder lige denne løsning på standby til i morgen eller i overmorgen, da jeg lige vil prøve et plugin til Woocommerce, som siges at kunne klare opgaven.
Avatar billede pstidsen Novice
30. november 2013 - 22:21 #18
Løsningen blev pluginet Gravity Forms (man skal have en Add-on (koster $99) fra Woothemes for at det virker med Woocommerce). Det koster godt nok $199 (tip: kig efter kuponkoder på nettet og spar $50), men det virker og der er rigtig mange muligheder.

Tak for din indsats claes. Du fortjener point - din løsning virker og er brugbar for dem der ikke bruger WordPress.
Avatar billede pstidsen Novice
04. december 2013 - 11:53 #19
Lukket.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester