• +3620 253-7779

FaceBook -Iwiw -Twitter share link VirtueMart webáruháznál

Közösségi megosztásEgyre nagyobb igény VirtueMart webáruházak készítésekor, hogy a termékeket is meg lehessen osztani a FaceBook, iwiw, Twitter közösségi oldalakon.
Léteznek erre megoldások, olyan is amiben az iwiw is megtalálható, de van ezekkel egy aprócska gond. Ezek általában a lap tetején, vagy az alján jelennek meg.
Volt már megrendelőnk akinek ez nem tetszet, ezért egyedileg építettük be a VirtueMart sablonba a szükséges közösségi megosztókat. Egy ilyen közösségi megosztó itt is megtekinthető a termékek oldalain.
Hogy lehet ezt elkészíteni?

 

 1. El kell készíteni az ikonokat amiket használni szeretnénk és feltölteni a VirtueMart sablonunk "images" könyvtárába. Ez alaphelyzetben a components/com_virtuemart/themes/default/images/ könyvtár
Mi ezeket a képeket használtuk:

oszd meg Ez lesz a háttér
fb fb 2 FaceBook ikonok
iwiw iwiw 2 iwiw ikonok
twitter twitter 2 Twitter ikonok

2. A Virtuemart termék megjelenítő sablonjába be kell illeszteni a következő kódot oda ahol meg akarod jeleníteni az ikonokat:

[code]

<div class="oszd_meg"><a class="button-twitter" title="Add a Twitter-hez" onclick="window.open('http://twitter.com/home?status='+encodeURIComponent(document.title)+' '+encodeURIComponent(location.href));return false;" href="http://www.twitter.com/" target="_blank"></a>
<a class="button-facebook" title="Add a Facebook-hoz" onclick="window.open('http://www.facebook.com/share.php?u='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title));return false;" href="http://www.facebook.com/" target="_blank"></a>
<a class="button-iwiw" title="Add az iWiW-hez" onclick="window.open('http://iwiw.hu/pages/share/share.jsp?u='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title));return false;" href="http://www.iwiw.hu/" target="_blank"></a></div>

[/code]

A kód egyébként beilleszthető a listanézetbe is, vagy akár a Joomla cikkek sablonba is.

 3. Ezután még a VirtueMart sablonunk css fájlját kell kiegészítenünk pár sorral. Ez alaphelyzetben a components/com_virtuemart/themes/default/themes.css

[code]

div.oszd_meg {    height: 60px; background:transparent url(images/oszd_meg.png) no-repeat; padding-top: 30px; padding-left: 45px; margin-bottom: 10px;}
a.button-twitter, a.button-facebook, a.button-iwiw {width: 70px; height:45px; display:block; float: left}
a.button-twitter {    background:transparent url(images/twitter.png) no-repeat;}
a.button-facebook {    background:transparent url(images/fb.png) no-repeat;}
a.button-iwiw {    background:transparent url(images/iwiw.png) no-repeat;}
a.button-twitter:hover {    background:transparent url(images/twitter_2.png) no-repeat;}
a.button-facebook:hover {    background:transparent url(images/fb_2.png) no-repeat;}
a.button-iwiw:hover {    background:transparent url(images/iwiw_2.png) no-repeat;}

[/code]

Joomla és VirtueMart szakértő: 1028 Budapest, Vadkörte utca 1 | +3620 253-7779 | +361 3970933 | support@webprogramok.hu | Facebook

Kérdése van? Írjon vagy telefonáljon!

Tel-e-universum Kft.
Weboldalak és webáruházak készítése

Cím: 1028 Budapest, Vadkörte utca 1.
Telefon: +36-20-2537779
E-mail: support@webprogramok.hu

Top