我在Magento商店的标题中放置了一个jQuery下拉式迷你购物车。当“你的购物车”链接悬停时,菜单会下拉以显示最近添加的项目。
我现在已经集成了Ajax add to cart扩展,允许客户在不刷新页面的情况下添加到购物车。我现在遇到的问题是,当添加产品时,如果不通过“你的购物车”链接就无法说出来。
我希望能够在添加产品时自动下载迷你购物车,但我不知道该怎么做?
请问有人给我一些建议吗?
提前致谢!
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();
});
});
答案 0 :(得分:4)
如果你使用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();
}
希望这对你有所帮助; - )
答案 1 :(得分:3)
这非常简单,但是我在浪费了几个小时(实际上并不浪费)之后就学到了这一点。
创建一个观察者,观察何时将产品添加到购物车中。
的Config.xml
<events>
<checkout_cart_product_add_after>
<observers>
<namespace_triggerevent>
<type>singleton</type>
<class>NameSpace_TriggerEvent_Model_Observer</class>
<method>opencartafteradd</method>
</namespace_triggerevent>
</observers>
</checkout_cart_product_add_after>
</events>
现在,Observer.php
<?php
class NameSpace_TriggerEvent_Model_Observer
{
public function opencartafteradd($observer) {
$event = $observer->getEvent();
$product = $event->getProduct();
Mage::getSingleton('core/session')->setOpenMinicart('ON');
}
}
请注意,我们只是将会话变量设置为ON。在此休息之后,将使用少量的javascript来处理,最好是header.phtml或footer.phtml(可用于网站上的每个页面:P)。我只需切换迷你购物车内容部分,几秒后再次切换
<script type="text/javascript">
var $k = jQuery.noConflict();
$k(document).ready(function() {
var screen_width = $k(window).width();
var openminicart = '<?php echo Mage::getSingleton('core/session')->getOpenMinicart();?>';
if (screen_width > 780) {
if (openminicart == 'ON') {
jQuery("#header-cart").slideToggle('slow');
jQuery("#header-cart").addClass('skip-active');
setTimeout(function() {
jQuery("#header-cart").slideUp('fast');
$k('#header-cart').removeClass('skip-active');
}, 4000);
<?php Mage::getSingleton('core/session')->unsOpenMinicart();?>
}
}
});
</script>
答案 2 :(得分:1)
你说'......当添加产品时,如果不通过“你的购物车”链接,就无法说出来。一定有办法。什么是触发购物车“下拉”操作的代码?
最有可能是jQuery.sliedeDown或类似的。在你的ajax调用的成功函数中,你需要执行相同的操作。或者,您可以以编程方式触发JavaScript事件,例如在成功函数中:$('#cart')。mouseover()。