« powrót

Koszyk sklepowy w JavaScript

Opublikowano: 2009-07-28 , wyświetlono: 25587

  1. Opis
  2. Przykładowy koszyk
  3. Specyfikacja klas i metod
  4. Kod źródłowy operacji na 'koszyku'
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
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'



Komentarze:

gówno

ale gówno. nie działa

2012-02-26 gówno
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

2016-03-20 Danie
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ł :)

2019-08-15 JacekM
Nie działa

Nie działa strata czasu

2019-09-29 Nie działa
Prosze o więcej szczegółów

Proszę o informacje, w którym momencie jest to nieprawidłowe działanie

2019-09-29 JacekM