Mini Cart doesn't show contents and cause page freeze

[palewar]

Describe the bug

Mini Cart doesn't show contents and cause page freeze, using Twenty Twenty-Two theme.

To reproduce

Steps to reproduce the behavior:

1. Add Mini Cart Block in Header using FSE.
2. Open the shop page
3. Add any product to cart.
4. Click on the cart icon, cart pane does slide from right, but is just empty white space and nothing. Page is frozen as well. You have to refresh to use the site again.

Expected behavior

Cart should show product and cart total etc.

Screenshots

Environment

WordPress

• Core version: [6.0]
• Gutenberg version (if installed): [13.3.0]
• WooCommerce version: [6.5.1]
• WooCommerce Blocks version: [7.7.0]
• Site language: en_US
• Any other plugins installed: No

Desktop:

• OS: [macOS]
• Browser [safari]
• Version [15.5]

Additional context

Also tried without Gutenberg and Woocommerce Blocks. Same behaviour.

[frontdevde]

@palewar Could you please let us know the version of WordPress, WooCommerce, and WooCommerce Blocks you are using? Also whether the Gutenberg plugin is active and if so which version? Can you reliably reproduce the issue or does it happen intermittently?

[palewar]

Already included Wordpress, Woo versions. I can reproduce it reliably on mobile, desktop. Both chrome and safari browsers. On both localhost and web host installs. On both windows desktop and Mac OS and iOS and Android. I am surprised, how no one has reported about it yet.

[frontdevde]

We haven't been able to reproduce the issue on our end just yet. Could you please do me a favor and walk through the steps in the WooCommerce Self-Service Guide just so we eliminate any of the potential causes listed there. If the issue still persists, please share a WooCommerce Systems Status report (WooCommerce > Status > System Status > Get System Report) with us so we have more information at our disposal to investigate.

[palewar]

I did a fresh install on localhost to rule out exactly what's suggested in Self-Service guide and as mentioned there are no plugins and themes installed which can cause any conflict.

The only difference is I am using Twenty Twenty Two theme and not the Storefront as advised. As I believe Mini Cart block is made to work with FSE and Storefront isn't a FSE theme. If Mini Cart block can't work with default FSE theme of Wordpress, then I think it's broken IMO. Also I would like to mention that Mini Cart was actually working for us a few updates ago. It broke with some update of Wordpress or Woocommerce I believe. Can't say for sure which updated caused this, as we only noticed it recently ourselves.

System Report below:

`

WordPress Environment

WordPress address (URL): http://localhost/wordpress
Site address (URL): http://localhost/wordpress
WC Version: 6.5.1
REST API Version: ✔ 6.5.1
WC Blocks Version: ✔ 7.7.0
Action Scheduler Version: ✔ 3.4.0
Log Directory Writable: ✔
WP Version: 6.0
WP Multisite: –
WP Memory Limit: 512 MB
WP Debug Mode: ✔
WP Cron: ✔
Language: en_US
External object cache: –

Server Environment

Server Info: Apache/2.4.51 (Unix) OpenSSL/1.1.1k PHP/8.0.12 mod_perl/2.0.11 Perl/v5.32.1
PHP Version: 8.0.12
PHP Post Max Size: 40 MB
PHP Time Limit: 120
PHP Max Input Vars: 1000
cURL Version: 7.53.1
OpenSSL/1.1.1k

SUHOSIN Installed: –
MySQL Version: 5.5.5-10.4.21-MariaDB
Max Upload Size: 40 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Database

WC Database Version: 6.5.1
WC Database Prefix: wootest_
Total Database Size: 4.51MB
Database Data Size: 3.04MB
Database Index Size: 1.47MB
wootest_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wootest_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wootest_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wootest_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wootest_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wootest_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wootest_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wootest_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wootest_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wootest_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wootest_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wootest_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wootest_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wootest_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wootest_actionscheduler_actions: Data: 0.02MB + Index: 0.11MB + Engine InnoDB
wootest_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wootest_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wootest_actionscheduler_logs: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wootest_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wootest_comments: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wootest_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wootest_options: Data: 2.05MB + Index: 0.06MB + Engine InnoDB
wootest_postmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wootest_posts: Data: 0.08MB + Index: 0.06MB + Engine InnoDB
wootest_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wootest_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wootest_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wootest_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wootest_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wootest_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wootest_wc_admin_notes: Data: 0.05MB + Index: 0.00MB + Engine InnoDB
wootest_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wootest_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wootest_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wootest_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wootest_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wootest_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wootest_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wootest_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wootest_wc_product_attributes_lookup: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wootest_wc_product_download_directories: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wootest_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wootest_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wootest_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wootest_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wootest_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB

Post Type Counts

attachment: 6
page: 7
post: 2
product: 4
revision: 2
wp_global_styles: 2
wp_template_part: 1

Security

Secure connection (HTTPS): ❌
Your store is not using HTTPS. Learn more about HTTPS and SSL Certificates.
Hide errors from visitors: ❌Error messages should not be shown to visitors.

Active Plugins (3)

Gutenberg: by Gutenberg Team – 13.3.0
WooCommerce Blocks: by Automattic – 7.7.0
WooCommerce: by Automattic – 6.5.1

Inactive Plugins (2)

Akismet Anti-Spam: by Automattic – 4.2.4
Hello Dolly: by Matt Mullenweg – 1.7.2

Settings

API Enabled: –
Force SSL: –
Currency: AUD ($)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: –
Enforce Approved Product Download Directories: ✔

WC Pages

Shop base: #6 - /index.php/shop/
Cart: #7 - /index.php/cart/
Checkout: #8 - /index.php/checkout/
My account: #9 - /index.php/my-account/
Terms and conditions: ❌ Page not set

Theme

Name: Twenty Twenty-Two
Version: 1.2
Author URL: https://wordpress.org/
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
WooCommerce Support: ✔

Templates

Overrides: –

Action Scheduler

Complete: 15
Oldest: 2022-05-31 11:22:09 +0000
Newest: 2022-05-31 13:36:26 +0000

Pending: 1
Oldest: 2022-06-01 13:01:57 +0000
Newest: 2022-06-01 13:01:57 +0000

Status report information

Generated at: 2022-06-01 05:21:16 +00:00
`

[palewar]

Additional Observations:

I changed the theme to StoreFront. Added Mini Cart block in Widget - 'Below the Header'. Have same issue with StoreFront too.

In Console, when I hover over the mini-cart icon I get the following error:

[Error] Unhandled Promise Rejection: [object Event]
(anonymous function) (mini-cart-frontend.js:1:2613)
asyncFunctionResume
(anonymous function)
promiseReactionJobWithoutPromise
promiseReactionJob

[frontdevde]

Thank you for providing this additional information and context, @palewar. We'll try to reproduce and will investigate.

[palewar]

Just wanted to report that I created a fresh installation on InstaWP today to test this out once more and I found that mini-cart block was actually working fine on it. So obviously I understand, it's hard to reproduce. It's still not working for us on 2 different local installations (on separate desktops) and our web-host for some reason. If you guys want to mark it closed, please do so. Thanks for your help so far.

If I have more info in future or if I get it running somehow, will report here. Maybe I should stick to Storefront for now for my WooCommerce work. I was excited to go all in and do complete website using FSE and blocks. It didn't go as planned.

[frontdevde]

Thanks for letting us know! We appreciate your help and want you to have a good experience. While we haven't been able to reproduce the issue yet, I found an issue report of an issue with the Cart block #5866 that sounds similar to what you're reporting. We will continue to investigate next week to see if there is something we need to fix.

[tomasztunik]

Hey @pelwar - We'll close this for now as we struggle to reproduce it. But wanted to drop one last question. A while ago we've had a similar issue reported by another user who tried to set up the environment on Windows with XAMPP but then everything worked alright for them on local env when they tried to set it up with Local.

We'll keep on monitoring in the hope we can reproduce it reliably.

[thirumani02]

Hello,

@tomasztunik @frontdevde @palewar You can recreate this by installing WordPress on subdirectory. for example, localhost/wp

mini-cart-frontend.js attempting to fetch/add dependencies from root domain (localhost) not from WordPress installed directory. If we installed the WordPress on localhost it will work but when we did on localhost/wp it will not work.

Hope it helps to recreate the issue and add possible fixes asap.

[gigitux]

Hi,
@thirumani02 thanks for helping us to debug this issue. I fixed it in #6673. Happy to receive feedback 💪