Winkelwagen - scrollpositie

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Top Low-Code Developer Gezocht!

Bedrijfsomschrijving Unieke Kansen, Uitstekende Arbeidsvoorwaarden & Inspirerend Team Wij zijn een toonaangevende, internationale organisatie die de toekomst van technologie vormgeeft door het creëren van innovatieve en baanbrekende oplossingen. Ons succes is gebaseerd op een hecht en gepassioneerd team van professionals die altijd streven naar het overtreffen van verwachtingen. Als jij deel wilt uitmaken van een dynamische, vooruitstrevende en inspirerende werkomgeving, dan is dit de perfecte kans voor jou! Functieomschrijving Als Low-Code Developer ben je een cruciaal onderdeel van ons team. Je werkt samen met collega's uit verschillende disciplines om geavanceerde applicaties te ontwikkelen en te optimaliseren met behulp van Low-code

Bekijk vacature »

Niels Rietveld

Niels Rietveld

16/12/2015 08:58:33
Quote Anchor link
Hallo allen,

Ik heb een winkelwagentje die als volgt werkt;
--> doormiddel van een form wordt het product toegevoegt aan het winkelwagentje, hierbij staan alle producten op 1 pagina en hebben zij geen eigen pagina, achter het product druk je op de button.
--> het formulier wordt verzonden naar het bestand add.php dat het toevoegt in het winkelwagentje en je weer terug stuurt (via header location).

Nu wil ik graag dat als men terug gaat ,weer op de vorige scrollpositie terecht komt.

- ik heb het geprobeerd met #divnaam achter de link te zetten maar:
- dit kan erg verschillen van de scrollpositie
- Chrome gaat eerst naar boven en flitst naar beneden

Kortom: Hoe kan ik de gebruiker weer naar de voorgaande scrollpositie laten terug keren, of is er misschien een ander soort oplossing hiervoor?

Ik hoor het graag.
 
PHP hulp

PHP hulp

19/06/2024 00:30:22
 
Randy vsf

Randy vsf

16/12/2015 09:04:33
Quote Anchor link
Misschien eens kijken naar ajax?
Dan sla je het hele gedoe van redirecten over, en blijft de gebruiker waar hij is.

En anders zoiets?
Gewijzigd op 16/12/2015 09:05:11 door Randy vsf
 
Niels Rietveld

Niels Rietveld

16/12/2015 09:06:48
Quote Anchor link
Bedankt Randy, ben ik inderdaad tegengekomen, heb alleen geen voorbeelden van een winkelwagentje gevonden.
Op de korte termijn zal ik dit waarschijnlijk nog niet onder de knie hebben, dus hoop dat voor PHP ook een oplossing is.
 
Eschwin Moerkerken

Eschwin Moerkerken

16/12/2015 09:07:54
Quote Anchor link
Je kunt dit probleem oplossen door AJAX te gebruiken. Persoonlijk vind ik het prettig om de AJAX functie van jQuery te gebruiken.

Allereerst kun je een ajax call maken naar het bestand add.php wanneer er bij een item wordt geklikt op toevoegen. Naar dit php bestand stuur je het ID van de item (deze kun je in een data attribuut zetten eventueel, op dezelfde knop van toevoegen). Controleer altijd of de input correct is en bestaat. Dus in dit geval zou je als eerste kunnen controleren of de ID die meegestuurt wordt wel een getal is. Want iedereen kan het data attribuut aanpassen in de console. Vervolgens kijk je of het product bestaat (wel de invoer escapen). Wanneer het bestand door deze twee checks heen komt dan kun je berekenen hoeveel en welke producten er in het winkelmandje zitten. Als het goed is doe je dit waarschijnlijk in een sessie. Ook bereken je de totale prijs.

Vervolgens geeft het add.php bestand het aantal artikelen en de totale prijs terug. Met de gegevens die je van het php bestand terug krijgt kun je het winkelmandje gaan aanpassen met de nieuwe gegevens. Dit kun je doen doormiddel van de value's te wijzigen in het winkelmandje of de html binnen een span of p element te wijzigen. Net op de manier hoe jouw website in elkaar steekt.

Volgens mij heb ik de manier van aanpak nu best duidelijk uitgelegd. Mocht je er niet uit komen vraag gerust waar je op vast loopt.

Succes! :)

Toevoeging op 16/12/2015 09:14:45:

Een ajax call ziet er zo uit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// ajax call - add items to the shopping cart.
$('.toevoegen-knop').on('click', function() {
    var item_id = $(this).data('id');

    // send ajax call to /add.php
        $.ajax('/add.php', { data: {ajax: 1, update_chart: 1, item_id: item_id},
            type: 'POST',
            error: function(data) {
                console.log(data);
            },
            success: function(data) {
        console.log(data);
            }
        });
});


Hier gebeurd het volgende:
- Allereerst wordt het item ID opgehaald uit een data-id="1" attribuut op je button 'toevoegen'.
- De ajax call wordt verstuurd naar /add.php. Dus het bestand staat in de root van de website (waar waarschijnlijk ook index.php staat).
- De ajax call verstuurd de gegevens ajax = 1, update_chart = 1 en de item_id waar op geklikt is
- Wanneer de ajax call succesvol is zal de data die teruggestuurd wordt in de console verschijnen dankzij de console.log(data);
- In het add.php bestand kun je nu ook checken om welke ajax call het gaat. In dit geval check je of $_POST['ajax'] == 1 en $_POST['update_chart'] == 1 (en eventueel ook of deze niet leeg zijn)

In het add.php bestand ga je het verhaal wat ik eerder al heb getypt uitvoeren.

Verder is een Ajax call in principe een zelfde POST als je gewend bent van een formulier POST. Voordeel is dat de pagina niet ververst hoeft te worden en je in de success functie alle dingen kunt uitvoeren wat jij wilt doen wanneer je succesvol data terug krijgt.

Hier kun je bijvoorbeeld je shopping cart html updaten met de nieuwe waardes die in de 'data' variabele staan.
Gewijzigd op 16/12/2015 09:15:18 door Eschwin Moerkerken
 
Niels Rietveld

Niels Rietveld

16/12/2015 09:26:09
Quote Anchor link
Ik heb nu dit:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
 $( "#target" ).click(function() {
 jqxhr = $.ajax( "actions/add1.php?id=1&aantal=500" )
  .done(function() {
    alert( "success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "complete" );
  });
  });
  
  </script>

UPDATE: Ik zie nu je bewerking pas.
Hoe kan ik in jou script nu het ID meegeven en het aantal? Ik heb zelf nu een divje waarop geklikt wordt namelijk en standaard is het aantal gewoon 1.
Gewijzigd op 16/12/2015 09:28:11 door Niels Rietveld
 
Eschwin Moerkerken

Eschwin Moerkerken

16/12/2015 09:31:21
Quote Anchor link
Het id haal je op uit een data attribuut. Stel jouw divje waar je op klikt (ik zou er een button element van maken) ziet er zo uit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<button class="add-to-chart" data-id="1">+</button>
<button class="add-to-chart" data-id="2">+</button>
<button class="add-to-chart" data-id="3">+</button>


Dan kun je hem op de volgende manier eruit halen zoals in mijn code hierboven. Dus zo:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
$('.add-to-chart').on('click', function() {
    var item_id = $(this).data('id');

    // hier komt dan de ajax call. Ik zou die van mij gebruiken want die is al een soort van kant en klaar. In dat geval hoef je alleen je html te veranderen.
});


Wanneer er op zo'n dergelijke button geklikt is is het aantal altijd +1. In het winkelmandje overzicht kun je normaal gesproken de aantallen nog veranderen.
Gewijzigd op 16/12/2015 09:32:14 door Eschwin Moerkerken
 
Niels Rietveld

Niels Rietveld

16/12/2015 09:34:21
Quote Anchor link
Oké bedankt! Dan heb ik nu dus dit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
$('.add-to-chart').on('click', function() {
    var item_id = $(this).data('id');
// send ajax call to /add.php
        $.ajax('/add.php', { data: {ajax: 1, update_chart: 1, item_id: item_id},
            type: 'POST',
            error: function(data) {
                console.log(data);
            },
            success: function(data) {
        console.log(data);
            }
        });
});


Hoe krijg ik ze nu in PHP binnen met POST? Als $_POST['item_id'] ?
Het aantal geef ik dan gewoon als variabele binnen PHP als 1 aan.
Gewijzigd op 16/12/2015 09:35:19 door Niels Rietveld
 
Gerhard l

gerhard l

16/12/2015 17:03:50
Quote Anchor link
Ja, $_POST['item_id'].
Het aantal zal niet altijd 1 zijn, want je moet rekening houden met dat het product misschien al in de winkelwagen zit en de klant dus 2 wilt. Dus je zou daarop moeten checken in je add.php en dan gewoon 1 erbij optellen als die al in de winkelwagen zit.
 
Eschwin Moerkerken

Eschwin Moerkerken

17/12/2015 16:43:12
Quote Anchor link
Ja,

Wat ik aanraadt is om te kijken of de server een POST request krijgt. Dat kan door het volgende stukje code:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
// voer hier je code uit :)
}


binnen dat blok kun je nog eens kijken naar de ajax = 1 en update_chart = 1 als je meerdere AJax calls hebt (ook is dit aan te raden mocht je er 1 hebben mocht je later uitbreiden).

Vervolgens kun je een var_dump($_POST); doen om te kijken wat er allemaal verstuurd wordt. Let wel op dat je iets dient te echo'en mocht je niks zien in de console (console.log(data) zorgt ervoor dat wat in je php bestand ge'echo'd wordt zichtbaar wordt in de console). Verder kun je ook van alles doen met de data die PHP terug echo'd. Zo kun je bijvoorbeeld ook een array teruggeven aan je javascript. Vaak in Json formaat maar dat ga ik nu niet verder uitleggen.
 
Niels Rietveld

Niels Rietveld

18/12/2015 23:00:59
Quote Anchor link
Oké, bedankt allen. Ik heb het toevoegen nu werkend, alleen hoe kan ik nu het winkelwagentje ook laten updaten, iedere keer als er iets toegevoegt is en bij het openen natuurlijk.
Het liefst dat gewoon het PHP script geinclude wordt zoals ik nu ook doe, zodat de opmaak niet verloren gaat.

Toevoeging op 18/12/2015 23:03:00:

Dit staat er in het winkelwagen script, voor de weergave.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
// Exploden
        $cart = explode('|', $_SESSION['winkelwagen']);

        // Begin formulier
 
            // Show winkelwagen
            $i = 0;
            foreach($cart as $products)
            {
                // Split
                /*
                $product[x] -->
                    x == 0 -> product id
                    x == 1 -> hoeveelheid
                    x == 2 -> saus
                    x == 3 -> saus2
                    x == 4 -> bij

                */
                $product = explode(',', $products);
        
                // Get product info
                $sql = mysqli_query($db, "SELECT * FROM products WHERE id = '".intval($product[0])."'");
              
                // Als query gelukt is
                if($sql)
                {
                    // Als er items zijn
                    if(mysqli_num_rows($sql) > 0)
                    {
                        // Alle items echon
                        $rec = mysqli_fetch_assoc($sql);
                        $i++;
                       $priceproduct = $product[1] * $rec['price'];
                                echo '<tr><td>'.$product[1].'x</td><td>'.$rec['name'].'</td><td>&euro; '.number_format((float)$priceproduct, 2, '.', '').'</td><td><a class="tapas-delete" href="javascript:removeItem('.$i.')">(x)</a></td></tr>';

                          
                    }
                    // Anders
                    else
                    {
                        // Fout weergeven
                        echo '<tr><td>?</td><td><b>Onbekend product</b></td><td>&euro; 0</td></tr>';
                    }
                }
                // Anders
                else
                {
                    // Mysql error opvangen
                    echo 'Er is een fout opgetreden in de query. <br />';
                    echo mysqli_error();
                }
            }
echo'</table>';



foreach ($cart as $products){
 
                // Split
                /*
                $product[x] -->
                    x == 0 -> product id
                    x == 1 -> hoeveelheid
                */
                $product = explode(',', $products);
        
                // Get product info
                $sql = mysqli_query($db, "SELECT * FROM products WHERE id = '".intval($product[0])."'");
              
                // Als query gelukt is
                if($sql)
                {
                    // Als er items zijn
                    if(mysqli_num_rows($sql) > 0)
                    {
                        // Alle items echon
                        $rec = mysqli_fetch_assoc($sql);
                        $i++;
                      
    $subtotaal = $product[1] * $rec['price']; //subtotaal
    $totaal = $totaal + $subtotaal; // totaal

 }
                    // Anders
                    else
                    {
                        // Fout weergeven
                        echo 'Er is een fout opgetreden.';
                    }
                }
                // Anders
                else
                {
                    // Mysql error opvangen
                    echo 'Er is een fout opgetreden in de query. <br />';
                    echo mysqli_error();
                }
            }



Toevoeging op 19/12/2015 22:23:01:

Ik heb nu het volgende gemaakt waardoor het werkt!!
Als alles goed gaat in add.php linkt het door naar het winkelwagentje.php

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('.button-add').on('click', function() {
    var item_id = $(this).data('id');
// send ajax call to /add.php
        $.ajax('/actions/add.php', { data: {ajax: 1, update_chart: 1, product_id: item_id},
            type: 'POST',
            error: function(data) {
                alert( "error" );
            },
            success: function(data) {
                console.log(data);
                 $('#winkelwagen').html(data);
  alert("Successful");
            }
        });

});
[/code.

[size=xsmall][i]Toevoeging op 19/12/2015 22:23:58:[/i][/size]

Alleen hoe krijg ik nu ook in het begin een winkelwagentje?
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.