Javascript winkelwagen

    Hallo iedereen,

    Ik ben bezig met een script waarbij er dingen besteld kunnen worden. Daarbij zou ik graag willen dat de totaalprijs verandert op basis van het 'aantal' wat mensen invullen bij een bepaald product.

    Mijn assortiment wordt uit de database gehaald, om het even simpel te houden met de volgende code:

    PHP
    while($assoc	=	mysql_fetch_assoc($query)) {
		
		echo'
			'. $assoc['naam'] . ' <input type="text" name="'. $assoc['naam'] . '" value="0""/> &euro; ' . $assoc['prijs']/100 . ' per stuk<br />
			';
		
	}

    Dan heb ik dus de verschillende producten, een input veld en de prijs per stuk erachter staan. Wat ik nu wil is het volgende:

    Stel ik heb de producten product1 voor 5 euro en product2 voor 10 euro. Dat als ik 2 en 3 invul dat er dan doormiddel van javascript de totaalprijs automatisch aanpast en verschijnt op de pagina.

    Weet iemand hoe dat kan?

    Groeten,
    Gijs

    Beste,

    Waarom gebruik je geen opensource webshop scripts? Zoals magento, opencart enzovoort.
    Zoniet:

    Heb je al ervaring met javascript?

    De manier hoe ik het zou doen is, de prijzen ergens in javascript zetten d.m.v. php en een functie geven aan de knoppen die je indrukt, zodat de prijzen telkens worden bijgewerkt.

    Hier een simpel voorbeeld (Klik:(

    Met vriendelijke groet,
    Ismail
    enthousiaste game developer

    Bewerkt 2 keer, laatst door ismail123 (10 november 2012 om 16:49).

    De reden waarom ik geen open source webshop script gebruik is omdat het om een kleine bestelpagina gaat in een veel groter geheel. Ik heb een klein beetje basis ervaring met Javascript, maar eigenlijk bijna niet, ik zal eens gaan stoeien met het voorbeeldje wat je gegeven hebt :)

    Als je geen framework gebruikt, download dan jQuery, scheelt veel typwerk.
    Geef het input veld een class, bijvoorbeeld input_amount.
    Maak van de prijs van 1 product een span met een class, bijvoorbeeld product_price
    Maak een span aan waar je de totale prijs inzet en geef die een id, bijvoorbeeld totalPrice
    Maak een js bestand aan en laad die in.
    Zet in het javascript bestand ongeveer dit:

    Code
    $(document).ready(function() {
	$(".input_amount").keyup(function() {
		var totalPrice = 0;
		$(".input_amount").each(function() {
			totalPrice += $(this).parent().find(".product_price").text() * $(this).val();
		});
		$("#totalPrice").text(totalPrice);
	});
});

    Heb het niet getest, maar zo moet je het ongeveer doen.

Participate now!

Nog geen account? Registreer je nu en word deel van onze community!

Nu registreren Aanmelden