1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

PORADNIK Dobry wysuwany Facebook (responsywny - ukrywa się przy mniejszej szerokości ekranu)

Dyskusja w 'Poradniki, gotowe rozwiązania' rozpoczęta przez użytkownika TheL, 15 Styczeń 2016.

  1. MarcinK

    MarcinK Bywalec

    Wiadomości:
    16
    Docenione treści:
    4
    Witam,

    zgodnie z zaleceniami, dodałem kod we własnym css, robię zapisz i wyskakuje komunikat:

    Wystąpił błąd składniowy LESS zaczynający się od linii: 1

    co zrobić? :)
     
  2. Mariusz

    Mariusz BOK home.pl home.pl Administrator forum

    Wiadomości:
    3 050
    Docenione treści:
    300
  3. wues

    wues Pomocnik

    Wiadomości:
    117
    Docenione treści:
    4
    Witam. Zrobiłem wszystko zgodnie z poradnikiem jednak jest coś nie tak.
    www.iopen.pl
     
  4. Mariusz

    Mariusz BOK home.pl home.pl Administrator forum

    Wiadomości:
    3 050
    Docenione treści:
    300
    Najprawdopodobniej masz wprowadzonych w sklepie dużo własnych zmian w CSS, które mogą "gryźć się" z tą modyfikacją zaprezentowaną w powyższym poradniku. Przesłałem sugestię do kierownika produktu, abyśmy przygotowali dedykowaną aplikację, która pozwoli na wyświetlanie takiego widgetu facebooka (numer sprawy: FEEDBACK-1299).

    edit: potwierdzam, że planujemy wprowadzenie specjalnej aplikacji/wtyczki, która nie będzie wymagała takich zaawansowanych operacji, aby ją włączyć. Sugeruję poczekać na wprowadzenie tej wtyczki. W tej chwili nie mogę podać żadnego potencjalnego terminu jej wprowadzenia.
     
  5. wues

    wues Pomocnik

    Wiadomości:
    117
    Docenione treści:
    4
    Witam panów serdecznie. Chciałem zapytać jak wrzucić to w wersje mobilną? I czy jest możliwość dodania do okienka wyświetlanie ostatniego postu dodanego na Facebooku? Z góry bardzo dziękuje :)
     
  6. Grzesiek

    Grzesiek BOK home.pl home.pl Administrator forum

    Wiadomości:
    3 341
    Docenione treści:
    315
    Czy masz na myśli mobilną skórkę czyli osobny szablon sklepu czy też chodzi Ci o RWD ale na urządzeniu mobilnym? @wues
     
  7. wues

    wues Pomocnik

    Wiadomości:
    117
    Docenione treści:
    4
    Chodzi mi o RWD skin w którym się okno facebooka nie wyświetla.
     
  8. Mariusz

    Mariusz BOK home.pl home.pl Administrator forum

    Wiadomości:
    3 050
    Docenione treści:
    300
    W ramach zgłoszenia FEEDBACK-1299 otrzymałem informacje, że wprowadzenie wtyczki z widgetem Facebooka zostanie wykonane już niebawem. Trwają ostatnie prace z tym związane.
     
  9. Mariusz

    Mariusz BOK home.pl home.pl Administrator forum

    Wiadomości:
    3 050
    Docenione treści:
    300
    Ponownie informuję, że prace nad tym nadal trwają. Prosimy jeszcze o cierpliwość. Niebawem udostępnimy wtyczkę do facebooka, która umożliwia wyświetlanie swojej strony z FB w wysuwanej zakładce na sklepie.
     
  10. LukaszC

    LukaszC eCommerce Team home.pl Moderator forum

    Wiadomości:
    694
    Docenione treści:
    80
    @wues, niestety aplikacja facebook widget nie zostanie dodana.
    Samo środowisko Facebook developers umożliwia wygenerowanie takiego kodu i umieszczenie go w aplikacji sklepu.
    @wues jeżeli będziesz potrzebował pomocy z konfiguracją takiego kodu napisz do mnie wiadomość prywatną :)
     
  11. LukaszC

    LukaszC eCommerce Team home.pl Moderator forum

    Wiadomości:
    694
    Docenione treści:
    80
    Dodanie wysuwanego moduły przy pomocy facebook developers (poradnik jest przygotowany pod rozmiary width: 400px, height:500px)

    Etap 1. Logujemy się na środowisko developerskie FB wykorzystując link:

    https://developers.facebook.com/docs/plugins#embedded-posts

    i wybieramy Page Plugin –wyświetla „miniaturę” naszego fanpage łącznie z wpisami.
    Wygenerowanie kodu jest proste, ponieważ podajemy link do Fanpage, rozmiar i opcje jakie chcemy wyświetlać.
    (fb1,jpg)

    Krótki opis funkcji:
    Facebook Page URL – podajemy adres naszego fanpage
    Tabs – rodzaj wyświetlanych elementów domyślnie jest tablica, ale można ustawić np. eventy i wiadomości
    Width – szerokość
    Height – wysokość
    Use Small Header – nagłówek jest mniejszy ukrywają się przyciski lubię to oraz shop now (oczywiście jeżeli mamy nasz Fanpage odpowiednio skonfigurowany)
    Hide Cover Photo – zdjęcie z nagłówka zostaje ukryte
    Show Friend’s Faces – po zaznaczeniu dla zalogowanych osób podglądających ten element na sklepie pokażą się twarze znajomych lubiących Twój Fanpage



    Jak podamy adres naszego fanpage oraz wybierzemy odpowiednie opcje przyciskamy Get Code kopiujemy wartość z Step 2 zamieszczoną w
    <script></script> i wklejamy w Konfiguracja->Wygląd->Aktywny styl graficzny->Własny skrypt JS
    Następnie wracamy do karty z wygenerowanym kodem i przechodzimy do zakładki "Ramka pływająca" i zachowujemy te okno otwarte, ponieważ wykorzystamy to w kolejnym etapie.

    Etap 2:
    Generujemy nowy moduł (Konfiguracja->Wygląd->Aktywny styl graficzny->Moduły) w następujący sposób:

    Tytuł domyślny ja zrobiłem to jako Facebook-widget
    Obramowanie NIE
    HTML ID fb-page (to pozostawiamy)
    Tryb HTML

    WAŻNE !!! należy wyjść z edytora graficznego poprzez „wyłącz edytor” i wklejamy taki kod:

    Kod:
    <div id="panel">
    <div id="title"> </div>
    <div id="content>
    
    // tutaj wklejamy kod z zachowane karty w moim przypadku to <iframe style="border: none; overflow: hidden;" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fhome.pl&amp;tabs=timeline&amp;width=400&amp;height=500&amp;small_header=false&amp;adapt_container_width=true&amp;hide_cover=false&amp;show_facepile=false&amp;appId=324871271305223" width="400" height="500" frameborder="0" scrolling="no"></iframe>
    
    </div>
    Etap 3
    Wklejamy kod w Konfiguracja->Wygląd->Aktywny styl graficzny->Własny styl CSS:

    Kod:
    #panel {
    position: fixed;
    top: 50px;
    right: calc(0 - 410px);
    z-index: 99999;
    transition: right 0.5s ease-out 0s;
    }
    #panel:hover {
    right: 0;
    }
    #panel #content {
    width: 400px;
    padding: 10px;
    }
    #panel #title {
    width: 150px;
    background: url('../styles/../images/user/fb.png') no-repeat;
    padding: 12px 5px 100px 5px;
    text-align: center;
    position: relative;
    top: 140px;
    left: -30px;
    z-index: 1;
    }
    
    oraz dodajemy plik od @TheL w pliki graficzne.
    Efekt przedstawia zrzut fb2,jpg i fb3,jpg :)
     

    Załączone pliki:

    • fb1.jpg
      fb1.jpg
      Rozmiar pliku:
      62,8 KB
      Wyświetleń:
      67
    • fb.png
      fb.png
      Rozmiar pliku:
      3,9 KB
      Wyświetleń:
      64
    • fb2.jpg
      fb2.jpg
      Rozmiar pliku:
      55,8 KB
      Wyświetleń:
      71
    • fb3.jpg
      fb3.jpg
      Rozmiar pliku:
      91,1 KB
      Wyświetleń:
      63
    Mariusz lubi to.
  12. czara

    czara Praktyk

    Wiadomości:
    34
    Docenione treści:
    1
  13. LukaszC

    LukaszC eCommerce Team home.pl Moderator forum

    Wiadomości:
    694
    Docenione treści:
    80
    @czara
    popraw następującą dyrektywę w CSS:
    @media only screen and (max-width: 480px){
    .rwd .leftcol .box, .rwd .rightcol .box {
    display: block;
    }
    }
    Powinno wszystko działać :)
     
  14. czara

    czara Praktyk

    Wiadomości:
    34
    Docenione treści:
    1
    Dzięki Łukasz za sugestie ale ta poprawka w prawdzie pomaga z widgetem FB ale oprócz okienka FB powiększają sie na cały ekran telefonu też wszystkie okna z lewego panelu czyli darmowa dostawa, kup na raty, bestselery, nowości, promocje itd a dopiero pod tym zaczynają się konkretne produkty....
    chyba, że wklejam ten kod w złym miejscu ale "media only screen...." jest tylko jeden
     
  15. LukaszC

    LukaszC eCommerce Team home.pl Moderator forum

    Wiadomości:
    694
    Docenione treści:
    80
    @czara sprawdź to :)
    Kod:
    @media only screen and (max-width: 480px){
    #box_facebooklike {
        display: block;
    }
    }
     
  16. czara

    czara Praktyk

    Wiadomości:
    34
    Docenione treści:
    1
    LukaszC dziękuje Ci bardzo, teraz wszystko chodzi bez zarzutu. :D
    Jak już w sumie rozmawiamy o wysuwanych widgetach to jak zmniejszyć ten widget ceneo dla wersji responsywnej? W prawdzie w panelu ceneo odznaczyłem go dla wersji mobilnej a on nadal się pokazuje więc jak już musi zostać to chociaż niech będzie mniejszy np. sam napis ceneo albo opinie. Wiem że ten slider jest zintegrowany z panelem ceneo ale może można go trochę zmienić lub w ostateczności całkowicie wyłączyć w wersji responsywnej?
     
  17. LukaszC

    LukaszC eCommerce Team home.pl Moderator forum

    Wiadomości:
    694
    Docenione treści:
    80
    @czara zmniejszanie tego obrazka może być czasochłonne więc sugeruję dla wersji mobilnych usunięcie wykorzystując media queries takie samo jak w przypadku "#box_facebooklike".
    Ustawiasz tylko display: none dla #widget-handler i #ceneo-widget-content-sliding
     

Poleć forum znajomym