Prestashop Facebook

dodanie facebook wysuwanego po najechaniu myszką widgetu z profilem z Facebook.com – wszystkie wersje Presta Shop

Rozwiązanie jest dość intuicyjne

rozwiązanie ogranicza się do:

wklejenia kodu w 1 plik
wgraniu 1 pliku graficznego.

Właściciele sklepów najczęściej wychodzą z założenia, że liczy się efekt stąd nasze sprytne rozwiązanie.

Dodatkowo działa ono niezależnie od wersji Presta Shop.

Osadzenie kodu HTML

Otwieramy plik:

1	`/themes/{NAZWA-NASZEGO-SZABLONU}/footer.tpl`

Następnie na samym końcu tego pliku znajdujemy zamknięcie znacznika BODY i HTML:

1 2	`</body>` `</html>`

Zaraz przed tym kodem wklejamy poniższy kod. Z tym, że w miejscu:

{TUTAJ WPISZ ADRES TWOJEJ STRONY NA FACEBOOK}

wstawiamy adres naszej strony na Facebook.com (usuwamy ten wpis wraz z klamrami) np. https://www.facebook.com/prestashopkrakow/

Przy okazji zachęcamy do polubienia naszego fan page to modywuje nas do nowych wpisów

<div id="facebook_slider" >
<div id="fbox1" style="right: -300px; top: 50%; z-index: 10000;">
<div id="fobx2" style="text-align: left;width:290px;height:350px;">
<a class="open" id="fblink" href="#"></a><img style="top: 0px;left:-50px;" src="/img/facebook-icon.png" alt="">
<iframe src="//www.facebook.com/plugins/likebox.php?href={TUTAJ WPISZ ADRES TWOJEJ STRONY NA FACEBOOK}/&amp;width=290&amp;height=370&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=%23FFF&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:370px;" allowTransparency="true"></iframe>
</div>
</div>
<script type="text/javascript">
{literal}
jQuery(function (){
jQuery("#fbox1").hover(function(){
jQuery('#fbox1').css('z-index',101009);
jQuery(this).stop(true,false).animate({right:  0}, 500); },
function(){
jQuery('#fbox1').css('z-index',10000);
jQuery("#fbox1").stop(true,false).animate({right: -300}, 500); });
});
{/literal}
</script>
<style type="text/css">
#facebook_slider {
position: relative;
}
#fbox1 {
background-color: #fff;
border: 5px solid #3c95d9;
border-radius: 5px;
position: fixed;
}
#fbox2 {
overflow: hidden;
text-align: left;
}
#fbox1 img {
border: 0 none;
cursor: pointer;
position: absolute;
top: 0;
z-index: 10000;
}
#fbox1 iframe {
border: 0 none;
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
}
</style>

Wgranie pliku graficznego

Do folderu na serwerze:

/img

Wgrywamy ten plik: facebook-icon.png

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.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”

Wchodzimy następnie na stronę sklepu (widoczną dla klientów) i sprawdzamy czy widget jest widoczny.

Jeśli nie – asekuracyjnie możemy też zaznaczyć opcję „Wymuś kompilację” na powyższej podstronie „Wydajność” – zapisać następnie odświeżyć stronę kliencką.

W momencie, kiedy widget się pojawi – przywracamy ustawienie na stronie „Wydajność” do takiego jak przed zmianą.