Remove Class if User Dismisses Notification

Question

The Problem:

Client website is on a custom WordPress + WooCommerce theme. https://jesslittle.com

When the WooCommerce store-wide banner is activated, it adds a class drop-low to the main header, which drops it below the sitewide banner, so they reside on top of one another (this works).

What isn't working, is when the user dismisses the notification, it works on that page, but as soon as they navigate to a new page, the class comes back, and you're left with the blank space where the banner was.

What I've Tried:

It seems that the page refresh is the culprit so that should mean I need to add the document ready function, which I have? I've also read you need to add a cookie, but I'd like to avoid that. Also don't understand why I'd need to do that if the add class sticks on refresh?

The Code:

jQuery(document).ready(function () {
  
  'use strict';
  
  var c, currentScrollTop = 0,
     navbar = jQuery('header');

  jQuery(window).scroll(function () {
    var a = jQuery(window).scrollTop();
    var b = navbar.height();
   
    currentScrollTop = a;
   
    if (c < currentScrollTop && a > b + b) {
      navbar.addClass("header--up");
    } else if (c > currentScrollTop && !(a <= b)) {
      navbar.removeClass("header--up");
    }
    c = currentScrollTop;
  });


   // IF STORE WIDE NOTICE IS ON ADD CLASS
  if ($('p.woocommerce-store-notice')[0]) {
    $('header.navigation').addClass('drop-low');
  } 

  // IF DISMISS LINK IS CLICKED, DROP CLASS
  $('.woocommerce-store-notice__dismiss-link').on('click', function(){
    $('header.navigation').removeClass('drop-low');
  })

});

How are you adding that dismiss-able banner? i think in the same method you should add drop-low class and not in separate event, so drop-low class is added only when there is that banner added/loaded. — Muhammad Asadullah, May 14 '20 at 18:32
i see it is default Woocommerce store notice, condition where you addClass for drop-low, please change that to something more specific like this: as that condition is still true all the time due to p element in the html markup: https://stackoverflow.com/a/51842461/5323892 — Muhammad Asadullah, May 14 '20 at 18:40
the sitewide banner is autoloaded out of the box through WooCommerce. I toggle it on/off through the theme/appearance settings. — Sabotawsh, May 14 '20 at 18:43
Please check my explanation why your current condition is being always try so addingClass all the time, try code below to add class and see if it works? — Muhammad Asadullah, May 14 '20 at 18:45
Nope, that doesn't work. It's not adding the class to my header. I have it up on staging here: https://staging-jessicalittlephotographycom.kinsta.cloud/ — Sabotawsh, May 14 '20 at 19:05
I see it still has css display defined when shown, so we need to modify code a bit i update answer, check now, css display condition should be set to == to 'block' as it ias inline style block to show the banner, so replace "undefined" in old code to "block" — Muhammad Asadullah, May 14 '20 at 19:07
When you hit dismiss, **a cookie is set by your web site**, so first you need to find out where is the code that is setting that cookie, to get it's name… Then you will be able to check if that specific cookie is set and hide the banner "on load" event. — LoicTheAztec, May 15 '20 at 07:59
Is there any way to avoid using a cookie approach? What if a user has that turned off? — Sabotawsh, May 15 '20 at 14:57

Muhammad Asadullah · Accepted Answer · 2020-05-14T19:09:38.680

0

Issue you face is the the JS condition you are using is detecting if p tag with such class exists in the markup which is try even when notice is hidden as you can see when we dismiss the notice/banner it just set that to display:NONE but it still stays in the markup.

To solve this I suggest changing your addClass condition to something like this:

if ( jQuery('.woocommerce-store-notice').css('display') == "block") {
    $('header.navigation').addClass('drop-low');
}

edited May 14 '20 at 19:09

answered May 14 '20 at 18:44

Muhammad Asadullah

3,735
1
22
38

Thanks for the idea! However, it's still not working. I think it's because `header.navigation` is not a parent element of the sitewide banner `.woocommerce-store-notice` so the code doesn't know where to find it in the DOM. For testing purposes, when I switch the addClass to target `.woocommerce-store-notice` instead of the header with `drop-low` it works, because of it's proximity/specificity. – Sabotawsh May 15 '20 at 14:55
You are welcome. jQuery rule for condition and then one inside condition are independent so no need to be location dependent or in same proximity. I tried this code in console on your staging site yesterday and it worked. Not on PC now so can't test again. Good luck I am sure you will be able to solve , if still no solution. Please update question with updated code you have now so I can test and respond later . – Muhammad Asadullah May 15 '20 at 19:25
I stand corrected, it is working. I cleared my cache from the server level. Interesting solution! I would never have thought to target it like that using CSS, so thanks so much for your input. – Sabotawsh May 15 '20 at 20:39

Remove Class if User Dismisses Notification

The Problem:

What I've Tried:

The Code:

1 Answers1