Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/gcom 1120 | Improve defaultConfigurableOptionsSelection functionality #1991

Merged
merged 16 commits into from
Jul 14, 2023

Conversation

JoshuaS98
Copy link
Contributor

@JoshuaS98 JoshuaS98 commented Jul 12, 2023

In this PR:

1. Improve defaultConfigurableOptionsSelection functionality

Situation: You land on a simple product page.

In the current main branch, we check all the configurableOptions of the linked configurable item. If a simple product does not have this option as a property on it's product branch, the option can not be configured on the simple product page. To fix this, you had to query that option in your productPage query to make it a property on the simple product. This however meant that you had to add a property to your query every time a site owner made a new configurable option. This is not dynamic nor scalable.

To fix this:
We check the variants of a configurable option and match the variant SKU's with the SKU of the current simple product. When we know which variant should be preselected, we get the uid(s) from the variant's attribute(s) and inject them into the selectedOptions array.

2. Match the CORRECT related upsells with the CORRECT product
In the current main branch, the first item of the relatedUpsells array is being merged into the product object. But in case of a simple product, magento not only gives the simple product back, but also optional configurable products that are linked to it. Merging relatedUpsells[0] with the simple product will result in merging the wrong upsells with the simple product.

Test url
Please replace localhost for Vercel URL.
Simple product: localhost:3000/p/waverly-size-4-6y-gc-564-sock-6y
Concurrent configurable product: localhost:3000/p/gc-fruity-sock

Issues:

  1. If there is more than 1 configurable matched to a simple product, the simple product will only render the options of the first configurable returned in the productPage array. This can cause potential issues, for instance, when someone is on the page of the second configurable linked to the simple, presses on an option, gets redirects to the simple and then suddenly some options that were unique on the second configurable are now longer showing as options. I did not validate this theory.

@JoshuaS98 JoshuaS98 requested review from hnsr and paales July 12, 2023 10:00
@changeset-bot
Copy link

changeset-bot bot commented Jul 12, 2023

🦋 Changeset detected

Latest commit: ac6678d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 72 packages
Name Type
@graphcommerce/magento-product-configurable Patch
@graphcommerce/demo-magento-graphcommerce Patch
@graphcommerce/magento-payment-braintree Patch
@graphcommerce/magento-payment-included Patch
@graphcommerce/magento-payment-multisafepay Patch
@graphcommerce/magento-wishlist Patch
@graphcommerce/mollie-magento-payment Patch
@graphcommerce/magento-graphcms Patch
@graphcommerce/docs Patch
@graphcommerce/browserslist-config-pwa Patch
@graphcommerce/changeset-changelog Patch
@graphcommerce/eslint-config-pwa Patch
@graphcommerce/graphql-codegen-markdown-docs Patch
@graphcommerce/graphql-codegen-near-operation-file Patch
@graphcommerce/graphql-codegen-relay-optimizer-plugin Patch
@graphcommerce/next-config Patch
@graphcommerce/prettier-config-pwa Patch
@graphcommerce/typescript-config-pwa Patch
@graphcommerce/address-fields-nl Patch
@graphcommerce/algolia-search Patch
@graphcommerce/cli Patch
@graphcommerce/ecommerce-ui Patch
@graphcommerce/framer-next-pages Patch
@graphcommerce/framer-scroller Patch
@graphcommerce/framer-utils Patch
@graphcommerce/googleanalytics Patch
@graphcommerce/googlerecaptcha Patch
@graphcommerce/googletagmanager Patch
@graphcommerce/graphql-mesh Patch
@graphcommerce/graphql Patch
@graphcommerce/hygraph-cli Patch
@graphcommerce/hygraph-dynamic-rows Patch
@graphcommerce/graphcms-ui Patch
@graphcommerce/image Patch
@graphcommerce/lighthouse Patch
@graphcommerce/lingui-next Patch
@graphcommerce/magento-cart-billing-address Patch
@graphcommerce/magento-cart-checkout Patch
@graphcommerce/magento-cart-coupon Patch
@graphcommerce/magento-cart-email Patch
@graphcommerce/magento-cart-items Patch
@graphcommerce/magento-cart-payment-method Patch
@graphcommerce/magento-cart-pickup Patch
@graphcommerce/magento-cart-shipping-address Patch
@graphcommerce/magento-cart-shipping-method Patch
@graphcommerce/magento-cart Patch
@graphcommerce/magento-category Patch
@graphcommerce/magento-cms Patch
@graphcommerce/magento-compare Patch
@graphcommerce/magento-customer-account Patch
@graphcommerce/magento-customer-order Patch
@graphcommerce/magento-customer Patch
@graphcommerce/magento-graphql Patch
@graphcommerce/magento-newsletter Patch
@graphcommerce/magento-pagebuilder Patch
@graphcommerce/magento-payment-adyen Patch
@graphcommerce/magento-payment-klarna Patch
@graphcommerce/magento-payment-paypal Patch
@graphcommerce/magento-product-bundle Patch
@graphcommerce/magento-product-downloadable Patch
@graphcommerce/magento-product-grouped Patch
@graphcommerce/magento-product-simple Patch
@graphcommerce/magento-product-virtual Patch
@graphcommerce/magento-product Patch
@graphcommerce/magento-review Patch
@graphcommerce/magento-search Patch
@graphcommerce/magento-store Patch
@graphcommerce/next-ui Patch
@graphcommerce/react-hook-form Patch
@graphcommerce/framer-next-pages-example Patch
@graphcommerce/framer-scroller-example Patch
@graphcommerce/image-example Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel
Copy link

vercel bot commented Jul 12, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
graphcommerce ✅ Ready (Inspect) Visit Preview Jul 14, 2023 9:04am

@JoshuaS98 JoshuaS98 changed the title Feature/gcom 1120 Feature/gcom 1120 | Improve defaultConfigurableOptionsSelection functionality Jul 12, 2023
@github-actions
Copy link
Contributor

Page Size old Size new Size diff First load old First load new First load diff
/p/[url] 12.7kB 12.8kB 0.1kB 315kB 316.0kB +1kB⚠️

@github-actions
Copy link
Contributor

Page Size old Size new Size diff First load old First load new First load diff
/p/[url] 12.7kB 12.8kB 0.1kB 316kB 316.0kB

Copy link
Member

@paales paales left a comment

Choose a reason for hiding this comment

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

I've tried moving away from the variants field as this could negatively impact performance. However, it seems that we are 'stuck' with it in this case.

@paales
Copy link
Member

paales commented Jul 13, 2023

This can cause potential issues, for instance, when someone is on the page of the second configurable linked to the simple, presses on an option, gets redirects to the simple and then suddenly some options that were unique on the second configurable are now longer showing as options.

We currently never redirect a user and in the upcoming ConfigurableProductUrl PR only the URL is changed in the browser, but the page isn't actually reloaded.

It is kinda odd if a user will receive multiple configurables for the simple URL.

JoshuaS98 and others added 4 commits July 13, 2023 11:50
…eOptionsSelection.ts

Co-authored-by: Paul Hachmang <paul@reachdigital.nl>
…eOptionsSelection.ts

Co-authored-by: Paul Hachmang <paul@reachdigital.nl>
…t.graphql

Co-authored-by: Paul Hachmang <paul@reachdigital.nl>
…ons.graphql

Co-authored-by: Paul Hachmang <paul@reachdigital.nl>
@github-actions
Copy link
Contributor

Page Size old Size new Size diff First load old First load new First load diff
/p/[url] 12.7kB 12.8kB 0.1kB 316kB 316.0kB

@github-actions
Copy link
Contributor

Page Size old Size new Size diff First load old First load new First load diff
/p/[url] 12.7kB 12.8kB 0.1kB 315kB 316.0kB +1kB⚠️

@github-actions
Copy link
Contributor

Page Size old Size new Size diff First load old First load new First load diff
/p/[url] 12.7kB 12.8kB 0.1kB 316kB 316.0kB

@github-actions
Copy link
Contributor

Page Size old Size new Size diff First load old First load new First load diff
/p/[url] 12.7kB 12.7kB 315kB 316.0kB +1kB⚠️

@paales paales merged commit 2f8fc28 into canary Jul 14, 2023
2 checks passed
@paales paales deleted the feature/GCOM-1120 branch July 14, 2023 09:51
@JoshuaS98 JoshuaS98 self-assigned this Nov 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants