This component was created to support the embedding of Brand Console's Layout within single-page applications (SPAs) outside the Brand Console monorepo.
It contains three other components linked together:
- Header
- Left Nav
- Footer
Installation
To use this project, you first need to load the script:
<script src="https://unpkg.com/@cartdotcom/layout@latest/bundle-production.js"></script>
Notes:
-
latest
can be replaced with any specific version available -
production
refers to the environment to get the layout from. Possible values:development
,stage
,production
Usage
Once the script is loaded, a new custom element <cart-layout />
will be available for use. Just add it to your application's index file.
<cart-layout
product="mcm"
logout-url="/logout"
routes-with-blank-layout="/create-password,/login"
></cart-layout>
Arguments
Argument | Description | Required? | Type | Default Value |
---|---|---|---|---|
logout-url | Use this if the consuming application needs to trigger a specific URL after the user logs out using the unified layout layout button. | No | string | |
product | The application that will consume the layout. | Yes | string (dfw, mcm, sf) | |
routes-with-blank-layout | A comma-separated list of paths within the application that require a blank layout to be rendered. | No | string | |
unauthenticated-routes | A comma-separated list of paths within the application that don't require authentication. | No | string | |
oauth-callback-routes | A comma-separated list of paths within the application that are OAuth callbacks for the Auth0 SDK to ignore. | No | string |
The rendering of the custom element will make a container with id cartdotcom-container
available within the document.
Then you can mount your application on this div#cartdotcom-container
.
For Developers (Multichannel Management)
In order to update the menu items, commit the necessary changes to a branch and create a PR.
Deployment
- Update the version in the
package.json
file to the latest version -
npm run layout:build:all
to compile the layout code for all 3 environments - Navigate to
/dist/libs/layout
-
npm publish
... or add--dry-run
to verify the contents