Просмотр корзины и нажатие кнопки Back браузера ломает работу скриптов. Как полечить?

Question

[Stanislav6]

Как появляется проблема:
Когда с любой страницы открываю выезжающее окно мини-корзины (из шапки сайта) и жму "Посмотреть корзину", после чего жму кнопку назад в браузере.

Тема с этим багом: https://maudern.thunder-stores.com/shop/

Ломается работа выезжающего окна (для мини-корзины и фильтров, например).
На html и body, после нажатия кнопки Назад вешается .noscroll, который по идее должен убираться после нажатия ссылки внутри выезжающего окна, если исходить из скрипта:

(function($) {
	"use strict";

	// open shop filters.
	$( document ).on(
		'click touch',
		'.woocommerce .woocommerce-product-loop-header .woocommerce-product-filters span.filters-toggle.offcanvas-filters-toggle',
		function(){
			$( 'html, body' ).addClass( 'noscroll' );
			$( '.offcanvas.offcanvas-shop-filters' ).addClass( 'open' );
			$( '.overlay' ).addClass( 'visible right' ).removeClass( 'delay' );
		}
	);

	// open minicart.
	$( document ).on(
		'click touch',
		'#site-header #secondary-menu-wrapper ul#menu-site-tools > li#shopping-bag-site-tool',
		function(){
			$( 'html, body' ).addClass( 'noscroll' );

			if ( $( document ).find( '#site-header' ).hasClass( 'search-open' ) ) {
				// close search form.
				$( '#site-header #secondary-menu-wrapper ul#menu-site-tools > li#search-site-tool' ).removeClass( 'active' );
				$( '.overlay' ).removeClass( 'visible' );

				setTimeout(
					function() {
						$( '#site-header' ).removeClass( 'search-open' );
					},
					200
				);

				setTimeout(
					function() {
						$( '.offcanvas.offcanvas-minicart' ).addClass( 'open' );
						$( '.overlay' ).addClass( 'visible right' );
					},
					800
				);
			} else {
				$( '.offcanvas.offcanvas-minicart' ).addClass( 'open' );
				$( '.overlay' ).addClass( 'visible right' ).removeClass( 'delay' );
			}
		}
	);

	$( document.body ).on(
		'added_to_cart',
		function(){
			$( '#site-header #secondary-menu-wrapper ul#menu-site-tools > li#shopping-bag-site-tool' ).trigger( 'click' );
		}
	);

	// close offcanvas.
	$( document ).on(
		'click touch',
		'.overlay, .offcanvas-close',
		function(){

			$( 'html, body' ).removeClass( 'noscroll' );
			$( '.offcanvas' ).removeClass( 'open' );
			$( '.overlay' ).removeClass( 'visible right left' ).addClass( 'delay' );
		}
	);

	// close offcanvas on link click.
	$( document ).on(
		'click touch',
		'.offcanvas a',
		function(){
			// check for internal links.
			if ( ! $( this ).attr( 'href' ).startsWith( '#' ) &&
			! $( this ).attr( 'href' ).startsWith( '/' ) &&
			! $( this ).attr( 'href' ).startsWith( './' ) &&
			! $( this ).attr( 'href' ).startsWith( '../' ) &&
			! $( this ).attr( 'href' ).startsWith( $( location ).attr( "href" ) ) &&
			! $( this ).hasClass( 'remove' ) ) {

				// hide offcanvas.
				$( '.offcanvas' ).hide();
				// hide overlay.
				$( '.overlay' ).hide();
			}
		}
	);

})( jQuery );

Если перейти с главной страницы через мини-корзину на страницу корзины, затем нажать Назад, то по возвращении мини-корзина открыта. Если тоже самое проделать, например, со страницы магазина — по нажатию Назад корзина не отображается, но классы запрещающие скролл навешиваются, полностью ломая любое взаимодействие с этим выезжающим окном и любыми кнопками его вызывающими.

Это функционал платной темы, на секундочку, с площадки Woocommerce.

Я попытался в меру своих сил и знаний это побороть, в частности проверять, есть ли на нужных элементах класс .noscroll и убирать его при window.onload. Не помогло.
Выручайте.

Comments

[Lapita12]

$(window).on('popstate', function() {
  $('html, body').removeClass('noscroll');
});

[Stanislav6]

Всё равно вешает .noscroll

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        (function clearNoscroll() { 
            $(window).on('popstate', function() {
              $('html, body').removeClass('noscroll');
            });
        })();
    </script>
<?php 
} );

[Stanislav6]

Lapita12, в общем пробовал и так, и сяк. Неалло к сожалению.
Вот ссылка на тему с этим багом, если любопытно: https://maudern.thunder-stores.com/shop/

[Lapita12]

Stanislav6,

$(window).on('pageshow', function(event) {
  if (event.originalEvent.persisted) {
    $('html, body').removeClass('noscroll');
  }
});

Попробуйте так

[Stanislav6]

Lapita12, некоторые браузеры полечило, Firefox в частности. Но мобильные, увы, неалло. На андроиде Chrome полечился, на яблоке нет. Сафари тоже неалло.

[Lapita12]

Stanislav6,

$(window).on('popstate hashchange', function() {
  $('html, body').removeClass('noscroll');
});

$(window).on('beforeunload', function() {
  $('html, body').removeClass('noscroll');
});

Такое объединение должно сработать, отпишитесь

[Stanislav6]

Lapita12, на андроиде всё прекрасно, полечилось всё.
На яблоке ни Опера, ни Хром, ни Фаерфокс, ни Сафари неалло.
Проверял на IPhone 13 pro

Вставляю в шапку сайта, скрипты мини-окна в подвале:

add_action( 'wp_head', function () { 
    ?>
    <script type='text/javascript'>
        (function ($) {
            $(window).on('popstate hashchange', function() {
              $('html, body').removeClass('noscroll');
            });
            
            $(window).on('beforeunload', function() {
              $('html, body').removeClass('noscroll');
            });
        })( jQuery );
    </script>
<?php 
} );

[Lapita12]

Stanislav6,

$( document ).on(
  'click touch',
  '.offcanvas-close',
  function(){
    $( 'html, body' ).removeClass( 'noscroll' );
    $( '.offcanvas' ).removeClass( 'open' );
    $( '.overlay' ).removeClass( 'visible right' );
  }
);

Тогда попробуйте этот подход

[Stanislav6]

Lapita12, всё сломалось, ни декстоп, ни андроид, ни яблоко неалло.

add_action( 'wp_head', function () { 
    ?>
    <script type='text/javascript'>
        (function ($) {
            $( document ).on(
              'click touch',
              '.offcanvas-close',
              function(){
                $( 'html, body' ).removeClass( 'noscroll' );
                $( '.offcanvas' ).removeClass( 'open' );
                $( '.overlay' ).removeClass( 'visible right' );
              }
            );
        })( jQuery );
    </script>
<?php 
} );

[Lapita12]

Stanislav6,

// при открытии окна сохраняем информацию в sessionStorage
sessionStorage.setItem('isMiniCartOpen', true);

// при закрытии окна удаляем информацию из sessionStorage
sessionStorage.removeItem('isMiniCartOpen');

// при нажатии кнопки назад проверяем, открыто ли окно, и закрываем его при необходимости
window.addEventListener('popstate', function(event) {
  if (sessionStorage.getItem('isMiniCartOpen')) {
    // закрыть выезжающее окно
  }
});

Попробуйте такой метод

[Stanislav6]

Lapita12, ни декстоп, ни андроид неалло. Во всех браузерах.
С любой страницы перехожу в корзину из мини-козины, возвращаюсь, и кнопки перестают работать.
Делаю тоже самое с главной — после Back окно с мини-корзиной открыто.