docs: draft sub-path routing docs #7422
Conversation
|
docs/content/guides/7.multistore/3.patterns/5.subpath/1.subpath.md
Outdated
Show resolved
Hide resolved
…h.md Co-authored-by: Michael Kurowski <[email protected]>
docs/content/guides/7.multistore/3.patterns/5.subpath/1.subpath.md
Outdated
Show resolved
Hide resolved
docs/content/guides/7.multistore/3.patterns/5.subpath/1.subpath.md
Outdated
Show resolved
Hide resolved
docs/content/guides/7.multistore/3.patterns/5.subpath/1.subpath.md
Outdated
Show resolved
Hide resolved
| ├── [locale]/ # Language parameter | ||
| │ ├── [configId]/ # Store identifier parameter |
There was a problem hiding this comment.
Do we have anything against having the order reversed? If no, then please add an information that this can go both ways
There was a problem hiding this comment.
it didn't work in Next.js - at least without any other changes in the i18n config
There was a problem hiding this comment.
Ty, I've created a spike for the next sprint, unfortunatelly there's a business case for this
docs/content/guides/7.multistore/3.patterns/5.subpath/1.subpath.md
Outdated
Show resolved
Hide resolved
jagoral
force-pushed
the
docs/draft-multipath-routing
branch
from
d15af15 to
9700b6f
Compare
…storefront/vue-storefront into docs/draft-multipath-routing
jagoral
force-pushed
the
docs/draft-multipath-routing
branch
from
9700b6f to
cccfc68
Compare
…h.md Co-authored-by: Michael Kurowski <[email protected]>
docs/content/guides/7.multistore/3.patterns/5.subpath/1.subpath.md
Outdated
Show resolved
Hide resolved
docs/content/guides/7.multistore/3.patterns/5.subpath/1.subpath.md
Outdated
Show resolved
Hide resolved
…storefront/vue-storefront into docs/draft-multipath-routing
There was a problem hiding this comment.
I feel like ### How Config Switcher Works and ## Setting Up the Middleware section could be described in our guide on Config Switcher
|
|
||
| Create a Config Switcher extension for your integration: | ||
|
|
||
| ```ts |
There was a problem hiding this comment.
I think this would be the correct syntax for adding file path to a fenced code block
| ```ts | |
| ```ts{}[apps/storefront-middleware/integrations/<integration-name>/extensions/configSwitcher.ts] |
There was a problem hiding this comment.
I was using this syntax in the past, but other team members in multibrand team said that it's better to set the file path as a comment, because the UI element for the file path looks bad when the path is long. We didn't have capacity that time to improve this UI element, so I've decided to use the comment instead
|
|
||
| The first step is to configure your Middleware to support different configurations using the Config Switcher extension. | ||
|
|
||
| Create a Config Switcher extension for your integration: |
There was a problem hiding this comment.
our ::steps:: component would fit perfectly here
docs/content/guides/7.multistore/3.patterns/5.subpath/1.subpath.md
Outdated
Show resolved
Hide resolved
| #tab-1 | ||
| In your Next.js app, add custom CSS variables in your global styles: | ||
|
|
||
| ```scss |
There was a problem hiding this comment.
do you think it would make sense to turn this code example into a diff?
| After setting up the path routing structure, you must update all internal links in your application to include the appropriate configId parameter. This is crucial to maintain proper navigation within each store and prevent users from accidentally switching between stores when clicking links. | ||
| :: | ||
|
|
||
| Make sure that all your internal links and navigation components preserve the store context by including the current configId in the URLs. This applies to: |
There was a problem hiding this comment.
I would add one example showing how to update Next <Link /> and Nuxt <NuxtLink /> here to make it 100% clear what we mean
docs/content/guides/7.multistore/3.patterns/5.subpath/1.subpath.md
Outdated
Show resolved
Hide resolved
|
|
||
| const AnnouncementBarElectronics = resolveComponent('StoreElectronicsAnnouncementBar'); | ||
| const AnnouncementBarApparel = resolveComponent('StoreApparelAnnouncementBar'); | ||
| const AnnouncementBar = computed( |
There was a problem hiding this comment.
suggestion: create a wrapper component to render dynamic component rendering based on configId.
<StoreComponentRenderer
components= {
electronics: ElectronicsAnnouncementBar,
apparel: ApparelAnnouncementBar
}
/>It could also be used in this scenario:
{configId === 'electronics' && (
<ElectronicsPromo />
)}
like this:
<StoreComponentRenderer
components= {
electronics: ElectronicsPromo,
}
/>
…h.md Co-authored-by: Łukasz Śliwa <[email protected]>
…storefront/vue-storefront into docs/draft-multipath-routing
|
|
Thanks @michaelKurowski and @lsliwaradioluz for the feedback :) I'm leaving some comments open which are not essential from the perspective of the Spike - they should be resolved during the work on the final docs in AT-387 and AT-388 tasks. |
This docs draft was created based on the research done within two spikes
It shows how the user may customize the Storefront code using the sub-path routing. The final docs should be written within AT-387 and AT-388 tasks.
I've decided to merge the Next.js and Nuxt docs, because all the concepts are the same, the only difference is in the implementation. Also, the middleware docs seemed to be redundant right now, as we've decided to always place the config switcher code within the generated storefront, that's why I removed it.
A Storefront playground can be found here.