Fix display of "empty cart" notices when using a shortcode cart and the checkout block

[mikejolley]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

C&C Blocks introduced some new notice markup via some updated templates. These templates use a different HTML structure than the notices in core. The core notices get a special classname added in wc_empty_cart_message called cart-empty, but this is not added to the new Block notices because of the updated markup. For reference:

$notice  = str_replace( 'class="woocommerce-info"', 'class="cart-empty woocommerce-info"', $notice );

Cart.js uses the cart-empty to target elements from ajax responses. This is handled within update_wc_div. Because the cart-empty class does not exist when using blocks, this update fails and so after interacting with the shortcode cart, the page is emptied.

The fix in this PR is to wrap everything returned by wc_empty_cart_message with a new wc-empty-cart-message classname, which is then used by cart.js so the update works in both contexts.

Closes #38719

How to test the changes in this Pull Request:

This needs to be tested twice to ensure there are no regressions.

Test 1:
For the pages assigned as cart/checkout under WooCommerce > Settings > Advanced:

• ensure that the Cart Page contains only the [woocommerce_cart] shortcode
• ensure that the Checkout Page contains only the [woocommerce_checkout] shortcode

1. Add an item to the cart
2. View the cart page
3. Remove all items from the cart using the X link
4. The page should show the following:

Test 2
For the pages assigned as cart/checkout under WooCommerce > Settings > Advanced:

• ensure that the Cart Page contains only the [woocommerce_cart] shortcode
• ensure that the Checkout Page contains only the Checkout Block

1. Add an item to the cart
2. View the cart page
3. Remove all items from the cart using the X link
4. The page should show the following:

Notice the styling is updated between tests.

[github-actions]

Hi @jorgeatorres, @nielslange,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[github-actions]

Test Results Summary

Commit SHA: 6592168

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 54s
E2E Tests	190	0	0	18	0	208	14m 44s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[nielslange]

Thanks for working on this, @mikejolley.

While reviewing the PR, I wasn't able to see the 2nd screenshot that you mentioned.

Cart shortcode:

Checkout shortcode:

Cart block:

Checkout block:

Do you have any idea on why the design of your 2nd screenshot is not visible on my end?

Apart from the screenshot, I found the 2nd testing instructions ("Next, edit your CHECKOUT page ...") a bit confusing. While the title says to replace the checkout shortcode with the Checkout block, the instructions do not mention tests on the checkout page. To me, it was not clear whether I should check the checkout page or not.

[mikejolley]

@nielslange you'll only see the new design if the checkout page assigned under WooCommerce > settings > advanced actually contains the checkout block, hence the instructions "Next, edit your CHECKOUT page and insert the checkout block in place of the shortcode."

[jorgeatorres]

Hey @mikejolley!

There are a couple of PHPCS violations (see https://github.com/woocommerce/woocommerce/actions/runs/5277832291/jobs/9546360759?pr=38738) which need to be addressed before merging this. I can confirm that the PR does fix the "empty cart" notice situation (when the checkout page uses the checkout block).

Even if not directly related to this PR, I noticed a couple of things while testing, which maybe you can comment on:

• With the cart page using the shortcode, and the checkout page using the checkout block, I no longer see the "Product removed. Undo?" notice:
  
• You can also see above that the empty cart notice is styled differently as compared to when the checkout page uses the shortcode:
  

FWIW, I'm testing with StoreFront.

[nielslange]

@nielslange you'll only see the new design if the checkout page assigned under WooCommerce > settings > advanced actually contains the checkout block, hence the instructions "Next, edit your CHECKOUT page and insert the checkout block in place of the shortcode."

I did that, @mikejolley, but I'll double-check it. It appears that there's something wrong with my local environment the previous days. Somehow, I keep getting different results than others.

[nielslange]

@mikejolley I tested it again, and I'm getting the same result. When using the Cart block, I do not see the notice.

Here are the steps I took:

1. Check out your PR.
2. Ran nvm use && pnpm i && pnpm build.
3. Create a test page with the Cart block.
4. Define that page as the Cart page via /wp-admin/admin.php?page=wc-settings&tab=advanced.
5. Go to the frontend.
6. Add a product to the cart.
7. Go to the cart page.
8. Remove the product from the cart.
9. See the info Your cart is currently empty!.

This only happens when using the Cart block. When using the Cart shortcode, I do see the notices.

[nielslange]

Thanks for working on this, @mikejolley.

I've tested this PR successfully with the following setup and result:

	Test case 1	Test case 2
Page Setup » Cart page	[woocommerce_cart]	[woocommerce_cart]
Page Setup » Checkout page	[woocommerce_checkout]	📦 Checkout block
Screenshot » Cart page

[mikejolley]

Thanks @nielslange

@jorgeatorres I fixed those up. Notice styling is expected to differ due to blocks changing the notice markup and including its own styles.

[jorgeatorres]

LGTM