Product page: changing SKU options does not update displayed details

[plundaahl-ep]

Step 1: Are you in the right place?

• (this is a business logic bug in this codebase)

Step 2: Describe your environment

• Device: Macbook Pro (15-inch, 2018)
• OS version: macOS Mojave (10.14.6)
• Storefront pulled version: master (c5f7dc3f8f6416392b58b1058953d60f38e24b11)
• Node version: reproduced using both Node v10.16.0 and v12.19.0

Step 3: Describe the problem:

This bug occurs on the product page for multi-variant products.

When the user changes the variant configuration for a multi-variant product, none of the page details (aside from the variation options) are updated. This can be most clearly seen when the prices for child products are different to that of the parent. In this case, when the user adds the product to the cart, the line item in the cart will have a different price to that advertised on the product page.

However, this also affects:

• The product title
• The SKU code display
• Any additional attributes that may be displayed (more of an issue for customized versions of the storefront)

Steps to reproduce:

1. Load a multivariant page where the price for the parent and child products are different
2. Change one of the SKU options
3. Click add-to-cart
4. Open the cart

Observed Results:

Notice that the price for the added item and the price on the product page do not match.

Expected Results:

Assuming there are no coupons or promotions applied, the price of the line-item in the cart should match that of the item on the product page.

Relevant Code:

The relevant code is in product.tsx. Note that the handleVariationChange function, which is passed into VariationsSelector on line 231, is simply updating the product ID (line 108).

For the expected behavior to occur, we would need to load the child product from the API when the user updates the SKU options.

[plundaahl-ep]

Just a quick note: I believe that this is at least partially-related to this issue. As I mentioned in my comment on that issue, I believe the problem is really one of separating out the domain model.

I believe that an accurate domain model for the Product component would include:

• The product.meta.variations and product.meta.variation_matrix from the parent product (as returned from the API)
• The entire product response for the currently-selected product

When the user changes the SKU configuraiton in the VariationsSelector, I don't think it should just be updating the product ID - I think it should be fetching the entire product.

Thanks!

[kaiyuancheng]

Bug created: https://elasticpath.atlassian.net/browse/MT-6134
However, the price in the cart actually reflects the right one been added.

[kaiyuancheng]

This is fixed now in ticket https://elasticpath.atlassian.net/browse/MT-6134.
@yasiloghmani please update when the code merged