Dziś mało elegancki ale szybki i łatwy we wdrożeniu widget który możemy umieścić na naszym sklepie.

Chodzi o 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.

Efekt przed najechaniem myszką:

facebook-widget-off

Efekt po najechaniu myszką:

facebook-widget-on

Rozwiązanie jest dość powszechne i intuicyjne więc nie musimy się tutaj już chyba o nim rozpisywać 🙂

 

Dlaczego „mało elegancki”? Z prostego powodu. Chodzi o sposób instalacji. Powinien być on osadzony w formie modułu. Jednak instalacja modułu może być dla niektórych Użytkowników kłopotliwa i niejasna. Natomiast nasze 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:


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

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


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

Share This:

  1. Łukasz says:

    Mam jeszcze problem z tym modułem. Wysuwanie działa wyłącznie na karcie produktu, po najechaniu na przycisk na stronie głównej, stronie kategorii czy np w koszyku widać tylko przycisk, ale nie wysuwa się. Halp! 🙂

  2. admin
    admin says:

    Da się powiększyć. Należy wstawić większy obrazek i możliwe że w CSS lub HTML zmienić wymiary elementu, ale trzeba poeksperymentować.

    Co o problemu z działaniem na tych podstronach może masz tam jakiś bład Javascript, który blokuje inne skrypty? Np. z zupełnie innego skryptu Javascript który jest uruchamiany właśnie na nich? Najlepiej wyślij nam link do strony lub użyj debuggera Javascript np. Firebug do Firefoxa

Zostaw komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *