Winkelwagen - scrollpositie
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.
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
Op de korte termijn zal ik dit waarschijnlijk nog niet onder de knie hebben, dus hoop dat voor PHP ook een oplossing is.
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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);
}
});
});
$('.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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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>
$( "#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
Code (php)
1
2
3
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>
<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)
1
2
3
4
5
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.
});
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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
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);
}
});
});
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
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.
Wat ik aanraadt is om te kijken of de server een POST request krijgt. Dat kan door het volgende stukje code:
Code (php)
1
2
3
4
2
3
4
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
// voer hier je code uit :)
}
{
// 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.
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)
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
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>€ '.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>€ 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();
}
}
$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>€ '.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>€ 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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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?
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?