Load mini cart scripts by default on touch-enabled (mobile) devices (#48769)

This commit is contained in:
Thomas Roberts 2024-06-28 13:23:32 +01:00 committed by GitHub
parent b5de9d101f
commit 06c98dee1b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 6 deletions

View File

@ -28,6 +28,12 @@ updateTotals( getMiniCartTotalsFromLocalStorage() );
getMiniCartTotalsFromServer().then( updateTotals );
setStyles();
declare global {
interface Window {
wcBlocksMiniCartFrontendDependencies: Record< string, dependencyData >;
}
}
window.addEventListener( 'load', () => {
const miniCartBlocks = document.querySelectorAll( '.wc-block-mini-cart' );
let wasLoadScriptsCalled = false;
@ -36,10 +42,7 @@ window.addEventListener( 'load', () => {
return;
}
const dependencies = window.wcBlocksMiniCartFrontendDependencies as Record<
string,
dependencyData
>;
const dependencies = window.wcBlocksMiniCartFrontendDependencies;
// Preload scripts
for ( const dependencyHandle in dependencies ) {
@ -158,8 +161,19 @@ window.addEventListener( 'load', () => {
loadContents();
};
miniCartButton.addEventListener( 'mouseover', loadScripts );
miniCartButton.addEventListener( 'focus', loadScripts );
// Load the scripts if a device is touch-enabled. We don't get the mouseover or focus events on touch devices,
// so the event listeners below won't work.
if (
'ontouchstart' in window ||
navigator.maxTouchPoints > 0 ||
window.matchMedia( '(pointer:coarse)' ).matches
) {
loadScripts();
} else {
miniCartButton.addEventListener( 'mouseover', loadScripts );
miniCartButton.addEventListener( 'focus', loadScripts );
}
miniCartButton.addEventListener( 'click', openDrawer );
const funcOnAddToCart =

View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Fixed a bug where the close button is not visible on the mini cart when viewed on a mobile device