1
当我从Magento的搜索结果页面添加项目到购物车时，它不显示FancyBox确认框。该物品会被添加到购物车。在主类别页面上，将商品添加到购物车时显示确认框确定。Magento FancyBox确认对话框
对于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> <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> <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; ?>
您的JavaScript控制台中是否有任何错误？ –
TypeError：jQuery.fancybox未定义\t jQuery.fancybox.close（）; –
嗨，如果jQuery.fancybox.close（）;被alert（data.message）替换;然后在控制台中没有错误 –