Magento在product view页面ajax显示tag的商品

Magento的tag是点击后，有一个tag关联商品的list页面。客户需要在商品详情页面product view中点击tag使用ajax直接显示商品。

首先我们需要写个小插件，为ajax提供数据

Controller的参考代码如下：

$tagId = $this->getRequest()->getParam('tagId');
        $tag = Mage::getModel('tag/tag')->load($tagId);

        if (!$tag->getId() || !$tag->isAvailableInStore()) {
            $this->_forward('404');
            return;
        }
        $page_size = 15;
        $page = 1;
        /* $tagModel = Mage::getModel('tag/tag');
          $productCollection = $tagModel->getEntityCollection()
          ->addAttributeToSelect(Mage::getSingleton('catalog/config')->getProductAttributes())
          ->addTagFilter($tagId)
          ->addStoreFilter(Mage::app()->getStore()->getId())
          ->addMinimalPrice()
          ->addUrlRewrite()
          ->setActiveFilter()
          ->setPageSize($page_size)
          ->setCurPage($page);
          Mage::getSingleton('catalog/product_status')->addSaleableFilterToCollection($productCollection);
          Mage::getSingleton('catalog/product_visibility')->addVisibleInSiteFilterToCollection($productCollection);
         */
        $productIds = $tag->getRelatedProductIds();
        $productCollection = Mage::getModel('catalog/product')->getCollection()
                ->setStoreId($storeId)
                ->addAttributeToSelect('*')
                ->addFieldToFilter('entity_id', $productIds)
                ->setPageSize($page_size)
                ->setCurPage($page);

        $html = '';
        foreach ($productCollection as $product) {  //to get all product list
            $html .= '<div class="item">';
            //START
            $p_url = $product->getProductUrl();
            $p_name = $product->getName();
            $p_img_url = Mage::helper('catalog/image')->init($product, 'small_image')->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)->resize(200, null);
            $p_final_price = Mage::helper('core')->currency($product->getFinalPrice(), true, false);

            $html .='<a class="product-image" href="' . $p_url . '"><img src="' . $p_img_url . '" width="200" /></a>';
            $html .='<h2 class="product-name" class="product-name"><a href="' . $p_url . '">' . $p_name . '</a></h2>';
            $html .='<div class="price-box"><span class="regular-price"><span class="price">' . $p_final_price . '</span></span></div>';
            //END
            $html.='</div>';
        }

        //var_dump($productCollection);
        echo $html;

模板文件中的ajax获取Controller返回商品信息的参考代码如下

<?php if ($this->getCount()): ?>
        <h3><?php echo $this->__('Other people marked this product with these tags:') ?></h3>
        <div class="product-tags" id="product-tags-a">
            <ul>
                <?php $fistTag = ''; ?>
                <?php foreach ($this->getTags() as $tag): ?>
                    <li><a onclick="return false;" href="<?php echo $tag->getTagId() ?>"><?php echo $tag->getName() ?></a>(<?php echo $tag->getProducts() ?>)</li>
                    <?php if (!$fistTag): ?>
                        <?php $fistTag = $tag; ?>
                    <?php endif; ?>
                <?php endforeach; ?>
            </ul>
            <script type="text/javascript">
                //ajax to load fist tagged product list
                var url ="<?php echo Mage::getBaseUrl() ?>tagproduct/";
                new Ajax.Updater( 'product-tag-product-list', url, {
                    method     : 'post', //HTTP请求的方法,get or post
                    parameters : {tagId:<?php echo $fistTag->getTagId() ?>}, //请求参数
                    //insertion: Insertion.Bottom,
                    //onFailure  : reportError, //失败的时候调用 reportError 函数
                    onLoading  : loading, //正在获得内容的时候
                    onComplete : done     //内容获取完毕的时候
                });

                // click tag to get tagged product
                $('product-tags-a').observe('click', function(event) {
                    var this_a = event.findElement('a');
                    if (this_a) {
                        var tag_id = this_a.readAttribute("href");
                    }
                    new Ajax.Updater( 'product-tag-product-list', url, {
                        method     : 'post', //HTTP请求的方法,get or post
                        parameters : {tagId:tag_id}, //请求参数
                        //insertion: Insertion.Bottom,
                        //onFailure  : reportError, //失败的时候调用 reportError 函数
                        onLoading  : loading, //正在获得内容的时候
                        onComplete : done     //内容获取完毕的时候
                    });

                });
                // ajax actions
                function done(){
                    $('loading').style.display = 'none';
                    $('product-tag-product-list').style.display = 'block';
                    var wall = new Masonry( document.getElementById('product-tag-product-list'), {
                        columnWidth: 240
                    });

                }
                function loading()
                {
                    $('loading').style.display = 'block';
                    $('product-tag-product-list').style.display = 'none';
                }
            </script>
        </div>
        <div class="clearer"></div>
        <img style="display:none;" id="loading" src="<?php echo $this->getSkinUrl('images/opc-ajax-loader.gif') ?>" />
        <div id="product-tag-product-list">

        </div>
        <div class="clearer"></div>

    <?php endif; ?>

本文使用magento1.7，文中代码为参考代码，可以直接使用，但请自行优化修改。

转载标明出处：www.hellokeykey.com