vue.js - 从组件中检索 Shopware CMS 编辑器中的自定义实体数据

Question

在 Shopware vue 组件中，对于管理中的编辑/设计人员，我使用以下代码从自定义实体获取数据:

fetchTeam({ targetId }) {
  this.teamRepository.get(targetId).then((team) => {
    this.$set(this.element.data, 'team', team);
  });
},

这几乎有效。它向 API 发送 HTTP 请求并检索预期数据；问题是数据永远不会添加到 this.element.data 中；添加了 team 属性，但它始终填充 null 作为值。

我试图从 Shopware 自己的代码中寻找灵感，他们有与此非常相似的东西，但我不确定我是否在错误的上下文中使用了代码。

在开发者工具中，我可以看到执行了 XHR 请求，并且它返回了预期的数据，因此大概这只是一个小问题。

我想做的事情: 我的想法是这样的:

1. 我不想将所有数据保存在 CMS 元素配置中，而是希望在编辑页面时从后端获取数据。

2. 从编辑器保存带有自定义 CMS 元素的页面时，实体的 ID 应保存在元素配置中，该 ID 在其他地方使用(在编辑器和店面中) )从实体检索数据。

3. 最后，在店面中我还会重新获取数据。我还没有开始这段代码，但希望它是可能的。

Answer 1

你的想法是正确的。将实体的 ID 存储在元素配置中，然后创建 CMS Element Resolver使用该 ID 获取元素的数据。

class MyElementResolver extends AbstractCmsElementResolver
{
    public function getType(): string
    {
        return 'myElementType';
    }

    public function collect(CmsSlotEntity $slot, ResolverContext $resolverContext): ?CriteriaCollection
    {
        $teamConfig = $slot->getFieldConfig()->get('team');

        if (!$teamConfig) {
            return null;
        }

        $teamId = $teamConfig->getValue();
        $criteria = new Criteria([$teamId]);

        $criteriaCollection = new CriteriaCollection();
        $criteriaCollection->add('team_' . $slot->getUniqueIdentifier(), TeamDefinition::class, $criteria);

        return $criteriaCollection;
    }

    public function enrich(CmsSlotEntity $slot, ResolverContext $resolverContext, ElementDataCollection $result): void
    {
        $searchResult = $result->get('team_' . $slot->getUniqueIdentifier());
        if (!$searchResult) {
            return;
        }

        $teamConfig = $slot->getFieldConfig()->get('team');

        $team = $searchResult->get($teamConfig->getValue());
        if (!$team instanceof TeamEntity) {
            return;
        }

        $slot->setData($team);
    }
}