Jquery 在ajax中按钮设置位置后在fancybox中显示消息

当前正在修改Magento添加到购物车功能

我们试图实现的目标是：-

从类别列表中：-

情景1 单击“添加到购物车”按钮时，如果产品具有选项，则在给出继续结帐的选项之前，在fancybox中显示选项

截图：

活生生的例子：几乎所有的产品都在网上

这是预期的工作

情景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>

在setLocationAjax函数中的success函数中：-

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>

控制台返回

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' 

请指出是否需要进一步调整。谢谢

编辑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) {
    }
}

---

如果要在fancybox中显示的是

<div id="fancybox<?php echo $_product->getId()?>" class="fancybox fancy-popupbox" style="position:absolute; display:none;">
...
</div>

试试这个

jQuery.fancybox.open('.fancy-popupbox');

假设您已正确加载fancybox js/css文件

如果要向fancybox添加API选项，请尝试以下操作

jQuery.fancybox.open('.fancy-popupbox',{
    // API options here
});

---

谢谢@JFK。请查看我在问题中的编辑以查看您建议的结果。这似乎不起作用，但可能是我的错误。@GeoffJackson您确定您使用的是fancybox 2吗？？否则请尝试

jQuery.fancybox（'.fancy-popubox'）$.fancybox.open（）

方法只存在于v2.x中。我注意到在您的编辑中，您的API选项适用于v1.3.4是的，对不起-我目前使用的是1.3.4版。是否更容易修改您的建议以适合此版本，或者更容易升级正在使用的Fancybox版本？谢谢

<div id="fancybox<?php echo $_product->getId()?>" class="fancybox fancy-popupbox" style="position:absolute; display:none;">
...
</div>

jQuery('.fancy-popupbox').show();

jQuery.fancybox.open('.fancy-popupbox');

jQuery.fancybox.open('.fancy-popupbox',{
    // API options here
});