-
Notifications
You must be signed in to change notification settings - Fork 3
Using uStore as a web component
As of version 25.2, uStore can be used as a web component in external applications when using uStore Connect or uStore Connect Enterprise.
To use uStore as a web component, include the following script in your HTML:
<html>
<head>
<script>window.uStoreConfig = {
assetPrefix: '/ustorethemes/<theme name>',
uStoreRemoteServerUrl: '<url to ustore>',
}
window.uStoreDucs = []</script>
<script crossorigin=""
src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script crossorigin=""
src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script crossorigin="" src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
<script defer src="<url to ustore>/ustorethemes/<theme name>/static/js/x-store.js"></script>
</head>
<body>
<x-ustore url="<url you got from the uStore Connect Rest API>"></x-store>
</body>
</html>
Replace <theme name> with the name of the theme you are using, and <url to ustore> with the URL of your uStore instance.
See the uStore Connect documentation at https:///uStoreRestAPI/#/SingleSignon/SingleSignon.
The result of the call will be a URL that you can use in the x-ustore component.
When you supply the url attribute to the x-ustore component, it will load the uStore instance and display the store in your application.
The uStore AquaBlue theme has been modified to support it being used as a web component. If you are developing a custom theme, you can use the AquaBlue theme as a reference. You will need to make sure that the following requirements are met:
- The theme must be able to run in a web component context, which means it should not rely on global variables or styles that are not scoped to the component.
- The theme must be able to load the uStore Connect or uStore Connect Enterprise scripts and styles.
- If you are using npm packages, make sure they are compatible with web components and do not rely on global variables or styles that are not scoped to the component.
To run the development server, use the following command:
npm start -- server=<url to ustore> wc=1Once the development server is running, you can access the uStore instance in your browser at http://localhost:3000.
You will get to a configuration page where you can enter the URL of your uStore instance, and a JSON with a list of payloads that will be used for the Rest API calls.
Click "Save", and then use the "Connect to" menu to select the product or store you wish to connect to.
Building the theme has not changed. Use the following command to build the theme:
npm run publish -- name=<name> displayName=<display name>uStore NG Themes
uStore NG Extensibility
Theme customization overview
Editing CSS variables
Editing the CSS
Migration from Legacy to NG
Theme development overview
Getting started
Theme file structure
Publishing the theme
Upgrading a Custom Theme
Editing HTML content
Adding a new page
Adding assets
Adding a component
Customizing a skin
Modifying CSS variables
Editing fonts
Adding JavaScript
uStore library
Working with REST API
Accessing uStore data
Managing custom state
Working with localizations
General services
Adding an external package
Customizing the Theme Editor
Theme tips and tricks
uStoreProvider Reference
Tax Webhook
Order Approval Webhook
Manufacturer Webhook
Widgets
Cart Export Webhook
Input Control Development Guide
Using uStore as a web component