CODEWITHSUNDEEP
javascriptjquery
Francesca
Francesca

Reputation: 28128

Show slide-out div after click of button

I'm using simplecart.js on my site to add items to a cart. Site can be seen here.

The documentation mentions use of an After Add function:

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

I'd like to use this function in my script to make a slide out div panel to slide out once the item has been added.

The existing jQuery for the slide out panel is:

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

There is also the full jQuery in a linked file:

///////
///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();});

Plus the existing simplecart javascript.

simpleCart({
    checkout: {
      type: "PayPal",
      email: "[email protected]",
    },
    currency: "GBP"
});

I understand that I need to use the basic callback example, but instead of the console message need to call the javascript for the slide out, but I'm not sure of the syntax. Can anyone help?

Upvotes: 0

Views: 643

Answers (2)

Jason
Jason

Reputation: 2364

To check if the cart is open or not, then open if it isn't:

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

The "!" means to check if it does "not" have the class 'out.' In other words, the if statement is true if it is in, which causes the click method to fire.

Upvotes: 0

Ohgodwhy
Ohgodwhy

Reputation: 50767

You call slideOutTab() on DOM load, so the element has a click handler attached to it.

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

Upvotes: 1

Related Questions