显示在的fancybox消息后，在阿贾克斯按钮设定位置 [英] Showing message in fancybox after button set location in ajax
问题描述
目前修改的Magento添加到购物车功能...
我们正在试图在这里实现的是： -
从分类列表： -
案例1
在选择之前添加到购物车按钮被点击，如果产品有选择，在的fancybox显示选项来进行结算给出。
截图：
活生生的例子：pretty的上的此页面。
这是按预期工作。
情景2
当添加到购物车按钮被点击，如果产品没有选项，显示产品已被添加到购物车成功的消息在的fancybox一个选项结账或者继续购物。
问题：无法达到预期的这一点。我们做什么现在已经是一个弹出通知，几乎不会由此可以看出，在工作此页面（只需选择任何产品上方附近看到在行动）。
这不使用的fancybox但是，它是使用下面的标记一个自定义实现： -
＆LT; DIV ID =的fancybox＆LT;？PHP的echo $ _product-＆GT;的getId（）＆GT;？类=的fancybox花式popupbox的风格=的位置是：绝对的;显示：无;＆GT;
＆LT; DIV CLASS =弹出文本＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS =弹出窗口按钮＆GT;
＆LT; DIV的风格=浮动：左＆GT;
＆LT;按钮的onclick =的setLocation（''）级=按钮BTN-店称号=继续购物类型=按钮＆GT;＆LT;跨度＆GT;＆LT;跨度＆GT;＆LT; PHP的echo $这个 - ＆GT ; __（继续购物）＆GT;＆LT; / SPAN＆GT;＆LT; / SPAN＆GT;＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; DIV的风格=浮动：权利＆GT;
＆LT;按钮的onclick =的setLocation（'＆LT;？PHP的echo $这个 - ＆GT; getBaseUrl（）;？＆GT;结账/ onepage'）级=按钮BTN结账称号=前往收银台TYPE =按钮＆GT;＆LT;跨度＆GT;＆LT;跨度＆GT;＆LT; PHP的echo $这个 - ＆GT; __（'前往收银台'）＆GT;＆LT; / SPAN＆GT;＆LT; / SPAN＆GT;＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
，然后调用： -
的jQuery（。弹出文本）HTML（data.message）;
jQuery的（'花式popupbox。）显示（）。
这是在setLocationAjax函数成功函数中： -
函数setLocationAjax（URL，ID）{
URL + ='isAjax / 1';
URL = url.replace（结帐/车，AJAX /指数）;
jQuery的（'＃ajax_loader'+ id）的.show（）;
尝试 {
jQuery.ajax（{
网址：网址，
数据类型：JSON，
成功：功能（数据）{
jQuery的（'＃ajax_loader'+ id）的.hide（）;
jQuery的（'的弹出文字。）HTML（data.message）。
jQuery的（'花式popupbox。）显示（）。
setAjaxData（数据，FALSE）;
}
}）;
}赶上（五）{
}
}
如果这个功能是从修改被叫到添加到购物车按钮： -
＆LT;按钮式=按钮称号=＆LT; PHP的echo $这个 - ＆GT; __（加入购物车）GT;？类=按钮BTN-车的onclick =setLocationAjax（'＆LT;？PHP的echo $这个 - ＆GT; getAddToCartUrl（$ _产品）＆GT;'，'＆LT;？PHP的echo $ _product-＆GT;的getId（）＆GT？ ;'）＆GT;＆LT;跨度＆GT;＆LT;跨度＆GT;＆LT; PHP的echo $这个 - ＆GT; __（加入购物车）GT;＆LT; / SPAN＆GT;＆LT; / SPAN＆GT;＆LT; /按钮＆GT;
您可以看到完整的标记在上面链接的页面，也可以看看在使用完整的list.phtml在文件的这个引擎收录（包括完整的脚本也可以）。
因此，要总结，我们基本上要修改方案2，使工作方式与方案1。
修改1从@肯尼迪的答案
这似乎不喜欢你的建议。
当我实现了...
jQuery.fancybox.open（花式popupbox。'）;
控制台返回...
未捕获的类型错误：目标函数（OBJ）{VAR选择采用;如果（忙）{返回;}
忙碌= TRUE;选择采用= typeof运算arguments[1]!=='undefined'?arguments[1]:{};selectedArray=[];selectedIndex=parseInt(opts.index,10)||0;if($.isArray(obj)){for(var I = 0，J = obj.length; I＆LT; D];我++）{如果（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）;}其他{如果（typeof运算obj=='object'){$(obj).data('fancybox',$.extend({},opts,obj));}else{obj=$({}).data('fancybox',$.extend({content:obj},opts));}
selectedArray.push（物镜）;}
如果（的selectedIndex＆GT; selectedArray.length ||的selectedIndex℃下）{的selectedIndex = 0;}
_start（）;}有没有一种方法开放
所以，完整的脚本看起来像这样实施后...
jQuery.noConflict（）;
jQuery的（文件）。就绪（函数（）{
jQuery的（'。的fancybox）。的fancybox（
{
hideOnContentClick：真正的，
宽度：382，
autoDimensions：真正的，
类型：IFRAME，
showTitle：假的，
滚动：'不'，
的onComplete：函数（）{
jQuery的（'＃的fancybox帧）。负载（函数（）{//等待框架加载，然后得到它的高度
。jQuery的（'＃的fancybox内容），高度（。jQuery的（本）.contents（）找到（身体）高度（）+ 30）;
jQuery.fancybox.resize（）;
}）;
}
}
）;
}）;
功能showOptions（ID）{
jQuery的（'＃的fancybox'+ id）的.trigger（点击）;
}
功能setAjaxData（数据，IFRAME）{
如果（data.status =='错误'）{
警报（data.message）;
}其他{
如果（jQuery的（'。块车'））{
jQuery的（块车。）replaceWith（data.sidebar）。
}
如果（jQuery的（'。头.links'））{
jQuery的（'。头.links）replaceWith（data.toplink）。
}
jQuery.fancybox.close（）;
}
}
功能setLocationAjax（URL，ID）{
URL + ='isAjax / 1';
URL = url.replace（结帐/车，AJAX /指数）;
jQuery的（'＃ajax_loader'+ id）的.show（）;
尝试 {
jQuery.ajax（{
网址：网址，
数据类型：JSON，
成功：功能（数据）{
jQuery的（'＃ajax_loader'+ id）的.hide（）;
jQuery的（'的弹出文字。）HTML（data.message）。
// jQuery的（'花式popupbox。）显示（）。
jQuery.fancybox.open（花式popupbox。'）;
setAjaxData（数据，FALSE）;
}
}）;
}赶上（五）{
}
}
请指出，如果进一步的调整将是必要的。谢谢你。
修改2更新的fancybox
我已经更新的fancybox从1.3.4到2.1.4（但这不是在直播现场挂 - 它的更新上一个开发版）。所以，我们需要重写用的fancybox 2工作，那么现在看来。
EDIT3最新进展
我觉得我几乎没有，我只是需要转换下面正确的语法（我认为）的帮助。如果有人能够帮助这一点，那将是晶圆厂。
jQuery.noConflict（）;
jQuery的（文件）。就绪（函数（$）{
$（'。的fancybox）。的fancybox（
{
hideOnContentClick：真正的，
宽度：382，
autoDimensions：真正的，
类型：IFRAME，
showTitle：假的，
滚动：'不'，
的onComplete：函数（）{
$（'＃的fancybox帧）。负载（函数（）{//等待框架加载，然后得到它的高度
$（'＃的fancybox内容），高度（jQuery的（本）.contents（）找到（身体）高度（）+ 30）;
$ .fancybox.resize（）;
}）;
}
}
）;
}）;
功能showOptions（ID）{
$（'＃的fancybox'+ id）的.trigger（点击）;
}
功能setAjaxData（数据，IFRAME）{
如果（data.status =='错误'）{
警报（data.message）;
}其他{
如果（jQuery的（'。块车'））{
jQuery的（块车。）replaceWith（data.sidebar）。
}
如果（jQuery的（'。头.links'））{
jQuery的（'。头.links）replaceWith（data.toplink）。
}
jQuery.fancybox.close（）;
}
}
功能setLocationAjax（URL，ID）{
URL + ='isAjax / 1';
URL = url.replace（结帐/车，AJAX /指数）;
$（'＃ajax_loader'+ id）的.show（）;
尝试 {
jQuery.ajax（{
网址：网址，
数据类型：JSON，
成功：功能（数据）{
// jQuery的（'＃ajax_loader'+ id）的.hide（）;
//jQuery('.popup-text').html(data.message）;
// jQuery的（'花式popupbox。）显示（）。
//jQuery.fancybox.open('.fancy-popupbox'）;
jQuery.fancybox.open（'花式popupbox'，{
// API在这里选择
}）;
setAjaxData（数据，FALSE）;
}
}）;
}赶上（五）{
}
}
如果你想在的fancybox显示什么内容
＆LT; DIV ID =的fancybox＆LT;？PHP的echo $ _product-＆GT;的getId（）＆GT;？类=的fancybox花式popupbox的风格=的位置是：绝对的;显示：无;＆GT;
...
＆LT; / DIV＆GT;
然后，而不是此行的阿贾克斯成功回调
的jQuery（花式popupbox。）显示（）。
试试这个
jQuery.fancybox.open（花式popupbox。'）;
假设你已经正确加载的fancybox JS / CSS文件
如果您要添加的API选项的fancybox，试试这个
jQuery.fancybox.open（'花式popupbox'，{
// API在这里选择
}）;
Currently modifying a Magento add to cart functionality...
What we're attempting to achieve here is:-
From the category listing:-
Scenario 1
When add to cart button is clicked, if product has options, show options in fancybox before the option to proceed to checkout is given.
Screenshot:
Live example: Pretty much any product on this page.
This is working as expected.
Scenario 2
When add to cart button is clicked, if product has no options, show a 'product has been added to cart successfully' message with an option to 'checkout' or 'continue shopping' in fancybox.
Issue: Unable to achieve the desired on this one. What we do currently have is a popup notification that almost does the job which can be seen at this page (just select any product near the top to see in action).
This doesn't use fancybox however, it is a custom implementation that uses the following markup:-
<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>
Which is then called with:-
jQuery('.popup-text').html(data.message);
jQuery('.fancy-popupbox').show();
From within the success function in setLocationAjax function:-
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) {
}
}
Where this function is called from a modification to the add to cart button:-
<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>
You can see the complete markup at the pages linked to above or you can take a look at the complete list.phtml file in use at this pastebin (includes full script also).
So, to summarise, we essentially want to modify scenario 2 so that it operates like scenario 1.
Edit 1 from @JFK's Answer
It didn't seem to like your suggestion.
When I implemented...
jQuery.fancybox.open('.fancy-popupbox');
Console returned...
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'
So the complete script looked like this after implementation...
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) {
}
}
Please point out if a further tweak would have been necessary. Thanks.
Edit 2 Updated Fancybox
I've updated Fancybox from 1.3.4 to 2.1.4 (but this isn't on the live site linked to - it's updated on a dev version). So what we have needs rewriting to work with Fancybox 2 then it seems now.
Edit3 Progress Update
I feel I'm almost there, I just need help on converting the below to the correct syntax (I think). If anyone could assist with this, that would be fab.
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) {
}
}
If what you want to display in fancybox is the contents of
<div id="fancybox<?php echo $_product->getId()?>" class="fancybox fancy-popupbox" style="position:absolute; display:none;">
...
</div>
then, instead of this line in your ajax success callback
jQuery('.fancy-popupbox').show();
try this
jQuery.fancybox.open('.fancy-popupbox');
assuming that you have properly loaded fancybox js/css files
If you want to add API options to fancybox, try this
jQuery.fancybox.open('.fancy-popupbox',{
// API options here
});
这篇关于显示在的fancybox消息后，在阿贾克斯按钮设定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
