@cartdotcom/layout

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