prestashop facebook

utworzone przez | sty 10, 2017 | Aktualności, Prestashop | 0 komentarzy

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

wysuwany panel / widget / okienko które jest na stałe przytwierdzone do prawej krawędzi okna na wszystkich podstronach. Pozwala na łatwe i szybkie polubienie profilu na Facebook.com.

 

Rozwiązanie jest dość  intuicyjne

rozwiązanie ogranicza się do:

  1. wklejenia kodu w 1 plik
  2. 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 ?

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<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:

?
1
/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ą.

Prześlij komentarz

Accessibility