CODEWITHSUNDEEP
javascriptjqueryclickgoogle-tag-manager
Nathan
Nathan

Reputation: 2970

Returning true on Link Click Event isn't working

I am trying to execute some code that has a callback when clicking on specific links. The callback is to click the link again, but on the second pass, the method returns true to follow normal behavior. But for some reason, it's not working? I use clickedLink for proper scope. In the event callback, this was referring to window.

UPDATE For a little more clarity, I agree normally this wouldn't be an optimal solution, but I am using Google's Tag Manager to monitor eCommerce traffic. I am trying to make sure product clicks get pushed to their dataLayer, and using their event callback to resume normal behavior. More info here: https://developers.google.com/tag-manager/enhanced-ecommerce#product-clicks

This is my updated method based on the answers below, but it still doesn't work.

var shopCartBtnClicked = false;
var clickedLink;
jQuery('#pdp_add_cart, .add_to_cart_button').click(function(e) {

    if (shopCartBtnClicked === true) {
        shopCartBtnClicked = false; //I make it here just fine
    } else {
        e.preventDefault();
        clickedLink = this;
        var pdp = false;
        if (mmProduct) {
            //On detail page
            mmProduct.qty = jQuery('input[name="quantity"]').val();
            pdp = true;
        } else {
            //on a shopping page
            mmProduct = findProductClicked(this);
            mmProduct.qty = 1;
        }

        dataLayer.push({
            'event': 'addToCart',
            'ecommerce': {
                'currencyCode': 'USD',
                'add': {
                    'products': [{
                        'name': mmProduct.name,
                        'id': mmProduct.id,
                        'price': mmProduct.price,
                        'quantity': mmProduct.qty
                    }]
                }
            },
            'eventCallback': function () {
                //Are we on a product detail page with a form, or just a shopping page with a link?
                if (pdp) {
                    jQuery('form.cart').submit(); //This part works just fine
                } else {
                    mmProduct = null;
                    shopCartBtnClicked = true;
                    $(clickedLink).trigger('click'); //This doesn't
                }
            }
        });
    }
});

Upvotes: 0

Views: 766

Answers (3)

PeterKA
PeterKA

Reputation: 24638

Taking @somethinghere's answer, your code can further be simplified to improve readability:

var shopCartBtnClicked = false;
jQuery('.add_to_cart_button').click(function(e) {
    if( shopCartBtnClicked ) {
        shopCartBtnClicked = false;
        // dont return, just let javascript handle this one
    } else {
        // only execute when you have set it to true
        e.preventDefault();

        shopCartBtnClicked = true;
        this.click();
    }
});

Or, as suggested by @Regent:

var shopCartBtnClicked = false;
jQuery('.add_to_cart_button').click(function(e) {
    shopCartBtnClicked = !shopCartBtnClicked;
    if( shopCartBtnClicked ) {
        e.preventDefault();
        this.click();
    }
});

Upvotes: 2

Nathan
Nathan

Reputation: 2970

OK guys, thank you for helping me get there. Normally, all of the other answers would work great, but for this specific tag manager instance, it appears (for some unknown reason), document.location works in the event callback fine here. This works.

It's weird because I used $(this).('form.cart').submit(); in a callback earlier in the code.

'eventCallback': function () {
     //Are we on a product detail page with a form, or just a shopping page with a link?
     if (pdp) {
        jQuery('form.cart').submit();
     } else {
        mmProduct = null;
        document.location = $(clickedLink).attr('href');
        //$(clickedLink).trigger('click');
     }
}

Upvotes: 0

somethinghere
somethinghere

Reputation: 17330

Its not very well done, but this should work:

var shopCartBtnClicked = false;
var clickedLink;
jQuery('.add_to_cart_button').click(function(e) {
    if (shopCartBtnClicked === true) {
        shopCartBtnClicked = false;
        // dont return, just let javascript handle this one
    } else {
        // only execute when you have not set it to true
        e.preventDefault();
        clickedLink = this;

        shopCartBtnClicked = true;
        $(clickedLink).trigger('click');
    }
});

I do have to wonder why you don't just execute your other logic first and then not prevent default anyway.

Upvotes: 3

Related Questions