Getting the Product Collection location/context

[kmanijak]

Getting the Product Collection location/context

This PR includes creating a useGetLocation hook that recognizes the location and context of Product Collection block (and potentially other blocks).

Examples:

Note: the below screenshot were taken for demo purposes. The block doesn't render that data in the Editor in this PR!

In Specific category template (Category: Clothing)	In Single Product template	In post/page

Prerequisites to testing:

1. To verify the location, go to Developer Tools -> Network tab
2. Search for: product isproductcollection

Testing steps:

1. Try adding Product Collection block (choose some collection, for example, "Featured") in multiple places (example scenarios are provided in the next step) and verify the proper payload is sent with the request by checking Payload tab.

• Example from Single Product template:
  • location[type] is product
  • productId is unknown, hence location[sourceData][productId] is empty:

2. Here are some example scenarios, but try to break it as well by trying something else:

Scenario	Output
Products by Category/Tag/Attribute template	location[type]: 'archive' location[sourceData][taxonomy]: 'product_cat' location[sourceData][taxonomy]:
Category: SPECIFIC_CATEGORY template	location[type]: 'archive' location[sourceData][taxonomy]: 'product_cat' location[sourceData][taxonomy]: SPECIFIC_CATEGORY_ID
Product Collection in Single Product block in Category: SPECIFIC_CATEGORY template	location[type]: 'product' location[sourceData][productId]: SPECIFIC_PRODUCT_ID
Product Collection in Single Product: SPECIFIC_PRODUCT template	location[type]: 'product' location[sourceData][productID]: PRODUCT_ID
In the above scenario, add Single Product block and Product Collection inside	location[type]: 'product' location[sourceData][productID]: PRODUCT_ID_FROM_SINGLE_PRODUCT_BLOCK }
Product Collection in Mini Cart Contents	location[type]: 'cart'
Page/Post	location[type]: 'generic'

5. Location type matches the closest context and ID is provided if available.

Additional instructions - how to add custom templates or modify some blocks

Create "Single Product: SPECIFIC_PRODUCT template"

1. Go to Editor -> Templates -> "+" button -> Single Item: Product
2. Choose some product

Adding Product Collection inside Single Product block

1. Add "Single Product" block from the inserter

2. Choose some product and click "Done"
3. Open List View of blocks
4. Expand Single Product block -> Columns -> Column
5. Click "Three dots" menu next to some of the inner blocks and click "Add After"
6. Insert Product Collection and choose some collection, for example "Featured"

Product Collection in Mini Cart Contents

1. Go to Editor -> Patterns -> Scroll to the very bottom and choose "Mini Cart" -> "Mini Cart"

2. Edit template part
3. Open List view of blocks
4. Expand Mini Cart Contents -> Filled Mini Cart -> Mini Cart Items
5. Click "Three dots" menu next to some of the inner blocks and click "Add After"
6. Insert Product Collection and choose some collection, for example "Featured"

Closes: #43694

[github-actions]

Test Results Summary

Commit SHA: c4498af

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 37s
E2E Tests	296	0	0	21	0	317	7m 13s

---

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.

[github-actions]

Hi @xristos3490, @imanish003, @woocommerce/woo-fse

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

[xristos3490]

Nice work @kmanijak!

I tried all available contexts described in the requirements, but I've been attempting some edge cases, like adding a Single Product block inside another or a product template. Everything is working great!

Taxonomies are also working; post-related returns in a generic context and product-related returns have the required term IDs when applicable.

Issues

• The Product Catalog template still returns a generic context.

Notes

• Perhaps using the full taxonomy name is better and more aligned with PHP. e.g., cat becomes product_cat etc.
• We need to decide on the context structure. Especially when it comes to handling partial contexts vs. unavailable ones (e.g., The Product Catalog template vs. a Products By Attribute template vs. Products by Category template). We'll do this async in Slack, as we discussed.

[imanish003]

Hi Karol,

I've left a few minor comments, but everything appears to be functioning well. Excellent work! 🚀

[imanish003]

Hey Karol, the changes look good to me! Also, I like the new approach for E2E testing. 🙌🏻
I left a minor comment but pre-approving the PR. 🚀

Quick note: Perhaps you could update the PR description. For example, it still mentions that it's a POC, but I believe we've moved beyond that stage 😅