如何在 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
                  }  
                ?>

而login-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 块中。

产品列表的简单示例：

您在模板/目录/产品/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();
  });
});

如果您想要产品视图页面中的功能，您可以修改 template/catalog/product/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-loop即可。