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 Nowicjusz

    Wiadomości:
    21
    Docenione treści:
    7
    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 pomoc.home.pl home.pl Administrator forum

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

    wues Pomocnik

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

    Mariusz pomoc.home.pl home.pl Administrator forum

    Wiadomości:
    3 060
    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:
    120
    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 Centrum Pomocy home.pl Administrator forum

    Wiadomości:
    3 438
    Docenione treści:
    322
    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:
    120
    Docenione treści:
    4
    Chodzi mi o RWD skin w którym się okno facebooka nie wyświetla.
     
  8. Mariusz

    Mariusz pomoc.home.pl home.pl Administrator forum

    Wiadomości:
    3 060
    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 pomoc.home.pl home.pl Administrator forum

    Wiadomości:
    3 060
    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:
    924
    Docenione treści:
    102
    @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:
    924
    Docenione treści:
    102
    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ń:
      104
    • fb.png
      fb.png
      Rozmiar pliku:
      3,9 KB
      Wyświetleń:
      100
    • fb2.jpg
      fb2.jpg
      Rozmiar pliku:
      55,8 KB
      Wyświetleń:
      106
    • fb3.jpg
      fb3.jpg
      Rozmiar pliku:
      91,1 KB
      Wyświetleń:
      93
    Mariusz lubi to.
  12. czara

    czara Stały bywalec

    Wiadomości:
    38
    Docenione treści:
    2
  13. LukaszC

    LukaszC eCommerce Team home.pl Moderator forum

    Wiadomości:
    924
    Docenione treści:
    102
    @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 Stały bywalec

    Wiadomości:
    38
    Docenione treści:
    2
    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:
    924
    Docenione treści:
    102
    @czara sprawdź to :)
    Kod:
    @media only screen and (max-width: 480px){
    #box_facebooklike {
        display: block;
    }
    }
     
  16. czara

    czara Stały bywalec

    Wiadomości:
    38
    Docenione treści:
    2
    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:
    924
    Docenione treści:
    102
    @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
     
  18. Sztormiaki

    Sztormiaki Początkujący

    Wiadomości:
    6
    Docenione treści:
    0
    WItam,
    Postepuje zgodnie z ostatnia instrukcją od @LukaszC
    Nie wydaje sie to skomplikowane, jednak po wklejeniu skryptu JS sklep nie dziala popawnie. Po wczytaniu strony blokuja sie ine skrypy, np. nie wyswietlaja sie zdjecia na liscie owarow czy modul promocji konynuuje "wczytywanie" ale male kolko zebate nie znika i modul nie pojawia sie
    itp. Tak jakby nowy skrypt zacinal reszte skryptow.
    Prosze o pomoc
    Pozdrawiam,
    Radek
     
  19. LukaszC

    LukaszC eCommerce Team home.pl Moderator forum

    Wiadomości:
    924
    Docenione treści:
    102
    @Sztormiaki
    w celu pomocy wklej jako kod całą zawartość własnego JS przy wprowadzeniu kodu z FB.
    Zablokowanie skryptów sklepowych powoduje błędna dyrektywa JS
     
  20. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    519
    Sprawdziłem czy jest aktualnie poprawnie działająca instrukcja i na czystym sklepie działa poprawnie. Coś musisz mieć jeszcze we własnym JS.
     
    Sztormiaki lubi to.

Poleć forum znajomym