获得简单的 Admin Sdk 示例（例如添加自定义 CMS 元素或菜单项）

Question

试图像在 docu 中那样做，但还没有奏效。

没有错误消息 - 什么也没有发生。

我认为我们目前缺少一些重要的理解联系。

（如果可能的话，更喜欢德语答案）

FEATURE_NEXT_17950=1

添加到 manifest.xml

<admin>
        <base-app-url>
            https://url_to_index_file/
        </base-app-url>
</admin>

索引.html：

<!doctype html>
<html>
    <head>
        <script src="https://unpkg.com/@shopware-ag/admin-extension-sdk/cdn"></script>
        <script src="https://cdn.jsdelivr.net/npm/regenerator-runtime"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

        <script src="/module/main.js"></script>
    </head>
    <script>

    </script>
</html>

（参见https://shopware.github.io/admin-extension-sdk/docs/guide/api-reference/ui/menuItem ）main.js - menuItem：

if (sw.location.isIframe()) {
 if (sw.location.is(sw.location.MAIN_HIDDEN)) {
        console.log('here') // is thrown successfully!
        // Add the menu item to the catalogue module
        sw.ui.menu.addMenuItem({
            label: 'Test item',
            displaySearchBar: true,
            locationId: 'your-location-id',
            parent: 'sw-catalogue'
        });
  }

    // Render your custom view
    if (sw.location.is('your-location-id')) {
        console.log('here2') // not triggered, cause no menuitem to go to inserted
        document.body.innerHTML = '<h1 style="text-align: center">Hello from your menu item</h1>';
    }
}

main.js - 自定义 cms 元素：

//import 'regenerator-runtime/runtime'; doesnt work

if (sw.location.isIframe()) {
    if (sw.location.is(sw.location.MAIN_HIDDEN)) {
        // Execute the base commands
        import('./base/mainCommands.js');
    } else {
        // Render different views
        console.log('else') // never get triggered
        import('./viewRenderer.js');
    }
}

/基地/mainCommands.js：

const CMS_ELEMENT_NAME = 'test';
const CONSTANTS = {
    CMS_ELEMENT_NAME,
    PUBLISHING_KEY: `${CMS_ELEMENT_NAME}__config-element`,
};

function test() {
    console.log('done 0') // triggered successful
    sw.cms.registerCmsElement({
        name: CONSTANTS.CMS_ELEMENT_NAME,
        label: 'Test video',
        defaultConfig: {
            dailyUrl: {
                source: 'static',
                value: '',
            },
        },
    });
    console.log('done 1') // triggered successful
}

try {
    test();
} catch (e) {
    console.log(e)
}

console.log('done 3') // triggered successful

export default CONSTANTS;

viewRenderer.js：

// import Vue from 'vue'; doesnt work

// watch for height changes
sw.location.startAutoResizer();

// start app views
const app = new Vue({
    // el: '#app', // no access yet
    data() {
        return { sw.location };
    },
    components: {
        'TestElement':
            () => import('./views/elements/test/test-element.js'),
        'TestConfig':
            () => import('./views/elements/test/test-config.js'),
        'TestPreview':
            () => import('./views/elements/test/test-preview.js'),

    },
    template: `
        <TestElement
            v-if="sw.location.is('test-element')"
        ></TestElement>
        <TestConfig
            v-else-if="sw.location.is('test-config')"
        ></TestConfig>
        <TestPreview
            v-else-if="sw.location.is('test-preview')"
        ></TestPreview>
    `,
});

/views/elements/test/test-config.js

// import Vue from 'vue'; // doesnt work
import CONSTANTS from "../../../base/mainCommands";

export default Vue.extend({
    template: `
        <div>
          <h2>
            Config!
          </h2>
          Video-Code: <input v-model="dailyUrl" type="text"/><br/>
        </div>
    `,

    data(): Object {
        return {
            element: null
        }
    },

    computed: {
        dailyUrl: {
            get(): string {
                return this.element?.config?.dailyUrl?.value || '';
            },

            set(value: string): void {
                this.element.config.dailyUrl.value = value;

                sw.data.update({
                    id: CONSTANTS.PUBLISHING_KEY,
                    data: this.element,
                });
            }
        }
    },

    created() {
        this.createdComponent();
    },

    methods: {
        async createdComponent() {
            this.element = await data.get({ id: CONSTANTS.PUBLISHING_KEY });
        }
    }
});

/views/elements/test/test-element.js

// import Vue from 'vue'; // doesnt work
import CONSTANTS from "../../../base/mainCommands";

export default Vue.extend({
    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="dailyUrl">
                    </iframe>
                    -->
                </div>
            </div>
        </div>
    `,

    data(): { element: object|null } {
        return {
            element: null
        }
    },

    computed: {
        dailyUrl(): string {
            return `https://www.dailymotion.com/embed/video/${this.element?.config?.dailyUrl?.value || ''}`;
        }
    },

    created() {
        this.createdComponent();
    },

    methods: {
        async createdComponent() {
            this.element = await sw.data.get({ id: CONSTANTS.PUBLISHING_KEY });
            sw.data.subscribe(CONSTANTS.PUBLISHING_KEY, this.elementSubscriber);
        },

        elementSubscriber(response: { data: unknown, id: string }): void {
            this.element = response.data;
        }
    }
});

/views/elements/test/test-preview.js

// import Vue from 'vue'; // doesnt work

export default Vue.extend({
    template: `
        <h2>
          Preview!
        </h2>
    `,
});

Answer 1

您尝试遵循的指南最初是在TypeScript中编写的，并假定您在部署之前使用 Node 等编译代码。 TypeScript 不能被浏览器原生执行。 如果您不想编译它，则必须将其重写为普通 JavaScript。 此外，如果您从 CDN 加载 Vue，则不必导入它。 但是，我建议设置一个开发环境，以便您可以编译代码。

获得简单的 Admin Sdk 示例（例如添加自定义 CMS 元素或菜单项）

问题描述

1 个解决方案

解决方案1
1 2023-01-19 15:39:37

获得简单的 Admin Sdk 示例（例如添加自定义 CMS 元素或菜单项）

问题描述

1 个解决方案

解决方案1 1 2023-01-19 15:39:37

解决方案1
1 2023-01-19 15:39:37