Egyre 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?

E

 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:

	Ez lessz a háttér
	FaceBook ikonok
	iwiw ikonok
	Twitter ikonok

2. A Virtuemart termék megjelenítő sablonjába be kell ileszteni 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]