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

[Sku selector] - Fix sku slider rendering the parent shelf #1078

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

agnaldopsfilho
Copy link

What problem is this solving?

The "displayMode": "slider" prop of the sku-selector component does not behave correctly when used inside a shelf with slider, duplicating the same shelf inside the sku selector component.
This problem is caused because the slider component uses the list-context to display the slides, and being inside another slider generates context conflicts.
To resolve this I imported the ListContextProvider and placed the SliderLayout inside it passing the prop list={[]} to the provider in the Variation component of SKUSelector.

How to test it?

  1. Go to Workspace
  2. Look at the first shelf in home:
    image

Screenshots or example usage:

  • Before (the shelf is rendered inside the sku selector component on click on the slider's arrows) :
    image

  • After (the slide behaves correctly):
    image

Example usage:

 "product-summary-sku-selector#shelf": {
    "props": {
      "displayMode": "slider",
      "sliderItemsPerPage": {
        "desktop": 2,
        "tablet": 2,
        "phone": 2
      },
      "sliderDisplayThreshold": 1,
      "showVariationsLabels": "none"
    }
  }

How does this PR make you feel? 🔗

@vtex-io-ci-cd
Copy link
Contributor

vtex-io-ci-cd bot commented Mar 14, 2023

Hi! I'm VTEX IO CI/CD Bot and I'll be helping you to publish your app! 🤖

Please select which version do you want to release:

  • Patch (backwards-compatible bug fixes)

  • Minor (backwards-compatible functionality)

  • Major (incompatible API changes)

And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.

  • No thanks, I would rather do it manually 😞

@agnaldopsfilho agnaldopsfilho changed the title [Sku selector] - Add ListContextProvider around the SliderLayout to f… [Sku selector] - Fix sku slider Mar 16, 2023
@agnaldopsfilho agnaldopsfilho changed the title [Sku selector] - Fix sku slider [Sku selector] - Fix sku slider rendering the parent shelf Mar 21, 2023
@agnaldopsfilho
Copy link
Author

agnaldopsfilho commented Oct 3, 2023

Hi! I'm VTEX IO CI/CD Bot and I'll be helping you to publish your app! 🤖

Please select which version do you want to release:

  • Patch (backwards-compatible bug fixes)
  • Minor (backwards-compatible functionality)
  • Major (incompatible API changes)

And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.

  • No thanks, I would rather do it manually 😞

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.

None yet

1 participant