Kawa Salvatti jest tak dobra, że zasłużyła na własną sekcję w naszym sklepie jbm.pl

W części głównej znajduje się slider złożony z 12 kart - bo właśnie w tylu wariantach na obecną chwilę produkowanych jest kaw Salvatti, pochodzących z różnych regionów położonej wysoko nad poziomem morza Rwandy, w Afryce. Każda z kaw różni się aromatem, stopniem wypalenia ziaren, poziomem kwasowości oraz... dedykowaną grafiką, stworzoną ręcznie przez współpracującą z nami artystkę-grafika. O unikatowości tej sekcji stanowi galeria 12 dzieł, personifikujących prezentowane przez nie kawy. Warto zajrzeć na stronę choćby dlatego, że to jedyne miejsce, gdzie można zapoznać się z ową sztuką - przynamniej do chwili, aż nie doczeka się własnej wystawy 😊.

Wygląd głównego slidera jak i całej podstrony również został zaprojektowany przez ową twórczynię, której personalia ujawnię dopiero po otrzymaniu zgody. Poszczególne karty posiadają swoje odpowiedniki w wersji mobilnej (z obsługą dotykową), co łącznie daje aż 24 osobne projekty:

Wartą uwagi jest sekcja opisująca alternatywne sposoby parzenia. Jest to odrębna podstrona, z której sam często korzystam, nawet wtedy, gdy sięgam po - jak mi się zdawało - dość prosty w obsłudze "french press". Zaczerpnięte stąd uwagi zastosowane w praktyce dają zdumiewające efekty, jeżeli chodzi o smak przygotowywanego w ten "trywialny" sposób naparu. Tutaj na prawdę istotny jest każdy szczegół. A przedstawionych w ten sposób zostało aż 6 metod.

Poza samą instrukcją parzenia można tam odnaleźć szczegóły dotyczące asortymentu, jaki przy odpowiedniej metodzie powinien zostać użyty, dokładne ilości kawy i wody (co ma ogromne znaczenie, a co sam często pomijałem, robiąc "na oko" 😉), a także odnośniki do produktów, które znajdują się w ofercie sklepu jbm.pl

A teraz słów parę o zastosowanej technice...

Wszystkie slidery znajdujące się na podstronie napisane zostały metodą obiektową (OOP) i stanową przerobioną oraz dostosowaną do nowych potrzeb wersję slider-banner'a ze strony głównej (jbm.pl). Struktura powstała w HTML.

Ciekawostką jest fakt, że każda z kart posiada wbudowany slider produktowy, który stanowi instancję do innej funkcji - to prawie jak programowanie za pomocą komponentów w React JS'sie 😉. Jednak w środowisku react'owym byłoby to znacznie prostsze i bardziej intuicyjne...

Style generuje preprocesor SCSS, a sam projekt został stworzony w wersji na dekstop i mobile - zgodnie z podejściem "Mobile First Design". Pewnym wyzwaniem było dla mnie wyświetlanie 3 kart jednocześnie - zgrać się tutaj musiały funkcje JS z CSS'owym Gridem, w którym nie czuję się aż tak swobodnie jak chociażby we Flex'ie.

Ukończenie projektu dało mi dużą dawkę satysfakcji, głównie z powodu jego niepowtarzalności i waloru artystycznego, z którym miałem przez cały ten czas kontakt. Uważam, że to bardzo ciekawy i dość innowacyjny sposób na zapoznanie się z niszowymi gatunkami czarnych ziaren spod znaku Salvatti. Nadmienię tylko, że kupując tę kawę działamy charytatywnie, wspierając Pallotyńską Fundację Misyjną - która prowadzi misję w m.in. w Rwandzie. Po więcej szczegółów zapraszam do odwiedzenia strony. Link znajduje się standardowo - na górze, zaraz pod tytułem posta. Jakiekolwiek lokowanie produktu jest oczywiście przypadkowe 😉. Życzę pysznej kawusi ☕️ 😍!