[PHP/AJAX/JS] Formulier in winkelwagen, prijzen wijzigen

[Verwijderd]

Hallo jongens,

Vandaag heb ik me suf gewerkt om eindelijk sessies onder de knie te krijgen in PHP.
Na enkele uren zweten en zwoegen, en tegen de griep vechten, is het me gelukt :-)

Ik heb nu onder elkaar in mijn winkelwagentje een leuk rijtje, als ik ze heb geselecteerd.

id	prijs	aantal	totaal
176	12,50 Eur	2	25,00 Eur
72	7,00 Eur	1	7,00 Eur

Nu heb ik van het aantal een input formulier gemaakt. Ik echo dit tijdens een foreach:

PHP:

echo "  <td><input name=\"".$wijn->id."\" type=\"text\" value=\"".$num."\" size=\"3\" maxlength=\"3\" style=\"text-align: right\" /></td>";

Nu heb ik om heel het overzicht een form (<form>) gezet en eronder een submit knopje.
De bedoeling zou dan zijn, dat wanneer de bezoeker de getallen aanpast, en vervolgens op het knopje drukt, de pagina refresht met de nieuwe waardes.

Nu heb ik wat zitten googlen, omdat ik ooit een heel mooie webapp heb gezien, naar de mogelijkheden om formulieren automatisch te laten versturen. Ik vroeg me af hoever dit hier mogelijk is en hoe ik dat moet aanpakken.

Als men dus bij een product een aantal aanpast, dus van 1 naar 3. Dat dan direct, zonder de pagina te herladen, het aantal gewijzigd wordt.

Hebben jullie een idee?

[RobIII]

Waar hoort mijn topic?
PRG >> WEB

Hang aan je input boxes een onchange, hang een JS functie er aan die het totaal berekent en je bent er. Of hang een JS functie aan de onclick van een button. Natuurlijk kun je het ook met een submit doen en PHP alles opnieuw laten berekenen en, yes, je kunt zelfs hypervette AJAX gebruiken. Maar wat verwacht je nu precies?

[ Voor 44% gewijzigd door RobIII op 19-02-2008 22:28 ]

[Verwijderd]

Ik verwacht niet dat mensen mijn handje vasthouden tijdens het volledig schrijven van dit systeem.
Ik vraag me gewoon af of dit mogelijk is en hoe ik dit eventueel zou kunnen aanpakken.
Omdat ik net mijn winkelmand werkend heb gekregen en ik erachter kwam dat ik mijn aantallen wel zou willen kunnen wijzigen hierin, zocht ik naar een geschikte manier.

Een submit en PHP alles opnieuw laten berekenen, dat snap ik wel en daar kom ik ook zelf wel uit. Maar ik vroeg me af wat ik zou moeten doen om zoiets eenvoudig om te bouwen naar AJAX.

Misschien wat directe vragen:

- is het mogelijk om met een soort van JS bij iedere wijziging alle aantallen van alle product id's opnieuw samen te stellen, en zo ja, hoe?
- hoe stel ik een php bestand zo in, dat hij dit soort wijzigingen direct ziet en meteen de getallen aanpast?

[Verwijderd]

in dit topic:
[PHP] 2 arrays met elkaar vergelijken en dingen aanpassen
vraag ik hulp bij het aanmaken van een array in een sessie.

ik zoek dus eigenlijk een manier om met behulp van javascript, automatisch (ajax), deze velden uit te lezen en aan de hand van die velden, die de naam hebben van de bijbehorende id's, de array aan te passen en deze, zonder te refreshen, opnieuw uit te lezen en weg te schrijven naar het scherm.

Wanneer ik in google op dingen zoek als "ajax cart change amount" of andere dingen, krijg ik geen gewenste uitkomsten. Ik kan dus niet goed vinden waar ik moet beginnen met zoeken.

[RobIII]

Verwijderd schreef op dinsdag 19 februari 2008 @ 22:44:
Wanneer ik in google op dingen zoek als "ajax cart change amount" of andere dingen, krijg ik geen gewenste uitkomsten. Ik kan dus niet goed vinden waar ik moet beginnen met zoeken.

Misschien eerst eens even verdiepen in de basics van AJAX dan; je wil zowieso niet dat je 'dezelfde' pagina aanroept; je wil enkel de wijzigingen op-en-neer AJAX-en

[Niemand_Anders]

Wel adviseer ik je de ajax methode optioneel te maken, ofwel als de client geen ajax (javascript) support (aan) heeft (staan), hij nog wel je website kan gebruiken. Omdat javascript nogal vaak misbruikt wordt door figuren die het minder met je voor hebben, staat javascript bij een heleboel bedrijven (denk aan banken, verzekerings kantoren, etc) standaard uit. De 'oude' vertrouwde form submit kun je het beste gewoon laten werken.

Je kunt met ajax welke de onchange event van de textbox (waar het aantal staat) afvangen ipv dan standaard een volledige submit te doen.

Een tipje van de sluier dan:

HTML:

<input type="text" class="basket_quantity" id="orderrecord_1421_quantity" onchange="updateOrderRecord(this, 'productid', '1421');" />1

Het productid zet je hard vanuit je PHP code, samenmet De javascript functie updateOrderRecord krijgt de referentie van de textbox mee en het productid. 1421 is het id van je basket record. Met document.getElementById('orderrecord_' + orderrecordid + '_amount') kun je dan het element opvragen waar je het totaal bedrag (quantity * amount) kunt wegschrijven.

Maar ik denk dat het verstandig is dat je eerst in google eens een zoekopdracht doet op 'php ajax tutorial' zodat je zoals RobIII al aangeeft eerst begrijpt wat ajax is, kan en werkt voordat je het in je eigen project gaat verwerken.

[Verwijderd]

Als je er dan toch in verdiept zou ik een library zoals jQuery gebruiken. Deze neemt veel van de abacadabra code weg en vervangt dat voor makkelijk te gebruiken syntax. Zodra je het idee achter ajax begrijpt maar geen behoefte hebt om handmatig alle calls in javascript te schrijven, zijn standaard libraries een uitkomst. Er zijn er genoeg om uit te kiezen, prototype, scriptalicious, extjs om er maar een paar te noemen, maar volgens mij is jquery veruit het simpelst als je wat simpele ajax voodoo gedaan wilt krijgen zonder je ECHT erin te willen verdiepen.

Kijk eens naar de volgende tutorial:
http://www.dreamdealer.nl/?action=viewTutorial&id=66

Met enig aanpaswerk zou dit al te gebruiken zijn voor jouw winkelmandje

Reference:
http://jquery.com/
http://www.google.nl/search?q=jquery+ajax+php

[Verwijderd]

Ik heb je vorige topic ook gelezen (die over de sessie met array's voor het winkelwagentje)

Als je de huidige functionaliteit wil verrijken door het updaten dmv Ajax af te handelen, moet je je voorstellen dat hetgeen de Ajax aanroept vrijwel identieke functionaliteit heeft als de pagina die je zou schrijven als je het op een traditionale manier doet:

PHP methode:
- pagina winkelwagen.php
- gebruiker verhoogt van een artikel het aantal van 1 --> 3
- form wordt gesubmit naar winkelwagen_update
- winkelwagen_update update de winkelwagen in de sessie
- pagina winkelwagen.php wordt getoond met nieuwe aantallen

Ajax methode:
- pagina winkelwagen.php
- gebruiker verhoogt van een artikel het aantal van 1 --> 3
- form wordt via Ajax gesubmit naar winkelwagen_update
- achter de schermen doet winkelwagen_update een update de winkelwagen in de sessie
- pagina winkelwagen.php krijgt de ge-update gegevens terug
- pagina winkelwagen.php verwerkt via javascript de ontvangen wijzigingen (visueel zeg maart)

Kortom, methode 2 zorgt ervoor dat winkelwagen_update ook gegevens teruggeeft over de nieuwe inhoud van de winkelwagen. Daarnaast moet winkelwagen.php instaat zijn de ontvangen gegevens via javascript weer te geven op het scherm.

Het probleem hiermee is dat communicatie tussen de twee "lastig" is, in ieder geval zodanig dat je wat geavanceerdere javascript zal moeten schrijven.

Overigens zou ik de comment van Niemand_Anders in acht nemen, dus beginnen met methode 1 en deze eventueel later aanpassen zodat je methode 2 optioneel aan kan bieden.

[DNB]

Dit is zeker goed te doen zoals Bo-oz het omschrijft. Toevallig heb ik een paar weken geleden net zo'n winkelmandje gemaakt als wat jij hier omschrijft:
http://www.snuifmolens.nl/test/index.php

Hij submit inderdaat het form mbv AJAX die het afhandelt(de sessie of database updaten enzo) en daarna worden de waardes aangepast op de pagina.
Toen ik eraan begon kende ik 0,0 AJAX, dus het is zeker goed te doen als je een handig framework hebt (zelf heb ik XAJAX gebruikt, maar er zijn natuurlijk zat opties).

[Verwijderd]

Ik heb het voor elkaar gekregen om het mogelijk te maken mijn winkelmandje aan te passen :-)

Via deze code kijk ik of er een $_POST is gedaan en aan de hand daarvan pas ik mijn sessie weer aan.. voor een beginnend PHP-er ben ik wel een beetje trots :-D

PHP:

if (!empty($_POST)) {
    reset ($_POST);
    while (list($id, $count) = each ($_POST)) {
        if ($id != "change") {
            if ($count <= 0) {
                $cart = $_SESSION["cart"];
                unset ($cart[$id]);
                $_SESSION["cart"] = $cart;
            } else {
                $cart = $_SESSION["cart"];
                $cart[$id] = $count;
                $_SESSION["cart"] = $cart;
            }
        }
    }
}

Omdat ik ook nog wat andere dingen wil doen, ga ik die eerst even uitvogelen.. zo wil ik zoeken mogelijk maken en wat dacht je van alle andere stappen in het winkelwagentje.. fiew, nog heel wat te leren.
Maar daarna wil ik naar de mogelijkheden gaan kijken hoe ik dit aan kan passen met AJAX, tenzij iemand nu een mooie tutorial heeft waar ik het direct uit kan copy/pasten, zodat ik daar wat van kan leren.

Bedankt voor jullie antwoorden! Dankzij jullie kom ik er vaak uit, ook al doe ik het wellicht nog een beetje onbeholpen en newb-achtig, maar zo leer ik het wel dank je wel!