Magento – How to show social share icon below product on category page in magento

category-productsextensionsmagento-1social-buttons

Hi i am trying to an extension which has the facility of showing social share button below every product on category page and single product page.

Here is the code of my extension app\code\local\Companysocial\Mymodule\etc\config.xml :

<?xml version="1.0"?>
<config>
    <modules>
        <Companysocial_Mymodule>
            <version>0.1.0</version>    <!-- Version number of your module -->
        </Companysocial_Mymodule>
    </modules>
    <frontend>
        <routers>
            <mymodule>
                <use>standard</use>
                <args>
                    <module>Companysocial_Mymodule</module>
                    <frontName>mymodule</frontName>
                </args>
            </mymodule>
        </routers>
        <layout>
            <updates>
                <mymodule>
                    <file>mymodule.xml</file> <!-- Our layout file name-->
                </mymodule>
            </updates>
         </layout>
    </frontend>
    <global>
        <blocks>
            <mymodule>
                <class>Companysocial_Mymodule_Block</class>
            </mymodule>
        </blocks>
    </global>
</config>

Here is the code for my app\code\local\Companysocial\Mymodule\controllers\IndexController.php :

<?php
class Companysocial_Mymodule_IndexController extends Mage_Core_Controller_Front_Action
{
    public function indexAction()
    {
        $this->loadLayout();
        $this->renderLayout();
    }

}

Here is the code of my app\code\local\Companysocial\Mymodule\Block\Mymodule.php :

    <?php

class Companysocial_Mymodule_Block_Mymodule extends Mage_Core_Block_Template
{
    public function myfunction()
    {

        $products = Mage::getModel('catalog/product')->getCollection()->addAttributeToSelect('*');

        foreach ($products as $product) {
            $sku = $product->getSku();
            $productUrl = $product->getProductUrl();
            $productImage = $product->getImageUrl(); ?>

            <a href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>', 'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');"
               title="<?php echo $this->__('Share on Google Plus') ?>">Google Plus</a>

            <a href="javascript:popWin('https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($productUrl); ?>&t=<?php echo urlencode($productName); ?>', 'facebook', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');"
               title="<?php echo $this->__('Share on Facebook') ?>">Facebook</a>

            <a href="javascript:popWin('http://twitter.com/home/?status=<?php echo urlencode($productName . ' (' . $productUrl . ')'); ?>', 'twitter', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');"
               title="<?php echo $this->__('Tweet') ?>">Twitter</a>

            <a href="javascript:popWin('https://pinterest.com/pin/create/button/?url=<?php echo urlencode($productUrl); ?>&media=<?php echo urlencode($productImage); ?>&description=<?php echo urlencode($productName); ?>', 'pinterest', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');"
               title="<?php echo $this->__('Pin it') ?>">Pinterest</a>

            <?php
        }
    }
}

Now I have added

    <catalog_category_default>
        <reference name="content">
            <block type="mymodule/mymodule" name="mymodule" template="mymodule/mymodule.phtml" />
        </reference>
    </catalog_category_default>
    <catalog_category_layered>
        <reference name="content">
            <block type="mymodule/mymodule" name="mymodule" template="mymodule/mymodule.phtml" />
        </reference>
    </catalog_category_layered>

This In my layout file mymodule.xml

But code is not shown on product page so I tried another method In app\design\frontend\[custom_theme]\default\template\catalog\product\list.phtml :

<?php echo $this->getLayout()->createBlock('mymodule/mymodule')->setTemplate('mymodule/mymodule.phtml')->toHtml(); ?>

This code works but It will show all the social share for all the product below one single product

Then after It I try to kept the social button code I wrote in function myfunction() in Mymodule.php so after it only one product link will be showing below all the product

I have searched about on and find that I have to either override the Event or observer or custom block of magento . But as it is my first plugin so I dont have any idea about it
So Please give me the solution How can I override or add my social share button in below product on category page

Best Answer

For your requirement,you need to some modification at module.phtml and Mymodule.php.

Instead of loading all product at myfunction() and you need to send product Object to call from list.phtml and product/view.phtml.

Like: setProduct($project).

<?php
class Companysocial_Mymodule_Block_Mymodule extends Mage_Core_Block_Template
{
 protected $_product = null;

    public function setProduct($product) {
        $this->_product = $product;
        return $this;
    }

    public function myfunction() {
        return $this->_product;
    }

}

Then add below code at module.phtml:

 $product=$this->myfunction()
$sku = $product->getSku();
$productUrl = $product->getProductUrl();
$productImage = $product->getImageUrl(); ?>

<a href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>', 'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" title="<?php echo $this->__('Share on Google Plus') ?>">Google Plus</a>

<a href="javascript:popWin('https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($productUrl); ?>&t=<?php echo urlencode($productName); ?>', 'facebook', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" title="<?php echo $this->__('Share on Facebook') ?>">Facebook</a>

<a href="javascript:popWin('http://twitter.com/home/?status=<?php echo urlencode($productName . ' (' . $productUrl . ')'); ?>', 'twitter', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" title="<?php echo $this->__('Tweet') ?>">Twitter</a>

<a href="javascript:popWin('https://pinterest.com/pin/create/button/?url=<?php echo urlencode($productUrl); ?>&media=<?php echo urlencode($productImage); ?>&description=<?php echo urlencode($productName); ?>', 'pinterest', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" title="<?php echo $this->__('Pin it') ?>">Pinterest</a>

Let call this code at list.phtml.

    <?php echo $this->getLayout()->createBlock('mymodule/mymodule')
->setProduct($_product)->setTemplate('mymodule/mymodule.phtml')->toHtml();

?>

You need to call this code below each product in list.phtml

Also you can call share block using below code:

<?php echo
$this->getLayout()->createBlock('mymodule/mymodule')->setProduct($_product)->setTemplate('mymodule/mymodule.phtml')->toHtml();
 ?>

Note that in my process you does not need mymodule.xml

Related Topic