-
Notifications
You must be signed in to change notification settings - Fork 46
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
Add CustomContext prop in page wrappers #506
Conversation
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:
And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.
|
Beep boop 🤖 I noticed you didn't make any changes at the
In order to keep track, I'll create an issue if you decide now is not a good time
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 <3 |
Beep boop 🤖 That's ok, I created an issue for this so we don't forget |
Your PR has been merged! App is being published. 🚀 After the publishing process has been completed (check #vtex-io-releases) and doing A/B tests with the new version, you can deploy your release by running:
After that your app will be updated on all accounts. For more information on the deployment process check the docs. 📖 |
Works like a charm guys! Thanks a lot for making it! 🎉 |
What problem is this solving?
Make it possible to create custom global context in pages.
How to use?
Step 1: Create a React component that accepts
children
.react
folderExample:
store/interfaces.json
file.Example:
Step 2: Use this new block as a slot of a page wrapper
There are 3 page wrappers available:
storeWrapper
useOrderForm
,useOrderItems
productWrapper
useOrderForm
,useOrderItems
, anduseProduct
searchWrapper
useOrderForm
,useOrderItems
,useSearchPage
,useSearchPageState
, anduseSearchPageStateDispatch
.Example of usage:
You can use the
parent
feature to change the block based on page. That's similar to the solution of a custom header described here: https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-customizing-the-header-and-footer-blocks-by-pageWhy not? 🤷
Remember that
my-custom-context
is a normal block, so you can also pass props to it.Example:
How to test it?
https://context--storecomponents.myvtex.com/blouse-with-knot/p?skuId=2000544
Screenshots or example usage:
Describe alternatives you've considered, if any.
Related to / Depends on
Depends on vtex-apps/render-runtime#601
How does this PR make you feel? 🔗