2

Good day, I am trying to manual ajax this

<a href="/cbg-gummies?add-to-cart=55337&convert_to_sub_55337=0" class="testing"> Add to cart </a>

What this does is, It will add to the cart the one-time purchase option from the woocommerce subscription. I am trying to ajax it so it won't refresh the page when you click on it.

I found an idea how to manually ajax it by using these lines of codes. Reference here

(function($) {
    $(document).on('click', '.testing', function(e) {
        var $thisbutton = $(this);

        try {
            var href = $thisbutton.prop('href').split('?')[1];

            if (href.indexOf('add-to-cart') === -1) return;
        } catch (err) {
            return;
        }

        e.preventDefault();

        var product_id = href.split('=')[1];

        var data = {
            product_id: product_id
        };

        $(document.body).trigger('adding_to_cart', [$thisbutton, data]);

        $.ajax({
            type: 'post',
            url: wc_add_to_cart_params.wc_ajax_url.replace(
                '%%endpoint%%',
                'add_to_cart'
            ),
            data: data,
            beforeSend: function(response) {
                $thisbutton.removeClass('added').addClass('loading');
            },
            complete: function(response) {
                $thisbutton.addClass('added').removeClass('loading');
            },
            success: function(response) {
                if (response.error & response.product_url) {
                    window.location = response.product_url;
                    return;
                } else {
                    $(document.body).trigger('added_to_cart', [
                        response.fragments,
                        response.cart_hash
                    ]);

                    $('a[data-notification-link="cart-overview"]').click();
                }
            }
        });

        return false;
    });
})(jQuery);

The codes above work and it does ajax however, it displays the monthly subscription, not the one-time purchase. It should display the one-time purchase because of the &convert_to_sub_55337=0 which means the one-time subscription option is selected.

Also, I am getting an error after clicking the button on the console log

Uncaught TypeError: $button is undefined

I am a newbie to handling ajax so I am unsure about the issue

Thank you in advance!!

  • use jquery(this) insted assiging button hope it will work. – Arman H Oct 26 '21 at 03:29
  • Hi @ArmanH, thanks for commenting. I tried but the error is still there, the console log error is not a priority until the ajax is sorted out, I can find a way to fix it. Hopefully :D –  Oct 26 '21 at 03:39
  • Are you sure convert_to_sub_55337 is the right variable ? If you manualy enter this url in your browser is it working properly ? I think is not passing it to the cart . – Snuffy Oct 26 '21 at 06:10
  • Hi @MartinMirchev thanks for the comment, I just tested it by manually entering the URL, and it passes and an item to the cart with the one-time purchase subscription option. So 'sure convert_to_sub_55337' is working –  Oct 26 '21 at 13:34

1 Answers1

0

you can try this code i hope it will helped.

   (function($) {
    $(document).on('click', '.testing', function(e) {
        var $thisbutton = $(this);

        try {
            var href = $thisbutton.prop('href').split('?')[1];

            if (href.indexOf('add-to-cart') === -1) return;
        } catch (err) {
            return;
        }

        e.preventDefault();

        var product_id = href.split('=')[1];

        var data = {
            product_id: product_id
        };

        $(document.body).trigger('adding_to_cart', [$thisbutton, data]);

        $.ajax({
            type: 'post',
            url: wc_add_to_cart_params.wc_ajax_url.replace(
                '%%endpoint%%',
                'add_to_cart'
            ),
            data: data,
            beforeSend: function(response) {
                jQuery('.testing').removeClass('added').addClass('loading');
            },
            complete: function(response) {
                jQuery('.testing').addClass('added').removeClass('loading');
            },
            success: function(response) {
                if (response.error & response.product_url) {
                    window.location = response.product_url;
                    return;
                } else {
                    $(document.body).trigger('added_to_cart', [
                        response.fragments,
                        response.cart_hash
                    ]);

                    $('a[data-notification-link="cart-overview"]').click();
                }
            }
        });

        return false;
    });
})(jQuery);
Arman H
  • 1,594
  • 18
  • 22
  • What changes did you make? I tested it and I'm still getting the same result and error on the console log. Correct me if I am wrong but the snippet you posted is the same as the snippet I posted :D The only difference is it has a –  Oct 26 '21 at 04:22
  • remove the script tag – Arman H Oct 26 '21 at 04:59
  • Hi @Arman H, is this supposed to be in a funciton.php? –  Oct 27 '21 at 04:00
  • no bro just write in your script. think simple. just replace your click event script. – Arman H Oct 27 '21 at 05:49