Using uStore as a web component - XMPieLab/uStore-NG GitHub Wiki

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 src="<url to ustore>/ustorethemes/<theme name>/static/js/x-store.js"></script>
  </head>
    <body>
        <x-store 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://<ustore url>/uStoreRestAPI/#/SingleSignon/SingleSignon. The result of the call will be a URL that you can use in the x-store component. When you supply the url attribute to the x-store component, it will load the uStore instance and display the store in your application.

Developing a custom theme that supports web components

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:

  1. 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.
  2. The theme must be able to load the uStore Connect or uStore Connect Enterprise scripts and styles.
  3. 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.

Running development

To run the development server, use the following command:

npm start -- server=<url to ustore> wc=1

Once 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

Building the theme has not changed. Use the following command to build the theme:

npm run publish -- name=<name> displayName=<display name>
⚠️ **GitHub.com Fallback** ⚠️