Press "Enter" to skip to content

PrestaShop – wysuwany widget Instagram [AKTUALIZACJA]

Admin 6

Zmiany na Instragram.com

Niestety w myśl zmian na Instagramie – nie jest już możliwe pozyskiwanie tzw. CLIENT-ID a co za tym idzie – integrowania stron internetowych z kontem na tym portalu społecznościowym np. poprzez zewnętrze aplikacje albo moduły:

Komunikat podczas próby pozyskania CLIENT-ID na Instagram.com
Komunikat podczas próby pozyskania CLIENT-ID na Instagram.com

Czyli jeśli np. marzysz o sliderze z akutalnymi zdjęciami z @Insta – zapomnij o tym. Jedyne co możesz zrobić, to osadzić link do Instagrama na stronie czy też sklepie internetowym. Decyzję właściciela tego portalu (Facebook Inc.) pozostawiamy bez komentarza.

Wysuwany widget Instragram.com

Polecamy tutaj bardzo łatwy w osadzeniu wysuwany z boku widget, użyty np. na stronie: duschobad.se

Już pokazywaliśmy jak dodać podobny widget z profilu Facebook.com – zobacz!

[lifehack] dodanie wysuwanego po najechaniu myszką widgetu z profilem z Facebook.com – wszystkie wersje Presta Shop [AKTUALIZACJA]

W tym celu, przygotuj:

  1. Kwardratowy obrazek okładki profilu na Instagramie o wymiarach 320px na 320px i nazwie: logo_instagram.jpg (może mieć też wymiar 150px na 150px – taki jak na tym portalu)
  2. Nazwę Twojego uzytkownika w portalu Instagram.com

Osadzenie kodu widgetu Instagram.com w szablonie Prestashop

Dla wersji 1.7 otwórz plik:

themes/{SZABLON}/templates/layouts/layout-both-columns.tpl

Dla wersji 1.6 otwórz plik:

themes/{SZABLON}/footer.tpl

Następnie przed zamknięciem znacznika:

</body>

Wklej poniższy kod:

{literal}
    <div class="slideout-widget-insta slideout-big widget-insta">
        <div class="slideout-widget-handler">
        <i class="fa fa-instagram" aria-hidden="true"></i>

        </div>
        <div class="slideout-widget-content">
           <a href="https://www.instagram.com/{NAZWA-UŻYTKOWNIKA-INSTAGRAM}/" target="_blank">
           <img style="display: block; margin: 0 auto; border-radius: 50%; width: 30%; margin-bottom: 20px;" src="/img/logo_instagram.jpg" alt="insta">
            <h3 style="text-align: center; color: #fff;">@{NAZWA-UŻYTKOWNIKA-INSTAGRAM}</h3>
           </a>
            
            
        </div>
    </div>
<style type="text/css">
   .slideout-widget {
  position: fixed;
  right: -15em;
  top: 300px;
  transition: right .4s;
  width: 15em;
  z-index: 5004;
}

.slideout-widget:hover {
  right: 0;
}

.slideout-widget-insta {
  position: fixed;
  right: -15em;
  top: 60%;
  transition: right .4s;
  width: 15em;
  z-index: 100000000;
}

.slideout-widget-insta:hover {
  right: 0;
}

.slideout-widget-handler,
.slideout-widget-content {
  background: #eee;
  border: 1px solid #ddd;
  padding: 1em .5em;
}

.slideout-widget-handler {
  border-right: none;
  left: -3em;
  position: absolute;
  text-align: center;
  width: 3em;
  font-size: 15px;
}

.slideout-widget-content {
  border-width: 1px 0;
  overflow: hidden;
  width: 100%;
  z-index: 11;
}

.widget-facebook .slideout-widget-handler,
.widget-facebook .slideout-widget-content {
  background: #3c5b9b;
  border: none;
}

.widget-insta .slideout-widget-handler,
.widget-insta .slideout-widget-content {
  background: #f09433;
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888', GradientType=1);
  border: none;
}

.widget-insta,
.widget-insta a {
  color: #fff;
}

.slideout-big {
  right: -25em;
  width: 25em;
}

@media (min-width: 1024px){
    .slideout-widget-insta {
       top: 56%;
    }
}
   
</style>
{/literal}

Oczywiście w miejscu: {NAZWA-UŻYTKOWNIKA-INSTAGRAM} wklej nazwę Twojego loginu w tym serwisie, a przygotowany plik logo_instagram.jpg wgraj przez FTP bezpośrednio do folderu /img.

Nie zapomnij o wyczyszczeniu pamięci podręcznej / przebudowaniu cache w dziale „Wydajność„.

Widget nie ma powiązania z oprogramowaniem PrestaShop. Równie dobrze możesz go użyć na innej stronie wklejając go przed zamknięciem znacznika <BODY> 🙂

Wyczyszczenie pamięci podręcznej.

Musimy mieć jeszcze pewność, że zmiany są widoczne na stronie i odświeżony jest system pamięci podręcznej w sklepie. W tym celu w zależności od wersji wchodzimy:

Presta Shop 1.7

Konfiguruj » Zaawansowane » Wydajność » Wyczyść pamięć podręczną (przycisk u góry tej podstrony)

Presta Shop 1.6

Zaawansowane » Wydajność » Wyczyść pamięć podręczną (przycisk u góry tej podstrony)

Presta Shop 1.5

Zaawansowane » Wydajność » przycisk “Wyczyść cache Smarty i Autoload”

Możliwe błędy i ich rozwiązanie

Błąd #1 nie widać okładki z mojego Instagrama

W lokalizacji pliku http://[adres-twojego-sklepu]/img/logo_instagram.jpg umieść dowolny obrazek indentyfikujący Twój profil z @Insta – moze to być np. ta sama okładka co na tym portalu społecznościowym aby było to spójne wizualnie

Błąd #2 nie widać ikonki Instagrama na zakładce przed wysunięciem

Zapewne Twój szablon w PrestaShop nie ma dołączonej biblioteki FontAwsome. W tym celu przed ww. kodem do osadzenia wklej poniższy kod HTML + przeładuj cache szablonu:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Jeśli podany link do pliku CSS nie działa – pozyskaj działający plik np, ze strony FontAwsome i przetestuj działanie.

Błąd #3 Widget nie linkuje do profilu na Instagramie.

Pozyskaj Twój login z Instagrama – jest to fraza po ukośniku: instagram.com/twoj_profil

I wklej w dwóch miejscach w ww. kodzie w miejscu kodu: {NAZWA-UŻYTKOWNIKA-INSTAGRAM} następnie przeładuj szablon (w tym przykładzie nazwą użytkownika będzie „twoj_profil”)

 

 

Jeśli to zadanie Cię przerasta – zapraszamy do skorzystania z naszych usług:)

 

grafika:alphacoders.com

  1. PrzeMo PrzeMo

    posiadam prestashop 1.7.5.0. Wszystko wykonane według instrukcji. Niestety po aktualizacji pliku i wyczyszczeniu pamięci podręcznej strona jest niewidoczna.

    • Admin Admin

      @PrzeMo – uzupełniliśmy artykuł o kilka wskazówek, które powinny być dla Ciebie pomocne:) Sprawdz!

  2. Osadziłem kod na stronie i nie wyświetla mi się ikona instagrama. Sam widget działa, ale mam zwykły prostokąt, nie widac loga instagrama

    • Admin Admin

      @Piotr – uzupełniliśmy artykuł o kilka wskazówek, które powinny być dla Ciebie pomocne:) Sprawdz!

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.

Zobacz także !
Czy masz problem z zainstalowaniem modułu Przelewy24 w najnowszej wersji…