我在 Magento 商店的标题中放置了一个 jQuery 下拉迷你购物车。当“您的购物车”链接悬停时,菜单下拉菜单将显示最近添加的项目。
我现在集成了 Ajax 添加到购物车扩展,允许客户添加到购物车而无需刷新页面。我现在遇到的问题是,当添加产品时,如果不将鼠标悬停在“您的购物车”链接上,就无法得知。
我希望能够在添加产品时自动下拉迷你购物车,但我不知道该怎么做?
有人可以给我一些建议吗?
提前致谢!
Ajax 添加到购物车的代码:
<script type="text/javascript">
//<![CDATA[
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(button, url) {
if (this.validator.validate()) {
var form = this.form;
var oldUrl = form.action;
if (url) {
form.action = url;
}
var e = null;
// Start of our new ajax code
if (!url) {
url = jQuery('#product_addtocart_form').attr('action');
}
url = url.replace("checkout/cart","ajax/index"); // New Code
var data = jQuery('#product_addtocart_form').serialize();
data += '&isAjax=1';
jQuery('#ajax_loader').show();
try {
jQuery.ajax( {
url : url,
dataType : 'json',
type : 'post',
data : data,
success : function(data) {
jQuery('#ajax_loader').show();
//alert(data.status + ": " + data.message);
if(jQuery('.block-cart')){
jQuery('.block-cart').replaceWith(data.sidebar);
}
if(jQuery('.header .links')){
jQuery('.header .links').replaceWith(data.toplink);
}
}
});
} catch (e) {
}
// End of our new ajax code
this.form.action = oldUrl;
if (e) {
throw e;
}
}
}.bind(productAddToCartForm);
productAddToCartForm.submitLight = function(button, url){
if(this.validator) {
var nv = Validation.methods;
delete Validation.methods['required-entry'];
delete Validation.methods['validate-one-required'];
delete Validation.methods['validate-one-required-by-name'];
if (this.validator.validate()) {
if (url) {
this.form.action = url;
}
this.form.submit();
}
Object.extend(Validation.methods, nv);
}
}.bind(productAddToCartForm);
//]]>
</script>
And code for Mini-Cart:
function slideUp()
{
jQuery('#topCartContent:visible').slideUp(1000);
jQuery('.top-link-cart').addClass('mini-cart-layer-up');
jQuery('.top-link-cart').removeClass('mini-cart-layer-down');
}
function slideDown()
{
jQuery('#topCartContent:hidden').slideDown(1000);
/*startTimer()*/ /* optional*/
jQuery('.top-link-cart').addClass('mini-cart-layer-down');
jQuery('.top-link-cart').removeClass('mini-cart-layer-up');
}
function toggleTopCart()
{
if(jQuery('#topCartContent').is(':visible'))
{
slideUp();
} else {
slideDown();
}
}
var timer;
function startTimer()
{
timer = setTimeout(function(){
slideUp();
}, 5000);
}
jQuery(document).ready(function(){
jQuery('.top-link-cart').mouseover(function(){
toggleTopCart();
});
jQuery('.top-link-cart').mouseover(function(){
clearTimeout(timer);
}).mouseout(function(){
startTimer();
});
jQuery("#topCartContent").mouseover(function() {
clearTimeout(timer);
}).mouseout(function(){
startTimer();
});
});
如果您使用 jQuery SlideDown()、-Up() 或 -Toggle(),您会注意到动画故障(也称为垂直移动层一秒钟)。
所以我所做的很简单:
if ( $('.messages .success-msg').length ) {
$('.messages').css('display','none'); // 'disable' default messages on top of content
function showCartForASecOrThreeAndAHalf() {
$('#mini-cart .menu').css('display','block');
setTimeout(function () { $('#mini-cart .menu').css('display',''); }, 3500); // display:'' to restore previous settings
}
showCartForASecOrThreeAndAHalf();
}
希望这对您有进一步的帮助;-)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)