如何在magento中的單個產品彈出窗口中加載數據

Question

我想在彈出窗口中單擊產品頁面上的產品名稱時顯示產品詳細信息。這裏是我的代碼：

<?php 
        if (count($data['product']) > 0) { 
         foreach ($data['product'] as $product) { 
         $product_id   = $product->getId(); 
         $product_name  = $product->getName(); 
         $isporductImage  = $product->getImage(); 
         $product_image  = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB, true) . "media/catalog/product" . $product->getImage(); 
         $isproductthumbnail = $product->getThumbnail(); 
         $product_thumbnail = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB, true) . "media/catalog/product" . $product->getThumbnail(); 
         $collectionimage = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB, true) . "media/catalog/category/thumb/" . $data['collection']['image']; 
         $productplaceholderImage = $this->getSkinUrl() . "whi/assets/images/whi_placeholder.png"; 

        ?> 
        <div class="celeb-post" id="products-listing" style="text-align: center; width: 228px;"> 

        <?php if ($isproductthumbnail != "") { ?> 
            <div class="image-div" style="background: url('<?php echo $product_thumbnail;?>');"> 
            <img src="<?php echo $product_thumbnail; ?>" alt="celeb" /> 
            </div> 

          <?php }elseif ($isporductImage != "") { ?> 
            <div class="image-div" style="background: url('<?php echo $product_image;?>');"> 
            <img src="<?php echo $product_image; ?>" alt="celeb" /> 
            </div> 
          <?php } else { ?> 
            <div class="image-div" style="background: url('<?php echo $productplaceholderImage;?>');">  
             <img src="<?php echo $productplaceholderImage ?>" alt="celeb" /> 
            </div> 

          <?php } ?> 
         <div class="hover-image-bg" style="width: 86.9%; height: 69.3%;"> 
            <a href="#"><img style="padding-left: 38px;" src="<?php echo $this->getSkinUrl() ?>whi/assets/images/heart.png"></a> 
            <a href="#"><img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/bag.png"></a> 
            <a href="#"> <img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/move.png"></a> 
            <a href="#"><img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/assign.png"></a> 
         </div> 

        <div style="clear:both; height:10px;"></div> 
         <div class="celeb-name-title ucase clearfix" style="text-align:center;"><a href="#login-box5" class="login-window5"><?php echo $product_name; ?></a></div> 

       </div> 


       <?php 
        } 
        }else{ ?> 
        <table style="width:100%;"> 
        <tr><td style="text-align: center; height: 100px; font-weight: bold;">No Product found in Collection, you can add by clicking on +New button at the top right.</td></tr> 
        </table> 
        <?php 
        } 
       ?> 

和登錄了Box5代碼：

<div id="login-box5" class="login-popup login-popup5"> 
<a href="#" class="close"><img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/close_pop.png" class="btn_close" style="width:100%;" /></a> 
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/new-collection.png"> 
<div class="brand-position-outfite" id="celeb-position-outfite"> 
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/celeb.png"> 
<h5>Brand Name</h5> 
<div style="clear:both;"></div> 
<h5>Product Name</h5> 
<BR><BR> 
<textarea rows="10" class="add-txtarea-cmt">Description....</textarea> 
</div> 
</div> 

所以，簡單地，如果我點擊產品名稱，然後彈出窗口中將出現與該產品的展示細節，如產品名稱和產品描述。任何人都可以幫我解決這個問題。我認爲這可以通過AJAX，JavaScript來完成，但不知道如何在腳本中嵌入腳本。 提前等待您的善意回覆。

Answer 1

是的，你需要創建Ajax功能加載數據。您也可以創建一個Ajax請求句柄，以便使用特定的模板來顯示數據。

https://github.com/czettnersandor/magento-quick-view-ajax

Answer 2

我會建議你輸出你的「彈出」信息在你現有的產品上市/視圖模板在一個特殊的DIV塊：您可以使用下面的快速視圖擴展獲取有關的功能更好的主意連接到您的產品。

產品上市一個簡單的例子：

你列出你的productnames和popupdata模板/目錄/產品/ list.phtml：

<?php foreach ($_productCollection as $_product): ?> 
    <h3 class="productpreview" data-sku="<?php echo $_product->getSku(); ?>"><?php echo $_product->getName(); ?></h3> 
    <div class="popup" id="pop_<?php echo $_product->getSku(); ?>"> 
    /*insert your other productdata here*/ 
    <?php echo $_product->getShortDescription(); ?> 
    </div> 
<?php endforeach;?> 

類popup應該在CSS 我display: none;會建議您使用類似fancybox的內容來顯示該內容。如果你有機會到jQuery的，你也可以這樣寫這個展示的內容，並添加了CSS，你可以輕鬆的做出很酷的彈出：

jQuery(document).ready(function(){ 
    $('.productpreview').click(function(){ 
    var sku = $(this).data('sku'); 
    $('#pop_'+sku).toggle(); 
    }); 
}); 

如果你想在產品視圖頁面的功能，你modifiy模板/目錄/產品/ view.phtml

<h3 class="productpreview" data-sku="<?php echo $_product->getSku(); ?>"><?php echo $_product->getName(); ?></h3> 
    <div class="popup" id="pop_<?php echo $_product->getSku(); ?>"> 
    /*insert your other productdata here*/ 
    <?php echo $_product->getShortDescription(); ?> 
    </div> 

這是相同的CSS/jQuery代碼，你只需要刪除的foreach循環。