Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

docs: draft sub-path routing docs #7422

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

Draft
jagoral wants to merge 14 commits into docs/multibrand2
base: docs/multibrand2
Choose a base branch
Loading
from docs/draft-multipath-routing

Conversation

@jagoral
Copy link
Contributor

@jagoral jagoral commented Apr 7, 2025 •
edited
Loading

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.

Copy link

changeset-bot bot commented Apr 7, 2025 •
edited
Loading

⚠️ No Changeset found

Latest commit: 07d9013

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@jagoral jagoral marked this pull request as draft April 7, 2025 09:01 
...h.md
Co-authored-by: Michael Kurowski <2772942+michaelKurowski@users.noreply.github.com>
Comment on lines +286 to +287
├── [locale]/ # Language parameter
│ ├── [configId]/ # Store identifier parameter
Copy link
Contributor

@michaelKurowski michaelKurowski Apr 7, 2025

Choose a reason for hiding this comment

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

Do we have anything against having the order reversed? If no, then please add an information that this can go both ways

Copy link
Contributor Author

@jagoral jagoral Apr 7, 2025

Choose a reason for hiding this comment

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

it didn't work in Next.js - at least without any other changes in the i18n config

Copy link
Contributor

@michaelKurowski michaelKurowski Apr 7, 2025

Choose a reason for hiding this comment

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

Ty, I've created a spike for the next sprint, unfortunatelly there's a business case for this

jagoral reacted with thumbs up emoji lsliwaradioluz reacted with confused emoji
@jagoral jagoral force-pushed the docs/draft-multipath-routing branch from d15af15 to 9700b6f Compare April 7, 2025 09:44
@jagoral jagoral force-pushed the docs/draft-multipath-routing branch from 9700b6f to cccfc68 Compare April 7, 2025 09:44 
...h.md
Co-authored-by: Michael Kurowski <2772942+michaelKurowski@users.noreply.github.com>
Copy link
Contributor

@michaelKurowski michaelKurowski left a comment

Choose a reason for hiding this comment

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

thx :)

Copy link
Collaborator

@lsliwaradioluz lsliwaradioluz Apr 7, 2025

Choose a reason for hiding this comment

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

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
Copy link
Collaborator

@lsliwaradioluz lsliwaradioluz Apr 7, 2025

Choose a reason for hiding this comment

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

I think this would be the correct syntax for adding file path to a fenced code block

Suggested change
```ts
```ts{}[apps/storefront-middleware/integrations/<integration-name>/extensions/configSwitcher.ts]

Copy link
Contributor Author

@jagoral jagoral Apr 8, 2025

Choose a reason for hiding this comment

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

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:
Copy link
Collaborator

@lsliwaradioluz lsliwaradioluz Apr 7, 2025

Choose a reason for hiding this comment

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

our ::steps:: component would fit perfectly here

#tab-1
In your Next.js app, add custom CSS variables in your global styles:

```scss
Copy link
Collaborator

@lsliwaradioluz lsliwaradioluz Apr 7, 2025

Choose a reason for hiding this comment

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

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:
Copy link
Collaborator

@lsliwaradioluz lsliwaradioluz Apr 7, 2025

Choose a reason for hiding this comment

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

I would add one example showing how to update Next <Link /> and Nuxt <NuxtLink /> here to make it 100% clear what we mean


const AnnouncementBarElectronics = resolveComponent('StoreElectronicsAnnouncementBar');
const AnnouncementBarApparel = resolveComponent('StoreApparelAnnouncementBar');
const AnnouncementBar = computed(
Copy link
Collaborator

@lsliwaradioluz lsliwaradioluz Apr 7, 2025

Choose a reason for hiding this comment

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

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,
 }
/>

Copy link

sonarqubecloud bot commented Apr 8, 2025

Copy link
Contributor Author

jagoral commented Apr 8, 2025 •
edited by atlassian bot
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@lsliwaradioluz lsliwaradioluz lsliwaradioluz left review comments

@michaelKurowski michaelKurowski michaelKurowski approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

AltStyle によって変換されたページ (->オリジナル) /