Saturday 22 December 2012

Quick View Popups in your product listing page in magento

Add The css:
<style type="text/css">
.blankdiv{background-color:#000;
position:fixed;
z-index: 9001;
top:0px; height:100%;
left:0px;
width:100%; opacity: 0.65;
filter:alpha(opacity=65);}


#popupform{height: 100%;
    left: 0;
    padding: 15px;
    position: fixed;
    top: 0;
    width:97%;
    z-index: 10001;
    }
   
#popupform .applyform{position:relative; overflow:auto;
background-color:#fff;
width:670px;
height:500px;  margin:5% auto auto auto;
z-index: 9002; padding:10px; border:10px solid #7F3814; }


#pclose{background-image: url("images/close.png");
    background-position: left top;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 25px;
    margin: 5% auto -6%;
    position: relative;
    right: -348px;
    text-indent: -9999px;
    top: 0;
    width: 25px;
    z-index: 9999;}
</style>


In the list page put this code after this "<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>"

<a href="javascript:void(0)" onClick="javascript:document.getElementById('mk<?php echo $i; ?>').style.display='block';">Quick View</a>
<div id="mk<?php echo $i; ?>" style="display:none;" >
<div id="popupform">
<div class="blankdiv"></div>
<div id="pclose" onClick="javascript:document.getElementById('mk<?php echo $i; ?>').style.display='none';">close</div>
<div class="applyform">
<p id="contactArea">
<div style="float:left;">

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="350" height="300" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>



<!--<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="350" height="300" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />-->
</div>
<div style="float:left;">
 <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></h2>
 <div class="desc std">
<?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
</div>
<?php if($_product->getRatingSummary()): ?>
                <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                <?php endif; ?>
                <?php echo $this->getPriceHtml($_product, true) ?>
 <p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onClick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>

</div>
</p>
</div>
</div>
</div>


2 comments:

  1. Here is the demo link for this code:
    http://demosrvr.com/mg/ptitest/index.php/products.html

    ReplyDelete