Demo Store Template

The demo store template is a reference implementation of an online store UI.

INFO

The Demo Store Template is a reference implementation. It is under constant development and is not subject to versioning. Please go to Limitations for more information.

Setup & run

Alternatively, set up the vue-demo-store template manually by running the following commands in a new directory:

npx tiged shopware/frontends/templates/vue-demo-store demo-store && cd demo-store
npm i && npm run dev

The vue-demo-store template is connected to a Shopware Cloud instance by default. However, you can change the configuration to use your own instance.

We recommend using devenv and Composable Frontends on your local machine. But if you want to use Docker and Composable Frontends, you should have a look at the docker-composable-frontends repository.

Directory structure

The directory structure is the same as in a default Nuxt project:

demo-store/
├─ components/
|  ├─ layout/       /* header, footer, account menu etc. */
|  ├─ checkout/     /* cart items, cart overview */
|  ├─ account/      /* order history, account settings */
|  ├─ shared/       /* modals, notifications */
|  ├─ ...
├─ layouts/
│  ├─ checkout.vue  /* minimal layout without navigation and footer */
│  ├─ default.vue   /* default layout with navigation and footer */
├─ pages/
│  ├─ checkout/     /* checkout pages */
│  ├─ account/      /* user account pages */
│  ├─ ...
├─ app.vue          /* app root component */
├─ nuxt.config.ts   /* app configuration */
├─ package.json
├─ tsconfig.json

The components directory contains components that have been extracted from their corresponding page components, so these become more readable. The components within components are organized based on the page and layout components they are used in. The shared directory contains generic components that are used across multiple pages and layouts.

Customizing the template

There is no concept of overwriting components in the demo store template. Instead, all components are modified directly. When you create a new project, we recommend adding your custom Git repository as a remote repository and keeping the original demo store template as a second repository so that you can always pull changes manually (see als Git Docu Working with Remotes).

Updates & Breaking Changes

The demo store template is a boilerplate, so it will constantly be updated, as we will continously add new features and make improvements. These updates include breaking changes. If you want to stay up to date with the latest changes, you need to keep your project in sync manually.

CMS Components

One exception to the rule are CMS components. CMS components are handled as a separate package cms-base in Shopware Frontends and can be updated automatically. However, you can still override the components from the package in your custom project.

Configure

The blank template is pre-configured to connect to a public Shopware backend, so you start building right away.

In order to connect it to your own store backend, you need to edit the nuxt.config.ts file and edit a configuration object with shopware as a key:

/* ... */
export default defineNuxtConfig({
  runtimeConfig: {
    // shopware: {
    /**
     * SSR Shopware Endpoint
     * More here: https://frontends.shopware.com/getting-started/templates/custom-vue-project.html#shopware-endpoint-on-the-ssr-mode
     */
    //   endpoint: ""
    // },
    public: {
      shopware: {
        endpoint: "https://your-business.shopware.store",
        accessToken: "access-token-from-settings",
      },
    },
  },
});

You can also use .env file to override this configuration. More about this you can find here

Limitations

The Demo Store Template suggests how to build a store UI with Shopware Frontends. It does not make any assumptions about custom implementations and hence does not contain every feature of Shopware.

Some important limitations are

• Frontend settings are not synchronized from the backend - such as
  • Available fields for checkout and registration
• Not all Plugins or Apps are API aware
• Not all Commercial features are supported, check the Commercial Integrations page

If you think a specific feature should be part of the demo store template, feel free to create an issue or make a contribution.