目前正在修改Magento添加到购物车功能...
我们在这里尝试实现的目标是: -
从类别列表中: -
如果点击添加到购物车按钮,如果产品有选项,请在进行结帐选项之前显示fancybox中的选项。
截图:
实例:几乎this page上的任何产品。
这是按预期工作的。
点击添加到购物车按钮后,如果产品没有选项,请显示“产品已成功添加到购物车”消息,并在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一样运行。
它似乎不喜欢你的建议。
当我实施......
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) {
}
}
请指出是否需要进一步调整。感谢。
我已经将Fancybox从1.3.4更新到2.1.4(但这不是链接到的实时网站 - 它在开发版本上更新)。所以我们现在需要重写以使用Fancybox 2,现在看来。
我觉得我差不多了,我只需要帮助将下面的内容转换为正确的语法(我认为)。如果有人可以帮助解决这个问题,那将是一场工作。
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) {
}
}
答案 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
});