Problem with the Mini Cart on Mobile Devices

  • Resolved mattiaspl

    (@mattiaspl)


    1 year, 2 months ago

    Hello everyone!

    I using the Twenty Twenty-Four theme. I’m experiencing an issue with the mini cart in the mobile version. The X button (close button) often goes missing after opening the mini cart. The mini cart is added to the header. I’ve noticed that the problem with the cart occurs on WooCommerce pages that are built with blocks, for example, products displayed on the shop page via the Products Block (beta). I’ve also checked the ‘All Products’ block. No changes, the mini cart’s close button is still missing.

    Additionally, the console is returning 9 messages related to JS files:

    The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate asvalue and it is preloaded intentionally

The resource https://site.com/wp-content/plugins/woocommerce/assets/client/blocks/mini-cart-component-frontend.js?ver=85605a0a865173a632e8 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

The resource https://site.com/wp-includes/js/dist/style-engine.min.js?ver=17cbc030cba88a42ccb5 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

The resource https://site.com/wp-content/plugins/woocommerce/assets/client/blocks/mini-cart-contents-block/shopping-button-frontend.js?ver=11.8.0-dev was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

The resource https://site.com/wp-includes/js/dist/wordcount.min.js?ver=5a74890fd7c610679e34 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

The resource https://site.com/wp-includes/js/dist/autop.min.js?ver=dacd785d109317df2707 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

The resource https://site.coml/wp-content/plugins/woocommerce/assets/client/blocks/mini-cart-contents-block/filled-cart-frontend.js?ver=11.8.0-dev was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

The resource https://site.com/wp-content/plugins/woocommerce/assets/client/blocks/mini-cart-contents-block/empty-cart-frontend.js?ver=11.8.0-dev was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

The resource https://site.com/wp-content/plugins/woocommerce/assets/client/blocks/mini-cart-contents-block/filled-cart-frontend.js?ver=11.8.0-dev was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

The resource https://site.com/wp-content/plugins/woocommerce/assets/client/blocks/mini-cart-contents-block/shopping-button-frontend.js?ver=11.8.0-dev was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

    When switching to the 2023 theme, there’s no such issue with the mini cart nor any messages in the console.

    Plugins I have installed:

    • Advanced Custom Fields
    • Create Block Theme
    • Kadence Blocks – Gutenberg Blocks for Page Builder Features
    • UpdraftPlus
    • WooCommerce

    I’ve tested this on another site with different plugins, and the same issue with the mini cart persists.

    Any suggestions on what might be causing this?

    • This topic was modified 1 year, 2 months ago by mattiaspl.
Viewing 14 replies - 1 through 14 (of 14 total)

  • Hi there @mattiaspl ??

    Thanks for reaching out to Woo Support!

    Problem with the Mini Cart on Mobile Devices
    […]
    Any suggestions on what might be causing this?

    I went ahead with trying to reproduce this, with a test site of mine, to no avail. Below, I am attaching a screenshot, for reference.

    Direct link to image: https://snipboard.io/JsLvNc.jpg

    From what I gather, the results were different when the 2023 theme was activated, instead of 2024, on your end.

    As a next step, could you try with disabling all other plugins, except WooCommerce, and see if the issue persists, or otherwise? Some tools to assist with this are linked here.

    I hope this is helpful! Please let us know if you have any further questions about this matter, or if we misinterpret your concern in any way. We will be happy to help you further.

    • This reply was modified 1 year, 2 months ago by anastas10s. Reason: typo
    Thread Starter mattiaspl

    (@mattiaspl)

    Hi,
    thanks for answer!

    I tested it once again by creating a new installation. I installed all the plugins, but unfortunately, I still encounter the same issue – the absence of the shopping cart close icon on the shop and category pages. I gradually disabled all the plugins until only the WooCommerce plugin remained.

    I tested it on the default Twenty Twenty-Four theme as well as on a child theme that I created.

    The error (lack of the close button) occurs when I build the shop or category page using the “All Products” or “Product Collection (beta)” blocks. If I use the WooCommerce Product Grid block (i.e., the classic PHP template), the close icon appears, and everything works correctly.

    Therefore, I believe there is some issue in the code of these blocks: “All Products” and “Product Collection (beta).”

    Regardless of the blocks used and whether the close button appears or not, I always receive console messages of JavaScript, as mentioned in my initial post.

    I hope I have clearly described the situation. ?? If you need more information, please let me know!

    Thank you! ??

    Hi there @mattiaspl ??

    Thank you for reaching back, clarifying things further.

    The error (lack of the close button) occurs when I build the shop or category page using the “All Products” or “Product Collection (beta)” blocks. If I use the WooCommerce Product Grid block (i.e., the classic PHP template), the close icon appears, and everything works correctly.

    I went ahead with testing this, with a test site having the configuration listed below, to no avail either.

    • WordPress version 6.4.2
    • The Storefront theme (linked here)
    • Only the WooCommerce version 8.4.0 plugin
    • A page with the Mini-cart and All Products blocks in it, only

    Moreover, it appears no issues have been submitted via GitHub either.

    I tested it once again by creating a new installation. I installed all the plugins, but unfortunately, I still encounter the same issue – the absence of the shopping cart close icon on the shop and category pages.

    Could you make sure only WooCommerce is installed and activated, while testing, in order to isolate the issue on your end?

    Regardless of the blocks used and whether the close button appears or not, I always receive console messages of JavaScript, as mentioned in my initial post.

    Those messages are about resources being preloaded. No issues there.

    Looking forward to hearing from you!

    Thread Starter mattiaspl

    (@mattiaspl)

    Hi Pepe,

    I don’t quite understand why you were checking this on the Storefront theme? ??
    I wrote that I use Twenty Twenty-Four, and I also tested on the Twenty Twenty-Three theme ??
    And on these themes, there is a problem with the missing X in the mini cart on the shop page and categories built using the All Products blocks.
    I also tested with only one active plugin, which is Woocommerce.

    On the product page, the X button works, but probably only because I didn’t edit that page and didn’t change the colors and font sizes in the editor.
    On the production site, I made such changes, and the button does not work (Twenty Twenty-Four theme).

    Those messages are about resources being preloaded. No issues there.

    Ok, thanks for the info! ??

    Force of habit, @mattiaspl. ?? Tested with TT4 now, and the result was the same as yours — no X button, for the Mini-Cart block, on mobile viewport.

    I’d recommend creating a ticket via this page, for the TT4 theme, as the issue appears to be theme-related.

    I hope it helps! Let us know how it goes.

    Thread Starter mattiaspl

    (@mattiaspl)

    Hi Pepe, no problem ??

    Ok, I’ve just reported the issue by creating a new ticket. I hope the problem will be resolved.
    Thank you for your involvement and willingness to help.
    Have a wonderful day! ??

    Hi
    I closed the trac ticket because this is not a problem with the theme Twenty Twenty-Four. It is a problem with the Minicart block, and it happens in all six block themes that I tested. I only had WooCommerce active, not the WooCommerce blocks plugin.

    It is possibly an issue with timing or with the page content not updating when the browser is resized: If I refresh the page while the browser developer tools are open, it sometimes shows.

    Thread Starter mattiaspl

    (@mattiaspl)

    So, who can help me? Where else can I report this? ??
    Since the same issue is also occurring with you, it seems to be a rather serious matter.
    Thank you in advance for any guidance. ??

    @anastas10s may know for sure. I am not not part of the Woo organisation.
    https://github.com/woocommerce/woocommerce


    Thank you so much for chiming-in @poena!

    I went ahead with submitting it as an issue, over at the WooCommerce GitHub, @mattiaspl.

    Feel free to subscribe to it, in order to be notified of its progress.

    I hope this is helpful! Please let us know if you have any further questions or concerns.
    We will be happy to help you further.

    Thread Starter mattiaspl

    (@mattiaspl)

    @anastas10s / @poena – Thanks a lot! ?? I will be following this site on github ??

    Hey, @mattiaspl!

    Since the issue was reported on GitHub and is being looked at, I’ll close this thread now, okay? Any updates about the issue will be posted there, and we will do our best to solve it as soon as possible.

    Please reach out if there’s anything else we can do to help.

    Have a wonderful day!

    Thread Starter mattiaspl

    (@mattiaspl)

    Hi, @carolm29!
    Yes, I think this thread can be closed here. I am following the topic on github.
    Thank you. Have a nice day ??

    Plugin Support Zubair Zahid (woo-hc)

    (@doublezed2)

    Hello mattiaspl,

    Thank you for your reply.

    If you feel that the WooCommerce plugin has benefited your business, we would be truly grateful if you could take a few moments to leave a review.

    Your feedback not only supports our continuous improvement but also helps others make informed decisions about using WooCommerce.

    Thank you for choosing WooCommerce. ??

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Problem with the Mini Cart on Mobile Devices’ is closed to new replies.