The "Storefront header cart" doesn't work properly on the cart and checkout pages

tarhi-saad commented 1 year ago

Describe the bug

The Storefront header cart is broken on the cart and checkout pages (i.e., for both the shortcode and blocks versions):

The cart details don’t show up anymore when we hover over it:

This component isn’t refreshed after a cart update:

After updating the cart in the shortcode version, I made changes to reduce the items from 3 to 1, resulting in a new total cost of $18. However, despite the update, the Storefront header cart continues to display the outdated values instead of reflecting the current changes.

I did some digging and discovered it uses the Legacy Cart Widget under the hood (See line). As a result, the Storefront header cart will be broken on the cart and checkout pages because the Legacy Cart Widget won’t be loaded (see code). A possible solution would be to prevent the Storefront header cart from loading on the cart and checkout pages.

Isolating the problem (mark completed items with an [x]):

[x] I have deactivated other plugins and themes and confirmed this bug occurs when only WooCommerce + Storefront theme are active.
[x] I can reproduce this bug consistently using the steps below.

To Reproduce

Steps to reproduce the behavior:

Add a product to the cart
Go to the cart or the checkout page (shortcode or blocks versions)
Hover over the Storefront header cart. Ensure no popup is displayed showing the cart info
Update the cart (e.g., Add quantity, remove an item, add a coupon, etc.). Save changes if you are using the shortcode version of the cart and checkout pages. Ensure the Storefront header cart continues to display the outdated values instead of reflecting the current changes.

Screenshots

Expected behavior

There are two valid behaviors we can choose from if we are on the cart and checkout pages:

Changes should be reflected on the Storefront header cart when the cart is updated. And hovering over this component should display the cart details.
Or, similar to the Legacy Cart Widget, the Storefront header cart shouldn't be displayed on the cart and checkout pages.

Browser Environment

Please provide as much detail as possible about your testing environment.

Platform: macOS
Browser(s): Chrome

WordPress Environment

I made the tests on a Jurassic Ninja website and locally using the Local WP tool

``` ` ### WordPress Environment ### WordPress address (URL): http://dev-store.local Site address (URL): http://dev-store.local WC Version: 7.9.0 REST API Version: ✔ 7.9.0 WC Blocks Version: ✔ 10.5.0-dev Action Scheduler Version: ✔ 3.5.4 Log Directory Writable: ✔ WP Version: 6.2.2 WP Multisite: – WP Memory Limit: 256 MB WP Debug Mode: ✔ WP Cron: ✔ Language: en_US External object cache: – ### Server Environment ### Server Info: nginx/1.16.0 PHP Version: 7.4.30 PHP Post Max Size: 1,000 MB PHP Time Limit: 1200 PHP Max Input Vars: 4000 cURL Version: 7.88.1 (SecureTransport) LibreSSL/3.3.6 SUHOSIN Installed: – MySQL Version: 8.0.16 Max Upload Size: 300 MB Default Timezone is UTC: ✔ fsockopen/cURL: ✔ SoapClient: ✔ DOMDocument: ✔ GZip: ✔ Multibyte String: ✔ Remote Post: ✔ Remote Get: ✔ ### Database ### WC Database Version: 7.9.0 WC Database Prefix: wp_ Total Database Size: 13.65MB Database Data Size: 10.50MB Database Index Size: 3.15MB wp_woocommerce_sessions: Data: 0.31MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_order_itemmeta: Data: 0.09MB + Index: 0.09MB + Engine InnoDB wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_actions: Data: 0.06MB + Index: 0.11MB + Engine InnoDB wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_logs: Data: 0.06MB + Index: 0.03MB + Engine InnoDB wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_comments: Data: 0.05MB + Index: 0.09MB + Engine InnoDB wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_oauth_access_tokens: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_oauth_authorization_codes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_oauth_jwt: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_oauth_public_keys: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_oauth_refresh_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_oauth_scopes: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_options: Data: 5.05MB + Index: 0.06MB + Engine InnoDB wp_postmeta: Data: 0.30MB + Index: 0.23MB + Engine InnoDB wp_posts: Data: 1.52MB + Index: 0.06MB + Engine InnoDB wp_snippets: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_trp_dictionary_en_us_fr_fr: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_trp_gettext_en_us: Data: 0.41MB + Index: 0.47MB + Engine InnoDB wp_trp_gettext_fr_fr: Data: 1.52MB + Index: 0.61MB + Engine InnoDB wp_trp_original_meta: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_trp_original_strings: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_wc_admin_note_actions: Data: 0.05MB + Index: 0.02MB + Engine InnoDB wp_wc_admin_notes: Data: 0.08MB + Index: 0.00MB + Engine InnoDB wp_wc_booking_relationships: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_bookings_availability: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_bookings_availabilitymeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_mnm_child_items: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_product_attributes_lookup: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_product_download_directories: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB wp_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB ### Post Type Counts ### attachment: 24 customize_changeset: 1 language_switcher: 4 page: 16 post: 5 product: 21 product_variation: 11 revision: 109 shop_coupon: 2 shop_order: 29 wc_booking: 2 wo_client: 1 wp_global_styles: 3 wp_navigation: 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 (2) ### WooCommerce: by Automattic – 7.9.0-dev WooCommerce Blocks: by Automattic – 10.5.0-dev ### Inactive Plugins (29) ### Add to Cart Form Shortcode for WooCommerce: by helgatheviking – 3.0.2 Block Manager: by Darren Cooney – 1.2.4 Code Snippets: by Code Snippets Pro – 3.4.0 Debug Bar: by wordpressdotorg – 1.1.4 Enable Standard PayPal for WooCommerce: by Vik Cheema – 1.0.0 Gutenberg: by Gutenberg Team – 14.8.0-rc.1 IDPay payment gateway for Woocommerce: by IDPay – 2.2.3 Klarna Payments for WooCommerce: by krokedil klarna automattic – 3.0.6 Multiple Packages for WooCommerce: by Erica Dion – 1.1 Payment Plugins for Stripe WooCommerce: by Payment Plugins support@paymentplugins.com – 3.3.40 Query Monitor: by John Blackbourn – 3.12.2 SMNTCS Show Symlinked Plugins: by Niels Lange – 1.1 Test Extension Compatibility: by The WordPress Contributors – 0.1.0 Test Plugine: by The WordPress Contributors – 0.1.0 TranslatePress - Multilingual: by Cozmoslabs Razvan Mocanu Madalin Ungureanu Cristophor Hurduban – 2.5.2 Weglot Translate: by Weglot Translate team – 4.0.1 WooCommerce Amazon Pay: by WooCommerce – 2.4.1 WooCommerce Bookings: by WooCommerce – 1.16.01 WooCommerce Checkout Field Editor: by WooCommerce – 1.7.4 WooCommerce EU VAT Number: by WooCommerce – 2.4.3 WooCommerce Mix and Match Products: by Kathy Darling – 2.1.1 WooCommerce Name Your Price: by Kathy Darling – 3.4.0 WooCommerce One Page Checkout: by Automattic – 2.3.0 WooCommerce PayPal Payments: by WooCommerce – 2.0.4 (update to version 2.1.0 is available) WooCommerce Stripe Gateway: by WooCommerce – 7.4.0 WooCommerce Stripe Gateway (dev): by WooCommerce – 7.0.1 WP Crontrol: by John Blackbourn & crontributors – 1.15.2 WP OAuth Server - CE: by WP OAuth Server – 4.3.3 WP Rollback: by GiveWP.com – 1.7.3 ### Settings ### API Enabled: – Force SSL: – Currency: USD ($) Currency Position: left Thousand Separator: , Decimal Separator: . Number of Decimals: 2 Taxonomies: Product Types: booking (booking) external (external) grouped (grouped) mix and match (mix-and-match) 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: ✔ HPOS feature screen enabled: – HPOS feature enabled: – Order datastore: WC_Order_Data_Store_CPT HPOS data sync enabled: – ### WC Pages ### Shop base: #6 - /shop/ Cart: #60 - /cart/ Checkout: #62 - /checkout-block/ My account: #9 - /my-account/ Terms and conditions: #3 - /privacy-policy/ ### Theme ### Name: Storefront Version: 4.3.0 Author URL: https://woocommerce.com/ 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: /Users/saad/Plugins/woocommerce-gutenberg-products-block/templates/notices/error.php /Users/saad/Plugins/woocommerce-gutenberg-products-block/templates/notices/notice.php /Users/saad/Plugins/woocommerce-gutenberg-products-block/templates/notices/success.php ### Admin ### Enabled Features: activity-panels analytics product-block-editor coupons customer-effort-score-tracks import-products-task experimental-fashion-sample-products shipping-smart-defaults shipping-setting-tour homescreen marketing mobile-app-banner navigation onboarding onboarding-tasks remote-inbox-notifications remote-free-extensions payment-gateway-suggestions shipping-label-banner subscriptions store-alerts transient-notices woo-mobile-welcome wc-pay-promotion wc-pay-welcome-page Disabled Features: core-profiler minified-js new-product-management-experience product-variation-management settings async-product-editor-category-field Daily Cron: ✔ Next scheduled: 2023-06-19 21:27:34 +00:00 Options: ✔ Notes: 122 Onboarding: skipped ### Action Scheduler ### Complete: 74 Oldest: 2023-05-19 17:51:59 +0000 Newest: 2023-06-19 15:53:06 +0000 Failed: 23 Oldest: 2023-02-06 15:17:03 +0000 Newest: 2023-05-08 13:43:17 +0000 Pending: 2 Oldest: 2023-06-20 14:11:15 +0000 Newest: 2023-07-09 21:06:52 +0000 ### Status report information ### Generated at: 2023-06-19 15:53:13 +00:00 ` ```

shanetac1 commented 1 year ago

Just came across this myself. The very helpful woo rep sent me here.

shanetac1 commented 1 year ago

If you install TI Woocommerce Wishlist plugin it actually starts working again. (the updating of the amounts in the cart not the rest).

shanetac1 commented 1 year ago

I have used this to fire the ajax call on the cart page. //MAKE SURE MINI CART UPDATES ON CART PAGE function enqueue_wc_cart_fragments() { if (is_cart()) { // Check if it's the cart page wp_enqueue_script('wc-cart-fragments'); } } add_action('wp_enqueue_scripts', 'enqueue_wc_cart_fragments');

Just add to child theme functions or add using a codesnippet plugin. It doesnt restore the drop down ability of the mini cart but they are on the cart page anyway so it is not majorly important. Could be argued just hiding it would be fine but I prefer it up dating.

woocommerce / storefront