最新消息:觉得本站不错的话 记得收藏哦 博客内某些功能仅供测试 讨论群:135931704 快养不起小站了 各位有闲钱就打赏下把 My Email weicots#gmail.com Please replace # with @

产品 列表页 ajax 加载产品 弹出层方式

Magento 资料整理 ajiang-tuzi 1547浏览

page

控制器 写法

<?php

/**
 * Created by PhpStorm.
 * User: ajiang-tuzi
 * Date: 2015/5/18
 * Time: 10:03
 */
class Aps_Weicot_IndexController extends Mage_Core_Controller_Front_Action
{
    public function indexsAction()
    {

        echo $this->getProductInofo(Mage::app()->getRequest()->getParam('sku'));

    }

    /*
    * 获得产品
    * $product_id  产品id
    * return json
    */
    public function indexAction()
    {

        $_product = Mage::getModel('catalog/product')->load(Mage::app()->getRequest()->getParam('sku'));
        $image = $this->getImages($_product);
        $mianImage = Mage::helper('catalog/image')->init($_product, 'thumbnail');
        $_compareUrl = Mage::helper('catalog/product_compare')->getAddUrl($_product);


        $url = Mage::helper('checkout/cart')->getAddUrl($_product, array('qty' => 1));
        $_wishlistSubmitUrl = Mage::helper('wishlist')->getAddUrl($_product);
        $_helper = Mage::helper('catalog/output');
        $_productName = urlencode(trim($_product->getName()));
        $_productImageUrl = urlencode(trim(Mage::helper('catalog/image')->init($_product, 'thumbnail')));
        $_productUrl = urlencode(trim($_product->getProductUrl()));


        $_u = 'p[url]=' . $_productUrl . '&p[images][0]=' .
            $_productImageUrl . '&p[title]=' .
            $_productName . '&p[summary]=' .
            urlencode(trim($_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description')));
        $facebook = 'http://www.facebook.com/sharer.php?s=100&' . $_u;
        $twitter = 'http://twitter.com/home?status=' . $_productName . '+' . $_productUrl;
        $email = Mage::helper('catalog/product')->getEmailToFriendUrl($_product);
        $imageBox=$this->getImgBox($_product);


        echo <<<CLD



    <div class="info_box">
    <button id="CLOSE_BOX">CLOSE <h1>X</h1></button>
    <div class="info_box_top">
    <div class="info_box_img ">
{$imageBox}

    </div>
    <div class="info_box_text">
    <p>
    最低订单:每款5件起<br>
    样品订单:每款30件<br>
    交货及付款方式:7-15天出货,<br>
    预售支付50%,50%款到发货<br>

    单笔订单满10万美金,<br>
    返现订金额0.5%<br>



    单笔订单满11-50万美金,<br>
    返现订金额1%<br>


    单笔订单满50-100万美金,<br>
    返现订金额2%

        </p>
    </div>
    </div>

    <div class="info_box_option">

    </div>

    <div class="info_box_banner">
    <ul>
    <li>CN¥20.60<span>5-200件</span></li>
    <li>CN¥18.60<span>201-500件</span></li>
    <li>CN¥16.60<span>500件以上</span></li>
    </ul>



    </div>

    <div class="info_box_add">

    <form method="post" name="form-name"action="{$url}">
           <button type="submit" class="buy_now_box"><span>Buy Now</span></button>
    </form>


    <button type="button"  class="compare_box" onClick="location.href='{$_compareUrl}'"; ><span>compare</span></button>


    </div>

    <div class="info_box_bottom">
    <ul class="sharing-links">
            <li><a href="{$email}" class="link-email-friend" title="Email to a Friend">Email to a Friend</a></li>
        <li>

            <a href="{$facebook}" target="_blank" title="Share on Facebook" class="link-facebook">Share Facebook</a>
        </li>
        <li>
            <a href="{$twitter}" target="_blank" title="Share on Twitter" class="link-twitter">Share on Twitter</a>
        </li>
    </ul>

    <ul class="add-to-links">
      <li><a href="{$_wishlistSubmitUrl}" onclick="productAddToCartForm.submitLight(this, this.href); return false;" class="link-wishlist">Add to Wishlist</a></li>

    </ul>
    </div>



    </div>






CLD;
/*

            $product_data["url"] = $_product->getProductUrl();
            $product_data["name"] = $_product->getName();
            $product_data["short_description"] = $_product->getShortDescription();
            $product_data["description"] = Mage::helper('catalog/output')->productAttribute($_product, $_product->getDescription(), 'description');
            $product_data["attributes"] = $this->getAttributesItem($_product);
            $product_data["option"] = $this->getOptions($_product);
            $product_data["price"] = $_product->getPrice();
            //$product_data["special_price"] =Mage::helper('core')->currency($_product->getFinalPrice(), true, false) ; //特价
            $product_data["special_price"] =$_product->getFinalPrice() ; //特价

            $product_data["model"] = $_product->getSku();
            $storeId = Mage::app()->getStore()->getId();
            $summaryData = Mage::getModel('review/review_summary')->setStoreId($storeId)->load($_product->getId());
            $product_data["rating"] = ($summaryData['rating_summary'] * 5) / 100;
            $product_data["shipping"] = Mage::getStoreConfig('carriers/flatrate/price');
            // $product_data["related_product"]=self::getRelatedProduct($_product); //旧接口 乱序
            if ($_product->isSalable() == 1)
                $product_data["in_stock"] = 1;
            else
                $product_data["in_stock"] = 0;
            echo  Zend_Json::encode($product_data);*/
    }


    /*
     *过滤产品名字
     * return product name
     *
     */
    public function getProductName($name, $all = false)
    {

        return $name;


    }

    /*
     * 获得产品图片
     * $_product 产品ID
     * return array
     */

    public function getImages($_product)
    {
        $HTML = '<div id="showArea">';
        foreach ($_product->getMediaGalleryImages() as $image) {
            $HTML .= '<a href="' . $image->getUrl() . '" rel="zoom1" rev="' . $image->getUrl() . '"><img src="' . $image->getUrl() . '" /></a>';
            /*<li>
            <a class="thumb-link" href="#" title="" >
            <img  width="75" height="75" alt="">
            </a>
        </li>';*/

        }
        $HTML .= '</div>';
        return $HTML;
    }

    /*
     * 获得产品选项
     * $_product 产品id
     * 返回 array
     */

    public function getOptions($_product)
    {
        foreach ($_product->getOptions() as $_option) {
            $values = $_option->getValues();
            foreach ($values as $v) {
                $option[] = array(
                    'title' => $v->getTitle(),
                    'id' => $v->getId()
                );
            }
        }
        return $option;
    }

    /*
     * 获得产品属性
     * $_product 产品id
     * return array
     */
    public function getAttributesItem($_product)
    {
        $attributes = $_product->getAttributes();
        foreach ($attributes as $attribute) {
            if ($attribute->getIsVisibleOnFront()) {
                $attributeLabel = $attribute->getFrontendLabel();
                $attributescode[] = array(
                    'label' => $attribute->getFrontend()->getLabel($_product),
                    'value' => $attribute->getFrontend()->getValue($_product)
                );

            }
        }
        return $attributescode;
    }


    public function getImgBox($_product)
    {
        $galler_image = Mage::helper('catalog/image')->init($_product, 'image');
        $ming = $this->getBoxImages($_product);
        $moreImg = $this->getMoreImg($_product);
        $HTML="";
		  $HTML.='<div class="product-image product-image-zoom">
    <div class="product-image-gallery">
        <img id="image-main"
             class="gallery-image visible"
             src="'.$galler_image.'"
                 />

       '.$ming.'

    </div>
</div>
'.$moreImg;
return $HTML;

    }


    public function getBoxImages($_product)
    {
        $html = "";
        $i = 0;
        foreach ($_product->getMediaGalleryImages() as $_image):
            $html .= ' <img id="image-' . $i . '"
                 class="gallery-image"
                 src="' . $_image->getUrl() . '"
                 data-zoom-image="' . $_image->getUrl() . '" />';
            $i++;
        endforeach;
        return $html;
    }

    public function getMoreImg($_product)
    {
        $html = "";
        if (count($_product->getMediaGalleryImages()) > 0):
            $html .= '
<div class="more-views">
    <ul class="product-image-thumbs">';
            $i = 0;
            foreach ($_product->getMediaGalleryImages() as $_image):
                $html .= '
        <li>
            <a class="thumb-link" href="#" data-image-index="' . $i . '">
                <img src="' . $_image->getUrl() . '"
                     width="75" height="75"  />
            </a>
        </li>';
                //  endif;
                $i++; endforeach;
            $html .= '
    </ul>
</div>';
        endif;
        return $html;

    }
}


?>


        <?php $_collectionSize = $_productCollection->count() ?>
        <?php $_columnCount = $this->getColumnCount(); ?>
            <ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">
                <?php $i=0; foreach ($_productCollection as $_product): ?>
                    <?php /*if ($i++%$_columnCount==0): ?>
            <?php endif*/ ?>
                    <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">


                        <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
                            <?php// $_imgSize = '230,300'; ?>
                            <img id="product-collection-image-<?php echo $_product->getId(); ?>  gridcatalog"
                                 src="<?php echo $this->helper('catalog/image')
                                     ->init($_product, 'small_image')
                                     ->resize(230,302); ?>"
                                 alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
                        </a>





                        <div class="product-info-m" onmouseover="show_product('item_info_<?php echo $_product->getSku()?>','product-info-m-xs_<?php echo $_product->getSku()?>')"    onmouseout="hide_product('item_info_<?php echo $_product->getSku()?>','product-info-m-xs_<?php echo $_product->getSku()?>')" >
                            <div class="itm_info_name"  id="product-info-m-xs_<?php echo $_product->getSku()?>" >  <div class="product-info-m">
                                    <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></h2>
                                    <?php
                                    // Provides extra blocks on which to hang some features for products in the list
                                    // Features providing UI elements targeting this block will display directly below the product name
                                    ?>

                                    <script>

                                        <?php
                                  if ($this->getChild('name.after')) {
                                  $HTML_OPTIONS="";
                                       $_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
                                       foreach ($_nameAfterChildren as $_nameAfterChildName) {
                                           $_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
                                           $_nameAfterChild->setProduct($_product);
                                           $HTML_OPTIONS .=$_nameAfterChild->toHtml();
                                       }
                                   }  ?>

                                        //    this.options_color_<?php echo $_product->getId()?>='<?php echo $HTML_OPTIONS ?>';



                                    </script>

                                    <?php echo $this->getPriceHtml($_product, true) ?>
                                    <?php if($_product->getRatingSummary()): ?>
                                        <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                                    <?php endif; ?>
                                    <div class="actions">

                                        <?php/*
                        <?php if(!$_product->canConfigure() && $_product->isSaleable()): ?>
                            <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                        <?php elseif($_product->getStockItem() && $_product->getStockItem()->getIsInStock()): ?>
                            <a title="<?php echo $this->__('View Details') ?>" class="button" href="<?php echo $_product->getProductUrl() ?>"><?php echo $this->__('View Details') ?></a>
                        <?php else: ?>
                            <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                        <?php endif; ?>


                        <ul class="add-to-links">
                            <?php if ($this->helper('wishlist')->isAllow()) : ?>
                                <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                            <?php endif; ?>
                            <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                                <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                            <?php endif; ?>
                        </ul> */?>
                                    </div>
                                </div></div>
                            <div id="item_info_<?php echo $_product->getSku()?>" class="product-info-m  item_info_more product-interactions" >

                                <div class="quick_info quickview js-quickview" id="quick_info">  <a onclick="ajax_item('<?php echo $_product->getId()?>');return false;" style="cursor:pointer"><span></span> <p>Quick View</p></a></div>
                                <div class="save_info save-later js-save-later">
                                    <a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" >
                                        <span></span>
                                        <p data-bind="click: saveForLater">
                                            <?php echo $this->__('Save') ?>
                                        </p></a>
                                </div>
                            </div>
                        </div>






                    </li>
                    <?php /*if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
            <?php endif*/ ?>
                <?php endforeach ?>
            </ul>
            <script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>
        <?php endif; ?>

        <div class="toolbar-bottom">
            <?php echo $this->getToolbarHtml() ?>
        </div>
    </div>
<?php endif; ?>
<?php
// Provides a block where additional page components may be attached, primarily good for in-page JavaScript
if ($this->getChild('after')) {
    $_afterChildren = $this->getChild('after')->getSortedChildren();
    foreach ($_afterChildren as $_afterChildName) {
        $_afterChild = $this->getChild('after')->getChild($_afterChildName);
        //set product collection on after blocks
        $_afterChild->setProductCollection($_productCollection);
        echo $_afterChild->toHtml();
    }
}
?>



<script type="text/javascript">





    function ajax_item(opj){

        //  alert (option);
        var ajaxContent=ajax_content(opj);
    }

    function ajax_content(SKU){
        var ajaxContent;
        $j.ajax({
            type: "post",
            data: {sku:SKU},
            cache: false,
            url: '<?php echo  Mage::getUrl('weicot');?>',
            success: function (result) {
                toHtml_Ajax(result);
            },
            error: function (result) {
                alert(result);
                alert("错误请求");
            }});

    };


    //将 HTML 写入到页面中
    function toHtml_Ajax(result){
        /*
         var Json = eval('('+result+')');

         //alert(Json.url);
         var CLOSE='<button id="CLOSE_BOX">========CLOSE================</button>';
         var html= CLOSE
         +Json.url
         +Json.name   //产品名
         +Json.short_description  //短描述
         +Json.attributes    //属性
         +Json.description    //长描述
         +Json.image    //图片 集
         +Json.model   //sku
         +Json.option  //选项
         +Json.shipping  //
         +Json.special_price  //特价
         +Json.price;      //价格

         //alert( html);
         */
        //写入  页面
        openNewDiv('newDiv',result);
        //加载幻灯片
        ProductMediaManager.init();   //skin\frontend\rwd\default\js\app.js   调用函数的位置
        /**

var ProductMediaManager = {
    IMAGE_ZOOM_THRESHOLD: 20,
    imageWrapper: null,

    destroyZoom: function() {
        $j('.zoomContainer').remove();
        $j('.product-image-gallery .gallery-image').removeData('elevateZoom');
    },

    createZoom: function(image) {
        // Destroy since zoom shouldn't be enabled under certain conditions
        ProductMediaManager.destroyZoom();

        if(
            // Don't use zoom on devices where touch has been used
            PointerManager.getPointer() == PointerManager.TOUCH_POINTER_TYPE
            // Don't use zoom when screen is small, or else zoom window shows outside body
            || Modernizr.mq("screen and (max-width:" + bp.medium + "px)")
        ) {
            return; // zoom not enabled
        }

        if(image.length <= 0) { //no image found
            return;
        }

        if(image[0].naturalWidth && image[0].naturalHeight) {
            var widthDiff = image[0].naturalWidth - image.width() - ProductMediaManager.IMAGE_ZOOM_THRESHOLD;
            var heightDiff = image[0].naturalHeight - image.height() - ProductMediaManager.IMAGE_ZOOM_THRESHOLD;

            if(widthDiff < 0 && heightDiff < 0) {
                //image not big enough

                image.parents('.product-image').removeClass('zoom-available');

                return;
            } else {
                image.parents('.product-image').addClass('zoom-available');
            }
        }

        image.elevateZoom();
    },

    swapImage: function(targetImage) {
        targetImage = $j(targetImage);
        targetImage.addClass('gallery-image');

        ProductMediaManager.destroyZoom();

        var imageGallery = $j('.product-image-gallery');

        if(targetImage[0].complete) { //image already loaded -- swap immediately

            imageGallery.find('.gallery-image').removeClass('visible');

            //move target image to correct place, in case it's necessary
            imageGallery.append(targetImage);

            //reveal new image
            targetImage.addClass('visible');

            //wire zoom on new image
            ProductMediaManager.createZoom(targetImage);

        } else { //need to wait for image to load

            //add spinner
            imageGallery.addClass('loading');

            //move target image to correct place, in case it's necessary
            imageGallery.append(targetImage);

            //wait until image is loaded
            imagesLoaded(targetImage, function() {
                //remove spinner
                imageGallery.removeClass('loading');

                //hide old image
                imageGallery.find('.gallery-image').removeClass('visible');

                //reveal new image
                targetImage.addClass('visible');

                //wire zoom on new image
                ProductMediaManager.createZoom(targetImage);
            });

        }
    },

    wireThumbnails: function() {
        //trigger image change event on thumbnail click
        $j('.product-image-thumbs .thumb-link').click(function(e) {
            e.preventDefault();
            var jlink = $j(this);
            var target = $j('#image-' + jlink.data('image-index'));

            ProductMediaManager.swapImage(target);
        });
    },

    initZoom: function() {
        ProductMediaManager.createZoom($j(".gallery-image.visible")); //set zoom on first image
    },

    init: function() {
        ProductMediaManager.imageWrapper = $j('.product-img-box');

        // Re-initialize zoom on viewport size change since resizing causes problems with zoom and since smaller
        // viewport sizes shouldn't have zoom
        $j(window).on('delayed-resize', function(e, resizeEvent) {
            ProductMediaManager.initZoom();
        });

        ProductMediaManager.initZoom();

        ProductMediaManager.wireThumbnails();

        $j(document).trigger('product-media-loaded', ProductMediaManager);
    }
};

$j(document).ready(function() {
    ProductMediaManager.init();
});

            ****/






    }

    var docEle = function()
    {
        return document.getElementById(arguments[0]) || false;
    }
    function openNewDiv(_id,ajaxContent)
    {
        var m = "mask";
        if (docEle(_id)) document.body.removeChild(docEle(_id));
        if (docEle(m)) document.body.removeChild(docEle(m));
//mask遮罩层
        var newMask = document.createElement("div");
        newMask.id = m;
        newMask.style.position = "absolute";
        newMask.style.zIndex = "1";
        _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth-100);
        _scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight-15);
        newMask.style.width = _scrollWidth + "px";
        newMask.style.height = _scrollHeight + "px";
        newMask.style.top = "0px";
        newMask.style.left = "0px";
        newMask.style.background = "#33393C";
        newMask.style.filter = "alpha(opacity=40)";
        newMask.style.opacity = "0.40";
        document.body.appendChild(newMask);
//弹出层
        var newDiv = document.createElement("div");
        newDiv.id = _id;
        newDiv.style.position = "absolute";
        newDiv.style.zIndex = "9999";
        newDivWidth = 812;
        newDivHeight = 765;
        newDiv.style.width = newDivWidth + "px";
        newDiv.style.height = newDivHeight + "px";
        newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
        newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
        newDiv.style.background = "#EFEFEF";
        newDiv.style.border = "1px solid #860001";
        newDiv.style.padding = "5px";
        newDiv.innerHTML = ajaxContent;
        document.body.appendChild(newDiv);
//弹出层滚动居中
        function newDivCenter()
        {
            newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2-50) + "px";
            newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2-50) + "px";
        }
        if(document.all)
        {
            window.attachEvent("onscroll",newDivCenter);
        }
        else
        {
            window.addEventListener('scroll',newDivCenter,false);
        }
//关闭新图层和mask遮罩层
        //    var newA = document.createElement("a");
        var  newA=document.getElementById('CLOSE_BOX');
        newA.href = "#";
        newA.innerHTML = "CLOSE";
        newA.onclick = function()
        {
            if(document.all)
            {
                window.detachEvent("onscroll",newDivCenter);
            }
            else
            {
                window.removeEventListener('scroll',newDivCenter,false);
            }
            document.body.removeChild(docEle(_id));
            document.body.removeChild(docEle(m));
            return false;
        }
        //    newDiv.appendChild(newA);  //将这个快放到底部
    }
    function show_product(obj,objs){
        var XS = document.getElementById(obj);
        var MINFP=document.getElementById(objs);
        MINFP.style.display ="none";
        XS.style.display ="block";
    }

    function hide_product(obj,objs){
        var YC = document.getElementById(obj);
        var MINFP=document.getElementById(objs);
        MINFP.style.display ="block";
        YC.style.display = "none";
    }





</script>
<style>

    .item_info_more{
        display:none;
        height: 58px;
        margin-top: -6px;
    }

    .product-info-m   .quick_info {
        float:left;
        width: 50%;
    }
    .product-info-m   .save_info{
        float:left;
        width: 40%;
    }
    .product-interactions .save-later {
        float: right;
        width: 49%;
    }
    .product-interactions .save-later, .product-interactions .quickview {
        color: #000;
        display: inline-block;
        font-family: 'FuturaStd', Tahoma, Sans-serif;
        font-size: 9pt;
        font-weight: bold;
        height: 47px;
        line-height: 14px;
        margin-top: 9px;
        text-align: center;
    }
    .product-interactions .save-later span {
        background-position: center 0;
        height: 24px;
    }
    .product-interactions .save-later span, .product-interactions .quickview span {
        background-image: url(http://assets.asosservices.com/Store/images/search/quickview.png);
        background-repeat: no-repeat;
        clear: both;
        display: inline-block;
        text-align: center;
        width: 100%;
    }
    .product-interactions .quickview:hover {
        text-decoration: none;
    }
    .product-interactions .quickview {
        float: left;
        width: 49%;
    }
    .product-interactions .quickview:hover span {
        background-position: center -63px;
    }
    .product-interactions .quickview span {
        background-position: center -48px;
        height: 15px;
        margin: 5px 0 4px;
    }
    .product-interactions .save-later.saved span, .product-interactions .save-later:hover span {
        background-position: center -24px;
    }
    /**image zoom**/
    .product-image-gallery .gallery-image {
        display: none;
        width: 305px !important;
        height: 321px !important;
    }
    .product-image-zoom  {
        float: right !important;
    }


转载请注明:(●--●) Hello.My Weicot » 产品 列表页 ajax 加载产品 弹出层方式