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

2023-10-20前端开发问题
2

本文介绍了商店用品 6 |克隆 CmsElement 并将 null 作为数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我尝试克隆内容元素 image-sliderimage-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.datanull 但应该存储所有图像.

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>

这篇关于商店用品 6 |克隆 CmsElement 并将 null 作为数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

js删除数组中指定元素的5种方法
在JavaScript中,我们有多种方法可以删除数组中的指定元素。以下给出了5种常见的方法并提供了相应的代码示例: 1.使用splice()方法: let array = [0, 1, 2, 3, 4, 5];let index = array.indexOf(2);if (index -1) { array.splice(index, 1);}// array = [0,...
2024-11-22 前端开发问题
182

JavaScript小数运算出现多位的解决办法
在开发JS过程中,会经常遇到两个小数相运算的情况,但是运算结果却与预期不同,调试一下发现计算结果竟然有那么长一串尾巴。如下图所示: 产生原因: JavaScript对小数运算会先转成二进制,运算完毕再转回十进制,过程中会有丢失,不过不是所有的小数间运算会...
2024-10-18 前端开发问题
301

JavaScript(js)文件字符串中丢失"\"斜线的解决方法
问题描述: 在javascript中引用js代码,然后导致反斜杠丢失,发现字符串中的所有\信息丢失。比如在js中引用input type=text onkeyup=value=value.replace(/[^\d]/g,) ,结果导致正则表达式中的\丢失。 问题原因: 该字符串含有\,javascript对字符串进行了转...
2024-10-17 前端开发问题
437

layui中table列表 增加属性 edit="date",不生效怎么办?
如果你想在 layui 的 table 列表中增加 edit=date 属性但不生效,可能是以下问题导致的: 1. 缺少日期组件的初始化 如果想在表格中使用日期组件,需要在页面中引入 layui 的日期组件,并初始化: script type="text/javascript" src="/layui/layui.js"/scrip...
2024-06-11 前端开发问题
455

Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript
Rails/Javascript: How to inject rails variables into (very) simple javascript(Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript)...
2024-04-20 前端开发问题
5

CoffeeScript 总是以匿名函数返回
CoffeeScript always returns in anonymous function(CoffeeScript 总是以匿名函数返回)...
2024-04-20 前端开发问题
13