Product sets: basic pdp (@W-12301851@) #897

vmarta · 2023-01-11T00:46:17Z

For the 1st round of implementation, we aim to have a basic PDP working that supports a product set.

However, the original code assumed that there's only a single product on the page. For multiple products, we'll need to tweak how we save the swatches state (variation attributes) into the page url's search parameters. Otherwise, selecting a size, for example, would select that size for all of the child products.

With this PR.. for a single product, the page url would look something like this (still the same as before):
/product/25502228M?color=JJ0NLD0&size=9MD

For multiple products, the url is like this:
/product/Spring-look-2M?25565826M=color%3DJJGG3XX%26size%3D9LG&25518009M=color%3DJJ9LMXX
(Shopper has selected some swatches for the child products, whose ids are 25565826M and 25518009M)

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

(change1)

How to Test-Drive This PR

Example of a PDP with product set: navigate to this list http://localhost:3000/global/en-GB/category/womens-outfits

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

There was a subtle bug where the `value` of the SwatchGroup was passed down to override all the values of the children Swatch components.

The child product itself is actually not a set, but is considered a set product.

vmarta · 2023-01-11T23:02:37Z

packages/template-retail-react-app/app/components/swatch-group/index.jsx

@@ -28,9 +35,7 @@ const SwatchGroup = (props) => {
                    const childValue = child.props.value

                    return React.cloneElement(child, {
-                        selected: childValue === value,
-                        key: childValue,
-                        value,


Aside: there was a subtle bug with the original code. Now the parent (SwatchGroup) no longer overriding the children's value. They should be distinct.

vmarta · 2023-01-11T23:16:43Z

packages/template-retail-react-app/app/pages/product-detail/index.jsx

+                        <Fragment key={childProduct.id}>
+                            <ProductView
+                                product={childProduct}
+                                isSetProduct={true}


I added this isSetProduct for the ProductView component (and also the related React hooks) because given solely the data for a child product, it is not possible to identify whether the product belongs to a set or not.

Have you thought about other product types that we currently don't support that we might in the future. And how using isSetProduct as a prop will age?

Side note: Is isSetProduct short for isProductSetProduct

@bendvc Good questions.. I don't know yet at this time, but there's a separate refactoring ticket for supporting other product types.🤔 However, I'll think about it a bit more at this stage anyways.

Is isSetProduct short for isProductSetProduct

Yes, isSetProduct comes from the way SCAPI calls the child products. The data for a product set has setProducts: [...].

vmarta · 2023-01-11T23:35:45Z

packages/template-retail-react-app/app/hooks/use-variation-params.js

-    const params = new URLSearchParams(search)
-    // Using all the variation attribute id from the array generated above, get
+    const [allParams, productParams] = usePDPSearchParams(product.id)
+    const params = isSetProduct ? productParams : allParams


I tried to reuse the existing React hooks. The main difference is for set products, the hooks focus in on a specific subset of the page url params, rather than all of the params.

vmarta · 2023-01-16T23:30:48Z

@bendvc all right, this PR is ready for another review. Aside from the UI changes, here are some main changes since your last review:

Clearer argument name than isSetProduct: it's now isProductPartOfSet.
Added the parent product to the top of the page
Added-to-cart modal now shows the correct product metadata and correct variant image too

vmarta · 2023-01-16T23:34:07Z

packages/template-retail-react-app/app/partials/product-view/index.jsx

+                        {!isProductASet && (
+                            <Box
+                                display={
+                                    isProductPartOfSet ? 'block' : ['none', 'none', 'none', 'block']
+                                }
+                            >


What do you think of isProductASet and isProductPartOfSet? How are they compared to the existing terminology seen in Business Manager and documentation (they use "product set" and "set product" to mean parent and child product, respectively)?

I assume that the reason they chose to set product is because it's short and its reversal of product set implicitly gives it a connection between the two types.

That being said, if you read "set product" in isolation, likelihood that you would understand what it means is low. So although I normally like what old ocapi and their doc's, I think this isn't one of them.

I'm not too concern either way, so you can do what you think is best on this topic, because we can change it since it's in the template.

Another option (because I like to muddy the waters) would be something like product.isSet and product.belongsToSet

bendvc · 2023-01-17T00:03:19Z

packages/template-retail-react-app/app/hooks/use-product.js

+    const variant = useVariant(product, isProductPartOfSet)
+    const variationParams = useVariationParams(product, isProductPartOfSet)
+    const variationAttributes = useVariationAttributes(product, isProductPartOfSet)
+    // console.log('--- variationAttributes', variationAttributes)


Don't forget to remove this 👍

* Product sets: basic PLP (#878) * Show product sets on PLP (alongside other products) For now, the product sets would look the same as any other kinds of products. * Parse the product type * Add todo * Ignore linting of this line for now * Add "Starting at" label * Product sets: basic pdp (@W-12301851@) (#897) * Product set: render the children products with minimal UI * No longer showing breadcrumbs in the child items * Individual swatches now have correct `value` There was a subtle bug where the `value` of the SwatchGroup was passed down to override all the values of the children Swatch components. * 1st attempt at saving swatches state in the page url * Avoid null in the url search params * Some refactoring * Add-to-cart now works for child items * Show accordion for each child item * Add todo * Rename variable for accuracy The child product itself is actually not a set, but is considered a set product. * Optional argument * Some refactoring and fix linting * Helper hook for url search params * Clean up * Rename module for a specific use case (PDP) * Show/hide add-to-cart buttons accordingly * Modal shows product set data * Parent product * Variant's product image shows up in add-to-cart modal * Rename variables for clarity * Fix linting error * Add horizontal rules to separate the parent and child items * Tweak whitespace * Localize the Starting At label * Add todo * Product sets: wishlist (@W-12301966@) (#917) * Starting At label * 1st attempt at updating wishlist for product sets * "Select Options" → "View Options" * Some refactoring * Render add-all-to-cart button if necessary * Better way to fetch `setProducts` data * Switch to zzrf-009 temporarily * For debugging purpose I'll revert this commit later * Simpler requirement * Update what quantity meant for product set * Some refactoring * Add comment * Add-to-wishlist for the individual child items * Rename variable * Update button text on PDP * Update button text on Wishlist page * Revert "Switch to zzrf-009 temporarily" This reverts commit 484c8d8. * PDP: show wishlist button on mobile * Fix formatting issues (prettier) * PR feedback * Clearer as to which is product or variant * Make it consistent with addToWishlist signature * [Feature] Add `Add Set to Cart` Button for Product Sets (#931) * Product sets: basic PLP (#878) * Variant's product image shows up in add-to-cart modal * Get modal showing multiple items added to cart * Add scroll to after validation Co-authored-by: Vincent Marta <[email protected]> * Einstein API to support product sets (#962) * verify viewcategory and viewsearch is working * viewproduct event is sent for every child product * addtocart event fires for all children when add set to cart * parent set only sends id * Design enhancements for product sets (#975) * remove complete the set carousel * remove complete the set translations * sticky buttons on mobile view * fix modal vertical margins on desktop * move recos to modalbody and cleanup margins * add dividers between product set items in mobile view * fix margins so sticky buttons do not overlap with content * add lazy loading of product set children product images * remove height - does nothing * bump build size to 55 * add conditional for complete the set and change loading var name * lint * revert translations * Cleanup * added to cart modal is scrollable and 90% of viewport * remove dialogprops * lint * Testing product sets - @W-12414116@ (#1003) * Product tile: test product set's price label * Test product set rendering * Test callbacks are called properly * itemAccumulatedCount is redundant * Test that modal can render multiple products * Finally the add-to-cart modal shows up in testing * Clean up * Test error messages * Test lazy loading of the child products * Split a test into smaller ones * Use `describe` to group all the related tests * Update comment * Test the wishlist and its primary action buttons * Clean up * Some refactoring * Some refactoring * Linting fix * Update comment * Test `getDisplayVariationValues` * Test the usePDPSearchParams * Tweak another test to pass Not related to product sets, but needing CI to pass. * Move mocked data into their own files * Moving it to within `beforeEach` --------- Co-authored-by: Ben Chypak <[email protected]> Co-authored-by: yunakim714 <[email protected]>

vmarta added 17 commits January 5, 2023 13:34

Product set: render the children products with minimal UI

14ffcfb

No longer showing breadcrumbs in the child items

c5f71bb

Merge branch 'feature/product-sets' into product-sets-basic-pdp

05cf172

Individual swatches now have correct value

77a2ba6

There was a subtle bug where the `value` of the SwatchGroup was passed down to override all the values of the children Swatch components.

Merge branch 'feature/product-sets' into product-sets-basic-pdp

3842f9a

1st attempt at saving swatches state in the page url

aa5fdb9

Avoid null in the url search params

8400a46

Some refactoring

868a5a3

Add-to-cart now works for child items

e108963

Show accordion for each child item

31bcd93

Add todo

7d30f54

Rename variable for accuracy

9a56c27

The child product itself is actually not a set, but is considered a set product.

Optional argument

a81034f

Some refactoring and fix linting

5f5edc6

Helper hook for url search params

b3bd3b2

Clean up

3acf93d

Rename module for a specific use case (PDP)

a670c64

vmarta commented Jan 11, 2023

View reviewed changes

vmarta added 6 commits January 11, 2023 17:41

Show/hide add-to-cart buttons accordingly

1b2a480

Modal shows product set data

e3d27f3

Parent product

5ad9cf4

Variant's product image shows up in add-to-cart modal

9aed81f

Rename variables for clarity

41cde1c

Fix linting error

5a8f6ce

vmarta marked this pull request as ready for review January 16, 2023 21:00

vmarta requested a review from a team as a code owner January 16, 2023 21:00

vmarta added 2 commits January 16, 2023 13:11

Add horizontal rules to separate the parent and child items

4ddb22e

Tweak whitespace

31aa735

vmarta commented Jan 16, 2023

View reviewed changes

bendvc reviewed Jan 17, 2023

View reviewed changes

bendvc approved these changes Jan 17, 2023

View reviewed changes

vmarta added 2 commits January 16, 2023 16:47

Localize the Starting At label

1607644

Add todo

88fb12f

vmarta merged commit be5f364 into feature/product-sets Jan 17, 2023

vmarta deleted the product-sets-basic-pdp branch January 17, 2023 17:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Product sets: basic pdp (@W-12301851@) #897

Product sets: basic pdp (@W-12301851@) #897

vmarta commented Jan 11, 2023 •

edited

Loading

vmarta Jan 11, 2023

vmarta Jan 11, 2023

bendvc Jan 12, 2023

vmarta Jan 12, 2023

vmarta Jan 12, 2023 •

edited

Loading

vmarta Jan 11, 2023

vmarta commented Jan 16, 2023

vmarta Jan 16, 2023

bendvc Jan 16, 2023

bendvc Jan 17, 2023

Product sets: basic pdp (@W-12301851@) #897

Product sets: basic pdp (@W-12301851@) #897

Conversation

vmarta commented Jan 11, 2023 • edited Loading

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vmarta Jan 12, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vmarta commented Jan 16, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vmarta commented Jan 11, 2023 •

edited

Loading

vmarta Jan 12, 2023 •

edited

Loading