Porównywarka - wybór technologii.

0

Interesuje mnie wykonanie porównywarki danych technicznych. Coś jak na stronie z aparatami foto: https://www.dpreview.com/products/canon/cameras?subcategoryId=cameras

Klikamy w "+" przy miniaturce aparatu i pojawia się na dole "to coś" co chciałbym wykonać, a nawet nie wiem jak to się fachowo nazywa... Dashboard ??
( Po wybraniu kilku aparatów mamy możliwość wyrzucenia tabeli porównawczej. Mnie jednak chodzi głównie o ten pasek na dole, na którym wybiera się produkty do porównania ).

Jakie to się nazywa po angielsku / jakie technologię będą najlepsze do wykonania takiego "paska" produktów do porównania?. Czy czysty JS wystarczy? Czy raczej coś pokroju Angulara?

Idealnie, jakby dało się przy tym zastosować również RWD.

Proszę o hasła i naprowadzenie na odpowiednie technologie, resztę wygoooglam.

0

Potrzebna Ci będzie znajomość:

  1. HTML
  2. CSS
  3. Javascript. W Twoim przypadku wystarczy czysty javascript (bez żadnych bibliotek). Kodu javascriptowego jest naprawdę mało bo potrzebny Ci on będzie tylko od obsługi +. Jeżeli jednak jest to jeden z elementów Twojego serwisu to warto jednak dodać jakąś bibliotekę, która Ci ułatwi życie. Do wyboru masz jQuery/Vue.js.

Co do samych produktów to masz dwie opcje:

Jeżeli chcesz trzymać produkty u siebie w bazie:

  1. Jakaś technologia po stronie serwera, np. Python/PHP/Node.js
  2. Jakaś baza mysql/postgresql/mongodb

Jeżeli pobierasz listę produktów z jakiegoś zewnętrznego API (jeżeli nie wiesz o co chodzi, to prawdopodobnie opcja 1 ;)):

  1. Z pomocą przyjdzie Ci funkcja fetch. Oczywiście jeżeli nie używasz jQuery i Twój serwis jest większy niż ta jedna porównywarka to biblioteka do wykonywania asynchronicznych requestów też Ci się przyda, np. axios.

Co do nazwy, to oni nazwali to shortList, ale nie ma na to nazwy fachowej :P

0

Dzięki za szczegółowe opisanie, interesował mnie wyłącznie front-end i tylko ten "pasek" na dole. Nie bardzo wiem jak zrobić żeby ten pasek był na innej warstwie (tj. strona główna porusza się pod nim, a pasek zostaje w miejscu i dotyka dolnej krawędzi przeglądarki, na pasku pojawiają się kolejno dodane produkty). JS-a nie znam wcale, dlatego dla mnie takie coś to czarna magia.

Zimny Orzech

0

Zadajesz dobre pytania, teraz tylko je przetłumaczyć na angielski i wrzucić do googla. Słowo klucz: page move div sticks. Jeżeli chodzi o dodawanie produktów, to w js jest coś takiego jak eventy: click, mousedown, scroll itd. Możesz się do nich "podpiąć" używając addEventListener. Ciebie interesuje, żeby po kliknięciu na dany element został on , ten div, skopiowany. Spróbuj poszukać, może Ci się uda znaleźć.

0

Dzięki jeszcze raz!

Sądziłem, że to typowe rozwiązanie i ma jakąś nazwę. Tak jak np. "infinite scroll" czy "slider / carouselle", itd.

Dzięki za podpowiedzi, JS-a, czy przynajmniej TS i tak zamierzam się nauczyć, więc wcześniej czy później rozwiąże swój problem.

Zimny Orzech

1 użytkowników online, w tym zalogowanych: 0, gości: 1