Custom Elements (CMS)

WARNING

This tutorial is a continuation of example from the backend part. That can be found here

All custom CMS elements created in the backend require corresponding implementations in the frontend application.

The CMS package utilizes the resolveComponent method from Vue to identify the component returned by the backend API. Therefore, the only requirement is to globally register the component with the appropriate name.

Registration

Demo store

The demo store utilizes Nuxt 3, which by default registers all components globally. For optimal application structure, we recommend adding the components to the /components/cms directory.

Vue apps

Global registration in Vue apps

import CmsBlockCustomBlock from "./components/cms/CmsElementDailymotion.vue";

app.component("CmsElementDailymotion", CmsBlockCustomBlock);

Naming

The component is searched in the global component register by its name.

Resolving component in CMS package

const componentNameToResolve = pascalCase(`Cms-${type}-${componentName}`);
const resolvedComponent = resolveComponent(componentNameToResolve);

Component name must be the same as it was registered in the backed.

Shopware.Service('cmsService').registerCmsElement({
    ...
    name: 'dailymotion',
    ...
});

Lets create new component components/cms/element/CmsElementDailymotion.vue

// components/cms/element/CmsElementDailymotion.vue
<script setup lang="ts">
import type { Schemas } from "#showpare";

type CmsElementDailymotion = Schemas["CmsSlot"] & {
  type: "dailymotion" | typeof String;
  slot: typeof String;
  config: CmsElementDailymotionConfig;
  translated: {
    config: CmsElementDailymotionConfig;
  };
};

type CmsElementDailymotionConfig = {
  dailyUrl: {
    value: string;
    source: "static";
  };
};
const props = defineProps<{
  content: CmsElementDailymotion;
}>();
</script>

<template>
  <div>
    <h2>Element!</h2>
    <div class="sw-cms-el-dailymotion">
      <div class="sw-cms-el-dailymotion-iframe-wrapper">
        <iframe
          frameborder="0"
          type="text/html"
          width="100%"
          height="100%"
          :src="props.content.config.dailyUrl.value"
        >
        </iframe>
      </div>
    </div>
  </div>
</template>

Reading config

Component settings are passed via props. The declared defaultConfig can be accessed through the props.content.config property.

The following is an example of how to convert the backend registration config to a TypeScript type.

Shopware.Service('cmsService').registerCmsElement({
  ...
    name: 'dailymotion',
    defaultConfig: {
        dailyUrl: {
            source: 'static',
            value: ''
        }
    }
  ...
});

type CmsElementDailymotionConfig = {
  dailyUrl: {
    value: string;
    source: "static";
  };
};