Tuesday, 30 July 2013

Quick view on home page product listing

Install following module:
http://www.magentocommerce.com/magento-connect/md-quick-view-product-5915.html

It will set quickview link on your catalog product list.
For home page: Go to CMS->Pages->home page->Design and copy follow code to add css and js
<reference name="head">
<block type="page/html" name="top.Js" as="topJs" template="md/quickview/page/lablequickview.phtml"/>
              <action method="addJs"><script>md/quickview/js/jquery-1.7.2.min.js</script></action>
<action method="addJs"><script>md/quickview/thickbox/jquery.noconflict.js</script></action>
            <action method="addJs"><script>md/quickview/fancy/fancybox/jquery.fancybox-1.3.4.pack.js</script></action>
            <action method="addJs"><script>md/quickview/js/md_quickview.js</script></action>
            <action method="addJs"><script>varien/product.js</script></action>
            <action method="addJs"><script>md/quickview/configurable.js</script></action>
  <action method="addItem"><type>skin_js</type><name>js/bundle.js</name></action>
            <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/></action>
            <action method="addJs"><script>md/quickview/js/slides.min.jquery.js</script></action>
            <action method="addJs"><script>md/quickview/cloud-zoom.1.0.2.min.js</script></action>
 <action method="addCss"><stylesheet>md/quickview/css/jquery.fancybox-1.3.4.css</stylesheet></action>
 <action method="addCss"><stylesheet>md/quickview/css/stylefancy.css</stylesheet></action>
</reference>

AND add following code to your phtml file top
<script type="text/javascript">
!window.jQuery && document.write('<script type="text/javascript" src="<?php echo $this->getSkinUrl("quickview/js/jquery-1.7.2.min.js");?>" />');
</script>

<?php
    $_helper = $this->helper('catalog/output');
    $_dialogWidth   = Mage::helper('quickview/quickview')->getDialogWidth();
    $_dialogHeight  = Mage::helper('quickview/quickview')->getDialogHeight();
    $_isModal       = Mage::helper('quickview/quickview')->getIsModal();
    $_library       = Mage::helper('quickview/quickview')->getLibrary();
?>
AND
<a id="various<?php echo $_product->getId(); ?>" href="<?php echo $this->getUrl('quickview/product/view', array('id' => $_product->getId())); ?>?width=<?php echo $_dialogWidth; ?>&height=<?php echo $_dialogHeight; ?>&modal=<?php echo $_isModal; ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="product-image-thickbox"><span>quickview</span></a>
before product image anchor tag.

For product view use view.pthml file:
app/design/frontend/default/default/template/md/quickview/catalog/product/view.phtml
and for css use jquery.fancybox-1.3.4.css file
skin/frontend/default/default/md/quickview/css/jquery.fancybox-1.3.4.css


1 comment:

  1. How to integrate social login and sharing on my Magento e-commerce site???
    Magento Quick View

    ReplyDelete