Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Utworznie za pomocą AngularJS prostego koszyka na zakupy – część druga

by
Difficulty:IntermediateLength:MediumLanguages:

Polish (Polski) translation by Agnieszka Górczyńska (you can also view the original English article)

W poprzedniej części zobaczyłeś, jak rozpocząć pracę nad utworzeniem w AngularJS prostego koszyka na zakupy. Wprawdzie przygotowaliśmy projekt, ale okazał się zbyt prosty, aby móc go określić mianem aplikacji AngularJS. W tej części serii opracujemy własną dyrektywę AngularJS przeznaczoną do implementacji wymaganej funkcjonalności.

Rozpoczęcie pracy

Pracę rozpoczynamy od sklonowania z serwisu GitHub kodu źródłowego utworzonego w poprzednim artykule.

Następnie przechodzimy do katalogu projektu i instalujemy wymagane zależności.

Po zainstalowaniu zależności można uruchomić serwer.

Jeżeli w przeglądarce internetowej wpiszesz adres http://localhost:3000/, zobaczysz uruchomioną aplikację.

Utworzenie dyrektywy

Wyświetlane na stronie cart.html produkty i opcje powtarzają się. Opracujemy więc dyrektywę AngularJS przeznaczoną do tworzenia produktów i opcji na podstawie dostarczonych danych. W celu zachowania prostoty przyjmujemy założenie, że zawartość koszyka na zakupy przedstawia się następująco:

W kontrolerze CartCtrl umieść poniższe dane.

W pliku cart.html usuń powtarzające się elementy o klasie  .panel. Kod HTML będzie tworzony dynamicznie za pomocą dyrektywy ngRepeat i danych umieszczonych w $scope.shopData. W pierwszej kolumnie znacznika <div> o klasie .row umieść poniższy kod HTML.

Jak możesz zobaczyć w powyższym fragmencie kodu, użycie dyrektywy ngRepeat pozwala na przeprowadzenie iteracji przez dane shopData i wygenerowanie kodu HTML. Zapisz wprowadzone zmiany i ponownie uruchom serwer. Po odświeżeniu strony zobaczysz na niej nowo dodane produkty.

Cart Page With Items

Kolejnym krokiem jest wyświetlenie opcji dla poszczególnych produktów, na przykład pojemności dysku, szybkości procesora, ceny itd. (spójrz na przedstawione wcześniej dane JSON). Do tego celu przygotujemy własną dyrektywę. W AngularJS dyrektywa to komponent, który oferuje najpotężniejsze możliwości. Więcej informacji szczegółowych na temat dyrektyw AngularJS znajdziesz w oficjalnej dokumentacji.

Opracujemy własną dyrektywę o nazwie checkList. Otwórz plik cart.js, a następnie wprowadź przedstawiony poniżej kod:

Jak wcześniej wspomniałem, dyrektywa nosi nazwę checkList. Powyższa dyrektywa ma dwa parametry: restrict i template. Parametr restrict definiuje sposób wywołania dyrektywy. Ponieważ wymienionemu parametrowi przypisaliśmy wartość E, dyrektywa będzie wywoływania podobnie jak znaczniki:

Z kolei parametr template zawiera kod HTML zastępujący dyrektywę checkList na wygenerowanej stronie. Tutaj wykorzystaliśmy dokładnie ten sam statyczny kod HTML, który poznałeś już wcześniej. Teraz możemy już wywołać dyrektywę checkList na stronie cart.html.

Zapisz wprowadzone zmiany i odśwież stronę koszyka na zakupy. Zobaczysz wyświetlone statyczne opcje HTML dla poszczególnych produktów.

Cart Page with Directive

Musimy nieco zmodyfikować dyrektywę, aby odczytywała dane zdefiniowane w $scope.shopData. Przede wszystkim, zamiast powtarzać opcje w dyrektywie, wykorzystamy ngRepeat do iteracji przez przygotowane dane. Po wprowadzeniu poniższych zmian, dyrektywa checkList będzie działała w sposób dynamiczny.

Jak widać w powyższym fragmencie kodu, dyrektywie należy przekazać pewne dane. Dlatego też musimy zdefiniować atrybut o nazwie option i za jego pomocą przekazać dyrektywie wymagane dane. W pliku cart.html dodaj atrybut option, jak pokazano poniżej:

W celu uzyskania w dyrektywie dostępu do przekazanego atrybutu option konieczne jest zdefiniowanie zakresu. W następujący sposób zdefiniuj zakres scope w dyrektywie checkList:

Tym samym dyrektywie zostanie przekazana lista cen różnych produktów, których dane znajdują się w $scope.shopData. Zapisz wprowadzone zmiany i ponownie uruchom serwer. Po odświeżeniu strony zobaczysz, że poszczególne produkty na stronie mają przypisane odpowiednie opcje.

Cart Page With Dyancamilly Populated Options

Jeżeli teraz spróbujesz kliknąć przycisk opcji wybranego produktu to przekonasz się, że zostają zaznaczone obie opcje. Aby mieć gwarancję wyboru tylko jednej opcji, musimy odpowiednio pogrupować przyciski. To wymaga przekazania z widoku HTML do dyrektywy kolejnego atrybutu o nazwie name. W dyrektywie check-list umieść nowy atrybut o nazwie name. Wartością atrybutu name będzie ID, co zapewni unikatowe rozróżnianie poszczególnych produktów.

Do zakresu dyrektywy dodajemy kolejną zmienną, która będzie dostępna w szablonie dyrektywy.

W kodzie HTML parametru template przekazana wartość będzie użyta jako nazwa przycisku opcji, który grupuje opcje poszczególnych produktów.

Zapisz wprowadzone zmiany i odśwież stronę. Spróbuj zaznaczyć opcje dla wybranego produktu, a przekonasz się, że możesz wybrać tylko jedną z nich.

Obliczenie kwoty całkowitej na podstawie wybranych opcji

Na podstawie produktów wybranych przez użytkownika można wyświetlić kwotę całkowitą wszystkich produktów znajdujących się w koszyku. Utworzymy teraz funkcję $scope.total() odpowiedzialną za obliczenie wspomnianej sumy. Gdy użytkownik wybierze produkt, wtedy nastąpi uaktualnienie zmiennej w danych JSON $scope.shopData. Następnie jest przeprowadzana iteracja przez wspomniane dane JSON, aby obliczyć wartość całkowitą wybranych produktów. Poniżej przedstawiłem kod źródłowy funkcji $scope.total():

Obecnie element <div> wyświetla na stałe zdefiniowaną wartość Rs 100. Wprowadzamy modyfikację, aby zamiast na stałe zdefiniowanej wartości następowało wywołanie przygotowanej wcześniej funkcji.

Zapisz wprowadzone zmiany i odśwież stronę. Zauważ, że mimo wyboru różnych opcji, wartość całkowita nie ulega zmianie. Takie zachowanie wynika z faktu przypisania wartości początkowej 0 zmiennej selected w danych JSON. Wymieniona wartość nie jest uaktualniana po wybraniu opcji. Musimy więc nie tylko przekazać dyrektywie wybraną wartość, ale jeszcze uaktualnić ją po zaznaczeniu przycisku opcji. Zmodyfikuj kod widoku HTML w taki sposób, aby zawierał dodatkowy atrybut selected w elemencie dyrektywy checkList.

Do zakresu dyrektywy dodaj zmienną selected. Tym samym zyskasz możliwość dostępu do wymienionego atrybutu z poziomu dyrektywy.

Wprowadzamy kolejne modyfikacje w kodzie. W dyrektywie ngModel przycisku opcji ustawiamy selected, natomiast w dyrektywie ngValue ustawiamy i.price. Teraz po zaznaczeniu przycisku opcji nastąpi uaktualnienie wartości atrybutu selected w danych JSON $scope.shopData.

Zapisz wprowadzone zmiany i odśwież stronę. Spróbuj zaznaczać różne przyciski opcji. Zwróć uwagę, że w wyświetlana w ramce Total suma jest obliczana na podstawie wybranych opcji.

Cart Page With Total

Podsumowanie

W tej części serii opracowaliśmy własną dyrektywę i wykorzystaliśmy ją w naszej prostej aplikacji koszyka na zakupy. W kolejnej części zobaczysz, jak zachować stałe położenie elementu Total na górze ekranu podczas przewijania strony. Zaimplementujemy także stronę finalizacji zamówienia wyświetlającej wybrane produkty i ceny. Wspomniana strona będzie zawierać przycisk pozwalający klientowi na powrót do koszyka i zmianę wybranych produktów.

Kod źródłowy przedstawiony w artykule znajdziesz w serwisie GitHub. Jeżeli masz jakiekolwiek uwagi, sugestie lub znalazłeś błąd w tekście, koniecznie napisz o tym w komentarzu.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.