Edycja szablonu RWD oprogramowania Shoper – Poradnik cz. 1

Za sprawą brata Gugla i jego kwietniowych zmian w ocenie stron, a dokładnie to oficjalne informacje o tym, że strony nie wspierające technologi mobilnych będą wyświetlały się niżej w wynikach wyszukiwania.

Popłoch wśród właścicieli zarówno stron jak i sklepów internetowych był widoczny gdzieś od marca a dziś widać, że większość nowo powstających biznesów ekomersowych stawia na  technologie Responsywne.

Tych którzy zostali przy klasycznej wersji szablonu uspokajam, nie powinniście się bardzo obawiać bo wystarczy aktywować wersję mobilną (tak tak RWD a typowy szablon mobilny to nie to samo) w Waszym sklepie a Google będzie zaspokojone.

Oczywiście osobiście polecam wersje RWD bo jest dużo bardzie ?user friendly?  a przede wszystkim jej kod jest bardziej nowoczesny i zwyczajnie lepszy 🙂 ale nie skreślam całkowicie szablonów klasycznych. Szczególnie jeżeli planujecie przesycić Wasz sklep graficznie klasyk nada się idealnie.

Jeżeli nie wiesz co dokładnie oznacza pojęcie Responsywność to polecam poszperać w Wikipedii. Nie chcę tu się zbytnio rozwodzić nad teorią RWD bo w sieci jest sporo materiałów na ten temat ale dla zwiększenia czytelności mojego dzisiejszego wpisu wspomnę o kilku podstawowych kwestiach.

RWD (z ang. Responive Web Design) to takie podejście do budowy (wyglądu) stron www które ma zadbać o to by urządzenie na którym przeglądamy dane treści nie miało znaczenia. Czyli to treść Waszych sklepów ma się dostosować do mojego urządzenia w sposób który zapewni mi możliwie najlepszą ?używalność? a ja jako użytkownik końcowy nie muszę się zastanawiać czy mam odpowiednio duży ekran, odpowiednią przeglądarkę itd itp.

Z punktu widzenia grafika czy też wdrożeniowca Responsywne podejście do budowy stron wprowadza odrobinę więcej pracy na etapie planowania i nakłada sporo ograniczeń na kreatywność grafików. Wszystko co zostanie wymyślony musi być ocenione pod kątem zachowania na różnych urządzeniach (czyli w różnych warunkach) tak by grafika była spójna niezależnie od tego czy sklep ma 1200px szerokości czy 300px.

Praca na gotowym szablonie to kolejne ograniczenie którego należy być świadomym.

W budowie stron RWD możemy wyróżnić dwa główne podejścia:

Fluid – to taka odmiana RWD w której wszystkie elementy na stronie mają płynne (najczęściej procentowe) szerokości. Treści takich stron najczęściej wypełniają całą przeglądarkę.

Boxed – w przeciwieństwie do Fluid ma narzucone szerokości elementów na stronie. Treści są najczęściej zamykane w boksie którego szerokość zmieniana jest krokowo a nie płynnie.

Shoper w swoim szablonie używa właśnie tego drugiego podejścia. Wykorzystanie wersji boxed w budowaniu treści jest bowiem dużo bardzie przewidywalne w sytuacjach w których tak naprawdę nie wiemy co ostatecznie zostanie dodane. Łatwiej też dodać możliwość zarządzania modułami i określania podziału na kolumny.

W zapowiedzi tego wpisu podesłałem Wam link (developers.shoper.pl) do strony producenta oprogramowania z pomocą dotyczącą zarówno szablonów uniwersalnych jak i informacją pomocnym w tworzeniu własnych aplikacji. Polecam raz jeszcze zapoznanie się z treścią tej strony (choćby tylko z podstawowymi informacjami).

Jak zawsze zakładam, że posiadacie choć odrobinę wiedzy z zakresu HTML/CSS. Na stronie pomocy dla wdrożeniowców znajdziecie bardzo pomocne informacje na temat GRID?a. Czyli najprościej ujmując siatce elementów HTML która posiada z góry określone właściwości  (np szerokość) pozwalające na poprawne (a raczej przewidywalne) wyświetlanie się treści które chcecie dodać do strony sklepu.

Znajomość grida znacznie ułatwi Wam życie w pracy przy dodawaniu responsywnych elementów do sklepu.

W moich poradnikach (np w tym) pojawią się elementy grida więc raz jeszcze polecam by zobaczyć jak to wygląda.

Przy wprowadzaniu RWD do systemu Shoper pojawiła się jeszcze jedna nowinka o której możliwe, że już wiecie. Zamiast konieczności używania standardowego kodu CSS dano nam możliwość zastosowania trochę bogatszego LESS.

Tak, wiem. Kolejny zestaw dużych liter 🙂 Najważniejsze co powinniście wiedzieć to to że LESS to praktycznie to samo co CSS tylko wzbogacone o kilka przydatnych funkcji. Jeżeli więc udało Wam się już kiedyś poznać choć odrobinę formuł CSS to możecie je swobodnie wykorzystywać w LESS.

W każdym z poradników będę się starał przybliżać Wam jakąś funkcję LESS która może ułatwić Wam życie w dłuższej perspektywie.

Ok, strasznie się rozpisałem a nie wiecie nawet o czym ma być dzisiejszy poradnik.

Przejdźmy zatem do sedna wpisu w którym nauczę Was tworzyć responsywne moduły w oparciu o GRID Shopera i uzupełnione o jakieś drobne bajery w postaci prostej transformacji 2D.

Moduł o którym mowa pojawi się między innymi w jednym z naszych szablonów i składa się z kilku bloków z grafiką które mogą zostać podlinkowane.

Na potrzeby tego poradnika moduł został trochę uproszczony i powinien wyglądać tak:

b-sp1-s1

Przejdźmy zatem do sedna sprawy:

Krok 1 – przygotuj sobie 6 plików graficznych o rozmiarze przynajmniej 300 na 300px i nazwij je np od zd1 do zd8.

Krok 2 – przejdź do działu Konfiguracja/Wygląd/Aktywny styl graficzny.

Krok 3 – z lewej strony ekranu wybierz zakładkę Moduły a następnie kliknij na przycisk ?Dodaj moduł?.

Krok 4 – wypełnij informacje podstawowe takie jak Tytuł modułu (np: boksy front), HTML ID: (tu wpisz bfront)

Krok 5 – kliknij na ikonę dodania zdjęcia a następnie wybrania źródła. Jeżeli wcześniej wgrałeś pliki do sklepu to zwyczajnie użyj jednego z nich a jeżeli jeszcze ich nie masz wgranych to użyj funkcji dodania plików.

Uwaga!!! – przy wybraniu zdjęcie z dostępnej bazy system automatycznie wypełnia pola wysokość i szerokość odpowiednimi wartościami. Pamiętaj by usunąć wartość szerokość. Jeżeli będzie tam wpisana jakaś liczba to zdjęcie nie będzie responsywne.

Krok 6 – wyłącz edytor tekstu który widzisz klikając na przycisk w jego prawym górnym rogu. Chodzi o to by kod HTML który będziemy używać nie został potraktowany jako tekst.

Po wcześniejszym dodaniu zdjęcia powinieneś widzieć coś podobnego do:

b-sp1-s2

Krok 7 – w tym kroku będziemy musieli zabawić się trochę kodem HTML. W tym celu zapraszam na stronę https://developers.shoper.pl/theme-development/rwd gdzie macie opisane przykłady użycia Grida Shoper. W tym przypadku użyjemy grida bez marginesów pomiędzy elementami czyli ?Flex grid – 10 columns?. Jeżeli klikniecie tekst ?HTML? w prawym rogu sekcji z prezentacją grida to zobaczycie przykładowy kod HTML który możecie skopiować do naszego modułu.

Ponieważ chcemy użyć podziału na 4 równe części to szukamy kodu o klasie ?flex flex-4?.

Jak odnajdziesz ten div skopiuj go w całości wraz z treścią (w tym przypadku pierwszy ma treść ?3.1?). Następnie wklej kod do naszego modułu zaraz pod kodem wyświetlającym zdjęcie.

Krok 8 – Teraz podmień tekst ?4.1? na całą pierwszą linijkę kodu jaki mieliśmy (czyli na to co wyświetla nasze zdjęcie. Powinniśmy mieć coś takiego:

b-sp1-s3

Krok 9 – skoro mamy już pierwszy element to teraz kopiujemy całe ten kod tyle razy ile chcemy mieć zdjęć (w tym przypadku 8) i na końcu podmieniamy w nazwach zdjęcia cyferkę oznaczającą nr zdjęcia (bo przecież nie chcemy wyświetlić 8 razy tego samego zdjęcia).

Zapisz moduł

Krok 10 – po zapisaniu modułu przejdź do zarządzania rozmieszczeniem modułów i umieść go tam gdzie chcesz by się wyświetlał. W tym przypadku nasz moduł przewidziany jest tylko na stronie głównej.

Uwaga!!! jeżeli potrzebujesz by zdjęcie było podlinkowane to edytuj raz jeszcze moduł, zaznacz zdjęcie które ma być linkiem i kliknij na ikonę dodania linku w edytorze tekstu.

Krok 11 – czas na odrobinę kodu CSS/LESS

Kod zacznę od krótkiej prezentacji jednej z fajniejszej cechy LESS jaką jest możliwość zagnieżdżania kodu. Nie rozpisując się zbytnio chodzi np o tkaą sytuacje.

Mając element div o klasie ?box? i wewnątrz niego mamy kawałek tekstu (czyli w kodzie ?p?) oraz link (czyli w kodzie ?a?). Chcąc nadać np różny kolor do tych elementów w standardowym CSS musielibyśmy zrobić tak:

.box a{color: red;}
.box p{color: black;}

W LESS ten sam efekt końcowy osiągniemy zapisując kod w taki sposób:

.box{
 a{
  color: red;
 }
 p{
  color: black;
 }
}

Jak widzicie logicznie jest to dużo lepszy zapis bo widzimy ?gołym? okiem że opisujemy cechy elementu ?a? który znajduje się wewnątrz kontenera ?box?. Przy dużej ilości kodu znacząco zwiększamy jego czytelność i ułatwiamy sobie późniejsze wprowadzanie zmian czy poprawek.

Wracając do tematu poradnika. Standardowo w szablonie RWD każdy element typu ?p? (czyli zwykły tekst) jaki dodamy do modułów ma z automatu przypisany margines od góry i dołu.

Ponieważ w naszym kodzie taki element się znajduje a chcemy by nasze banerki były ze sobą połączone musimy w pierwszej kolejności usunąć ten standardowy zapis.

Zaczynamy więc kod od identyfikatora naszego modułu i wpisujemy 0 margines do elementu typu ?p?.

#bfront{
  p{
    margin: 0;
  }
}

Krok 12 – rozwijamy nasz kod o transformacje które mają się pojawić po najechaniu kursorem myszy. W tym przypadku użyjemy transformacji ?scale? która powiększy nieznacznie nasz obrazek. Dodajmy może jeszcze jakiś mały cień dla zwiększenia efektu 🙂

#bfront{
  p{
    margin: 0;
  }
  img{
    transition: all .2s ease-in-out;
    &:hover{
      transform: scale(1.1);
      box-shadow: 0 0 20px rgba(0,0,0,0.5);
    }
  }
}

Co oznacza kod:

  1. linia z transition ustala czas trwania powiększenia
  2. &:hover oznacza, że kod zostanie wywołany po najechaniu kursorem myszy
  3. linia z transform ustala powiększenie o 10%,
  4. box-shadow określa jak ma wyglądać cień (w tym wypadku ma się rozpraszać na 20px i mieć kolor półprzeźroczystej czerni).

THE END

Mam nadzieję, że na początek wybrałem wystarczająco proste rzeczy do zrobienia ale w razie pytań korzystajcie z komentarzy.

19 odpowiedzi do “Edycja szablonu RWD oprogramowania Shoper – Poradnik cz. 1”

  1. Witam Panie Grzegorzu,
    cieszę się że wracają poradniki – bezcenne źródło wiedzy 🙂

    Korzystając z okazji mam pytanie, czy w „nowym” Shoperze RWD w wersji saas istnieje możliwość stworzenia popupów zapisywania na newsletter?

    pozdrawiam

  2. witam
    przepraszam że nie na temat. Wiem też że Pan się dobrze zna na shoperze 🙂
    chodzi mi dokładnie o styl RWD w shoperze.
    chciałbym sie zapytać czy ma Pan może skrypt albo gdzieś opisał jak zwiększyć ilość elementów w przewijanym sliderze Nowości. Obecnie dwa elementy się przewijają ale sa za duże a p.a. tego parametru po prostu nie ma.

    pozdrawiam
    Sławek K.

  3. Hej, dzięki za ten wpis:-) będe wdzięczny za info w jaki sposób zrobić podpis na zdjęciu, np efekt pół przezroczystej przesłony z wyśrodkowanym podpisem?

    Bede wdzięczny za info 😉

    pozdrawiam
    Kamil

  4. Witam,
    chciałbym się Pana zapytać czy w RWD uniwersalny można w jakiś sposób usunąć z listy produktów quickview button? I czy można tez usunąć ramkę dookoła produktów na tej samej stronie?
    Będe wdzięczny za pomoc.
    Pozdrawiam

      1. Dzień dobry! Czy mógłby Pan podpowiedzieć, czy da się podobnym kodem usunąć ścieżkę („okruszki”) na górze strony (brzydko oddzielają menu od slidera). Chętnie pozbyłbym się też w ogóle sortowania produktów (mam 4 produkty…) oraz nazwy kategorii (w tej samej linii co sortowanie). Z góry bardzo dziękuję!

  5. Witam,
    jak w szablonie RWD można zmienić ustawienie flag obok siebie w module „Języki”? Domyślnie ustawia je pionowo, jedna pod drugą, co nie wygląda zbyt dobrze. I czy istnieje możliwość wstawienia tego modułu w nagłówek?
    pozdrawiam Tomek

  6. Czy i jak można zwiększyć liczbę polecanych produktów na stronie głównej do czterech zamiast trzech w poziomie ( przy menu bocznym po lewej) ? I czy można zmniejszyć ich rozmiar? (RWD)

  7. Dzień dobry,
    Bardzo pomocny artykuł! Chciałbym przy okazji zapytać czy można dodać obramowanie „całego” produktu na liście produktów lub chociaż zdjęcia (widok – galeria), ponieważ kiedy produkty wyświetlają się na liście to trudno rozpoznać co do czego przynależy, np. który przycisk „do koszyka” – nad zdjęciem czy pod?
    Z góry dziękuję i pozdrawiam.

    1. taki kawełek kodu CSS:

      .products.viewphot .product {
      border: 1px solid red;
      }

      doda czerwoną ramkę do produktu w widoku wielokolumnowym

      a taki:

      .centercol .products.viewfull .product, .centercol .products.viewdesc .product{
      border: 1px solid red;
      }

      w widoku jednokolumnowym

Skomentuj Kacper Anuluj pisanie odpowiedzi