Shopware 6 自定义元素类型图像未在店面显示任何数据答案

【问题标题】：Shopware 6 custom element type image not showing any data on storefrontShopware 6 自定义元素类型图像未在店面显示任何数据
【发布时间】：2023-01-20 19:32:08
【问题描述】：

我已经创建了我的组件以在 Shopware 6 中添加一些所需的配置字段。一切正常，但图像的一个问题是它正在管理中保存，但没有显示任何 src 或转储中的其他内容。

这是我的转储预览，#data 为空。

谁能告诉我在这里还应该做什么？我将非常感激。

【问题讨论】：

您是如何创建自定义组件的？它是在扩展现有的课程吗？如果我查看标准图像元素，数据中应该有一个 ImageStruct。这是由 \Shopware\Core\Content\Media\Cms\ImageCmsElementResolver 创建的，您的自定义元素似乎并非如此。
是的，可能是我忽略了这一点。非常感谢你，我会看看它，这给了我一个想法。
请尽可能发布解决方案
嗨@Alex 感谢您对这篇文章的关注。我还没有找到解决方案，尽管我现在没有在处理它。
好的，祝你好运。如果您需要更多帮助，请随时更新帖子，或者在成功后发布答案。

标签： shopware6

【解决方案1】：

有一个 guide in the docs 可以准确解释您的情况。

您可以扩展 ShopwareCoreContentMediaCmsImageCmsElementResolver 并覆盖 getType 函数：

public function getType(): string
{
    return 'my-component-name';
}

默认ImageCmsElementResolver 的重要部分是加载媒体信息。为此，您还需要在 CMS 元素解析器中。我解释了现有 ImageCmsElementResolver 的某些部分，以便您了解需要哪些步骤：

public function collect(CmsSlotEntity $slot, ResolverContext $resolverContext): ?CriteriaCollection
{
    // read the configuration, that is defined in the Admin JS. Likely also media for you
    $mediaConfig = $slot->getFieldConfig()->get('media');

    // if this config is NOT containing useful info
    if (
        $mediaConfig === null
        || $mediaConfig->isMapped()
        || $mediaConfig->isDefault()
        || $mediaConfig->getValue() === null
    ) {
        // return nothing
        return null;
    }

    // otherwise use the configured value as mediaId to load the media entry from the database
    $criteria = new Criteria([$mediaConfig->getStringValue()]);

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

    // return the criterias to execute later, when all needed entities for the CMS page are fetched
    return $criteriaCollection;
}

现在数据已获取，下一步您需要将其放入可从 Twig 模板访问的变量中。为此，您将以下内容写入同一个 CMS 元素解析器：

public function enrich(CmsSlotEntity $slot, ResolverContext $resolverContext, ElementDataCollection $result): void
{
    $config = $slot->getFieldConfig();
    $image = new ImageStruct();
    // this is important for accessing data in Twig
    $slot->setData($image);

    // read the config again
    $mediaConfig = $config->get('media');
    // if the configuration looks promising
    if ($mediaConfig && $config->isStatic() && $mediaConfig->getValue()) {
        $image->setMediaId($config->getStringValue());

        // look up the media from the entity loading step
        $searchResult = $result->get('media_' . $slot->getUniqueIdentifier());

        if (!$searchResult) {
            return;
        }

        /** @var MediaEntity|null $media */
        $media = $searchResult->get($config->getValue());

        // if we do not have a media, then skip it
        if (!$media) {
            return;
        }
        // set the media entity to the slot data we just assigned to the slot
        $image->setMedia($media);
    }
}

之后，您应该在 Twig 的插槽变量中获得更多信息以嵌入媒体。

【讨论】：