I want to find where JS is written for data-action="add-to-wishlist" in Magento 2

I saw add-to-wishlist and data-action many times and on research I found the action in this file Mageto_Wishlit/js/addtowishlist.js

Here is a widget with two functions as below.

bindFormSubmit: function () {
    var self = this;

    $('[data-action="add-to-wishlist"]').on('click', function (event) {
        var element, params, form, action;
    alert("Hi I am Here");

        element = $('input[type=file]' + self.options.customOptionsInfo);
        params = $(event.currentTarget).data('post');
        form = $(element).closest('form');
        action = params.action;

        if (params.data.id) {
            $('<input>', {
                type: 'hidden',
                name: 'id',
                value: params.data.id

        if (params.data.uenc) {
            action += 'uenc/' + params.data.uenc;

        $(form).attr('action', action).submit();


_updateAddToWishlistButton: function (dataToAdd) {
    var self = this;

    $('[data-action="add-to-wishlist"]').each(function (index, element) {
        var params = $(element).data('post');
        alert("Hi I am Here");

        if (!params) {
            params = {
                'data': {}

        params.data = $.extend({}, params.data, dataToAdd, {
            'qty': $(self.options.qtyInfo).val()
        $(element).data('post', params);

I have tried to interupt these two events by adding alert but I'm not getting any success on this.

  • Did you compile after your change? Also, is the spelling correct of that path Mageto_Wishlit/js/addtowishlist.js – Gezzasa Nov 22 '19 at 12:06
  • yes i tried couple of times but its not working – User 69 Nov 22 '19 at 12:09
  • And the spelling of the path to the JS file? – Gezzasa Nov 22 '19 at 12:25
  • it is not in m code i just added the path of file i must not have to matter – User 69 Nov 22 '19 at 12:27

You should take a look at vendor/magento/magento2-base/lib/web/mage/dataPost.js

postTrigger: ['a[data-post]', 'button[data-post]', 'span[data-post]'],

When clicking those element types, it will trigger a post action.

For this file Mageto_Wishlit/js/addtowishlist.js, I don't dive depth yet. But, we can see the options:

options: {
    bundleInfo: 'div.control [name^=bundle_option]',
    configurableInfo: '.super-attribute-select',
    groupedInfo: '#super-product-table input',
    downloadableInfo: '#downloadable-links-list input',
    customOptionsInfo: '.product-custom-option',
    qtyInfo: '#qty'

This file will affect bundle, configurable, grouped, downloadable products and custom options.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.