Jeg er på utkikk etter en plugin som skal fungere som en “forløper” til en allerede eksiterende nettbutikk. Det skal være to, tre rullegardiner hvor man kan velge mellom noen alternativer i hver, og så skal det vises en pris som forandres etter hva man velger. Antar at det da er Ajax som er tingen her.
Noen som vet hva som kan brukes her?
Jupp, Ajax kan nok brukes.
jQuery har for eksempel en del Ajax funksjoner som gjør slikt som dette litt enklere å sette opp, er i grunn ikke noe hokuspokus dette, men vet ikke om noen plugin’s i farten.
Du kan jo søke på jQuery sine sider etter noe som kanskje passer, hvis ikke må du lage det selv eller få noen til å lage det for deg.
Sikkert andre ting som kan brukes også, dette høres i grunn ut som noe som er enkelt å spikke sammen i RoR, men ikke alle webservere støtter dette, og det blir kanskje litt sært i forhold til Ajax/jQuery.
Har du noen formening om hvordan dette skal funke?
Er det et produkt som er i mange forskjellige varianter?
For eks, en skrue der man velger gjengetype, lengde, type metallegering?
Etter det jeg kan se, så er jo ikke et produkt valgt før alle kriteriene er tilstede, og pris bør jo egentlig ikke dukke opp før alle er valgt.
Her er vel Nutz inne på noe vesentlig, og jeg tog an ikkje helt med en gang der.
Jeg tenkte mer på dynamiske endringer, slik som nettbutikker ofte har når man for eksempel kommer inn på siden til ett visst produkt, så er det ofte en meny hvor man kan velge farge eller størrelse på ett plagg e.l. så oppdateres prisen og enkelte ganger også produktbildet dynamisk ut i fra de valgene man gjør på selve produktsiden etter at denne er lastet inn i nettleseren.
I og med at Dag skriver “forløper” så ville jeg vel tro at det er slik som Nutz sier, at dette er valg man foretar før man kommer til en eventuell produktside, og da er det vel naturlig å bruke php til sette noen verdier, eventuelt i en cookie eller som en querystring hvorpå produktsiden henter rette prisen i et array eller noe slikt ut i fra de verdiene som er satt tidligere.
Så kommer det vel også an på nettbutikkløsningen, dersom kjøpet registreres med en produktkode e.l. i systemet og prisene ligger i en database, og prisene så hentes opp igjen senere ved utsjekking eller betaling osv. så holder det ikke bare å bytte noen tall i koden på produktsiden, da må man også få dette til å funke hele veien til kassen, og for unike brukere osv.
Det skal være to nedtrekksmenyer hvor det skal være to-tre valg i hver. Man velger kun ett av disse valgene i hver meny og prisen blir da satt utifra hva man har valgt. Prisen skal kunne endres dynamisk dersom man endrer valg, det samme gjør beskrivelsesteksten som står under disse valgene.
Håper det var tydlig nok. 
med Jquery kan det gjøres slik:
fil: regnutpris.php
[html]
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
<form>
<select class="select" name="s1">
<option value="50">Valg1</option>
<option value="100">Valg2</option>
<option value="200">Valg3</option>
</select>
<select class="select" name="s2">
<option value="1">Valg1</option>
<option value="2">Valg2</option>
<option value="3">Valg3</option>
</select>
<div id="pris">
100 NOK
</div>
<script type="text/javascript">
$('.select').bind('change',function(){
$.ajax({
data:$(this).closest("form").serialize(),
success:function (data, textStatus) {$('#pris').html(data);},
type:"post",
url:"regnutpris.php"
});
});
</script>
</form>
</body>
</html>
[/html]
okay, først må du ha menyene, disse er bare vanlig html, og kan styles og posisjoneres med css osv. og lages med og rød blå grønn [/HTML]
En slik meny kan styres med alt mulig rart, og det er mulig å sette opp valgene i php, RoR, JS og cgi blant annet.
For å bruke et CGI script kan man gjøre noe slikt:
[HTML]
Dersom du ønsker å endre noe dynamisk på siden ved å bruke javascript trenger du en funksjon som kan bindes til menyen og som for eksempel benytter jQuery.html() for å bytte ut tekst og priser når noe i menyen endres, eller med andre ord på OnChange hendelser i menyen.
Det blir litt vanskelig å skrive noe når man ikke vet hvordan dette skal se ut, men det enkleste er å ha en inline funksjon i .html dokumentet, selv om vi ikke liker inline javascript, og kjøre denne funksjonene direkte i menyen ved OnChange, noe slikt:
[HTML]
Dette har massevis av problemer, og validerer sikkert ikke heller, det vil si ingen av eksemplene her virker ut av boksen, de er kun for å illustrere hvordan det kan gjøres.
Det beste ville nok være å bruke navnet på for å styre menyvalgene fra et eksternt script eller noe slikt, men igjen så må dette legges opp slik at det passer inn der det skal.
Grunnen til at jeg har nevnt RoR noen ganger er fordi Ruby har noen innebyggede funksjoner som kan brukes til å styre slikt som dette forholdsvis enkelt, men jeg kan ikke nok Ruby enda til at jeg kan sette opp noe som virker, jeg har bare fått med meg at det ligger noen funksjoner innebygget for overvåking av elementet, og enkle muligheter for styring av nettopp slike menyer.
Adeneo: Hva om jeg rett og slett får en pris fra deg på hva du skal ha for å sette opp dette for meg?
Her er test av koden jeg postet:
Ser bra ut det Nextri, men det må også være en beskrivelse for produktene som også endres utifra hva man velger. Og det må være mulig å velge antall noe jeg glemte å nevne i første innlegg.
Har en skisse jeg kan legge ut senere, men sitter på mobilen så har det ikke her.
Men som nevnt betaler jeg gjerne noen kroner for å få dette satt opp. Burde være en smal sak for dere som er kjent med slikt…
Ja, det jeg la ut var bare som et eksempel. Er ikke noe problem å legge til flere dropdowns eller felter. Heller ikke å oppdatere flere områder på siden med forskjellig info og pris osv.
legg ut en skisse du med alt som skal til, og hva slags system det skal integreres i.
Jeg satt helt i min egen lille verden å skrev i vei jeg da, og så ikke svaret til Nextri, men der har du jo et fullt fungerende eksempel som viser hvor enkelt det er å binde en funksjon til en klasse, som i dette tilfellet er en nedtrekksmeny, og som Nextri skriver er det fort gjort å skifte ut hva som helst av koden i .php eller .html filen med jQuery, det er til og med lagt ved ett lite php regnestykke som ganger den ene menyen med den andre, så dette ordner seg sikkert.
Mesteparten av tiden det tar å fikse dette går sannsynligvis til å integrere det, og få pris og eventuell beskrivelse til å henge med videre i nettbutikkløsningen, alt ettersom hvilken nettbutikkløsning det er snakk om og hvor dette lagres, men i grunn ikke noe hokuspokus det heller.
Her er et forslag til hvordan det kan se ut:
http://bildelagring.no/uploads/uipd7.jpg
I tillegg til dette skal det være et felt rett under disse menyene (til ventre for prisen) hvor det står en beskrivelse av produktet man har valgt. Det skal også være mulighet under dette feltet igjen å velge om man vil ha montering eller ikke, dette kan også være nedtrekk.
Så vidt jeg vet, skal dette videre til en egen nettbutikk som kunden har hos Mamut, men jeg venter på mail med mer info om dette. Isåfall må jo valgene som gjøres her, gjenspeiles i handlekurven i nettbutikken og da vil jeg tro man snakker en god del mer jobb med en gang.
Men som sagt, mer info kommer.
Om noen tar seg tid til å sette opp dette for meg, er jo det veldig bra, men jeg er altså ikke redd for å betale for dette.
Fikk ikke sove, så fant ut jeg fikk lage et sånt fancypancy eksempel som faktisk virker jeg også :rolleyes:
Antar at dette lar seg style med css om ønskelig?
Jada, alt ligger i html filen, bare klikk “vis kildekode” eller noe sånt, så ser du at alt er stylet med css.
Koden kan se litt avskrekkende ut med en gang ettersom jeg tok litt av med CSS3 effekter på den kjøpeknappen, som også er kun css, ikkenoe javascript som styrer fading osv. på den knappen, kun en helt vanlig html som er stylet med css.
Koden ble akkurat litt lang til at jeg fikk lov til å legge den ut her i går, men jeg prøver på nytt i dag ved å legge ut koden uten fargeeeffektene og effekter på kjøpeknappen.
[HTML]
adeneo’s nettbutikk
#container {position: relative; margin:0 auto; padding: 0; top:40px; height:200px; width:900px;}
#topp {background: #f9f9f9; border: 5px ridge #ececec;
width: 100%; height: 20%; position: relative; top:0; padding: 10px;
}
#bunn {background: #ffffff; border: 5px ridge #ececec;
width: 100%; height: 70%; position: relative; bottom:0; padding: 10px; margin-top: 10px;
}
#montering {position: relative; top: 60px; right:0; display: inline;}
#pris {position: relative; right 30px; top:10px; height: 20px; width: 50px; color: #1b31e9; font-family: arial;}
#venstre {position: absolute; right:0; top:0; width: 150px; height: 100%;}
form {margin: 0px 0px 0px 0px;}
select {display:inline; padding-left:10px; margin:0:}
h1 {position: relative; margin: 0; padding:0; text-align: center;}
h5 {display:inline; padding-left:10px; margin:0: font-size: 1em;}
h6 {position:absolute; top:97px; right:40px;}
.antall {margin: 0;}
.montering {bottom:10px; position:absolute;}
p, h3 {display:inline; font-size:2.5em; font-weight:bolder;}
.medpigg, .medalt, .last, .traktor, .medmont {display: none;}
#kjopeknappen {
position: relative; top: 50px; width: 100px; height: 30px;
margin: 4px; padding: 0; display: inline-block; text-align: center; background: #ccc;
}
1995
function driverIkkeButikk() {alert("Vi driver ikke butikk her asså!");}
$(".velg").bind('change', function() {
var Pris = parseInt($("#losning").val());
var Type = $("#type").val();
var Antall = $("#antall").val();
var Montering = parseInt($("#montering").val());
var TotalPris = Pris * Type;
var TotalPrismm = TotalPris + Montering;
var Total = TotalPrismm * Antall;
$("#pris p").html(Total);
if (Pris == "1995") {$(".utenpigg").css("display","block");
$(".medpigg, .medalt").css("display","none");}
else if (Pris == "2295") {$(".medpigg").css("display","block");
$(".utenpigg, .medalt").css("display","none");}
else
{$(".medalt").css("display","block");
$(".utenpigg, .medpigg").css("display","none");}
if (Type == "1") {$(".person").css("display","block");
$(".last, .traktor").css("display","none");}
else if (Type == "1.2") {$(".last").css("display","block");
$(".person, .traktor").css("display","none");}
else
{$(".traktor").css("display","block");
$(".person, .last").css("display","none");}
});
$(".ganger, #montering").bind('click', function() {
if ($("#montering").is(":checked"))
{$("#montering").val(499);
$(".utenmont").css("display", "none");
$(".medmont").css("display", "block");}
else {$("#montering").val(0);
$(".utenmont").css("display", "block");
$(".medmont").css("display", "none");}
var Pris = $("#losning").val();
var Type = $("#type").val();
var Antall = $("#antall").val();
var Montering = parseInt($("#montering").val());
var TotalPris = Pris * Type;
var TotalPrismm = TotalPris + Montering;
var Total = TotalPrismm * Antall;
if (Antall < 1) {$("#antall").val(1);}
else {$("#pris p").html(Total);}
});
</script>
</div>
</body>
[/HTML]
jQuery brukes kun til å oppdatere prisen og velge hvilket innhold som skal være synlig.
Jeg droppet php biten, så her foregår utregningen også i javascript, og det er mulig det må endres slik at det blir mer som nextri sitt eksempel dersom priser skal hentes ut av en database e.l.