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块中的“弹出窗口”信息。

产品列表的一个简单示例：

您在模板/ catalog / product / list.phtml中列出了产品名和popupdata：

<?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;?>

{c}中的班级popup应为display: none; 我建议您使用fancybox之类的内容来显示该内容。如果你有权访问jquery，你也可以写这个以显示内容，并且添加了css你可以轻松地制作一个很酷的弹出窗口：

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

如果您想要产品视图页面中的功能，请修改模板/目录/产品/ 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循环。

如何在magento

2 个答案: