Onclick on "Return book", I want to display magento product. Only those products should be display where selected attribute name Rent should be Yes

enter image description here

Only that product should display in popup.

  • please let me know whether you have any mockup ? or reference link and where exact want to display this product ? – Nagaraju K May 26 '17 at 8:09
  • I want to display product onclick of "return book" in a popup (Product name and price ) – Suma J May 26 '17 at 8:56
  • please specify whether you need this functionality in view page? – Nagaraju K May 30 '17 at 10:22
  • Please check my answer and update me so that i will assist u and guide u accordingly. thanks – Nagaraju K May 30 '17 at 14:07

Here I am showing you simple popup with product data in the product view page using ajax request. please try in the default magento locally and customize the same as per your requirement include with css design.

Step 1:


please don't disturb the view.phtml code just copy and paste the below mention code as shown in the screenshot below

enter image description here

Code is:

     <button class="myBtn" id="<?php echo $_product->getId();?>">Return Book</button>
    <!-- The Modal -->
    <div id="myModal" class="modal">    
      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <p id="results">Some text in the Modal..</p>

    /* The Modal (background) */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        border: 1px solid #888;
        height: 50%;
        margin: 0 auto;
        padding: 20px;
        width: 50%;

    /* The Close Button */
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;

    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;

var modal = document.getElementById('myModal'); 
jQuery(".myBtn").click(function() {
            var id = this.id;
            type: "POST",
            data: 'pid=' + id,
            dataType: 'html',
            url: "<?php echo Mage::getBaseUrl().'custompaymentmethod/index/productinfo' ?>",
                if (response){
                 modal.style.display = "block";



jQuery(".modal-content .close").click(function(){
    modal.style.display = "none";

Step 2: app/code/local/Envato/Custompaymentmethod/controllers/IndexController.php

Please keep the below code in your custom module controller. Here i have taken as Envato_Custompaymentmethod for showing demo purpose.

 public function productinfoAction()
        $post = $this->getRequest()->getPost();
        $_product = Mage::getModel('catalog/product')->load($post['pid']);

        //if($_product->getReturnBook() == 'Yes')
        //{ enable/disable these comments and show what will get 

         echo '<div>'.$_product->getName().'</div>';    
         echo  '<div>'.$_product->getPrice().'</div>';      
         echo  '<div><img src='.Mage::helper("catalog/image")->init($_product, "image")->resize(100,100).'></div>';



Output: enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.