Tworzenie selektora na liczbę produktów w koszyku

Utworzenie tego selektora jest niezbędne do prawidłowego działania scenariusza "porzucony koszyk".
Krok 1. Wejdź na stronę swojego sklepu i dodaj przedmiot do koszyka.
Krok 2. Kliknij prawym przyciskiem myszy na ikonę koszyka z liczbą produktów i wybierz opcję “Zbadaj”.
Krok 3. Otworzy się DevTools na zakładce Elements z zaznaczonym fragmentem kodu odpowiadającym za licznik produktów dodanych do koszyka
Krok 4. Stwórz selektor na element zawierający w sobie liczbę produktów w koszyku.
Selektor najlepiej zrobić w oparciu o element “id” (który jest elementem unikalnym) lub “class”. Selektor party na “id” musi rozpoczunać się do znaku # natomiast selektor oparty o “class” musi rozpoczynać się od kropki na przykład: .nazwa_elementu_class
Dla powyższego przykładu selektor będzie wyglądał następująco .counter-number , ponieważ odnosimy się do “class” o nazwie tego elementu “counter-number”, w którym zawiera się informacja o liczbie produktów w koszyku. 

Więcej o budowie selektorów znajdziesz tutaj: https://www.w3schools.com/cssref/css_selectors.asp​
Krok 5. Tak stworzony selektor należy sprawdzić na stronie (gdyż musi wskazywać na dokładnie jeden element na stronie) => w zakładce “Elements” klikamy Ctrl+F i wpisujemy tam nasz selektor. Jeżeli wskazuje “1 of 1” to znaczy że został on wykonany poprawnie.
Krok 6. Sprawdź w zakładce “Console” czy stworzony selektor zwraca pożądaną wartość. Wpisz komendę document.querySelector('').innerText a pomiędzy znaki '' wstaw swój selektor. Poniżej powinna się wyświetlić liczba produktów którą miałeś w koszyku.
Krok 7. Taki selektor mozna wkleić do aplikacji do znajdującego się tam szablonu.
​
Last modified 1yr ago