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

时间：2013-08-22 12:26:08

标签： jquery ajax fancybox

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

我们在这里尝试实现的目标是： -

从类别列表中： -

场景1

如果点击添加到购物车按钮，如果产品有选项，请在进行结帐选项之前显示fancybox中的选项。

截图：

Showing product with options in fancybox so can't be added to cart without selecting a required option.

实例：几乎this page上的任何产品。

这是按预期工作的。

场景2

点击添加到购物车按钮后，如果产品没有选项，请显示“产品已成功添加到购物车”消息，并在fancybox中选中“结帐”或“继续购物”。

问题：无法达到此要求。我们目前所做的是一个弹出式通知，几乎完成了this page所见的工作（只需选择顶部附近的任何产品即可查看）。

这不使用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>

您可以在链接到上面的页面上看到完整的标记，或者您可以查看this 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) {
    }
}

1 个答案:

答案 0 :(得分：0)

如果要在fancybox中显示的内容是

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

然后，而不是你的ajax success回调中的这一行

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

试试这个

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

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

如果您想将API选项添加到fancybox，请尝试使用

jQuery.fancybox.open('.fancy-popupbox',{
    // API options here
});
相关问题
最新问题