Prijsaanpassing bij meerdere stuks.

Status
Niet open voor verdere reacties.
Nog enkele "mankementen" bij het invoegen van de functies in m'n pagina's.

1)
Bij de <select id ="stickersBE_1_Size_Add"> had je de option values veranderd.
Deze zouden moeten blijven zoals ze waren, omdat deze values doorgegeven worden naar de ShoppingCart voor de afmetingen.
Mijn code :
Code: 
<select name="stickersBE_1_Size_Add" id="stickersBE_1_Size_Add"  class="textfieldColor" onchange="berekenAlles()" >
            <option value="10">10 cm (- &euro; 1,00)</option>
            <option value="15" selected="selected">15 cm</option>
            <option value="20">20 cm (+ &euro; 2,00)</option>
            <option value="25">25 cm (+ &euro; 4,00)</option>
            <option value="30">30 cm (+ &euro; 5,00)</option>
            <option value="35">35 cm (+ &euro; 6,00)</option>
            <option value="40">40 cm (+ &euro; 7,00)</option>
            <option value="45">45 cm (+ &euro; 8,00)</option>
            <option value="50">50 cm (+ &euro; 9,00)</option>
            <option value="55">55 cm (+ &euro; 10,00)</option>
            </select>
Maar met deze values kloppen de prijzen niet meer (bvb : er staat 20,00 als het 5,00 zou moeten zijn). Met jouw values wordt de prijs wèl goed aangepast. Dit zal aan het script liggen dan ?

Jouw code :
Code: 
<select id="stickersBE_1_Size_Add" onchange="berekenAlles()">
	<option value="-1">10 cm (- € 1,00)</option>
	<option value="0" selected="selected">15 cm (geen)</option>
	<option value="2">20 cm (+ € 2,00)</option>
	<option value="4">25 cm (+ € 4,00)</option>
	<option value="5">30 cm (+ € 5,00)</option>
	<option value="6">35 cm (+ € 6,00)</option>
	<option value="7">40 cm (+ € 7,00)</option>
	<option value="8">45 cm (+ € 8,00)</option>
	<option value="9">50 cm (+ € 9,00)</option>
	<option value="10">55 cm (+ € 10,00)</option>
	</select>


2)
Bij het laden van de pagina wordt geen prijs weergegeven, wel als je op de "aantal-pijltjes" klikt.

3)
Ik moet alle <td id="..."></td> 's op de pagina invoegen om het script te laten werken.
Hoe kan je een "td" verbergen zoals een input type ="hidden", of gaat dit enkel met css ?


Een heleboel è !? :eek:
 
Hoi yammaski,

Ad 1
In dat geval moet er nog een omvormer tussen, die de value's omzet in prijzen voor de berekening. Dat moet te doen zijn: wordt vervolgd.

Ad 2
Hé, in mijn testvoorbeeld en ook in jouw laatste test was dat niet het geval. Heb je een verse testpagina waarin dat zo gebeurt?

Ad 3
Die snap ik niet. Waarom zouden er td's uit zicht moeten verdwijnen, en welke? Kan je een plaatje maken van hoe het eindresultaat er uit moet komen te zien?

Met vriendelijke groet,
CSShunter
 
Vervolg Ad 1

De omvormer er tussen gezet: variabele "formaat" geeft nu de options-value (formaat in cm), en deze wordt voor de berekening herleid tot het toeslag-bedrag.


  • Aldus: kwantumkorting-demo-4.htm
  • Stuksprijs incl. korting wordt niet weergegeven als er geen korting is.
  • De nieuwe kortingpercentages staan er ook in. *)

=======
Reactie op mailtje: aan een asp-pagina heb ik niet zo veel: (a) ik weet niets van asp, (b) ik kan ook geen asp testen, en (c) de berekening wordt met javascript uitgevoerd (het asp-deel is alleen voor de invoer van het database-gegeven: de startprijs), dus aan de uitkomst-pagina moet te zien zijn of het al of niet goed werkt (als de invoer goed wordt binnengehaald).

Daarmee blijven m'n vragen Ad 2 en Ad 3 openstaan. :)

Met vriendelijke groet,
CSShunter
_________
*) Bij deze kortingpercentages kan je beter 21 dan 20 stuks bestellen :P (1 extra èn goedkoper!), want altijd (bij elke beginprijs en bij elk formaat) is:
Code: 
[INDENT]totaalprijs 20 stuks: 20 * .75 * stuksprijs = [B]15[/B]   * stuksprijs
totaalprijs 21 stuks: 21 * .70 * stuksprijs = [B]14,7[/B] * stuksprijs[/INDENT]
Bij 22 stuks gaat het weer goed:
Code: 
[INDENT]totaalprijs 22 stuks: 22 * .70 * stuksprijs = 15,4 * stuksprijs[/INDENT]

[edit]Aha,[/edit] ik zie nu dat je in het DISCOUNT-regeltje hebt staan: > 20pcs (dat heb ik gehanteerd: 10 t/m 20, en hoger dan 20), maar in je laatste testpagina in de berekening 10 t/m 19 en >=20 wordt uitgevoerd.
- Dat kan makkelijk aangepast worden.


 
Laatst bewerkt:
Ad 3
Je hebt toch al de <td id="..."></td>'s nodig om het script te laten werken !? Daarmee dacht ik om deze te verbergen omdat ze toch niet hoeven getoond te worden. Enkel de stukprijs (met eventuele korting) wordt getoond. Zie afbeelding :
Stukprijs_korting-1.jpg
 
Ohhh! Dat verandert de zaak aanzienlijk. :d

Ik ben uitgegaan van je testpagina waarop tussenstappen ook vermeld werden (die testpagina is intussen ook aangepast ;)).
Maar als dat niet hoeft, en alleen het resultaat er moet komen, hoeven inderdaad niet al die tussenstappen op de pagina te komen, en kan alleen de eindprijs (totaal van deze bestelling) op de pagina worden weergegeven.


  • Dan kan het rekenwerk helemaal achter de schermen blijven.
  • En dan hoeven al die <tr><td>'s er ook niet in! :)

Wordt vervolgd!
CSShunter
________
PS: Hoe zit het met mankement 2) uit nummer #21 (mijn Ad 2 in nummer #22)? Is dat probleem er nog?
 
... even wat orde brengen ;)


Ad 1
is in orde

Ad 2
Cijfers verschijnen pas na 1x op aantal-pijltejes te klikken, màààr ze zijn juist ! ;)
Test van werkelijke pagina
Ik heb eventjes de benamingen eronder gezet voor de duidelijkheid. Van de gewone cijfertjes hier en daar moet je je niets aantrekken. Anders raak ik de tel kwijt.

Ad 3
De oorspronkelijk testpagina was eigenlijk de simpelste voorstelling van mijn doel. Misschien wel het percentage erachter.




Ad %-korting :
•In dat geval worden 20 stuks altijd goedkoper dan 19 stuks.
Klik om te vergroten...
Dit ga je altijd blijven hebben denk ik !?:confused:
 
Hoi Yammaski,
Eerst even het bakwerk uit mijn oventje gehaald: een nieuwe versie op grond van je voorlaatste bericht.

Ziezo, lekker de hele tabel er uit. :D
Er blijven maar 4 <div>'s over om op je pagina te zetten (behalve de rest die er al is):
HTML: 
<div id="formaatkeuze">
	<select id="stickersBE_1_Size_Add" onchange="berekenAlles()">
		<option value="10">10 cm (- € 1,00)</option>
		<option value="15" selected="selected">15 cm</option>
		<option value="20">20 cm (+ € 2,00)</option>
		<option value="25">25 cm (+ € 4,00)</option>
		<option value="30">30 cm (+ € 5,00)</option>
		<option value="35">35 cm (+ € 6,00)</option>
		<option value="40">40 cm (+ € 7,00)</option>
		<option value="45">45 cm (+ € 8,00)</option>
		<option value="50">50 cm (+ € 9,00)</option>
		<option value="55">55 cm (+ € 10,00)</option>
	</select>
</div>

<div id="aantalkeuze">
	<input id="aantalBox" type="text" class="" value="1" onkeyup="berekenAlles()" />
	<input id="add" type="button" class="Aantal_Add" onclick="addOne()" />
	<input id="subtract" type="button" class="Aantal_Min" onclick="subtractOne()" />
</div>

<div id="totaalBox"></div>
<div id="perStukBox"></div>


=======
Dan de orde op zaken. ;)

Ad 1
Die is dus afgehandeld.

Ad 2
Staat nog open: ik moet je "Test van werkelijke pagina" nog gaan bekijken.

Ad 3
Ja, dit zit verwerkt in je screenshot en de demo hierboven.
Het lijkt me voor de klant voldoende om het totaal en de uiteindelijke prijs per stuk te zien (bij ophogen van de aantallen zie je vanzelf de prijs per stuk dalen). - Maar alle tussenliggende getallen uit demo 5 zijn ook op te hoesten in een div'je extra.
Conclusie: halfopen. :)

Ad %-korting
Nee, zo'n goedkoper-sprong op de rand van een nieuw percentage hoeft niet: dat hangt van het oude en nieuwe percentage af.
Bij de overgangen naar 3, 6 en 10 gebeurt het niet.
Van 19 naar 20 wel, omdat daar het nieuwe percentage in relatie tot het toenemende aantal vrij groot is. Zoals ie nu is:
Code: 
[INDENT]totaalprijs 19 stuks: 19 * .75 * stuksprijs = 14,25 * stuksprijs (korting: 25%)
totaalprijs 20 stuks: 20 * .70 * stuksprijs = [COLOR="#B22222"]14,00[/COLOR] * stuksprijs (korting: 30%)
totaalprijs 21 stuks: 21 * .70 * stuksprijs = 14,70 * stuksprijs (korting: 30%)[/INDENT]
Bij een wat kleiner kortingspercentage voor 20 en meer speelt het niet, bv.:
Code: 
[INDENT]totaalprijs 19 stuks: 19 * .75 * stuksprijs = 14,25 * stuksprijs (korting: 25%)
totaalprijs 20 stuks: 20 * .72 * stuksprijs = 14,40 * stuksprijs (korting: 28%)
totaalprijs 21 stuks: 21 * .72 * stuksprijs = 15,12 * stuksprijs (korting: 28%)[/INDENT]

Met vriendelijke groet,
CSShunter
 
Vervolg Ad 2
Juist, dat is wat ik al vermoedde: het javascript Bereken_Kortingen.js staat in de <head> van de pagina, en niet helemaal op het eind. Waarschijnlijk vindt daarom interferentie plaats met de andere javascripts die in de <head> staan, en werkt de automatische onload daarom niet (het jQuery-optreden is nogal ingrijpend).
Maar als je het script helemaal op het eind zet (zoals het eigenlijk hoort *), vlak voor de </body></html>, dan wordt de rekenmachine meteen aangezet en komen de getallen ook direct tevoorschijn. Zelfs in IE7. :)



Met vriendelijke groet,
CSShunter
____________
*) Zie de hele goede Yahoo "Best Practices for Speeding Up Your Web Site": developer.yahoo.com/performance/rules.html#js_bottom
 
Hoi Yammaski,

Kleurvakje
Het viel me op dat het kleurvakje niet inkleurt als je een kleur opgeeft:
  • Dwz niet in Firefox, Chrome, Opera en Safari.
  • Wel in IE (in ieder geval IE7), maar niet spontaan: pas als je na de kleurkeuze ergens anders op klikt.
  • De functie onchange="changeBG(this.value)" werkt niet; sterker: die is er niet (en geeft een scriptfout).

In plaats daarvan kan het met een functie onchange="changeBG()" (zonder de "this.value"), als deze alle opties even naloopt. Met een blur() onttrekt het uitrolvakje zich na de keuze aan de focus, en dan komt het ook goed in IE.
[JS]<script type="text/javascript">
function changeBG(){
var colorSelectie=document.getElementById('stickersBE_1_Color_Add');
var colorname=colorSelectie.options[colorSelectie.selectedIndex].value; // string
var options=colorSelectie.getElementsByTagName('option'); // alle opties
for (i=0; i<options.length; i++){ // langslopen en signaleren welke gekozen is
if (options.value==colorname){ // zo ja, dan inputvakje op juiste kleuren brengen
colorSelectie.style.color=options.style.color;
colorSelectie.style.backgroundColor=options.style.backgroundColor;
colorSelectie.blur(); // deselecteren (voor IE)
}
}
}
changeBG();
</script>[/JS]
Alweer: vlak voor de </body></html> te plaatsen.



=======
Kleurvoorbeeld
En wat dacht je hiervan:



Hier kleven echter wel wat maren aan:
  • Als je het mooi wilt doen, dan moet er van elke sticker een semi-transparante png gemaakt worden (ipv de huidige gif).
  • Ook bij een gif moeten alle sticker-images anders worden: in het middenstuk komt transparantie ipv zwart, de rest wordt de grijze bg-kleur.
  • Problematisch is de kleur "Light Grey" die met de lichtgrijze achtergrond nauwelijks te zien is; daarvoor moet dan een alternatief image aangemaakt worden met bv. witte background (het wisselen gaat automatisch).
  • Al met al: een stevige klus voor de 5 miljoen stickers die mogelijk zijn ... :confused:

Maar het kan wel! :p

Met vriendelijke groet,
CSShunter
 
Dag csshunter,

Het begint er op te lijken hier.;)

Ad 2 (script onderaan plaatsen)
OK


Kleurvakje & Kleurvoorbeeld
•De functie onchange="changeBG(this.value)" werkt niet; sterker: die is er niet (en geeft een scriptfout).
Klik om te vergroten...
Dit script is van de detail paginas waar de kleur verandert zoals jouw "Kleurvoorbeeld". Script staat hier dus teveel, waarschijnlijk met copy & paste gebeurd.
Ik had dit al. :p Maar zoals je zegt ... voor alle afbeeldingen ... :eek:

Maar op de andere detail paginas heb ik jouw scriptje geplaatst voor de selectie van de kleuren. Ik heb wel de naam veranderd omdat het anders 2x bestaat, nl. : "changeBG_SelectColor.js". Zie testpagina. Maar bij Chrome en FF is het kleurselectievakje niet ingekleurd bij het laden van de pagina. Vreemd, bij jouw testpagina wel.


Ad 3 (div's)
Dat is iets voor straks.


Ad %-korting
Dat hou ik voor laatst.
 
Hallo Yammaski,
Mooi dat alles vlotjes begint te lopen. :thumb:
Maar bij Chrome en FF is het kleurselectievakje niet ingekleurd bij het laden van de pagina. Vreemd, bij jouw testpagina wel.
Klik om te vergroten...
's Efkens kijken...
De Javascript-foutconsole van Firefox weet te melden:
changeBG is not defined.
Bronbestand: http://www.stickers.be/changeBG_SelectColor.js
Regel: 13​


Ah, een eitje van Columbus!
  • Je hebt de functie van changeBG() omgedoopt tot changeBG_SelectColor(), en zo staat het ook correct op de pagina.
  • De functie staat ook goed met de nieuwe naam in het script changeBG_SelectColor.js
  • Maar ... op regel 13 staat nog de oude naam: changeBG();
  • De regel 13 zorgt voor het meteen uitvoeren van het script nadat de pagina geopend is.
  • Dus als regel 13 het niet doet... :P
Je moet ook maar aan alles denken, bij zo'n script. ;)

Met vriendelijke groet,
CSShunter
 
changeBG() : Oei ... niet opgemerkt.:o

Ad 3

[JS]var standaardprijs=5.00; // tzt uit database[/JS]
vervang ik door
[JS]var standaardprijs=document.getElementById('prijsZonderKorting');[/JS]
Deze waarde komt uit de database die ik in een hidden textfield gestopt heb.
Code: 
<input id="prijsZonderKorting" name="prijsZonderKorting" type="hidden" value="<%=(rsDetail.Fields.Item("ProductPrice").Value)%>" />
Nu krijg ik "NaN" ipv het cijfer (prijs). Ik heb de value al eens vervangen door bvb gewoon "5", maar dat geeft hetzelfde NaN. Zie testpagina (niet naar de schikking kijken, dat komt later wel).
 
Hoi Yammaski,
Ja, javascript zit vol voetangels en klemmen. Veiligheidshalve probeer ik daarom alles eerst uit, voordat ik hier iets durf te beweren.
smiley-st.gif

Met:
var standaardprijs=document.getElementById('prijsZonderKorting'); ​


pak je het hele element prijsZonderKorting als totaalverzameling, met z'n hele hebben en houden (dus ook alle opgegeven styles, enz.).

Wat je wilt hebben is alleen de waarde die de database heeft aangeleverd, dus:


var standaardprijs=document.getElementById('prijsZonderKorting').value;​


Maar dat is een instinker! Zo'n value is namelijk geen getal-waarde, maar een inhoud-waarde: een string. Want er had ook als opgegeven value kunnen staan bv. value="Jantje".
Daarom werkt het opgeven van een getal via value="5" niet: ook die 5 wordt als string gezien en niet als getal.
Gevolg is dat bij het rekenwerk met de 5-string de uitkomst wordt: NaN (Not a Number). ;)

Dus het script moet aan z'n verstand gepeuterd worden dat de hier bedoelde value wel degelijk een echt getal is.
Dat gaat met parseFloat(), zodat het begin van de functie kan worden:

[JS]function berekenAlles(){
var standaardprijs=document.getElementById('prijsZonderKorting').value; // string
standaardprijs=parseFloat(standaardprijs); // getal

... enz.
[/JS]
Hetzelfde gebeurt verderop in de functie, waar ook value's van elementen worden afgetapt (zoals het opgegeven aantal stickers), die daarna worden omgezet in echte getallen.

Met vriendelijke groet,
CSShunter
_________
PS
In mijn voorbeeld had ik var standaardprijs=5.00; staan, zonder aanhalingstekens: dan is het een echt getal.
Als ik var standaardprijs="5.00"; had genomen, zou het ook fout zijn gegaan: dan was het een string.
 
Laatst bewerkt:
Ha, dat begint te trekken als een vers geveegde schoorsteen! Hij wordt leuk! :)

Het zou wel kunnen om even de prijs te laten oplichten, maar dan niet bij een nieuw formaat, maar bij een extra kortingstrap. Zo van: "Kijk, nu wordt de prijs mooi een stuk lager."

Overig 1
De kortingspercentages vermelden is prima gelukt. Ook de tip om naar een volgende ronde met meer korting te gaan is stimulerend voor de kooplust!
Er staat nu alleen: -8% korting ... enz. De min vind ik een beetje verwarrend, en ik zou het geheel tussen haakjes zetten, want het is niet de actuele korting. Met v/a in plaats van vanaf blijft het ook bij grotere getallen op de regel passen, dan verspringt het beeld niet:

stickers-korting.png

Overig 2
Wat ik als klant nog wel mis, is de totaalprijs voor deze sticker: er is wel de stuksprijs, maar welk bedrag ik precies in mijn winkelwagentje klik moet ik zelf gaan uitrekenen. Of moet dat een verrassing blijven voor op de winkelwagen-pagina? ;)

Met vriendelijke groet,
CSShunter
 
Het zou wel kunnen om even de prijs te laten oplichten, maar dan niet bij een nieuw formaat, maar bij een extra kortingstrap.
Klik om te vergroten...
Maar hoe pas ik dat aan in het script ? :o



Wat ik als klant nog wel mis, is de totaalprijs voor deze sticker
Klik om te vergroten...
Idd, ik heb het er bij gezet, maar in IE8 staat de div veel te laag en ik krijg het langs geen kanten op de juiste plaats (IE wringt altijd !).
De border is maar tijdelijk om de div duidelijk te tonen.
 
IE8-totaal
De combinatie van tabellen, div's en IE is altijd wat zorgelijk...
Je kan dit proberen: de <div id="totaalBox"> in een eigen <td> zetten, de float er uit halen en ervan maken:
Code: 
#totaalBox {
    border: thin dotted #990000;
    margin-left: -90px;
    text-align: right;
    width: 70px;
}
En/of er een <span> i.p.v. een <div> van maken. Met opname van de div/span in een tabel-cel op dezelfde rij kan hij niet ongevraagd omlaag, zou je zeggen.
Anders zal de rechterkolom van de tabel echt opgeknipt moeten worden in twee kolommen, waarbij de breedte van de aantallen-cel wordt aangepast en de andere cellen worden samengevoegd met een colspan:

tabel-opgeknipt.png

Met vriendelijke groet,
CSShunter
 
Prijs oplichten
De oplicht-functies zijn al keurig aanwezig, zie ik: ColorPrice.js.
Deze kan nu in het Bereken_Kortingen.js-script getriggerd worden als de perStukBox is ingevuld:
[JS]...
var perStukBox=document.getElementById('perStukBox');
perStukBox.innerHTML='<img src="images/Detail-VerzendingsAuto.gif" ... enz.>';

if (aantal==2 || aantal==6 || aantal==10 || aantal==20 || aantal==51){ // als korting-sprong gemaakt
ColorPrice(); // even perStuk-prijs oplichten
}[/JS]
Verder kan je ook de 2 oplicht-functies in het Bereken_Kortingen.js-script zelf opnemen, bv.:
[JS]function subtractOne(){
...
}

function ColorPrice(){
document.getElementById("perStukBox").style.color="#F77B00";
document.getElementById("perStukBox").style.fontWeight="bold";
setTimeout("setColorBack()",2000);
}
function setColorBack(){
document.getElementById("perStukBox").style.color="#666";
document.getElementById("perStukBox").style.fontWeight="normal";
}

var inputvalue="1";
... enz.
[/JS]
Dan kan (de aanroep naar) het aparte ColorPrice.js-script vervallen, en dat scheelt weer download-tijd. :)
  • Ik zou ook de vette letters weer terugzetten naar gewoon (dat stond nog niet in de functie).

mvg,
CSShunter
 
IE7 (8?)
Ik heb in de td een table gemaakt met 2 td's, nu is het in order.


Prijs oplichten
Ik heb de functie opgenomen in de Bereken_Kortingen.js.
Omdat de "verzendingsauto + tekst" bij in de perStukBox.innerHTML zitten, lichten deze ook bij op.
Kan ik dit vermijden zonder de "verzendingsauto + tekst" uit innerHTML te halen ?
Ik had die samen gezet omdat dat mooi uitlijnde onder het voorbeeld.
 
Toe maar, een tabel in een tabel! Dat kan ook nog: een tabelletje meer of minder maakt niet uit. ;)

Oplichten
Aha, dan zal er een span bij moeten komen:
Code: 
[SIZE=3]...
var perStukBox=document.getElementById('perStukBox');
perStukBox.innerHTML ='<img src="images/Detail-VerzendingsAuto.gif" width="42" height="22" ';
perStukBox.innerHTML+='alt="leveringstermijn" />&nbsp;&nbsp;&plusmn;&nbsp;3 werkdagen';
perStukBox.innerHTML+='&nbsp;&nbsp;&nbsp;&nbsp;&​#9632;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
perStukBox.innerHTML+='<img src="images/Detail-Prijskaartje.gif" alt="" />&nbsp;&nbsp;&nbsp;';
perStukBox.innerHTML+='[COLOR="#B22222"]<span>[/COLOR]'+perStukPrijsString+'&nbsp;/&nbsp;stuk[COLOR="#B22222"]</span>[/COLOR]'; [COLOR="#006400"]// invullen in de pagina[/COLOR]
...[/SIZE]
... en vervolgens moet alleen deze span oranje ingevet worden:
[JS]function ColorPrice(){
document.getElementById("perStukBox").getElementsByTagName('span')[0].style.color="#F77B00";
document.getElementById("perStukBox").getElementsByTagName('span')[0].style.fontWeight="bold";
setTimeout("setColorBack()",2000);
}
function setColorBack(){
document.getElementById("perStukBox").getElementsByTagName('span')[0].style.color="#666";
document.getElementById("perStukBox").getElementsByTagName('span')[0].style.fontWeight="normal";
}[/JS]
Dat zou 'm moeten zijn.

[edit]Verhip,[/edit] ik kreeg met geen mogelijkheid de code voor het blokje ■ ( &​#9632; ) hier goed in het bericht, maar met een trucje toch nog gelukt. :)
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan