Question

我在我的网站上使用simplecart.js将商品添加到购物车。 Site can be seen here.

文档提到使用After Add功能：

// basic callback example
simpleCart.bind( "afterAdd" , function( item ){
  console.log( item.get("name") + " was added to the cart!" );
});

我希望在我的脚本中使用此功能，以便在项目添加后滑出div panel以便滑出。

幻灯片面板的现有jQuery是：

///////
///Settings object
///////
var settings = {
    objSlideTrigger: '.trigger',
    objSlidePanel: '.panel'
}

链接文件中还有完整的jQuery：

///////
///Slide out tab
///////
function slideOutTab() {
    //Bind a click handler to the trigger
    $(settings.objSlideTrigger).bind('click' , function() {
        //If the panel isn't out
        if(!$(settings.objSlidePanel).hasClass('out')){
            //Animate it to left 0px
            $(settings.objSlidePanel).animate({
                'left' : '0px'
            });
            //Add the out class
            $(settings.objSlidePanel).addClass('out');
        }
        else {
            //Otherwise, animate it back in
            $(settings.objSlidePanel).animate({
                'left' : '-330px'
            });
            //Remove the out class
            $(settings.objSlidePanel).removeClass('out');
        }
    });
}
    $(function(){slideOutTab();});

加上现有的simplecart javascript。

simpleCart({
    checkout: {
      type: "PayPal",
      email: "hello@myemail.com",
    },
    currency: "GBP"
});

我知道我需要使用基本的回调示例，但是代替控制台消息需要调用javascript来滑出，但我不确定语法。有人可以帮忙吗？

Answer 1

您在DOM加载时调用slideOutTab()，因此该元素附加了click handler。

simpleCart.bind( "afterAdd" , function(){
    $('.trigger').click();
});

Answer 2

要检查购物车是否打开，如果不是，请打开：

simpleCart.bind( "afterAdd" , function(){
    if(!$(settings.objSlidePanel).hasClass('out')){
        $(settings.objSlidePanel).click();
    }
});

“！”意味着检查它是否“没有”让班级“出局”。换句话说，如果if语句是in，则if语句为true，这会导致click方法触发。

单击按钮后显示滑出div

2 个答案: