Removing the handheld footer menu causes js error: Uncaught ReferenceError: storefrontScreenReaderText is not defined

[mikezielonka]

Hi All! I removed the handheld footer menu using the documented process.

Removing the footer menu then results in a JS error in the browser

navigation.min.js?ver=4.2.0:formatted:24 Uncaught ReferenceError: storefrontScreenReaderText is not defined at navigation.min.js?ver=4.2.0:formatted:24:59 at NodeList.forEach (<anonymous>) at HTMLDocument.<anonymous> (navigation.min.js?ver=4.2.0:formatted:18:48)

// Remove the handheld footer menu
add_action( 'init', 'ddoo_remove_storefront_handheld_footer_bar' );

function ddoo_remove_storefront_handheld_footer_bar() {
  remove_action( 'storefront_footer', 'storefront_handheld_footer_bar', 999 );
}

[imanish003]

Hi @mikezielonka, Thanks for creating the issue – much appreciated! 🙏

I followed the documented process, and it's working fine for me.

Can you please share the steps to reproduce the issue including how/where you added following lines?

 // Remove the handheld footer menu
add_action( 'init', 'ddoo_remove_storefront_handheld_footer_bar' );

function ddoo_remove_storefront_handheld_footer_bar() {
  remove_action( 'storefront_footer', 'storefront_handheld_footer_bar', 999 );
}

[stefpb]

I have the same behavior. The footer.min.js is still loading. Look at the source code (right click in browser -> view page source):

<script src='/wp-content/themes/storefront/assets/js/footer.min.js?ver=4.2.0' id='storefront-handheld-footer-bar-js'></script>

You should also remove the script by

    wp_dequeue_script('storefront-handheld-footer-bar');

[sunyatasattva]

Interesting! Thanks @stefpb for the insight. @danielwrobert, I wonder if we should:

1. Add script enqueueing directly within the storefront_handheld_footer_bar function, so that when this is removed via an action, the script should get removed as well.
2. Add the instructions to dequeue the script within the docs.

Thoughts?

[Aljullu]

Agree with both solutions. I specially like 1 because it would keep the snippet simple as-is. In the meanwhile, the solution proposed by @stefpb above, works.

I added the good first issue label to this issue, in case somebody wants to contribute a fix.

Currently the script is enqueued here:

https://github.com/woocommerce/storefront/blob/c012bb5edc58e900cacbe871807a566e9369758d/inc/woocommerce/class-storefront-woocommerce.php#L165

and with the proposed solution it would be enqueued inside this function:

https://github.com/woocommerce/storefront/blob/654917738e7e6ac380b6708aca6b735ac5284ed4/inc/woocommerce/storefront-woocommerce-template-functions.php#L662

We would need to test that it doesn't cause any regressions, though.