How to set pointer event to none for cart icon if in cart or checkout page

Question

I am trying to set a pointer event to none using javascript and php but not having any luck.

Basically, if I am on the cart or checkout page (woocommerce), then I want the cart icon (class name provided) to have no pointer event set over the cart. Else if it's on any other page then set pointer to it.

Currently the pointer still appears on the cart icon in cart of checkout page. What am I doing incorrect?

add_action('posts_selection', 'cart_icon_pointer');

function cart_icon_pointer(){
    if ( is_cart() || is_checkout() || is_page('cart') || is_page('checkout') ) {
        ?>
        <script>                
        function cartNoPointer() {
          document.getElementByClassName("ast-cart-menu-wrap").style.pointerEvents = "none";
        }
        </script>
        <?php
        } else {
        ?>
        <script>
        function cartPointer() {
            document.getElementByClassName("ast-cart-menu-wrap").style.pointerEvents = "pointer";
        }
        </script>
        <?php
    }
}

I was following this for guidance: https://docs.woocommerce.com/document/conditional-tags/

@Bhautik I have fixed this now. I will post my answer below. If you like, I do have one small issue (prob final issue of this website and I'll be done :) ) Here is the question: https://stackoverflow.com/questions/67147276/order-summary-stuck-on-spinner-due-to-a-code-snippet — BruceyBandit, Apr 18 '21 at 09:59
@Bhautik Actually the code in that question I posted is linked to this topic — BruceyBandit, Apr 18 '21 at 09:59

TodayCoder · Answer 1 · 2021-04-17T23:41:53.383

0

The correct call should be...

document.getElementsByClassName()

In PLURAL!

And you need to specify the element number of the collection, like this...

document.getElementsByClassName("ast-cart-menu-wrap")[0].style.pointerEvents = "none";

Pass the element number variable you want to operate on, as a parameter to your functions...

function cartNoPointer(Num) {document.getElementsByClassName("ast-cart-menu-wrap")[Num].style.pointerEvents = "none";}


function cartPointer(Num) {document.getElementsByClassName("ast-cart-menu-wrap")[Num].style.pointerEvents = "auto";}

Btw, there's no "pointer" value but "auto".

edited Apr 17 '21 at 23:41

answered Apr 17 '21 at 23:29

TodayCoder

11
2

Thank you for this, it still doesn't seem to work. Can you provide the full code so I can see? Not sure if I need a function set as well – BruceyBandit Apr 17 '21 at 23:35
Btw, if this is some kind of bastardized javascript library you’re working with, forget my response… you’ll have to take it up with them. – TodayCoder Apr 17 '21 at 23:52
No bastadize library. Been years since I did javascript I forgot how it sets. Couldn't even remember if I need a function lol – BruceyBandit Apr 17 '21 at 23:56
OK, you should call those functions now with the element number to operate on like this... cartNoPointer(24); – TodayCoder Apr 17 '21 at 23:58
You may have gone a bit too rusty to pull this off… :) – TodayCoder Apr 18 '21 at 00:00
Ah, still no luck. I think code needs a revamp. I think would be better when you have time to see your full code snippet because it's not happening and I'm looking at another issue... at 1am in the morning!!! :) – BruceyBandit Apr 18 '21 at 00:08

score 0 · Answer 2 · answered Apr 18 '21 at 10:00

add_action('posts_selection', 'check_cart_checkout_page');
function check_cart_checkout_page(){
    if(is_cart() || is_checkout()){
        cart_icon_pointer_none();       
    }
    else{
        cart_icon_pointer_auto();
    }
}

add_action( 'wp_footer', 'cart_icon_pointer_none');
add_action( 'wp_footer', 'cart_icon_pointer_auto');
function cart_icon_pointer_none(){
    ?>
    <script>
        (function(jQuery) {
        jQuery('.ast-header-woo-cart').css('pointer-events', 'none');
        });
   
    </script>
    <?php
}

function cart_icon_pointer_auto(){
    ?>
    <script>
        (function(jQuery) {
        jQuery('.ast-header-woo-cart').css('pointer-events', 'auto');
        });
    </script>
    <?php
}

How to set pointer event to none for cart icon if in cart or checkout page

2 Answers2