Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][PHP]Wózek zakupów.. onclick?
Forum PHP.pl > Forum > Przedszkole
pa-jong
22.01.2012, 22:32:28
Witam,

po raz kolejny muszę sie zwrócic do Was o pomoc..
sprawa ma się tak:
buduję koszyk zakupów...

sam koszyk nie jest większym problemem.. jest już zrobiony działa..

w pętli wyświetlam liste produktów. Po kliknięciu w nazwę dodaje produkt do koszyka. Działa. 
[PHP] pobierz, plaintext 
  1. echo "<td class='nazwa'><a href=koszyk.php?action=add&id=".StringToHTML($arrRow["Symbol"])."'>".StringToHTML($arrRow["Nazwa"])."</td>".$eol; 
[PHP] pobierz, plaintext


koszyk.php

[PHP] pobierz, plaintext 
  1. session_start();
  2.  
  3. $cart = $_SESSION['cart'];
  4. $action = $_GET['action'];
  5.  
  6.  
  7. switch ($action) {
  8. 	case 'add':
  9. 		if ($cart) {
  10. 			$cart .= ','.$_GET['id'];
  11. 		} else {
  12. 			$cart = $_GET['id'];
  13. 		}
  14. 		break;
  15.  
  16. (...)
  17.  
  18. 	if ($cart) {
  19. 		$items = explode(',',$cart);
  20. 		$contents = array();
  21. 		foreach ($items as $item) {
  22. 			$contents[$item] = (isset($contents[$item])) ? $contents[$item] + 1 : 1;
  23. 		}
  24. 		$output[] = '<form action="koszyk.php?action=update" method="post" id="cart">';
  25. 		foreach ($contents as $id=>$qty) {
  26.  
  27.  
  28. 			$sql = 'SELECT * FROM stany WHERE symbol = '.$id;
  29. 			$result = $db->query($sql);
  30. 			$row = $result->fetch();
  31. 			extract($row);
  32. 			$output[] = "<tr class='".$class."'  onmouseover='this.className=\"".$classOver."\"'  onmouseout='this.className=\"".$class."\"'>";
  33. 			$output[] = '<td><a href="cart.php?action=delete&id='.$id.'" class="r" style="color:red;">Usuń</a></td>';
  34. 			$output[] = '<td>'.$Nazwa.'</td>';
  35. 			$output[] = '<td>'.$skl1Cena.' zł</td>';
  36. 			$output[] = '<td><input type="text" name="qty'.$id.'" value="'.$qty.'" size="3" maxlength="3" /></td>';
  37. 			$output[] = '<td><b>'.$skl1.' szt.</b></td>';
  38. 			$output[] = '<td><b>'.$skl11.' szt.</b></td>';
  39. 			$output[] = '<td>'.($skl1Cena * $qty).'zł</td>';
  40. 			$output[] = '<td><button type="submit">Aktualizuj</button></td>';
  41. 			$total += $skl1Cena * $qty;
  42. 			$output[] = '</tr>';
  43. 		}
  44. 		$output[] = '<tr><td colspan="5"></td><td>W sumie: </td><td><strong>'.$total.' zł</strong></td><td></td></p>';
  45.  
  46. 		$output[] = '</table>';
  47.  
  48. 		$output[] = '</form>';
  49. 	} else {
  50. 		$output[] = '<p>Twoje zamowienie jest puste.</p>';
  51.  
[PHP] pobierz, plaintext


i sprawa byłaby zamknięta, ale...
po kliknięciu w dowolny produkt za każdym razem przenosi mnie do strony z zawartością koszyka.. denerwujące biorąc pod uwagę ze zamówienie bedzie się składać ze 100+ pozycji..

próbowałem zrobić to w jednym pliku przenosząc cześć kodu odpowiedzialną za dodawanie do index.php ale wtedy...
...na stronie z listą (index) jest stronicowanie.. i dajmy na to:
dodaje 5 pozycji z pierwszej podstrony.. zmieniam podstrone na 2 i klikam w dowolny produkt.. produkt się dodaje, ale przenosi mnie do strony 1..

wszystko jasne odpowiedzialny jet za to link który przenosi mnie czy to do index.php czy do koszyk.php
[PHP] pobierz, plaintext 
  1. <a href=koszyk.php?action=add&id=".StringToHTML($arrRow["Symbol"])."'>
[PHP] pobierz, plaintext


i tu jest własnie problem..

na chłopski rozum... potrzebuje wysłać do koszyka -> action=add&id=... bez odświeżenia strony.. czyli w grę wchodzi jquery/Ajax z którymi średnio sobie radzę..
pytanie brzmi jak zamienić ten link na zdarzenie dajmy na to onclick ?
proszę Was dobrzy ludzie o nakierowanie mnie na jakieś materiały, a najlepiej jakiś przykład bym mogł zgłębić jego tajniki wink.gif

próbowałem rozgryźć jak to jest zrobione tutaj -> http://portaldemo.endor.pl/Sklep,53.html
niestety to:
onclick="xmlAjaxPost({out:"xml",mode:"Shop",object:"addItem",kid:"57",prize:"20",weight:"5",count:"1"});"

przerosło moje możliwości..
cycofiasz
22.01.2012, 22:43:20
Wstawiasz gdzieś na stronie skrypt jQuery 

[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
[HTML] pobierz, plaintext


Oraz funkcję odpowiadającą za dodanie produktu do koszyka:

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. function ddk(idp)
  3. {
  4. 		$.ajax({
  5. 			url: "ajax.php",
  6. 			type: "POST",
  7. 			data: {
  8. 				tryb : 'dodaj_do_koszyka' ,
  9. 				id_przedmiotu : idp
  10. 			},
  11. 			success: function(odpowiedz)
  12. 			{
  13. 				alert(odpowiedz);
  14. 			},
  15. 			error: function(){alert("Błąd połączenia ajax");}
  16. 		});
  17. }
  18. </script>
[HTML] pobierz, plaintext


I przy każdym przedmiocie:

[PHP] pobierz, plaintext 
  1. echo '<a href="java script:ddk(\''.StringToHTML($arrRow["Symbol"]).'\')">Dodaj do koszyka</a>';
[PHP] pobierz, plaintext



W pliku ajax.php robisz obsługę dodawania do koszyka, id przedmiotu (Symbol) jest przekazywane w $_POST['id_przedmiotu']
pa-jong
22.01.2012, 22:49:13
no to męczę dalej,
dzięki, zobaczymy co z tego wyjdzie wink.gif
wizu
22.01.2012, 23:21:37
Ale bez przesady, dołączasz jQuery, to nie używaj już atrybutu onclick.
Czy nie wygodniej byłoby w ten sposób?
[HTML] pobierz, plaintext 
  1. $('td.nazwa a').click(function(e)
  2. {
  3. e.preventDefault();
  4.  
  5. $.ajax({
  6. url: $(this).attr('href'),
  7. success: function(odpowiedz)
  8. {
  9.       alert('poszło');
  10. },
  11. });
  12.  
  13. return false;
  14. });
[HTML] pobierz, plaintext


Dzięki takiemu rozwiązaniu, nie musisz pisać jakiejś specjalnej obsługi wywołań ajax-owych.


PS. Zapomniałeś o zamknięciu tagu <a>
pa-jong
22.01.2012, 23:42:30
Cytat(wizu @ 22.01.2012, 23:21:37 ) *
PS. Zapomniałeś o zamknięciu tagu <a>


</a> - to już wyłapałem wink.gif
onclick - nie używam w tej sytuacji wink.gif

nie bardzo rozumiem skąd w pierwszym przykładzie wzięło się "idp"
czy to ma związek z nazwą funkcji? function ddk(idp) gdzie idp to jest własnie element przesyłany z linka ?

na początku link miał budowę ?action=add$id=545045
jak do tego dodać jeszcze element "add" ?

dorze kombinuję? 
[PHP] pobierz, plaintext 
  1. echo '<a href="java script:ddk(\''.StringToHTML($arrRow["Symbol"]).'\,add')">Dodaj do koszyka</a>';
  2.  
  3. function ddk(idp,action)
  4. {
  5. 		$.ajax({
  6. 			url: "ajax.php",
  7. 			type: "POST",
  8. 			data: {
  9. 				tryb : 'dodaj_do_koszyka' ,
  10. 				id_przedmiotu : idp
  11.                                 akcja: action
  12. 			},
  13. 			success: function(odpowiedz)
  14. 			{
  15. 				alert(odpowiedz);
  16. 			},
  17. 			error: function(){alert("Błąd połączenia ajax");}
  18. 		});
  19. }
  20.  
[PHP] pobierz, plaintext


nie sprawdzałem ale na bank skladnia jest nie taka, chodzi tylko o to czy w dobrym kierunku myślę?
cycofiasz
22.01.2012, 23:48:25
Nie zmieniaj tego kodu który Ci wysłałem bo już widzę że błędy robisz składniowe. idp to symbol przedmiotu przekazywany do funkcji w każdym linku. A parametr action możesz usunąć
pa-jong
23.01.2012, 00:01:08
w obecnej formie parametr action jest mi przydatny do obsługi switch`a wink.gif 

[PHP] pobierz, plaintext 
  1. $cart = $_SESSION['cart'];
  2. $action = $_GET['action'];
  3. switch ($action) {
  4. 	case 'add':
  5. 		if ($cart) {
  6. 			$cart .= ','.$_POST['id_przedmiotu'];
  7. 		} else {
  8. 			$cart = $_POST['id_przedmiotu'];
  9. 		}
  10. 		break;
  11. 	case 'delete':
  12. 		if ($cart) {
  13. 			$items = explode(',',$cart);
  14. 			$newcart = '';
  15. 			foreach ($items as $item) {
  16. 				if ($_POST['id_przedmiotu'] != $item) {
  17. 					if ($newcart != '') {
  18. 						$newcart .= ','.$item;
  19. 					} else {
  20. 						$newcart = $item;
  21. 					}
  22. 				}
  23. 			}
  24. 			$cart = $newcart;
  25. 		}
  26. 		break;
[PHP] pobierz, plaintext


bez zmian i prób będzie mi ciężko zrozumieć/nauczyć się a chyba nie o to w tym chodzi aby dostać gotowy kod i reszte olać wink.gif
cycofiasz
23.01.2012, 00:08:32
Jak kod bez zmian zadziała to wtedy zacznij sobie modyfikować skrypt.
pa-jong
23.01.2012, 00:15:12
kod sam w sobie zadziałał wysłało id/symbol ale do koszyka nie zapisało bo brakło wspomnianego parametru add wink.gif

// edit
no i mam smile.gif 
[PHP] pobierz, plaintext 
  1. <a href='java script:ddk(\"".StringToHTML($arrRow["Symbol"])."\",\"add\")'>
  2.  
  3. ...
  4.  
  5. <script type='text/javascript'>
  6. function ddk(idp,akcja)
  7. {
  8. 		$.ajax({
  9. 			url: 'cart.php',
  10. 			type: 'POST',
  11. 			data: {
  12. 				tryb : 'dodaj_do_koszyka' ,
  13. 				id_przedmiotu : idp,
  14. 				action: akcja
  15. 			},
  16. 			success: function(odpowiedz)
  17. 			{
  18. 				alert('odpowiedz');
  19. 			},
  20. 			error: function(){alert('Błąd połączenia ajax');}
  21. 		});
  22. }
  23. </script>
  24.  
[PHP] pobierz, plaintext


czyli dobrze kombinowałem wink.gif
maniek.kos
4.01.2013, 22:50:35
Witam, nie chcę rozpoczynać nowego tematu, aby nie zaśmiecać niepotrzebnie.

Przeczytałem wątek, może źle coś zrozumiałem, bo po kliknięciu na <a href='java script:ddk(\"1\",\"add\")'>klik</a> przenosi mnie na adres java script:ddk(\"1\",\"add\")'

Dodałem jquery do metatagów, a kod wkleiłem w sekcji body.

Co zrobić, aby po kliknięciu na dodaj do koszyka nie przenosiło na podstronę i wyświetlał się taki dymek jak na http://portaldemo.endor.pl/Sklep,53.html questionmark.gif

Pozdrawiam

PS, można do tego to wykorzystaćquestionmark.gif http://needim.github.com/noty/
Gość
5.01.2013, 00:10:33
(noty) można wykorzystać
jak już stosować to rozwiązanie, które jest opisane w tym wątku, to w odnośniku protokół javascript należy wpisać bez odstępu, oprogramowanie forum wstawia spację, dlatego tak wygląda i dlatego przeglądarka próbuje otworzyć taki adres
maniek.kos
5.01.2013, 01:56:20 
[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. 	<title></title>
  5.  
  6. 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  7.  
  8. </head>
  9. <body>
  10.  
  11.      <a href='java script:ddk("1","add")'>Dodaj do koszyka</a>
  12.      <script type='text/javascript'>
  13. function ddk(idp,akcja)
  14. {
  15. $.ajax({
  16. url: 'ajax.php',
  17. type: 'POST',
  18. data: {
  19. tryb : 'dodaj_do_koszyka' ,
  20. id_przedmiotu : idp,
  21. action: akcja
  22. },
  23. success: function(odpowiedz)
  24. {
  25. alert('odpowiedz');
  26. },
  27. error: function(){alert('Błąd połączenia ajax');}
  28. });
  29. }
  30. </script>
  31.  
  32. </body>
  33. </html>
[HTML] pobierz, plaintext



Skrypt łaczy się z plikiem ajax.php i pokazuje odpowiedź w okienku "odpowiedz" czyli rozumiem, że pliki łącza się.

Pomoże mi ktoś jak zrobić, żeby to okienko zamieniło się na diva css? tak ja na powyższej stronie lub z użyciem "noty"?
Gość
5.01.2013, 17:55:11
Dodajesz wymagane pliki w header po wpisie ładującym jquery. Jakie pliki są wymagane masz opisane przy instalacji. Przykład:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="js/noty/jquery.noty.js"></script>
  2. <script type="text/javascript" src="js/noty/layouts/center.js"></script>
  3. <script type="text/javascript" src="js/noty/themes/default.js"></script>
[HTML] pobierz, plaintext

Zwróć uwagę na ścieżki, w przykładzie zakładam, że pliki (noty) są w katalogu js/noty. Następnie zamiast alert('...') w wierszu 25. w Twoim kodzie wstawiasz np.
Kod
noty({text: 'Produkt dodano do koszyka', layout: 'center'});

Albo jakiś inny kod wywołujący noty, jakie mogą być parametry masz opisane w dokumentacji
maniek.kos
5.01.2013, 23:16:28
Dzięki smile.gif Wszystko elegancko działa jak należy.

Można ustawić jakoś czas wyświetlania komunikatu tego dymku? żeby np po 3 sekundach zniknał?

Drugie pytanie
Jak zrobić aby po kliknięciu na dodaj do koszyka od razu pokazywało takie coś "Twój koszyk(15zł)" i aktualizowało się za każdym kliknięciem.

Odczytywanie z tablicy jakiejś tymczasowej to już sobie poszukam rozwiązania, bo sql chyba raczej nie ?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.