Avatar billede giusdk Nybegynder
11. oktober 2011 - 19:33 Der er 11 kommentarer

Kodning af dropdrown menu

Hej eksperter

Jeg har påtaget mig opgaven at stå for at få en større webshop stablet på benene, med rigtigt mange små produkter, der kan sammensættes med hinanden.
Det drejer sig om smykker, i forskellige materialer, guld, sølv, titanium, med forskellige størrelser, i både længe og diameter.

Webshoppen bliver lavet i Magento.

Jeg ved ikke særligt meget om kodning af den ene eller den anden slags, så jeg håber at der er en dygtig koder derude der lige kan give mig et par råd med på vejen, med hensyn til dette..

På webshoppen skal der laves en side der hedder "Byg selv", hvor man kan sammensætte tre produkter, uafhængigt af materiale, og med et tryk på en enkelt knap, tilføje alle tre produkter til kurven.

Når kunden selv har valgt de tre produker, samler vi dem, og sender med posten.

Jeg forestiller mig at der på siden er tre billeder der ligger vandret ved siden af hinanden, produktvisning.
Oven over hvert billede er der en dropdown menu, hvor man først skal vælge hvilket materiale man ønsker at bruge.
Under hvert billede er der 2-3 dropdown bokse, som specificerer størrelsen, og en der bestemmer hvilket motiv/farve der skal være på produktet.

Når først der er taget et valgt i den øverste dropdown omkring materiale, bliver den næste dropdown box aktiv, så det nu er muligt at bestemme størrelsen.
Når størrelsen er valgt bliver den sidste dropdown box aktiv, og man kan vælge motiv/farve.
Når sidste dropdown er valgt, skal billedet ændre sig, til præcis det produkt man vælger.

Er dette noget der skal/kan kodes i html, og har i nogle god råd, eller nogle links til guides eller andet jeg kan prøve at se på, så er i mere end velkomne til at sige til.

Tak for jeres tid
Avatar billede Sence22 Nybegynder
11. oktober 2011 - 20:35 #1
Det kommer meget an på om det er et CMS System.
Noget som er programmet fra bunden.

Jeg kan godt lave det for dig.

Men det bliver ikke gratis ;)

Så kan vi lave et design sammen, så skal jeg bare vide hvad du ønsker ;)
Avatar billede giusdk Nybegynder
11. oktober 2011 - 20:45 #2
Det er Magento CMS.
Og det bliver programmeret fra bunden, vi er ved at lægge sidste hånd på vores PSD skabelon før den skal til slicing, hvor de programmerer alt fra bunden.

Jeg havde forestillet mig at selv give mig i kast med det, da det er en af de eneste funktioner der skal progammeres, som ikke ligger som standard funktion i Magento.

Designet er allerede bestemt på hvordan "Byg selv" siden skal se ud, det er bare kodningen.
Avatar billede Sence22 Nybegynder
11. oktober 2011 - 21:09 #3
google :D HTML - CSS Drop down menu
Avatar billede giusdk Nybegynder
11. oktober 2011 - 22:33 #4
Det er ikke sådan en slags drop down menu jeg leder efter.

Jeg ved faktisk ikke hvad den slags hedder, men det er sådan en der normalt er hvis du skal registrere dig et sted, og så f.eks. skal vælge hvilket land du kommer fra, så trykker du og der kommer en menu frem, som du kan scrolle i.
Avatar billede keysersoze Guru
11. oktober 2011 - 22:38 #5
Jeg er nu overbevist om at det kræver lidt mere end bare en søgning en en dropdown menu - dels fordi det ikke er en menu, dels fordi der skal ligge en del udregninger bag.

Der er mange måder at udføre sådan en opgave på - simpelt set er det bare et par statiske select-bokse og en smule javascript, men det kunne nok også gøres lidt fancy vha noget jQuery og AJAX. HTML, CSS og en form for javascript slipper vi i hvert fald ikke for.

Skal du kode det selv uden alt for meget viden så start langsomt fra en ende af med at populære selectbokse ( http://www.w3schools.com/tags/tag_select.asp ) og kig så på at disable og enable vha javascript/jquery ( http://api.jquery.com/attr/ - http://api.jquery.com/removeAttr/)
Avatar billede giusdk Nybegynder
11. oktober 2011 - 22:53 #6
Tak for det keysersoze, så har jeg en nogenlunde idé om hvordan jeg skal gribe det an.

Når du siger at det kan gøres fancy med jQuery og AJAX, hvordan tænker du så, hvad har det af påvirkning af det færdige resultat?

Der er vel ingen grund til at gå i gang med et større stykke arbejde end nødvendigt, hvis det kan gøres enkelt.
Men der skal nok lidt af en twist af design på, så det ikke bliver de der kedelige grå standard-bokse, men er det så med jQuery det skal foregå?
Avatar billede keysersoze Guru
11. oktober 2011 - 23:20 #7
Hvis indholdet i select-boksene er statisk - altså så indholdet i niveau 2 ikke ikke ændres i forhold til valg i niveau så er der selvfølgelig ingen umiddelbar grund til jQuery/AJAX.

Du har relativ minimale muligheder for at ændre udseendet af en select-boks men det kan dog lade sig gøre med lidt godt kendskab til CSS og tænken ud af boksen - alternativt kan jQuery hjælpe dig på vej da der findes en masse færdige kontroller med et lækkert og anderledes design. Endelig er det selvfølgelig ingen nødvendighed at benytte select-bokse - det kan sagtens laves lækkert uden og også helt uden jQuery, jQuery kan bare hjælpe godt på vej.
Avatar billede giusdk Nybegynder
11. oktober 2011 - 23:27 #8
Tak for det hurtige svar

De er ikke statiske.

I den første boks vælger man materiale, og så bliver boks nummer to aktiv så man kan vælge størrelse, og når man så har valgt størrelsen, bliver boks tre aktiv hvor man vælger farve/motiv.

Indhold af boks to afhænger af valg i boks et.
Indehold af boks tre afhænger af valg i boks to.

Har du et link til en side hvor man kan se nogle af de færdige designs du nævner?

Tak for din tid
Avatar billede keysersoze Guru
12. oktober 2011 - 20:31 #9
Det jeg tænkte på mht statisk eller ej er indholdet - altså varierer indholdet ud fra foregående valg. Er dette tilfældet og har du få valg kan du gøre det med simple javascript-arrays - er det mere avancerede og større lister kunne AJAX være en god mulighed (se fx http://api.jquery.com/jQuery.ajax/).

Mht kontroller så kunne et eksempel være http://jqueryui.com/ - men ellers så bare tag en søgning på noget jquery selectbox/combobox.

Selvom det ikke er verdens sværeste opgave kræver det alligevel lidt viden og et par forsøg - så har du ikke den store erfaringer skal du nok ikke forvente at være færdig i løbet af et par timer :)
Avatar billede giusdk Nybegynder
12. oktober 2011 - 21:05 #10
Når man træffer et valg i den første dropdown, så ændrer inholdet i dropdown to.
Der findes fem forskellige materialer at vælge i den første dropdown, så der skal være fem forskellige indhold i nummer to dropdown, og i den tredje bliver der en del flere muligheder, men de er stadig også afhængige af hvilket valg man foretager i nummer to.

Gav det mere mening?

Jeg vil lige kigge de sider ud som du skrev igår, det er først nu at jeg har fået tid til at sætte mig ned og kigge på det.

Mange tak for svaret
Avatar billede keysersoze Guru
12. oktober 2011 - 23:03 #11
Ja - det gav fint mening og det to mest oplagte muligheder er nok det jeg foreslog i #9.
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