商店用品 6 |克隆 CmsElement 并将 null 作为数据

2022-01-22 00:00:00 javascript symfony vue.js twig shopware

我尝试克隆内容元素 image-slider 或 image-gallery(两者都会出现错误)以扩展它们.首先，我注册一个新的 CmsElement，就像原来的 only 将名称从 image-slider 更改为 image-slider-example

I try to clone the content element image-slider or image-gallery (the error will come at both) to extend them. First I register a new CmsElement like the original only changes the name from image-slider to image-slider-example

import './component';
import './config';
import './preview';

Shopware.Service('cmsService').registerCmsElement({
    name: 'image-slider-example',
    label: 'sw-cms.elements.imageSlider.label',
    component: 'sw-cms-el-image-slider',
    configComponent: 'sw-cms-el-config-image-slider',
    previewComponent: 'sw-cms-el-preview-image-slider',
    defaultConfig: {
        sliderItems: {
            source: 'static',
            value: [],
            required: true,
            entity: {
                name: 'media'
            }
        },
        displayMode: {
            source: 'static',
            value: 'standard'
        },
        minHeight: {
            source: 'static',
            value: '300px'
        },
        verticalAlign: {
            source: 'static',
            value: null
        }
    },
    enrich: function enrich(elem, data) {
        if (Object.keys(data).length < 1) {
            return;
        }

        Object.keys(elem.config).forEach((configKey) => {
            const entity = elem.config[configKey].entity;

            if (!entity) {
                return;
            }

            const entityKey = entity.name;
            if (!data[`entity-${entityKey}`]) {
                return;
            }

            elem.data[configKey] = [];
            elem.config[configKey].value.forEach((sliderItem) => {
                elem.data[configKey].push({
                    newTab: sliderItem.newTab,
                    url: sliderItem.url,
                    media: data[`entity-${entityKey}`].get(sliderItem.mediaId)
                });
            });
        });
    }
});

现在它向我展示了购物体验中的新元素，我可以在其中使用它.

Now It shows me the new element in the Shopping Experience, where I can use it.

之后，我为店面创建 cms-element-image-slider-example.html.twig 文件，该文件将由 Shopware 加载.

After that I create for the storefront the cms-element-image-slider-example.html.twig file, which will be loaded by Shopware.

{% sw_extends '@Storefront/storefront/element/cms-element-image-slider.html.twig' %}

{% block element_image_slider_alignment %}
    <pre>
        {{ dump(element) }}
    </pre>
    {{ parent() }}
{% endblock %}

现在我扩展了我从中克隆的原始店面元素，并添加了一个 dump 以查看所有数据.但是我有一个问题， element.data 是 null 但应该存储所有图像.

Now I extend the original storefront element from which I was cloning and add a dump to see all data. But there I have the issue, that the element.data are null but there should be all images stored.

推荐答案

你需要创建一个数据解析器，它应该如下所示:

You need to create a data resolver which should look like:

<?php declare(strict_types=1);

namespace PluginNameCoreContentMediaCms;

use ShopwareCoreContentCmsAggregateCmsSlotCmsSlotEntity;
use ShopwareCoreContentCmsDataResolverCriteriaCollection;
use ShopwareCoreContentCmsDataResolverElementAbstractCmsElementResolver;
use ShopwareCoreContentCmsDataResolverElementElementDataCollection;
use ShopwareCoreContentCmsDataResolverFieldConfig;
use ShopwareCoreContentCmsDataResolverResolverContextEntityResolverContext;
use ShopwareCoreContentCmsDataResolverResolverContextResolverContext;
use ShopwareCoreContentCmsSalesChannelStructImageStruct;
use ShopwareCoreContentMediaMediaDefinition;
use ShopwareCoreContentMediaMediaEntity;
use ShopwareCoreFrameworkDataAbstractionLayerSearchCriteria;

class ImageCmsElementResolver extends AbstractCmsElementResolver
{
    public function getType(): string
    {
        return 'image';
    }

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

        if (!$mediaConfig || $mediaConfig->isMapped() || $mediaConfig->getValue() === null) {
            return null;
        }

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

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

        return $criteriaCollection;
    }

    public function enrich(CmsSlotEntity $slot, ResolverContext $resolverContext, ElementDataCollection $result): void
    {
        $config = $slot->getFieldConfig();
        $image = new ImageStruct();
        $slot->setData($image);

        if ($urlConfig = $config->get('url')) {
            if ($urlConfig->isStatic()) {
                $image->setUrl($urlConfig->getValue());
            }

            if ($urlConfig->isMapped() && $resolverContext instanceof EntityResolverContext) {
                $url = $this->resolveEntityValue($resolverContext->getEntity(), $urlConfig->getValue());
                if ($url) {
                    $image->setUrl($url);
                }
            }

            if ($newTabConfig = $config->get('newTab')) {
                $image->setNewTab($newTabConfig->getValue());
            }
        }

        $mediaConfig = $config->get('media');
        if ($mediaConfig && $mediaConfig->getValue()) {
            $this->addMediaEntity($slot, $image, $result, $mediaConfig, $resolverContext);
        }
    }

    private function addMediaEntity(CmsSlotEntity $slot, ImageStruct $image, ElementDataCollection $result, FieldConfig $config, ResolverContext $resolverContext): void
    {
        if ($config->isMapped() && $resolverContext instanceof EntityResolverContext) {
            /** @var MediaEntity|null $media */
            $media = $this->resolveEntityValue($resolverContext->getEntity(), $config->getValue());

            if ($media !== null) {
                $image->setMediaId($media->getUniqueIdentifier());
                $image->setMedia($media);
            }
        }

        if ($config->isStatic()) {
            $image->setMediaId($config->getValue());

            $searchResult = $result->get('media_' . $slot->getUniqueIdentifier());
            if (!$searchResult) {
                return;
            }

            /** @var MediaEntity|null $media */
            $media = $searchResult->get($config->getValue());
            if (!$media) {
                return;
            }

            $image->setMedia($media);
        }
    }
}

如果您创建解析器，则需要在 src/Resources/config/services.xml

If you create your Resolver, you need to register the resolver in your src/Resources/config/services.xml


<?xml version="1.0" ?>

<container xmlns="http://symfony.com/schema/dic/services"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">

    <services>
        <service id="PluginNameCoreContentMediaCmsImageCmsElementResolver">
            <tag name="shopware.cms.data_resolver"/>
        </service>
    </services>
</container>

相关文章