Koszyk sklepowy w JavaScript
Opublikowano: 2009-07-28 , wyświetlono: 26134
1. Opis
2. Przykład działania 'koszyka'
Przykładowy skrypt wstawiony na stronę, który obsługuje wyświetlanie zawartości 'koszyka' oraz umożliwia usunięcie pojedynczej pozycji.
Zawartość Twojego "koszyka" zakupów
Dodaj towary do koszyka
3. Specyfikacja klas i metod
Na 'koszyk' składają się trzy klasy. TShopBasket zapewnia obsługę 'koszyka'. Klasy TItem oraz TListItem służą jako podstawy dla klasy TShopBasket i nie jest konieczna znajomość ich metod by posłużyć się 'koszykiem'. Dlatego też pominę szczegółowy opis tych klas.
2. Przykład działania 'koszyka'
Przykładowy skrypt wstawiony na stronę, który obsługuje wyświetlanie zawartości 'koszyka' oraz umożliwia usunięcie pojedynczej pozycji.
Lp | Nazwa | Ilość | Cena | Wartość |
Dodaj towary do koszyka
3. Specyfikacja klas i metod
Na 'koszyk' składają się trzy klasy. TShopBasket zapewnia obsługę 'koszyka'. Klasy TItem oraz TListItem służą jako podstawy dla klasy TShopBasket i nie jest konieczna znajomość ich metod by posłużyć się 'koszykiem'. Dlatego też pominę szczegółowy opis tych klas.
TItem - klasa odpowiadająca za jedną pozycję koszyka
TListItem - klasa służy do obsługi listy pozycji
TShopBasket - klasa na której wykonuje się działania
Add(Integer identyfikator, String kod_towaru,
String nazwa, Float ilosc, Float cena,
Float stawka_podatku)
- dodaje nową pozycję do koszyka
Remove(Integer nr_pozycji)
- usuwa pozycję o podanym numerze
Update(Integer identyfikator, String kod_towaru,
String nazwa, Float ilosc, Float cena,
Float stawka_podatku)
- aktualizuje pozycję o podanym identyfikatorze
Float NetAmount()
- zwraca wartość netto koszyka
Float BrtAmount()
- zwraca wartość brutto koszyka
Clear()
- czyści zawartośc koszyka
Integer GetId(Integer nr_pozycji)
- zwraca identyfikator pozycji o podanym numerze
String GetCode(Integer nr_pozycji)
- zwraca kod pozycji o podanym numerze
String GetName(Integer nr_pozycji)
- zwraca nazwę pozycji o podanym numerze
Float GetQuant(Integer nr_pozycji)
- zwraca ilość pozycji o podanym numerze
Float GetNetPrice(Integer nr_pozycji)
- zwraca wartość brutto pozycji o podanym numerze
Float GetBrtPrice(Integer nr_pozycji)
- zwraca wartosc brutto pozycji o podanym numerze
Float GetTax(Integer nr_pozycji)
- zwraca wartość vat pozycji o podanym numerze
Float GetNetAmount(Integer nr_pozycji)
- zwraca wartość netto pozycji o podanym numerze
Float GetBrtAmount(Integer nr_pozycji)
- zwraca wartość brutto pozycji o podanym numerze
Integer Count()
- zwraca ilość pozycji w koszyku
Write()
- zapis zawartości koszyka jako coockie na lokalny komputer klienta
Read()
- odczyt zawartości koszyka jako coockie na lokalny komputer klienta
<!-- funkcja wyswietlajaca zawartosc elementow koszyka-->
<SCRIPT LANGUAGE="JavaScript" SRC="/china2/site/files/js/coockie.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="/china2/site/files/js/js/tshopbasket.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
//
// funkcja dodajaca element do koszyka
function AddBasket(nIndex)
{
var basket = new TShopBasket();
basket.Read();
if (nIndex == 1)
{
basket.Add(1, "0001", "pietruszka", 0.30, 1.40, 0.07)
}
if (nIndex == 2)
{
basket.Add(1, "0002", "marchewka", 0.60, 1.20, 0.07)
}
if (nIndex == 3)
{
basket.Add(1, "0003", "pomidory", 1.20, 4.50, 0.22)
}
basket.Write();
window.location.reload();
}
//
// funkcja czyszczaca zawartosc koszyka
function ClearBasket()
{
var basket = new TShopBasket();
basket.Read();
basket.Clear();
basket.Write();
window.location.reload();
}
//
// funkcja formatujaca liczbe jako waluta
function FormatNumeric(nVal)
{
var nInt = Math.round(nVal * 100);
var nRest = nInt % 100;
var cRest = new String(nRest);
if (cRest.length < 2)
cRest = cRest + "0";
nInt = parseInt(nInt / 100)
return String(nInt + "." + cRest);
};
//
// wyswietlenie tabeli z zawartoscia koszyka
function DisplayBasket()
{
var basket = new TShopBasket();
var i;
var nAmount = 0;
basket.Read();
if (basket.Count() < 1)
{
document.write("<TR>TD COLSPAN=\"6\">Koszyk jest pusty</TD></TR>");
return -1;
}
for (i = 0; i < basket.Count(); i++)
{
document.write("<TR><TD>");
document.write(i+1);
document.write("</TD>");
document.write("<TD>");
document.write(basket.GetName(i));
document.write("</TD>");
document.write("<TD ALIGN=\"right\">");
document.write(basket.GetQuant(i));
document.write("</TD>");
document.write("<TD ALIGN=\"right\">");
document.write(FormatNumeric(basket.GetNetPrice(i)));
document.write("</TD>");
document.write("<TD ALIGN=\"right\">");
document.write(FormatNumeric(basket.GetNetAmount(i)));
document.write("</TD>");
document.write("<TD ALIGN=\"center\">");
document.write("<INPUT TYPE=\"button\" NAME=\"REMOVE\" VALUE=\"Usuń\"");
document.write(" onclick='BasketRemoveItem(");
document.write(basket.GetId(i));
document.write(")'></TD></TR>");
nAmount += basket.GetNetAmount(i);
}
// podsumowanie koszyka
document.write("<TR><TD COLSPAN=\"4\"> </TD>");
document.write("<TD ALIGN=\"right\"><B>");
document.write(FormatNumeric(nAmount));
document.write("</B></TD><TD> </TD></TR>");
return 0;
}
// usuniecie elementu z koszyka i refresh strony
function BasketRemoveItem(nId)
{
var basket = new TShopBasket();
var i;
var nAmount = 0;
basket.Read();
basket.Remove(nId);
basket.Write();
location.reload();
}
</SCRIPT>
<a name="#przyklad">
<b>2. Przykład działania 'koszyka'</b>
<br><br>
Przykładowy skrypt wstawiony na stronę, który obsługuje wyświetlanie
zawartości 'koszyka' oraz umożliwia usunięcie pojedynczej pozycji.
<br><br>
<center>
<b>Zawartość Twojego "koszyka" zakupów</b><br>
<table bgcolor="#000000" border="1" cellspacing="0" width="90%">
<tr><td width="5%">
<B>Lp</B>
</td>
<td width="40%">
<B>Nazwa</B>
</td>
<td width="15%">
<B>Ilość</B>
</td>
<td width="15%">
<B>Cena</B>
</td>
<td width="15%">
<B>Wartość</B>
</td>
<td width="10%">
</td>
</tr>
<SCRIPT LANGUAGE="JavaScript">
DisplayBasket();
</SCRIPT>
</table>
<BR><BR>
<input type="button" name="Clear" value="Opróżnij koszyk"
onClick="JavaScript: ClearBasket();">
<BR><BR>Dodaj towary do koszyka<br>
<input type="button" name="Clear" value="Pietruszka" onClick="JavaScript: AddBasket(1);">
<input type="button" name="Clear" value="Marchewka" onClick="JavaScript: AddBasket(2);">
<input type="button" name="Clear" value="Pomidory" onClick="JavaScript: AddBasket(3);">
</center>
<br>
Nowsza wersja 'koszyka'
Nowsza, poprawiona i rozszerzona wersja dostępna jest
TUTAJ
TUTAJ
Komentarze:
gówno
ale gówno. nie działa
Proszę o pomoc
A co jakbym zechciał mieć 2 niezależne koszyki na 2 niezależnych cookie ? bo mam z tym problem tworzy tylko 1 lub tylko 2 cookie
Odp: dwa koszyki
Zawartośc koszyka przechowywana jest w zmiennej: var basket = new TShopBasket(); Można zduplikować klasę JS zmieniając odpowiednio nazwy metod dla drugiego koszyka lub pokusić się o dodanie właściwości NumerKoszyka i zmienić kod by obsługiwał dowolną ich ilość. To drugie rozwiązanie zdecydowanie bym polecał :)
Nie działa
Nie działa strata czasu
Prosze o więcej szczegółów
Proszę o informacje, w którym momencie jest to nieprawidłowe działanie