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

Conversation

@senadir
Copy link
Member

@senadir senadir commented Aug 5, 2022

This PR adds a "make current page default cart/checkout", it has a long flow that goes via several conditions:

To test this PR, you need this PR from to have the latest trunk of WooCommerce, or WooCommerce 6.9.0

  1. The notice is visible on Cart/Checkout and all of their inner blocks.
  2. If the page isn't saved and published, it will get published, this is a condition in order to make it the default cart/checkout page.
  3. Once clicked, the current page is made to be the default cart/checkout page.
  4. The current page permalink will change to whatever the previous Cart/Checkout link was, so if that link was /cart the current page is /cart, if it was /carro, so will the current page.
  5. If we didn't have a previous page, then it will just use /cart or /checkout like WooCommerce core.
  6. The previous page link will get -2 appended to it to avoid conflict.
  7. The page is saved.
  8. The notice is now green, you can dismiss it.

For older versions of WC (pre 6.9.0), the notice would show the old text
image

Fixes #6864
Fixes #6865

Screenshots

Screen.Recording.2022-08-05.at.23.35.20.mov

User Facing Testing

  1. Make sure you have a Cart and Checkout pages in WooCommerce -> Settings -> Advanced.
  2. Those pages urls can be /cart and /checkout.
  3. Open a new page, give it a title, insert Cart block.
  4. Select Cart block, you should see the notice, select an inner block, you should see the notice as well.
  5. Click on the notice, it will load for a couple of seconds, once it's green, visit your new page.
  6. Make sure it's on the previous url, so /cart.
  7. Go back to settings, make sure your new page is that value there.
  8. Do the same thing for Checkout block.
  9. Open a new page, add Cart block, save the page and publish it.
  10. Select the block or one of its inner blocks, start the flow again.
  11. It should work, confirm that by visiting the frontend.

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Allow making the Cart/Checkout block page the default one from within the editor.

@senadir senadir self-assigned this Aug 5, 2022
@senadir senadir added type: enhancement The issue is a request for an enhancement. status: blocker Used on issues or pulls that block work from being released. block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. labels Aug 5, 2022
@senadir senadir added this to the 8.3.0 milestone Aug 5, 2022
@senadir senadir force-pushed the add/set-cart-as-default branch from d45463b to 86d3cad Compare August 6, 2022 20:12
@github-actions
Copy link
Contributor

github-actions bot commented Aug 6, 2022

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Aug 6, 2022

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
cart.js wp-core-data, wp-editor ⚠️
checkout.js wp-core-data, wp-editor ⚠️

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

@github-actions
Copy link
Contributor

github-actions bot commented Aug 6, 2022

Size Change: +1.21 kB (0%)

Total Size: 869 kB

Filename Size Change
build/all-products.js 33.7 kB +8 B (0%)
build/all-reviews.js 7.79 kB -3 B (0%)
build/attribute-filter.js 12.9 kB +9 B (0%)
build/cart.js 41.8 kB +584 B (+1%)
build/checkout.js 43.2 kB +597 B (+1%)
build/featured-category.js 13.2 kB +2 B (0%)
build/featured-product.js 13.5 kB -1 B (0%)
build/handpicked-products.js 7.37 kB +4 B (0%)
build/legacy-template.js 2.79 kB -3 B (0%)
build/mini-cart.js 4.58 kB +1 B (0%)
build/price-filter.js 9.09 kB +5 B (0%)
build/product-add-to-cart--product-button--product-image--product-title.js 2.66 kB -2 B (0%)
build/product-add-to-cart.js 6.88 kB -1 B (0%)
build/product-best-sellers.js 7.71 kB +1 B (0%)
build/product-button.js 1.57 kB -1 B (0%)
build/product-categories.js 2.41 kB -4 B (0%)
build/product-category-list.js 504 B +1 B (0%)
build/product-category.js 8.69 kB +4 B (0%)
build/product-on-sale.js 8.03 kB -1 B (0%)
build/product-query.js 648 B +1 B (0%)
build/product-rating.js 742 B -1 B (0%)
build/product-sale-badge.js 803 B -1 B (0%)
build/product-search.js 2.18 kB +2 B (0%)
build/product-sku.js 380 B -1 B (0%)
build/product-stock-indicator.js 625 B -1 B (0%)
build/product-summary.js 919 B -2 B (0%)
build/product-tag.js 8.08 kB +1 B (0%)
build/product-title.js 920 B -2 B (0%)
build/product-top-rated.js 7.95 kB +2 B (0%)
build/products-by-attribute.js 8.63 kB -1 B (0%)
build/reviews-by-product.js 12.3 kB +1 B (0%)
build/single-product.js 10.1 kB +9 B (0%)
build/stock-filter.js 7.45 kB -2 B (0%)
build/wc-blocks-editor-style-rtl.css 5.07 kB -1 B (0%)
build/wc-blocks-editor-style.css 5.07 kB -2 B (0%)
build/wc-blocks-vendors.js 54.5 kB +5 B (0%)
build/wc-blocks.js 2.63 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.34 kB
build/active-filters.js 7.99 kB
build/all-products-frontend.js 18.1 kB
build/attribute-filter-frontend.js 21.9 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB
build/cart-blocks/cart-express-payment-frontend.js 5.09 kB
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.27 kB
build/cart-blocks/cart-line-items-frontend.js 428 B
build/cart-blocks/cart-order-summary-frontend.js 1.1 kB
build/cart-blocks/cart-totals-frontend.js 321 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 781 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.65 kB
build/cart-blocks/order-summary-discount-frontend.js 2.15 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.37 kB
build/cart-blocks/order-summary-shipping-frontend.js 426 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/cart-frontend.js 47 kB
build/checkout-blocks/actions-frontend.js 1.42 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 891 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/express-payment-frontend.js 5.38 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.07 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.66 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.8 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.26 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.1 kB
build/checkout-blocks/order-summary-shipping-frontend.js 604 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/payment-frontend.js 7.7 kB
build/checkout-blocks/shipping-address-frontend.js 1.03 kB
build/checkout-blocks/shipping-methods-frontend.js 4.74 kB
build/checkout-blocks/terms-frontend.js 1.23 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 49.2 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/mini-cart-component-frontend.js 16.8 kB
build/mini-cart-contents-block/empty-cart-frontend.js 365 B
build/mini-cart-contents-block/filled-cart-frontend.js 229 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB
build/mini-cart-contents-block/footer-frontend.js 6.98 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 289 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 22.9 kB
build/mini-cart-frontend.js 1.71 kB
build/price-filter-frontend.js 13.3 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 223 B
build/product-add-to-cart-frontend.js 6.95 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 436 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 301 B
build/product-button-frontend.js 1.87 kB
build/product-category-list-frontend.js 879 B
build/product-image-frontend.js 1.88 kB
build/product-image.js 1.59 kB
build/product-new.js 7.71 kB
build/product-price-frontend.js 1.9 kB
build/product-price.js 1.51 kB
build/product-rating-frontend.js 1.16 kB
build/product-sale-badge-frontend.js 1.13 kB
build/product-sku-frontend.js 381 B
build/product-stock-indicator-frontend.js 993 B
build/product-summary-frontend.js 1.29 kB
build/product-tag-list-frontend.js 872 B
build/product-tag-list.js 500 B
build/product-title-frontend.js 1.31 kB
build/reviews-by-category.js 11.2 kB
build/reviews-frontend.js 7.02 kB
build/single-product-frontend.js 21.4 kB
build/stock-filter-frontend.js 7.51 kB
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.1 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--product-add-to-cart-frontend.js 7.53 kB
build/wc-blocks-data.js 9.87 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 22.4 kB
build/wc-blocks-style.css 22.3 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 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-settings.js 2.6 kB

compressed-size-action

@senadir senadir requested review from a team and tarunvijwani and removed request for a team August 8, 2022 08:21
@ralucaStan ralucaStan removed the status: blocker Used on issues or pulls that block work from being released. label Aug 10, 2022
@senadir senadir force-pushed the add/set-cart-as-default branch 2 times, most recently from 7ae3d74 to eeebaf8 Compare August 12, 2022 14:36
Comment on lines 64 to 77
<DefaultNotice
block={ isCheckout ? 'checkout' : 'cart' }
/>
<DefaultNotice
<CartCheckoutSidebarCompatibilityNotice
Copy link
Member Author

Choose a reason for hiding this comment

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

Switched to follow design.

Comment on lines +19 to +40
const ORIGINAL_PAGE_ID =
block === 'checkout' ? CHECKOUT_PAGE_ID : CART_PAGE_ID;
const settingName =
block === 'checkout'
? 'woocommerce_checkout_page_id'
: 'woocommerce_cart_page_id';

const noticeContent =
block === 'checkout'
? __(
'If you would like to use this block as your default checkout, update your page settings',
'woo-gutenberg-products-block'
)
: __(
'If you would like to use this block as your default cart, update your page settings',
'woo-gutenberg-products-block'
);
Copy link
Member Author

Choose a reason for hiding this comment

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

We handle Cart and Checkout from this component, everything is the same we just need to have 2 different values.

Comment on lines -36 to -46
<div
className="wc-blocks-sidebar-compatibility-notice"
style={ { display: isVisible ? 'block' : 'none' } }
<Notice
onRemove={ dismissNotice }
className={ classnames( [
'wc-blocks-sidebar-compatibility-notice',
{ 'is-hidden': ! isVisible },
] ) }
>
<Notice
onRemove={ dismissNotice }
className={ 'wc-blocks-sidebar-compatibility-notice__notice' }
>
{ noticeText }
</Notice>
</div>
Copy link
Member Author

Choose a reason for hiding this comment

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

Removed the extra div.

@senadir senadir force-pushed the add/set-cart-as-default branch from 70e803b to 7167194 Compare August 12, 2022 15:47
@ralucaStan ralucaStan marked this pull request as draft August 12, 2022 16:30
@ralucaStan
Copy link
Contributor

Based on the internal conversation p1660321370894249/1660311130.074619-slack-C8X6Q7XQU we will need to change the implementation:

  • for perior to WC 6.8.0 we just show the current (old) notice that redirects you to the settings page.
  • for WC >= 6.8.0 we show the new notification with the button, that the PR implements

@ralucaStan ralucaStan removed this from the 8.3.0 milestone Aug 12, 2022
Comment on lines +67 to +76
{ isWcVersion( '6.9.0', '>=' ) ? (
<DefaultNotice
block={ isCheckout ? 'checkout' : 'cart' }
/>
) : (
<LegacyNotice
block={ isCheckout ? 'checkout' : 'cart' }
/>
) }

Copy link
Member Author

Choose a reason for hiding this comment

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

This logic should handle older versions which doesn't support the setting needed.

@tarunvijwani
Copy link

@senadir Thank you for working on it. If I add a Checkout block and use a button to update the settings, it changes the slug to Cart.

Screen.Recording.2022-08-19.at.4.34.12.PM.mov

For the Cart page, it is not updating the slug for me:

Screen.Recording.2022-08-19.at.4.37.13.PM.mov

@senadir
Copy link
Member Author

senadir commented Aug 19, 2022

Can you please remove any existing saved Cart/Checkout page settings you have, it seems your previously default Checkout page has a cart path, and this is what's causing the issue.

@senadir senadir force-pushed the add/set-cart-as-default branch from 70708b2 to 4e4cc33 Compare August 19, 2022 14:43
Copy link

@tarunvijwani tarunvijwani left a comment

Choose a reason for hiding this comment

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

Works great! Let's 🚢 it. 👍

@github-actions github-actions bot added this to the 8.4.0 milestone Aug 22, 2022
@tarhi-saad
Copy link
Contributor

Thank you for your review, @tarunvijwani! I'm merging this PR to include it in the 8.4.0 release!

@tarhi-saad tarhi-saad merged commit 6286a6f into trunk Aug 29, 2022
@tarhi-saad tarhi-saad deleted the add/set-cart-as-default branch August 29, 2022 08:35
senadir added a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
* Add default page notice

* show notice all inner blocks

* support flow when page isnt saved

* switch from where we get the current post id

* update lock

* fix types

* update logic to support cart as well

* fix package.json

* update design and move away from wc.data

* restore notice

* handle older versions of WooCommerce

* fix package lock

* fix typo
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

block: cart Issues related to the cart block. block: checkout Issues related to the checkout 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 default Cart/Checkout notice on all inner blocks Update default Cart/Checkout notice to turn the current page into the default cart/checkout one

4 participants