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

Add documentation for ExperimentalDiscountsMeta, cart/extensions endpoint, and extensionCartUpdate #4377

Merged
merged 9 commits into from Aug 25, 2021

Conversation

opr
Copy link
Contributor

@opr opr commented Jun 21, 2021

This PR adds documentation for the ExperimentalDiscountsMeta Slot/Fill, the extensionCartUpdate JS function, and the cart/extensions endpoint, and the register_update_callback method on the ExtendRestApi class.

How to test the changes in this Pull Request:

  1. From a third-party developer's point of view, please read the documentation and see if it makes sense.
  2. Check the links added to the documentation work correctly.

Changelog

Add documentation for extensionCartUpdate method - this allows extensions to update the client-side cart after it has been modified on the server.

@opr opr added status: needs review focus: documentation This issue is a request for better documentation. category: extensibility Work involving adding or updating extensibility. Useful to combine with other scopes impacted. labels Jun 21, 2021
@opr opr self-assigned this Jun 21, 2021
@opr opr requested a review from a team as a code owner June 21, 2021 14:27
@opr opr requested review from senadir and removed request for a team June 21, 2021 14:27
@github-actions
Copy link
Contributor

github-actions bot commented Jun 21, 2021

Size Change: +154 kB (+15%) ⚠️

Total Size: 1.15 MB

Filename Size Change
build/active-filters-frontend.js 8.39 kB +352 B (+4%)
build/active-filters.js 8.01 kB +492 B (+7%) 🔍
build/all-products-frontend.js 23 kB -11.9 kB (-34%) 🎉
build/all-products.js 37 kB +379 B (+1%)
build/all-reviews.js 9.58 kB +238 B (+3%)
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.65 kB +140 B (+6%) 🔍
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.81 kB -185 B (-9%)
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js 334 B -1 B (0%)
build/atomic-block-components/add-to-cart-frontend.js 8.39 kB -282 B (-3%)
build/atomic-block-components/button-frontend.js 1.74 kB +13 B (+1%)
build/atomic-block-components/button.js 875 B +32 B (+4%)
build/atomic-block-components/category-list-frontend.js 469 B -1 B (0%)
build/atomic-block-components/category-list.js 475 B -3 B (-1%)
build/atomic-block-components/image-frontend.js 1.88 kB +225 B (+14%) ⚠️
build/atomic-block-components/image.js 1.35 kB +39 B (+3%)
build/atomic-block-components/price-frontend.js 2.09 kB +109 B (+5%) 🔍
build/atomic-block-components/price.js 2.11 kB +105 B (+5%) 🔍
build/atomic-block-components/rating-frontend.js 563 B +43 B (+8%) 🔍
build/atomic-block-components/rating.js 566 B +42 B (+8%) 🔍
build/atomic-block-components/sale-badge-frontend.js 859 B +389 B (+83%) 🆘
build/atomic-block-components/sale-badge.js 869 B +395 B (+83%) 🆘
build/atomic-block-components/sku-frontend.js 387 B -3 B (-1%)
build/atomic-block-components/sku.js 393 B -1 B (0%)
build/atomic-block-components/stock-indicator-frontend.js 611 B +43 B (+8%) 🔍
build/atomic-block-components/stock-indicator.js 612 B +39 B (+7%) 🔍
build/atomic-block-components/summary.js 912 B +1 B (0%)
build/atomic-block-components/title-frontend.js 1.44 kB +25 B (+2%)
build/atomic-block-components/title.js 1.28 kB +21 B (+2%)
build/attribute-filter-frontend.js 18.2 kB +430 B (+2%)
build/attribute-filter.js 12.2 kB +781 B (+7%) 🔍
build/blocks-checkout-editor.js 0 B -10.6 kB (removed) 🏆
build/blocks-checkout.js 21.2 kB +1.28 kB (+6%) 🔍
build/cart-frontend.js 90.6 kB +12.1 kB (+15%) ⚠️
build/cart.js 45.8 kB +643 B (+1%)
build/checkout-frontend.js 94.7 kB +12.2 kB (+15%) ⚠️
build/checkout.js 48.8 kB +1.46 kB (+3%)
build/featured-category.js 7.81 kB +506 B (+7%) 🔍
build/featured-product.js 9.51 kB +33 B (0%)
build/handpicked-products.js 6.35 kB +316 B (+5%) 🔍
build/price-filter-frontend.js 14.5 kB +225 B (+2%)
build/price-filter.js 9.7 kB +332 B (+4%)
build/price-format.js 1.37 kB -6 B (0%)
build/product-best-sellers.js 6.69 kB +503 B (+8%) 🔍
build/product-categories.js 3.38 kB -9 B (0%)
build/product-category.js 7.56 kB +498 B (+7%) 🔍
build/product-new.js 6.85 kB +499 B (+8%) 🔍
build/product-on-sale.js 7.21 kB +512 B (+8%) 🔍
build/product-search.js 2.66 kB -14 B (-1%)
build/product-tag.js 6.67 kB +491 B (+8%) 🔍
build/product-top-rated.js 6.82 kB +499 B (+8%) 🔍
build/products-by-attribute.js 7.79 kB +497 B (+7%) 🔍
build/reviews-by-category.js 11.6 kB +328 B (+3%)
build/reviews-by-product.js 13 kB +267 B (+2%)
build/reviews-frontend.js 9.01 kB +9 B (0%)
build/single-product-frontend.js 26 kB -12.4 kB (-32%) 🎉
build/single-product.js 9.79 kB +79 B (+1%)
build/vendors--atomic-block-components/price-frontend.js 5.72 kB -816 B (-12%) 👏
build/wc-blocks-data.js 11 kB +42 B (0%)
build/wc-blocks-editor-style-rtl.css 15.4 kB +545 B (+4%)
build/wc-blocks-editor-style.css 15.5 kB +545 B (+4%)
build/wc-blocks-google-analytics.js 1.98 kB -10 B (-1%)
build/wc-blocks-middleware.js 1.47 kB -15 B (-1%)
build/wc-blocks-registry.js 2.74 kB -9 B (0%)
build/wc-blocks-shared-context.js 1.54 kB -2 B (0%)
build/wc-blocks-shared-hocs.js 1.75 kB +2 B (0%)
build/wc-blocks-style-rtl.css 20.1 kB +1.02 kB (+5%) 🔍
build/wc-blocks-style.css 20.1 kB +1.03 kB (+5%) 🔍
build/wc-blocks-vendors-style-rtl.css 1.37 kB +319 B (+30%) 🚨
build/wc-blocks-vendors-style.css 1.37 kB +319 B (+30%) 🚨
build/wc-blocks-vendors.js 253 kB +11.1 kB (+5%) 🔍
build/wc-blocks.js 3.5 kB -8 B (0%)
build/wc-payment-method-bacs.js 806 B -6 B (-1%)
build/wc-payment-method-cheque.js 806 B -1 B (0%)
build/wc-payment-method-cod.js 898 B -5 B (-1%)
build/wc-payment-method-paypal.js 839 B -5 B (-1%)
build/wc-payment-method-stripe.js 12.2 kB -167 B (-1%)
build/wc-settings.js 2.91 kB -26 B (-1%)
build/checkout-blocks/sample.js 174 B +174 B (new file) 🆕
build/checkout-i2-frontend.js 51.6 kB +51.6 kB (new file) 🆕
build/checkout-i2.js 48.9 kB +48.9 kB (new file) 🆕
build/stock-filter-frontend.js 8.76 kB +8.76 kB (new file) 🆕
build/stock-filter.js 7.73 kB +7.73 kB (new file) 🆕
build/vendors--atomic-block-components/add-to-cart-frontend.js 20.2 kB +20.2 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/atomic-block-components/add-to-cart.js 7.74 kB
build/atomic-block-components/summary-frontend.js 906 B
build/atomic-block-components/tag-list-frontend.js 467 B
build/atomic-block-components/tag-list.js 472 B

compressed-size-action

Copy link
Member

@senadir senadir left a comment

Choose a reason for hiding this comment

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

Thank you for writing this PR Thomas! it's super valuable to have those docs this early.

However, I strongly suggest we align our documentation to a single template. This is something that Darren, Allen, and I discussed and iterated on to make our docs more approachable/structured to WordPress developers who are new to the JS world and those type of extensibility points on general.

@@ -0,0 +1,90 @@
# Updating the cart with the Store API
Copy link
Member

Choose a reason for hiding this comment

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

To keep consistency with the rest of our codebase, can we frame this doc as:

  • Problem: What problem are we seeing here, this should be fairly easy to do since we only create new points After an existing problem.
  • Solution: Describes the solution, can reference other documents.
  • Basic Usage: The most minimal solution that can do the job.
  • Things to consider: Any gotchas or things that people might need to know.
  • API Definition: Full API docs in a table, see other documents.
  • Putting it all together: A full example touching on all options that can be copy-pasted.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks Nadir, I've updated the document now to follow this format. I feel like there's going to be way too much to cover in the Putting it all together section, and a lot of irrelevant information not relating to this part of the API. I did not want to go into too much detail about the things not directly related to this, so I've omitted some parts that are covered in other documents, and also not gone into detail about the implementation of my example methods.

I also feel like there's quite a bit of overlap and duplication of the Basic usage and Putting it all together section, but this is probably OK.

Comment on lines 2 to 4
If you're an extension developer, and your extension does some server-side processing as a result of some client-side
input, then you may want to use the `cart/extensions` endpoint to signal to
the Store API that some processing needs to take place.
Copy link
Member

Choose a reason for hiding this comment

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

I'm struggling to understand this part. As a plugin developer, I fail to understand where my code would fall into this, and what would be Cart/Checkout blocks responsibility.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think the new format may help to illustrate the problem a bit better. What do you think?

Comment on lines 10 to 18
You are the author of an extension that automatically applies valid coupons to a user's cart when they press a
button.

Your extension adds a button to the sidebar in the Cart and Checkout blocks using the [`DiscountsMeta`](./available-slot-fills.md) Slot.

When this button is clicked, you want the server to do some work to figure out which coupons the customer is eligible
for, and then apply them to the cart.

When this is done, you expect to see the updated cart data in the client.
Copy link
Member

Choose a reason for hiding this comment

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

This fits very well in the intro of this document and severs as a good introduction to what problem are you solving here. After an initial read, developers can just skip that section straight into basic usage or API definition.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed by the new format, I think.

Comment on lines 20 to 41
## Registering a callback to run when the `cart/extensions` endpoint is hit
Much like adding data to the Store API (described in more detail in
[Exposing your data in the Store API](./extend-rest-api-add-data.md).) you may add the callback
by invoking the `register_update_callback` method on the `ExtendRestApi` class from WooCommerce Blocks.

```PHP

use Automattic\WooCommerce\Blocks\Package;
use Automattic\WooCommerce\Blocks\Domain\Services\ExtendRestApi;

add_action('woocommerce_blocks_loaded', function() {
// ExtendRestApi is stored in the container as a shared instance between the API and consumers.
// You shouldn't initiate your own ExtendRestApi instance using `new ExtendRestApi` but should always use the shared instance from the Package dependency injection container.
$extend = Package::container()->get( ExtendRestApi::class );
$extend->register_update_callback(
[
'namespace' => 'my-extensions-unique-namespace',
'callback' => /* Add your callable here */
]
)
} );
```
Copy link
Member

Choose a reason for hiding this comment

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

This would fit very well in the basic usage section as a sub item.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed by the new format.

Comment on lines 43 to 50
The method takes a single argument, an associative array.

The associative array must have the following entries:
- `namespace` (string) - The unique namespace of your extension.
- `callback` (Callable) - The function/method (or Callable) that will be executed when the `cart/extensions` endpoint is
hit with a `namespace` that matches your extension's. The callable should take a single argument. The data passed into
the callback via this argument will be an array containing whatever data you choose to pass to it.
More information on how data gets passed from the client to the callback will be detailed over the next sections.
Copy link
Member

Choose a reason for hiding this comment

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

This could probably live in the API definition part.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed by the new format.

Comment on lines 54 to 56
## Making the request to the `cart/extensions` endpoint
When you wish to make a request to the endpoint, you should do it by calling the `extensionCartUpdate` function, available
from `@woocommerce/blocks-checkout`.
Copy link
Member

Choose a reason for hiding this comment

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

This, with the JS example below, can be moved into the basic usage section with the argument breakdown into API definition.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed by the new format.

Comment on lines 87 to 90
## Why can't I just POST to `cart/extensions` directly?
This endpoint returns an object representing the customer's cart, WooCommerce Blocks will then update the client-side
stores with the new cart data. The methods to do this are not available to third party extensions, which is why you must
use the `extensionCartUpdate` method.
Copy link
Member

Choose a reason for hiding this comment

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

This can be part of the "Problem" section.
It also doesn't do a good job of explaining why you can't update Cart block yourself, which is to protect the block from getting broken by a malfunctioning plugin.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed by the new format, and also more detail about why they can't update it has been added to the Problem section, and also mentioned again in the Things to consider section.

Copy link
Member

@nielslange nielslange left a comment

Choose a reason for hiding this comment

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

Except the two minor suggestions, your changes look good to me. The two suggestions are nitpicking, and you don't necessarily have to apply them. 😉

docs/extensibility/available-slot-fills.md Outdated Show resolved Hide resolved
docs/extensibility/extend-rest-api-update-cart.md Outdated Show resolved Hide resolved
@opr opr requested a review from senadir August 24, 2021 16:22
Copy link
Member

@senadir senadir left a comment

Choose a reason for hiding this comment

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

Thank you for handling updates and feedback on this PR Thomas. I think we can ship it 🚢

docs/extensibility/extend-rest-api-update-cart.md Outdated Show resolved Hide resolved
Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
@opr opr merged commit 5de6988 into trunk Aug 25, 2021
@opr opr deleted the add/docs-for-cart-extensions branch August 25, 2021 12:12
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
category: extensibility Work involving adding or updating extensibility. Useful to combine with other scopes impacted. focus: documentation This issue is a request for better documentation.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants