[Enhancement]: block base cart page (cart-fragments.js) have missing feature for updating mini-cart on header when changing the product value or remove item

[gmanhub3]

Describe the solution you'd like

if i switch back in edit page to Classic shortcode mode for cart page. It have features in woocommerce/assets/js/frontend/cart.js script to update mini-cart widget when changing the product value or remove item. But in block base cart page and /woocommerce/assets/js/frontend/cart-fragments.js not have this feature. So most of themes like storefront will not works and not will update the mini-cart item cont on header menu widget with block base cart page.

Describe alternatives you've considered

No response

Additional context

No response

[opr]

Hi @gmanhub3 thanks for taking the time to report this issue. The mini cart pulls its data from the Store API and the @wordpress/data/ data stores, so it should update in realtime, this is why we don't update it with cart fragments.

Please can you help us with a set of steps to reproduce exactly the issue you're facing?

[gmanhub3]

Hi @opr i posted more informations about problems here:

https://github.com/woocommerce/storefront/issues/2140

and here: https://wordpress.org/support/topic/storefront-mini-cart-count-and-wc-is-not-updating-properly/#new-topic-0

[opr]

Hi @gmanhub3 - thanks for providing the extra info!

Could you help me understand if are you talking specifically about the storefront cart widget or the Mini-cart Block? They are different things.

This is the storefront cart, not the mini-cart block, is this what you're referring to?

In fact, rendering the Mini-cart Block on the Cart page is not supported, so I think you're talking specifically about the Storefront cart.

Since you've already opened an issue in the Storefront repository: https://github.com/woocommerce/storefront/issues/2140 I think we can close this issue as it's not actually an issue with WooCommerce core.

If I've misunderstood please reopen the issue and add any additional feedback.

Thanks again for reporting this.

[gmanhub3]

Hi @opr ,

Yes i talking about the storefront block mode and widget mini-cart. (this is the default mode when install the storefront theme) I think storefront cant use block base mini-cart in Cart page and not posibble because if i try add block base mini cart it will be disappear.

I think every new themes use Block base mode version for Cart page and in cart-fragments.js not supported to update mini-cart counter if i changing the product value i.e. with +/- button or enter a new value on Chart page. So i switch back to old way Classic shortcode that use cart.js and it works (but need click on the update cart button). I think it should be support WooCommerce core because it also updates the mini cart counter in the old version Classic shortcode.

I try to add my custom js script for cart-fragments.js but not working as expected because only refresh the mini cart counter if i click more than ones on +/- button in Chart page.

$(document).on("click", '.wc-block-components-quantity-selector__button--plus', function () { // When changing the custom "+" or "-"

    $( document.body ).trigger( 'wc_fragment_refresh' );
    $( document.body ).trigger( 'wc_fragments_refreshed' );
});

Beginning with WooCommerce 7.8, we implemented a change that disables the cart fragments script from being enqueued on all page routes of a WooCommerce store by default. Responsible for updating the cart widget after a successful add-to-cart event, the script can cause performance issues on stores not using that functionality. Going forward the script will now only be enqueued if the Cart Widget is rendered in a view. Keep in mind that some themes (like Storefront) hard-code the widget into the theme’s templates so it is not always user-added.

https://developer.woo.com/2023/06/16/best-practices-for-the-use-of-the-cart-fragments-api/

[opr]

@gmanhub3 thanks for the great explanation and links, I still don't think this is something WooCommerce core should be fixing, you've done the right thing by opening an issue in Storefront, although Storefront is not one of our higher priority projects at the moment.

If you would like to try opening a PR there to fix it we would certainly be able to help with guidance and reviews.

@nielslange would you be able to take a look at this issue and give a second opinion on whether it's something WC Core should fix?

[nielslange]

@nielslange would you be able to take a look at this issue and give a second opinion on whether it's something WC Core should fix?

@gmanhub3 I just looked into this issue. Please allow me to verify the testing steps to reproduce this issue:

1. Install and activate the Storefront theme.
2. Ensure to have one page with the Cart block and one page with the cart shortcode.
3. Go to the frontend.
4. Add a product to the cart.
5. Go to the page with the Cart block.
6. Update the quantity.
7. See that the quantity in the Storefront mini-cart widget does not get updated.
8. Go to the page with the cart shortcode.
9. Update the quantity.
10. See that the quantity in the Storefront mini-cart widget does get updated.

Can you confirm that this is the issue you are referring to?

[gmanhub3]

Hi @nielslange

Yes i confirmed again, in block mode not refresh the storefonrt header mini-cart widget item counter (automatically) like in this video: https://github.com/woocommerce/storefront/issues/2140#issuecomment-2004130186

but in classic chortcode mode need manually push the Update cart button for update mini-cart counter as expected.

[nielslange]

Thanks for confirming this, @gmanhub3. In this case, I do agree with @opr that the Storefront repo is the best place for this issue, given that the mini-cart widget is Storefront-specific.