目前正在修改 Magento 添加到购物车的功能...
我们试图在这里实现的是：-
从类别列表中：-
方案 1
单击添加到购物车按钮时，如果产品有选项，请在给出继续结帐选项之前在花式框中显示选项。
截屏：
活生生的例子：这个页面上的几乎所有产品。
这按预期工作。
方案 2
单击添加到购物车按钮时，如果产品没有选项，则在fancybox 中显示“产品已成功添加到购物车”消息，并带有“结帐”或“继续购物”选项。
问题：无法在这个上达到预期。我们目前所做的是一个弹出通知，它几乎完成了可以在此页面上看到的工作（只需选择靠近顶部的任何产品即可查看实际操作）。
然而，这不使用fancybox，它是一个使用以下标记的自定义实现：-
<div id="fancybox<?php echo $_product->getId()?>" class="fancybox fancy-popupbox" style="position:absolute; display:none;">
<div class="popup-text"></div>
<div class="popup-buttons">
<div style="float:left">
<button onclick="setLocation('')" class="button btn-shop" title="Continue Shopping" type="button"><span><span><?php echo $this->__('Continue Shopping') ?></span></span></button>
</div>
<div style="float:right">
<button onclick="setLocation('<?php echo $this->getBaseUrl();?>checkout/onepage')" class="button btn-checkout" title="Proceed to Checkout" type="button"><span><span><?php echo $this->__('Proceed to Checkout') ?></span></span></button>
</div>
</div>
</div>
然后调用：-
jQuery('.popup-text').html(data.message);
jQuery('.fancy-popupbox').show();
从 setLocationAjax 函数的成功函数中：-
function setLocationAjax(url,id){
url += 'isAjax/1';
url = url.replace("checkout/cart","ajax/index");
jQuery('#ajax_loader'+id).show();
try {
jQuery.ajax( {
url : url,
dataType : 'json',
success : function(data) {
jQuery('#ajax_loader'+id).hide();
jQuery('.popup-text').html(data.message);
jQuery('.fancy-popupbox').show();
setAjaxData(data,false);
}
});
} catch (e) {
}
}
从修改添加到购物车按钮调用此函数的位置：-
<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>
您可以在上面链接的页面上看到完整的标记，或者您可以查看此 pastebin中使用的完整 list.phtml 文件（还包括完整脚本）。
因此，总而言之，我们本质上是想修改场景 2，使其像场景 1 一样运行。
从@JFK 的答案编辑 1
它似乎不喜欢你的建议。
当我实施...
jQuery.fancybox.open('.fancy-popupbox');
控制台返回...
Uncaught TypeError: Object function (obj){var opts;if(busy){return;}
busy=true;opts=typeof arguments[1]!=='undefined'?arguments[1]:{};selectedArray=[];selectedIndex=parseInt(opts.index,10)||0;if($.isArray(obj)){for(var i=0,j=obj.length;i<j;i++){if(typeof obj[i]=='object'){$(obj[i]).data('fancybox',$.extend({},opts,obj[i]));}else{obj[i]=$({}).data('fancybox',$.extend({content:obj[i]},opts));}}
selectedArray=jQuery.merge(selectedArray,obj);}else{if(typeof obj=='object'){$(obj).data('fancybox',$.extend({},opts,obj));}else{obj=$({}).data('fancybox',$.extend({content:obj},opts));}
selectedArray.push(obj);}
if(selectedIndex>selectedArray.length||selectedIndex<0){selectedIndex=0;}
_start();} has no method 'open'
所以完整的脚本在实施后看起来像这样......
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('.fancybox').fancybox(
{
hideOnContentClick : true,
width: 382,
autoDimensions: true,
type : 'iframe',
showTitle: false,
scrolling: 'no',
onComplete: function(){
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 .links')){
jQuery('.header .links').replaceWith(data.toplink);
}
jQuery.fancybox.close();
}
}
function setLocationAjax(url,id){
url += 'isAjax/1';
url = url.replace("checkout/cart","ajax/index");
jQuery('#ajax_loader'+id).show();
try {
jQuery.ajax( {
url : url,
dataType : 'json',
success : function(data) {
jQuery('#ajax_loader'+id).hide();
jQuery('.popup-text').html(data.message);
//jQuery('.fancy-popupbox').show();
jQuery.fancybox.open('.fancy-popupbox');
setAjaxData(data,false);
}
});
} catch (e) {
}
}
请指出是否需要进一步调整。谢谢。
编辑 2 更新的 Fancybox
我已将 Fancybox 从 1.3.4 更新到 2.1.4（但这不在链接到的实时站点上 - 它已在开发版本上更新）。所以我们需要重写以与 Fancybox 2 一起工作，然后看起来现在。
Edit3 进度更新
我觉得我快到了，我只需要帮助将以下内容转换为正确的语法（我认为）。如果有人可以提供帮助，那就太好了。
jQuery.noConflict();
jQuery(document).ready(function( $ ){
$('.fancybox').fancybox(
{
hideOnContentClick : true,
width: 382,
autoDimensions: true,
type : 'iframe',
showTitle: false,
scrolling: 'no',
onComplete: function(){
$('#fancybox-frame').load(function() { // wait for frame to load and then gets it's height
$('#fancybox-content').height(jQuery(this).contents().find('body').height()+30);
$.fancybox.resize();
});
}
}
);
});
function showOptions(id){
$('#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 .links')){
jQuery('.header .links').replaceWith(data.toplink);
}
jQuery.fancybox.close();
}
}
function setLocationAjax(url,id){
url += 'isAjax/1';
url = url.replace("checkout/cart","ajax/index");
$('#ajax_loader'+id).show();
try {
jQuery.ajax( {
url : url,
dataType : 'json',
success : function(data) {
//jQuery('#ajax_loader'+id).hide();
//jQuery('.popup-text').html(data.message);
//jQuery('.fancy-popupbox').show();
//jQuery.fancybox.open('.fancy-popupbox');
jQuery.fancybox.open('.fancy-popupbox',{
// API options here
});
setAjaxData(data,false);
}
});
} catch (e) {
}
}