1

当我从 Magento 的搜索结果页面将商品添加到购物车时,它不会显示 FancyBox 确认框。该项目确实被添加到购物车中。在主类别页面上,它会在将商品添加到购物车时显示确认框 OK。

FancyBox 的 JS 和 CSS 包含在类别和搜索结果页面中,我已手动检查源。

如果我更换

jQuery.fancybox.close();

alert(data.message);

然后它会显示一个标准的 Javascript 警报,说明它已添加到购物车并显示正确的项目详细信息。FancyBox 是首选,但带有产品图像。

这是app\design\frontend\custom_package\default\template\catalog\product\list.phtml的代码,Javascript 位于末尾。感谢您查看:D

<?php
    $_productCollection=$this->getLoadedProductCollection();
    $columnCount = themeOptions('column_count');
    $this->setColumnCount($columnCount);
    $_helper = $this->helper('catalog/output');   

?>
<?php if(!$_productCollection->count()): ?>
<p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
<?php else: ?>
<div class="category-products">
    <?php echo $this->getToolbarHtml() ?>
    <?php // List mode ?>
    <?php if($this->getMode()!='grid'): ?>
    <?php $_iterator = 0; ?>
    <?php $imgSize = 192; ?>
    <ol class="products-list" id="products-list">
    <?php foreach ($_productCollection as $_product): ?>
        <li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?>">
            <?php include('view/labels.phtml')  ?>   
            <?php $mainImg = $this->helper('catalog/image')->init($_product, 'small_image')->resize($imgSize); ?>
            <?php $backImg = $this->getLayout()->createBlock("ajax/listmedia")->setTemplate("catalog/product/list/media.phtml")->setData('size', $imgSize)->setData('product', $_product)->toHtml();  ?>               
            <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
                <?php if($backImg != 'null'): ?><img src="<?php echo $backImg ?>" width="<?php echo $imgSize ?>" height="<?php echo $imgSize ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /><?php endif; ?>
                <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($imgSize) ?>" <?php if($backImg != 'null'): ?>onmouseover="hideImage(this)" onmouseout="showImage(this)"<?php endif; ?> width="<?php echo $imgSize ?>" height="<?php echo $imgSize ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
            </a>

             <?php // Product description ?>
            <div class="product-shop">
                <div class="f-fix">
                    <?php $_productNameStripped = $this->stripTags($_product->getName(), null, true); ?>
                    <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $_productNameStripped; ?>"><?php echo $_helper->productAttribute($_product, $_product->getName() , 'name'); ?></a></h2>
                    <?php if($_product->getRatingSummary()): ?>
                    <?php echo $this->getReviewsSummaryHtml($_product) ?>
                    <?php endif; ?>
                    <div id="productimgover<?php echo $_product->getId()?>" style="display: none;"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(64); ?>" width="64" height="64" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></div>
                    <div id='productname<?php echo $_product->getId()?>' style='display:none'><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></div>
                    <div class="desc std">
                        <?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
                        <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $_productNameStripped ?>" class="link-learn"><?php echo $this->__('Learn More') ?></a>
                    </div>
                    <?php if(themeOptions('addto')): ?>
                        <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>
                    <?php endif; ?>
                </div>
                <div style="clear: both;"></div>
            </div>
            <div class="addtocont">
                <?php echo $this->getPriceHtml($_product, true) ?>
                <?php if($_product->isSaleable()): ?>
                    <?php if ( !($_product->getTypeInstance(true)->hasRequiredOptions($_product) || $_product->isGrouped()) ) { ?>
                        <p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocationAjax('<?php echo $this->getAddToCartUrl($_product) ?>','<?php echo $_product->getId()?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>
                    <?php } else { ?>
                        <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="showOptions('<?php echo $_product->getId()?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                        <a href='<?php echo $this->getUrl('ajax/index/options',array('product_id'=>$_product->getId()));?>' class='fancybox' id='fancybox<?php echo $_product->getId()?>' style="display: none;" ><?php echo $this->__('Add to Cart') ?></a>
                    <?php }  ?>
                <?php else: ?>
                <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                <?php endif; ?>            
            </div>
        </li>
    <?php endforeach; ?>
    </ol>
    <script type="text/javascript">decorateList('products-list', 'none-recursive')</script>

    <?php else: ?>

    <?php // Grid Mode ?>

    <?php $_collectionSize = $_productCollection->count() ?>
    <?php 

        $_columnCount = $this->getColumnCount(); 

        if($_columnCount == 4){
            $imgSize = 180;
        }elseif($_columnCount == 3){
            $imgSize = 245;
        }

    ?>

    <?php $i=0; foreach ($_productCollection as $_product): ?>
        <?php if ($i++%$_columnCount==0): ?>
        <ul class="products-grid columns<?php echo $_columnCount ?>">
        <?php endif ?>
            <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                <?php if($_product->getRatingSummary()): ?>
                    <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                <?php endif; ?>
                <?php include('view/labels.phtml')  ?>
                <?php $mainImg = $this->helper('catalog/image')->init($_product, 'small_image')->resize($imgSize); ?>
                <?php $backImg = $this->getLayout()->createBlock("ajax/listmedia")->setTemplate("catalog/product/list/media.phtml")->setData('size', $imgSize)->setData('product', $_product)->toHtml();  ?>               
                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
                    <?php if($backImg != 'null'): ?><img src="<?php echo $backImg ?>" width="<?php echo $imgSize ?>" height="<?php echo $imgSize ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /><?php endif; ?>
                    <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($imgSize) ?>" <?php if($backImg != 'null'): ?>onmouseover="hideImage(this)" onmouseout="showImage(this)"<?php endif; ?> width="<?php echo $imgSize ?>" height="<?php echo $imgSize ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
                </a>

                <div id="productimgover<?php echo $_product->getId()?>" style="display: none;"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(64); ?>" width="64" height="64" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></div>

                <div class="moreinfo">
                    <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>
                    <div id='productname<?php echo $_product->getId()?>' style='display:none'><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></div>
                    <?php echo $this->getPriceHtml($_product, true) ?>
                        <?php if($_product->isSaleable()): ?>
                            <?php if ( !($_product->getTypeInstance(true)->hasRequiredOptions($_product) || $_product->isGrouped()) ) { ?>
                                <p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocationAjax('<?php echo $this->getAddToCartUrl($_product) ?>','<?php echo $_product->getId()?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>

                            <?php } else { ?>
                                <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="showOptions('<?php echo $_product->getId()?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                                <a href='<?php echo $this->getUrl('ajax/index/options',array('product_id'=>$_product->getId()));?>' class='fancybox' id='fancybox<?php echo $_product->getId()?>' style="display: none;" ><?php echo $this->__('Add to Cart') ?></a>
                            <?php }  ?>
                        <?php else: ?>
                            <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                        <?php endif; ?>
                        <div class="clear"></div>
                        <?php if(themeOptions('addto')): ?>
                            <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>
                        <?php endif; ?>
                        <div class="clear"></div>
                </div>
            </li>
        <?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
        </ul>
        <?php endif ?>
        <?php endforeach ?>
        <script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>

    <?php endif; ?>
        <script type="text/javascript">
        jQuery.noConflict();
        jQuery('.fancybox').fancybox({
            hideOnContentClick : true,
            width: 582,
            autoDimensions: true,
            type : 'iframe',
            showTitle: false,
            scrolling: 'no',
            onComplete: function(){ //Resize the iframe to correct size
            jQuery('#fancybox-frame').load(function() { // wait for frame to load and then gets it's height
                jQuery('#fancybox-content').height(jQuery(this).contents().find('body').height()+30);
                jQuery.fancybox.resize();
             });

            }
        });        
        function showOptions(id){
            jQuery('#fancybox'+id).trigger('click');
        }
        function setAjaxData(data,iframe){
            if(data.status == 'ERROR'){
                alert(data.message);
            }else{
                if(jQuery('.block-cart')){
                    jQuery('.block-cart').replaceWith(data.sidebar);
                }
                if(jQuery('.header .block-cart-header')){
                    jQuery('.header .block-cart-header').replaceWith(data.topcart);
                } 
                jQuery.fancybox.close();
            }
        }
        function setLocationAjax(url,id){
            url += 'isAjax/1';
            url = url.replace("checkout/cart","ajax/index");
            var msgHtml;
            var productImg = jQuery('#productimgover' + id).html();
            var windowOver = jQuery('#addedoverlay');
            var windowBox = jQuery('#added');
            var titleForBox = jQuery('#productname' + id).text();
            windowOver.show();
            windowBox.show().css({
                backgroundImage: "url('<?php echo $this->getSkinUrl('images/loading.gif')?>')"
            });
            try {
                jQuery.ajax( {
                    url : url,
                    dataType : 'json',
                    success : function(data) {
                        if(data.status == 'SUCCESS'){    
                            msgHtml = '<div class="added-content"><div style="float:left;">' + productImg + '</div><em>' + titleForBox + '</em> <?php echo $this->__('was successfully added to your shopping cart.') ?><div style="clear:both;"></div><a id="hidewindow" href="javascript:void(0);"><?php echo $this->__('Continue shopping') ?></a>&nbsp;<a href="<?php echo $this->getUrl('checkout/cart')?>"><?php echo $this->__('View cart & checkout') ?></a></div>';             
                        }else{
                            msgHtml = '<div class="added-content"><p class="error-msg" style="margin-bottom:15px;">' + data.message + '</p><a id="hidewindow" href="javascript:void(0);"><?php echo $this->__('Continue shopping') ?></a>&nbsp;<a href="<?php echo $this->getUrl('checkout/cart')?>"><?php echo $this->__('View cart & checkout') ?></a></div>';
                        }            
                        setAjaxData(data,false);

                        windowBox.css({
                              backgroundImage: 'none'
                        }).html(msgHtml);                      
                        windowOver.one('click',function(){
                            hidewindow(windowBox,windowOver);                    
                        });        

                        jQuery('#hidewindow').click(function(){
                            hidewindow(windowBox,windowOver);                    
                        });                        
                    }
                });
            } catch (e) {
            }
        }
        function hidewindow(windowBox,windowOver){
            windowOver.fadeOut(400);
            windowBox.fadeOut(400).html('');    
        }        
        function hideImage(img){
            jQuery(img).animate({
                'opacity' : 0
            },150);
        }

        function showImage(img){
            jQuery(img).animate({
                'opacity' : 1
            },150);
        }

        </script>
    <div class="toolbar-bottom">
        <?php echo $this->getToolbarHtml() ?>
    </div>
</div>
<?php endif; ?>
4

1 回答 1

0

您似乎有很多代码,我不能 100% 确定它们的用途。看看@fancybox options/apis

尝试这个

success : function(data) {
    if(data.status == 'SUCCESS'){    
        msgHtml = '<div class="added-content"><div style="float:left;">' + productImg + '</div><em>' + titleForBox + '</em> <?php echo $this->__('was successfully added to your shopping cart.') ?><div style="clear:both;"></div><a id="hidewindow" href="javascript:void(0);"><?php echo $this->__('Continue shopping') ?></a>&nbsp;<a href="<?php echo $this->getUrl('checkout/cart')?>"><?php echo $this->__('View cart & checkout') ?></a></div>';             
    }else{
        msgHtml = '<div class="added-content"><p class="error-msg" style="margin-bottom:15px;">' + data.message + '</p><a id="hidewindow" href="javascript:void(0);"><?php echo $this->__('Continue shopping') ?></a>&nbsp;<a href="<?php echo $this->getUrl('checkout/cart')?>"><?php echo $this->__('View cart & checkout') ?></a></div>';
    } 

    jQuery.fancybox({
         content: msgHtml,
         modal: true
    });           

}

请参阅如何使用内联 div 以编程方式触发 fancybox?

同样在function setAjaxData(data,iframe)成功的情况下,您似乎正在使用关闭fancyboxjQuery.fancybox.close();

改变这个

<a id="hidewindow" href="javascript:void(0);">?php echo $this->__('Continue shopping') ?>...

到(类似)

<a href="#" onclick="jQuery.fancybox.close();">...
于 2012-12-10T17:30:12.890 回答