Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Mini-cart: add setting to not render the block on the cart & checkout pages #8700

Merged
merged 8 commits into from
Mar 14, 2023

Conversation

albarin
Copy link
Contributor

@albarin albarin commented Mar 9, 2023

Currently, the Mini Cart is hidden with CSS on the Cart & Checkout pages. As discussed on #7760 we want to give the users the option to not render it at all (not only hide it).
This PR add this setting to the Mini Cart block and does not render the block when enabled. The default setting is to render it invisible (same behavior as until now) to not affect existing stores.

Fixes #7760

Screenshots

Testing

User-Facing Testing

Site Editor

  1. Go to the Site Editor > Template parts and edit the header template to add the Mini Cart block. Save.
  2. Edit the block and make sure you see the new setting:

Screenshot 2023-03-13 at 16 27 26

  1. Make sure the default option is Hide.
  2. In the store, go to the Cart page and make sure the Mini Cart is rendered but invisible. Repeat but for the Checkout page.
  3. Go back to the Site Editor, change the Mini Cart setting to Remove, and save.
  4. In the store, go to the Cart page and make sure the Mini Cart markup is not rendered at all. Repeat but for the Checkout page.

Post/page

  1. Create a new post or page.
  2. Insert the Mini Cart.
  3. Make sure the new Mini Cart in cart and checkout pages setting does not appear.

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Mini Cart: add a new setting to allow not rendering the block on the cart & checkout pages.

@albarin albarin added type: enhancement The issue is a request for an enhancement. block: mini-cart Issues related to the Mini-Cart block. labels Mar 9, 2023
@albarin albarin self-assigned this Mar 9, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Mar 9, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8700.zip

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
mini-cart.js wp-data ⚠️

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 489
  • Total errors: 2316

⚠️ ⚠️ This PR introduces new TS errors on 1 files:

assets/js/blocks/mini-cart/edit.tsx

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 9, 2023

Size Change: -960 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/active-filters-frontend.js 7.97 kB +2 B (0%)
build/active-filters-wrapper-frontend.js 5.99 kB +5 B (0%)
build/active-filters.js 7.47 kB +99 B (+1%)
build/all-products-frontend.js 11.7 kB +14 B (0%)
build/all-products.js 37.7 kB +12 B (0%)
build/all-reviews.js 7.65 kB -9 B (0%)
build/attribute-filter-frontend.js 22.5 kB -9 B (0%)
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 3.35 kB -3 B (0%)
build/attribute-filter-wrapper-frontend.js 4.5 kB +1 B (0%)
build/attribute-filter.js 13.2 kB +95 B (+1%)
build/blocks-checkout.js 41.2 kB +84 B (0%)
build/breadcrumbs.js 2.04 kB -3 B (0%)
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB +2 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 9.75 kB +9 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.19 kB +5 B (0%)
build/cart-blocks/cart-items-frontend.js 302 B +1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB +5 B (0%)
build/cart-blocks/cart-line-items-frontend.js 1.07 kB +1 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB -1 B (0%)
build/cart-blocks/filled-cart-frontend.js 654 B +1 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB -2 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 11.1 kB -3.73 kB (-25%) 🎉
build/cart-blocks/proceed-to-checkout-frontend.js 1.33 kB +89 B (+7%) 🔍
build/cart-frontend.js 29 kB +46 B (0%)
build/cart.js 47.6 kB +48 B (0%)
build/checkout-blocks/actions-frontend.js 1.84 kB -1 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 0 B -3.92 kB (removed) 🏆
build/checkout-blocks/billing-address-frontend.js 4.09 kB +2.91 kB (+246%) 🆘
build/checkout-blocks/contact-information-frontend.js 2.05 kB -1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 kB +9 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB +1 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB -3 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 11.2 kB -3.75 kB (-25%) 🎉
build/checkout-blocks/payment-frontend.js 8.43 kB +1 B (0%)
build/checkout-blocks/pickup-options-frontend.js 4.04 kB +1.24 kB (+44%) 🚨
build/checkout-blocks/shipping-address-frontend.js 4.04 kB +2.9 kB (+254%) 🆘
build/checkout-blocks/shipping-method-frontend.js 2.47 kB +195 B (+9%) 🔍
build/checkout-blocks/shipping-methods-frontend.js 5.26 kB +673 B (+15%) ⚠️
build/checkout-blocks/terms-frontend.js 1.56 kB +1 B (0%)
build/checkout-blocks/totals-frontend.js 310 B -1 B (0%)
build/checkout-frontend.js 30.5 kB +63 B (0%)
build/checkout.js 45.2 kB +1.09 kB (+2%)
build/customer-account.js 3.16 kB +1 B (0%)
build/featured-category.js 14 kB -5 B (0%)
build/featured-product.js 14.2 kB -8 B (0%)
build/filter-wrapper-frontend.js 14.1 kB +3 B (0%)
build/filter-wrapper.js 2.4 kB +4 B (0%)
build/handpicked-products.js 7.91 kB +1 B (0%)
build/legacy-template.js 5.32 kB -5 B (0%)
build/mini-cart-component-frontend.js 28 kB +21 B (0%)
build/mini-cart-contents-block/footer-frontend.js 2.86 kB -4 B (0%)
build/mini-cart-contents-block/products-table-frontend.js 589 B +1 B (0%)
build/mini-cart-contents-block/shopping-button-frontend.js 572 B -1 B (0%)
build/mini-cart-contents.js 16.6 kB +32 B (0%)
build/mini-cart-frontend.js 2.02 kB -29 B (-1%)
build/mini-cart.js 4.49 kB +204 B (+5%) 🔍
build/price-filter-frontend.js 13.8 kB -7 B (0%)
build/price-filter-wrapper-frontend.js 6.99 kB -3 B (0%)
build/price-filter.js 8.39 kB +5 B (0%)
build/price-format.js 1.19 kB -1 B (0%)
build/product-add-to-cart-frontend.js 6.69 kB -2 B (0%)
build/product-add-to-cart.js 8.62 kB +11 B (0%)
build/product-best-sellers.js 8.25 kB -3 B (0%)
build/product-button-frontend.js 2.22 kB -3 B (0%)
build/product-button.js 4.01 kB +17 B (0%)
build/product-categories.js 2.36 kB -1 B (0%)
build/product-category-list.js 501 B -1 B (0%)
build/product-category.js 9.24 kB -2 B (0%)
build/product-image-frontend.js 2.22 kB -3 B (0%)
build/product-image.js 4.12 kB +19 B (0%)
build/product-new.js 8.25 kB -2 B (0%)
build/product-on-sale.js 8.58 kB +1 B (0%)
build/product-price-frontend.js 2.39 kB +6 B (0%)
build/product-price.js 1.64 kB +5 B (0%)
build/product-query.js 10.9 kB +97 B (+1%)
build/product-rating-frontend.js 1.65 kB +1 B (0%)
build/product-results-count.js 1.66 kB +1 B (0%)
build/product-sale-badge-frontend.js 1.45 kB -2 B (0%)
build/product-search.js 2.63 kB -2 B (0%)
build/product-sku.js 453 B +1 B (0%)
build/product-stock-indicator-frontend.js 1.32 kB +5 B (0%)
build/product-summary.js 920 B +1 B (0%)
build/product-tag-list-frontend.js 1.18 kB -1 B (0%)
build/product-tag.js 8.74 kB +1 B (0%)
build/product-title.js 3.48 kB +19 B (+1%)
build/product-top-rated.js 8.49 kB -1 B (0%)
build/products-by-attribute.js 9.57 kB +129 B (+1%)
build/rating-filter-frontend.js 20.8 kB -28 B (0%)
build/rating-filter-wrapper-frontend.js 5.61 kB +1 B (0%)
build/rating-filter.js 7.42 kB +1 B (0%)
build/reviews-by-category.js 11.9 kB -9 B (0%)
build/reviews-by-product.js 12.9 kB -7 B (0%)
build/single-product-frontend.js 17.9 kB +21 B (0%)
build/single-product.js 10.6 kB +8 B (0%)
build/stock-filter-frontend.js 21 kB -31 B (0%)
build/stock-filter-wrapper-frontend.js 3.15 kB +1 B (0%)
build/store-notices.js 1.69 kB -1 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.86 kB +1 B (0%)
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 kB +4 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB +12 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.26 kB +5 B (0%)
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB -1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 0 B -4.83 kB (removed) 🏆
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB +5 B (0%)
build/vendors--checkout-blocks/shipping-methods-frontend.js 0 B -8.84 kB (removed) 🏆
build/wc-blocks-data.js 21.8 kB +288 B (+1%)
build/wc-blocks-middleware.js 932 B -1 B (0%)
build/wc-blocks-registry.js 3.15 kB +1 B (0%)
build/wc-blocks-shared-context.js 1.51 kB -1 B (0%)
build/wc-blocks-shared-hocs.js 1.73 kB -4 B (0%)
build/wc-blocks-style-rtl.css 26.9 kB +39 B (0%)
build/wc-blocks-style.css 26.9 kB +38 B (0%)
build/wc-blocks-vendors.js 64.4 kB +9 B (0%)
build/wc-settings.js 2.6 kB -2 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.24 kB +8.24 kB (new file) 🆕
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB +5.44 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-subtotal-frontend.js 275 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 330 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-fee-frontend.js 277 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 253 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js 262 B
build/product-category-list-frontend.js 1.19 kB
build/product-rating.js 919 B
build/product-sale-badge.js 819 B
build/product-sku-frontend.js 707 B
build/product-stock-indicator.js 645 B
build/product-summary-frontend.js 1.58 kB
build/product-tag-list.js 498 B
build/product-title-frontend.js 1.65 kB
build/reviews-frontend.js 7.13 kB
build/stock-filter.js 8.13 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/wc-blocks-editor-style-rtl.css 5.82 kB
build/wc-blocks-editor-style.css 5.82 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks.js 2.63 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-shipping-method-pickup-location.js 29.7 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@albarin
Copy link
Contributor Author

albarin commented Mar 10, 2023

@pmcpinto @Aljullu do you have any suggestions for the toggle options and description copy?

Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left a couple of comments in the code, but overall LGTM. I also tested it and it works perfectly. 👌

@pmcpinto @Aljullu do you have any suggestions for the toggle options and description copy?

It's a tricky one. An alternative would be to name the two options as "invisible" and "hidden", but I don't know if it makes things any easier to understand. Or to replace Don't render with Don't display.

Another option would be to use the explanation text below the toggle to explain what each options does. We seem to do it in some blocks, but I'm not sure if it's a correct GB pattern. 😕

Enregistrament.de.pantalla.des.de.2023-03-10.14-13-45.webm

src/BlockTypes/MiniCart.php Outdated Show resolved Hide resolved
assets/js/blocks/mini-cart/index.tsx Outdated Show resolved Hide resolved
@albarin
Copy link
Contributor Author

albarin commented Mar 13, 2023

It's a tricky one. An alternative would be to name the two options as "invisible" and "hidden", but I don't know if it makes things any easier to understand. Or to replace Don't render with Don't display.

More thoughts: what about Hide and Remove? 🤔

Another option would be to use the explanation text below the toggle to explain what each options does. We seem to do it in some blocks, but I'm not sure if it's a correct GB pattern. 😕

Yeah, that'd be useful, but I remember I changed that behavior some time ago on another toggle, so maybe it's something we are trying to avoid, not sure;

In the future we may want to add more rendering styles, so a boolean wasn't the
best option, a string will allowed us more than two options
@albarin albarin requested a review from Aljullu March 13, 2023 10:27
@pmcpinto
Copy link

pmcpinto commented Mar 13, 2023

More thoughts: what about Hide and Remove? 🤔

I was going to suggest this as an alternative :)

@albarin albarin marked this pull request as ready for review March 13, 2023 15:28
@woocommercebot woocommercebot requested a review from a team March 13, 2023 15:28
Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More thoughts: what about Hide and Remove? 🤔

I like it! 👌

PR looks good to me. :shipit:

@github-actions github-actions bot added this to the 9.9.0 milestone Mar 14, 2023
@albarin albarin merged commit 26feacd into trunk Mar 14, 2023
@albarin albarin deleted the fix/7760-mini-cart-checkout-page branch March 14, 2023 14:59
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: mini-cart Issues related to the Mini-Cart block. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Show mini cart also on checkout page
3 participants