Add to Cart with Options block > Update the block to rely on dedicated render methods instead of WooCommerce core templates. #9494

nefeline · 2023-05-17T13:30:58Z

Screen.Recording.2023-05-18.at.14.13.51.mov

With the removal of the global $product variable from this block on #9457 , follow-up changes are required to ensure it works as expected.

Initially, this block relied on the native WooCommerce's templates for rendering the add-to-cart form button. The problem is those templates all rely exclusively on the global $product variable for rendering content, and in the absence of it, a Fatal error is thrown:

Call to a member function is_purchasable() on string in /srv/htdocs/wp-content/plugins/woocommerce/templates/single-product/add-to-cart/simple.php:22

Based on the outcome of the discussion on #9457 , on this PR an altered and consolidated version of all add-to-cart form templates is used for rendering the Add to Cart with Options block.

The templates consolidated here include:

woocommerce/templates/single-product/add-to-cart/external.php
woocommerce/templates/single-product/add-to-cart/grouped.php
woocommerce/templates/single-product/add-to-cart/simple.php
woocommerce/templates/single-product/add-to-cart/variable.php
woocommerce/templates/single-product/add-to-cart/variation-add-to-cart-button.php

Important notes

On this initial version, all filters were intentionally removed and all actions were preserved. The exception is 'woocommerce_single_variation', which was removed as it has the woocommerce_single_variation_add_to_cart_button function hooked to it and invoking wc_get_template( 'single-product/add-to-cart/variation-add-to-cart-button.php' ); , resulting in the same Fatal error aforementioned as a consequence).
Decision points: we need to decide which actions and filters we wanna officially support for this block. From my perspective, all actions should be preserved and all filters removed (as altering the content/styling should happen on the editor level when it comes to blocks). I'm opening a separate discussion for this so we can 🧠 ⚡ and avoid holding this PR for too long, as we need to clear out the fatal error sooner than later.
Security: even though the majority of the changes here were ported over from the core of WooCommerce and follow the same security standards as the original templates, I'd like to have extra eyes here to make sure I didn't miss anything when it comes to safety, so I'm asking for more folks with a security background to take a look at these changes to make sure.

Fixes #9502

Other Checks

This PR adds/removes a feature flag & I've updated this doc.
This PR adds/removes an experimental interfaces and I've updated this doc.
I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Testing

User Facing Testing

While having a block theme enabled such as Twenty-twenty Three, head over to your Dashboard, and on the sidebar, click on "Appearance > Editor".
Select the Single Product template to customize it and click on edit.
Make sure the Add to Cart with Options block is available for usage on the inserter (you can remove/add the block from the template), add it, and save.
On the front end, ensure the Add to Cart button with Options works as expected and the product can be added to the cart.
Access all possible product types and ensure the Add to Cart button with Options is properly displayed for all of them, including: simple, variable, grouped, and external. Make sure all of these products can be added to cart.
Make sure the debugger is enabled, and there are no errors on your PHP debug.log.
Make sure the Add to Cart button with Options block also works as expected within the Single Product block.

Hooks Testing

Add the following by the end of your woocommerce-gutenberg-products-block.php file:

add_action( 'woocommerce_before_add_to_cart_form', function () {
	echo "<div>Before add to cart form</div>";
} );
add_action( 'woocommerce_after_add_to_cart_form', function () {
	echo "<div>After add to cart form</div>";
} );
add_action( 'woocommerce_before_add_to_cart_quantity', function () {
	echo "<div>Before add to cart quantity</div>";
} );
add_action( 'woocommerce_after_add_to_cart_quantity', function () {
	echo "<div>After add to cart quantity</div>";
} );
add_action( 'woocommerce_before_add_to_cart_button', function () {
	echo "<div>Before add to cart button</div>";
} );
add_action( 'woocommerce_after_add_to_cart_button', function () {
	echo "<div>After add to cart button</div>";
} );
add_action( 'woocommerce_before_variations_form', function () {
	echo "<div>Before variations form</div>";
} );
add_action( 'woocommerce_after_variations_form', function () {
	echo "<div>After variations form</div>";
} );
add_action( 'woocommerce_after_variations_table', function () {
	echo "<div>After variations table</div>";
} );
add_action( 'woocommerce_before_single_variation', function () {
	echo "<div>Before single variation</div>";
} );
add_action( 'woocommerce_after_single_variation', function () {
	echo "<div>After single variation</div>";
} );
add_action( 'woocommerce_grouped_product_list_before', function () {
	echo "<div>Before grouped product list</div>";
} );
add_action( 'woocommerce_grouped_product_list_after', function () {
	echo "<div>After grouped product list</div>";
} );

Access all possible single product types (simple, variable, grouped, and external) and ensure the hooked texts are correctly displayed on the front-end for all of them.

WooCommerce Visibility

WooCommerce Core
Feature plugin
Experimental

Changelog

Update the Add to Cart with Options block to rely on dedicated render methods instead of WooCommerce core templates.

…'s native templates for the simple and variable products.

…ion-add-to-cart-button directly.

…variable_product_to_cart method for enqueing 'wc-add-to-cart-variation'.

github-actions · 2023-05-17T13:33:00Z

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9494.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
`reviews-frontend.js`	`wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-compose`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`	⚠️
`active-filters-frontend.js`	`wc-blocks-data-store`, `wc-price-format`, `wc-settings`, `wp-data`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`	⚠️
`all-products-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-style-engine`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`cart-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-plugins`, `wp-polyfill`, `wp-primitives`, `wp-style-engine`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`checkout-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-plugins`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`filter-wrapper-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-style-engine`, `wp-url`, `wp-warning`	⚠️
`mini-cart-frontend.js`	`wc-price-format`, `wp-i18n`, `wp-polyfill`	⚠️
`rating-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`mini-cart-component-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-autop`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-style-engine`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️

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

TypeScript Errors Report

Files with errors: 473
Total errors: 2268

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

github-actions · 2023-05-17T13:39:02Z

Size Change: 0 B

Total Size: 1.09 MB

ℹ️ View Unchanged

Filename	Size
`build/active-filters-frontend.js`	8.57 kB
`build/active-filters-wrapper-frontend.js`	7.62 kB
`build/active-filters.js`	7.47 kB
`build/all-products-frontend.js`	11.9 kB
`build/all-products.js`	39.9 kB
`build/all-reviews.js`	7.77 kB
`build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js`	4.04 kB
`build/attribute-filter-wrapper-frontend.js`	4.28 kB
`build/attribute-filter.js`	13.1 kB
`build/blocks-checkout.js`	35.1 kB
`build/breadcrumbs.js`	2.04 kB
`build/cart-blocks/cart-accepted-payment-methods-frontend.js`	1.39 kB
`build/cart-blocks/cart-cross-sells-frontend.js`	253 B
`build/cart-blocks/cart-cross-sells-products--product-price-frontend.js`	2.94 kB
`build/cart-blocks/cart-cross-sells-products-frontend.js`	3.73 kB
`build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js`	5.17 kB
`build/cart-blocks/cart-express-payment-frontend.js`	718 B
`build/cart-blocks/cart-items-frontend.js`	301 B
`build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js`	5.51 kB
`build/cart-blocks/cart-line-items-frontend.js`	1.06 kB
`build/cart-blocks/cart-order-summary-frontend.js`	1.28 kB
`build/cart-blocks/cart-totals-frontend.js`	308 B
`build/cart-blocks/empty-cart-frontend.js`	346 B
`build/cart-blocks/filled-cart-frontend.js`	656 B
`build/cart-blocks/order-summary-coupon-form-frontend.js`	1.63 kB
`build/cart-blocks/order-summary-discount-frontend.js`	2.13 kB
`build/cart-blocks/order-summary-fee-frontend.js`	272 B
`build/cart-blocks/order-summary-heading-frontend.js`	333 B
`build/cart-blocks/order-summary-shipping-frontend.js`	17 kB
`build/cart-blocks/order-summary-subtotal-frontend.js`	273 B
`build/cart-blocks/order-summary-taxes-frontend.js`	434 B
`build/cart-blocks/proceed-to-checkout-frontend.js`	1.38 kB
`build/cart-frontend.js`	29.7 kB
`build/cart.js`	45 kB
`build/catalog-sorting.js`	1.7 kB
`build/checkout-blocks/actions-frontend.js`	1.85 kB
`build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js`	4.7 kB
`build/checkout-blocks/billing-address-frontend.js`	1.18 kB
`build/checkout-blocks/contact-information-frontend.js`	2.05 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-cart-items-frontend.js`	3.69 kB
`build/checkout-blocks/order-summary-coupon-form-frontend.js`	1.79 kB
`build/checkout-blocks/order-summary-discount-frontend.js`	2.29 kB
`build/checkout-blocks/order-summary-fee-frontend.js`	275 B
`build/checkout-blocks/order-summary-frontend.js`	1.28 kB
`build/checkout-blocks/order-summary-shipping-frontend.js`	17 kB
`build/checkout-blocks/order-summary-subtotal-frontend.js`	273 B
`build/checkout-blocks/order-summary-taxes-frontend.js`	435 B
`build/checkout-blocks/payment-frontend.js`	8.29 kB
`build/checkout-blocks/pickup-options-frontend.js`	4.8 kB
`build/checkout-blocks/shipping-address-frontend.js`	1.17 kB
`build/checkout-blocks/shipping-method-frontend.js`	2.59 kB
`build/checkout-blocks/shipping-methods-frontend.js`	6.35 kB
`build/checkout-blocks/terms-frontend.js`	1.56 kB
`build/checkout-blocks/totals-frontend.js`	312 B
`build/checkout-frontend.js`	31.3 kB
`build/checkout.js`	46.3 kB
`build/customer-account.js`	3.18 kB
`build/featured-category.js`	15 kB
`build/featured-product.js`	15.2 kB
`build/filter-wrapper-frontend.js`	14.2 kB
`build/filter-wrapper.js`	2.39 kB
`build/general-style-rtl.css`	1.31 kB
`build/general-style.css`	1.31 kB
`build/handpicked-products.js`	8 kB
`build/legacy-template.js`	6.45 kB
`build/mini-cart-component-frontend.js`	28.4 kB
`build/mini-cart-contents-block/cart-button-frontend.js`	1.73 kB
`build/mini-cart-contents-block/checkout-button-frontend.js`	1.74 kB
`build/mini-cart-contents-block/empty-cart-frontend.js`	360 B
`build/mini-cart-contents-block/filled-cart-frontend.js`	267 B
`build/mini-cart-contents-block/footer-frontend.js`	4.1 kB
`build/mini-cart-contents-block/items-frontend.js`	237 B
`build/mini-cart-contents-block/products-table-frontend.js`	592 B
`build/mini-cart-contents-block/shopping-button-frontend.js`	528 B
`build/mini-cart-contents-block/title-frontend.js`	1.91 kB
`build/mini-cart-contents-block/title-items-counter-frontend.js`	1.6 kB
`build/mini-cart-contents-block/title-label-frontend.js`	1.54 kB
`build/mini-cart-contents.js`	18 kB
`build/mini-cart-frontend.js`	2.66 kB
`build/mini-cart.js`	4.35 kB
`build/price-filter-wrapper-frontend.js`	6.75 kB
`build/price-filter.js`	8.47 kB
`build/price-format.js`	1.19 kB
`build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js`	251 B
`build/product-add-to-cart--product-button--product-image--product-rating--product-title.js`	151 B
`build/product-add-to-cart-frontend.js`	6.51 kB
`build/product-add-to-cart.js`	8.87 kB
`build/product-best-sellers.js`	8.34 kB
`build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js`	963 B
`build/product-button-frontend.js`	2.65 kB
`build/product-button.js`	4.01 kB
`build/product-categories.js`	2.37 kB
`build/product-category.js`	9.35 kB
`build/product-collection.js`	3.39 kB
`build/product-image-frontend.js`	2.63 kB
`build/product-image.js`	4.18 kB
`build/product-new.js`	8.34 kB
`build/product-on-sale.js`	8.68 kB
`build/product-price-frontend.js`	203 B
`build/product-price.js`	1.68 kB
`build/product-query.js`	11.7 kB
`build/product-rating-frontend.js`	2.31 kB
`build/product-rating.js`	999 B
`build/product-results-count.js`	1.66 kB
`build/product-sale-badge-frontend.js`	1.8 kB
`build/product-sale-badge.js`	666 B
`build/product-search.js`	2.63 kB
`build/product-sku-frontend.js`	1.84 kB
`build/product-sku.js`	535 B
`build/product-stock-indicator-frontend.js`	2.02 kB
`build/product-stock-indicator.js`	731 B
`build/product-summary-frontend.js`	2.19 kB
`build/product-summary.js`	904 B
`build/product-tag.js`	8.97 kB
`build/product-template.js`	3.27 kB
`build/product-title-frontend.js`	2.22 kB
`build/product-title.js`	3.69 kB
`build/product-top-rated.js`	8.58 kB
`build/products-by-attribute.js`	9.7 kB
`build/rating-filter-frontend.js`	21.3 kB
`build/rating-filter-wrapper-frontend.js`	6.21 kB
`build/rating-filter.js`	6.89 kB
`build/reviews-by-category.js`	12.1 kB
`build/reviews-by-product.js`	13.2 kB
`build/reviews-frontend.js`	7.11 kB
`build/single-product.js`	11.1 kB
`build/stock-filter-wrapper-frontend.js`	2.98 kB
`build/stock-filter.js`	7.61 kB
`build/store-notices.js`	1.69 kB
`build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js`	6.82 kB
`build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js`	4.21 kB
`build/vendors--attribute-filter-wrapper--stock-filter-wrapper-frontend.js`	5.11 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/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js`	3.57 kB
`build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js`	19.4 kB
`build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js`	8.25 kB
`build/vendors--checkout-blocks/shipping-method-frontend.js`	12.5 kB
`build/vendors--price-filter-wrapper-frontend.js`	2.2 kB
`build/vendors--product-add-to-cart-frontend.js`	7.26 kB
`build/vendors--rating-filter-wrapper-frontend.js`	5.11 kB
`build/wc-blocks-data.js`	22.5 kB
`build/wc-blocks-editor-style-rtl.css`	5.96 kB
`build/wc-blocks-editor-style.css`	5.96 kB
`build/wc-blocks-google-analytics.js`	1.56 kB
`build/wc-blocks-middleware.js`	933 B
`build/wc-blocks-registry.js`	3.15 kB
`build/wc-blocks-shared-context.js`	1.52 kB
`build/wc-blocks-shared-hocs.js`	1.75 kB
`build/wc-blocks-style-rtl.css`	27.8 kB
`build/wc-blocks-style.css`	27.8 kB
`build/wc-blocks-vendors-style-rtl.css`	1.96 kB
`build/wc-blocks-vendors-style.css`	1.96 kB
`build/wc-blocks-vendors.js`	65 kB
`build/wc-blocks.js`	3.7 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
`build/wc-shipping-method-pickup-location.js`	30.3 kB
`build/woo-directives-runtime.js`	2.73 kB
`build/woo-directives-vendors.js`	7.91 kB

_{compressed-size-action}

…e new variable_product_form method.

…the grouped_product_form method.

…roduct_form

…rm, woocommerce_after_add_to_cart_form, woocommerce_before_add_to_cart_button, woocommerce_after_add_to_cart_button actions and consolidate the form render on a new method called add_to_cart_form. Add docblocks to all actions.

imanish003 · 2023-05-18T07:24:27Z

Hey @nefeline, would you mind converting this pull request to a draft until it's ready for review? 🙂

…r outputing the quantity.

nefeline · 2023-05-18T12:20:25Z

Hey @nefeline, would you mind converting this pull request to a draft until it's ready for review? 🙂

Hey @imanish003 ! I'm so sorry: I forgot to create it as a draft, my bad =/ This is now ready for review.

nefeline · 2023-05-23T18:35:04Z

Thanks for the review @nerrad !

Regarding:

In general, I'm pretty wary about the number of PHPCS security ignore comments added here which is likely an artifact of splitting things up into separate methods while retaining much of the logic of the original template?

While many of the functions are protected, the risk is that in the future refactoring could call one of these functions with unescaped arguments and introduce a security vulnerability. I would prefer to see no instances of ignoring PHPCS security escaping and refactor to make sure everything is escaped right before output so that any future refactoring won't accidentally introduce a security vuln.

I made a series of changes to remove those phpcs:ignore occurrences: the vast majority of those were ported over from the native WooCommerce templates (so those have already been running on production sites for a while).

Regarding the one added within the add_to_cart_form protected method (which was explicitly introduced on this PR), instead of echoing the form, this method is now returning it. But there's a minor caveat: we are now repeating the 'woocommerce_before_add_to_cart_form' and 'woocommerce_after_add_to_cart_form' actions across all methods for each one of the product types since we are not buffering the output anymore.

With that said, unless folks have any urgent concerns, I'd like to propose addressing the pre-existing exceptions that are still pending for grouped products and the quantity input in separate PRs as those are all in production already (in the core of Woo) and we have some urgency on clearing out the Fatal error and unblocking release 10.3.0. cc: @mikejolley

Edit: See #9494 (comment) for additional change made following up this msg.

nefeline · 2023-05-23T19:20:12Z

Additional note regarding my previous comment over here:

I'd like to propose addressing the pre-existing exceptions that are still pending for grouped products

Regarding the pre-existing global variable override: it was ditched as I just noticed it's not a requirement for rendering the block.

nerrad

Regarding the one added within the add_to_cart_form protected method (which was explicitly introduced on this PR), instead of echoing the form, this method is now returning it. > But there's a minor caveat: we are now repeating the 'woocommerce_before_add_to_cart_form' and 'woocommerce_after_add_to_cart_form' actions across all methods for each one of the product types since we are not buffering the output anymore.

What implications are there. I'm assuming the actions will still only fire once depending on the product type?

Also, I go thinking, given product types are an extensible concept, one thing I'm wary about with this change is that any overrides that might exist for the templates in a theme (or injected via an extension) will no longer work.

Any refactor of this nature will need to also address the extensibility behaviour (beyond preserving actions) given that product types are an extensible concept. So while there's nothing really wrong with the code itself, I think it's premature to release it as is until we've figured out architecturally how things like the Add to Cart Block will be rendered on the server (will form elements be abstracted for instance) and the path to extensibility for that.

nerrad · 2023-05-24T11:08:06Z

src/BlockTypes/AddToCartForm.php

+				/**
+				 * Hook: woocommerce_after_single_variation.
+				 *
+				 * @since TBD


If you use the version placeholder, the release script will automatically add the correct version string.

Suggested change

* @since TBD

* @since $:VID:$

This could be updated in multiple places.

Nice! I wasn't aware of this script, TIL!

nefeline · 2023-05-25T22:35:37Z

Thanks @nerrad !

What implications are there. I'm assuming the actions will still only fire once depending on the product type?

Yes, they will still fire once per product type; the only downside is that we are breaking the DRY principle by repeating those actions across different methods, for each one of the product types.

Also, I go thinking, given product types are an extensible concept, one thing I'm wary about with this change is that any overrides that might exist for the templates in a theme (or injected via an extension) will no longer work.

Any refactor of this nature will need to also address the extensibility behaviour (beyond preserving actions) given that product types are an extensible concept. So while there's nothing really wrong with the code itself, I think it's premature to release it as is until we've figured out architecturally how things like the Add to Cart Block will be rendered on the server (will form elements be abstracted for instance) and the path to extensibility for that.

That's an excellent point; we definitely need a fallback for rendering custom product types and allowing extensibility, although it is not super clear to me what level of extensibility we should be providing as well: I'm thinking about a few possible paths, will share more details over here as soon as I have something more concrete to discuss.

tarunvijwani · 2023-06-05T09:24:19Z

Bumping it to the 10.5.0 release.

gigitux · 2023-06-05T09:25:54Z

Thanks @nefeline, for your work! I will close this PR since that, at least for now, we don't see any major benefit with this approach.

nefeline · 2023-06-07T07:32:15Z

Thanks @nefeline, for your work! I will close this PR since that, at least for now

Thanks @gigitux, but this PR is not ready to be closed.

we don't see any major benefit with this approach.

On the contrary: this is the basis for an upcoming discussion regarding block extensibility, and ultimately where we will be heading at some point in the near future.

github-actions · 2023-06-14T09:03:09Z

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

gigitux · 2023-06-19T07:31:16Z

I'm removing the assigned milestone since before proceeding with this approach, it is necessary to discuss it

github-actions · 2023-12-12T09:03:01Z

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

nefeline added 6 commits May 17, 2023 14:06

Update the AddToCartForm class to rely on a dedicated version of core…

379a2e7

…'s native templates for the simple and variable products.

Ditch the 'woocommerce_single_variation' action and invoke the variat…

d873433

…ion-add-to-cart-button directly.

update html structure for add_variable_product_to_cart

157a3c5

Introduce the add_external_product_to_cart method and update the add_…

161d55e

…variable_product_to_cart method for enqueing 'wc-add-to-cart-variation'.

Introduce the add_grouped_product_to_cart method.

b2b223a

ditch the 'variation' case.

88c572b

woocommercebot requested review from a team and imanish003 and removed request for a team May 17, 2023 13:31

nefeline added 9 commits May 17, 2023 17:06

Breakdown the method for rendering variable products and introduce th…

12240c5

…e new variable_product_form method.

Introduce the variable_inputs method and address PHPCS errors.

bf1d6ab

Make fine adjustments to the add_variable_product_to_cart method and …

fd11433

…the grouped_product_form method.

Remove all filters.

d10c760

Update the add_grouped_product_to_cart method to return the grouped_p…

23aae77

…roduct_form

Reorder the methods.

016cdc6

Address phpcs errors.

25be7e6

update calls to the add_to_cart_button method.

5c98547

nefeline added 2 commits May 18, 2023 12:25

Ensure grouped products also rely on the get_quantity_input method fo…

21bfe5f

…r outputing the quantity.

Ignore nonce verification.

7e15e23

nefeline changed the title ~~Add to Cart with Options block > Server side render relying on dedicated forms.~~ Add to Cart with Options block > Update the block to rely on dedicated render methods instead of WooCommerce core templates. May 18, 2023

Ensure the add to cart form is properly rendered for simple products.

d7dada4

nefeline self-assigned this May 18, 2023

nefeline added block: add to cart form type: bug The issue/PR concerns a confirmed bug. labels May 18, 2023

nefeline requested a review from nerrad May 18, 2023 12:22

nefeline requested a review from nerrad May 23, 2023 18:36

nefeline added the status: needs review label May 23, 2023

Ditch global variable override from the grouped_product_form method.

cbdd328

mikejolley modified the milestones: 10.3.0, 10.4.0 May 24, 2023

nefeline mentioned this pull request May 24, 2023

Add to Cart with Options block: Restore the global variable to its original value after being overriden #9581

Merged

3 tasks

nerrad reviewed May 24, 2023

View reviewed changes

gigitux removed the status: blocker Used on issues or pulls that block work from being released. label May 31, 2023

tarunvijwani modified the milestones: 10.4.0, 10.5.0 Jun 5, 2023

gigitux closed this Jun 5, 2023

gigitux removed status: ready to merge labels Jun 5, 2023

nefeline reopened this Jun 7, 2023

github-actions bot added status: stale Stale issues and PRs have had no updates for 60 days. and removed status: stale Stale issues and PRs have had no updates for 60 days. labels Jun 14, 2023

gigitux removed this from the 10.5.0 milestone Jun 19, 2023

nefeline marked this pull request as draft July 13, 2023 18:40

nerrad added the team: Kirigami & Origami label Nov 21, 2023

github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Dec 12, 2023

github-actions bot removed the status: stale Stale issues and PRs have had no updates for 60 days. label Dec 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add to Cart with Options block > Update the block to rely on dedicated render methods instead of WooCommerce core templates. #9494

Add to Cart with Options block > Update the block to rely on dedicated render methods instead of WooCommerce core templates. #9494

nefeline commented May 17, 2023 •

edited

github-actions bot commented May 17, 2023 •

edited

github-actions bot commented May 17, 2023 •

edited

imanish003 commented May 18, 2023

nefeline commented May 18, 2023

nefeline commented May 23, 2023 •

edited

nefeline commented May 23, 2023 •

edited

nerrad left a comment

nerrad May 24, 2023

nefeline May 25, 2023

nefeline commented May 25, 2023

tarunvijwani commented Jun 5, 2023

gigitux commented Jun 5, 2023

nefeline commented Jun 7, 2023

github-actions bot commented Jun 14, 2023

gigitux commented Jun 19, 2023

github-actions bot commented Dec 12, 2023

Add to Cart with Options block > Update the block to rely on dedicated render methods instead of WooCommerce core templates. #9494

Are you sure you want to change the base?

Add to Cart with Options block > Update the block to rely on dedicated render methods instead of WooCommerce core templates. #9494

Conversation

nefeline commented May 17, 2023 • edited

Important notes

Other Checks

Testing

User Facing Testing

Hooks Testing

WooCommerce Visibility

Changelog

github-actions bot commented May 17, 2023 • edited

Script Dependencies Report

TypeScript Errors Report

github-actions bot commented May 17, 2023 • edited

imanish003 commented May 18, 2023

nefeline commented May 18, 2023

nefeline commented May 23, 2023 • edited

nefeline commented May 23, 2023 • edited

nerrad left a comment

Choose a reason for hiding this comment

nerrad May 24, 2023

Choose a reason for hiding this comment

nefeline May 25, 2023

Choose a reason for hiding this comment

nefeline commented May 25, 2023

tarunvijwani commented Jun 5, 2023

gigitux commented Jun 5, 2023

nefeline commented Jun 7, 2023

github-actions bot commented Jun 14, 2023

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

gigitux commented Jun 19, 2023

github-actions bot commented Dec 12, 2023

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

nefeline commented May 17, 2023 •

edited

github-actions bot commented May 17, 2023 •

edited

github-actions bot commented May 17, 2023 •

edited

nefeline commented May 23, 2023 •

edited

nefeline commented May 23, 2023 •

edited