Shopware 6：Vue.js 中 sw-snippet-field 和 sw-media-field 组件的 sw-inherit-wrapper

Question

我正在使用 Vue.js 在 Shopware 6 中编写自定义管理模块（插件配置）。

我遇到的问题是缺少 sw 继承包装器，当销售渠道发生变化时会显示出来。

我想要的是使用

config.xml

文件重现与此处完全相同的效果：

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/shopware/platform/trunk/src/Core/System/SystemConfig/Schema/config.xsd">
    <card>
        <title>Configuration</title>

        <component name="sw-snippet-field">
            <name>content</name>
            <snippet>pluginConfiguration.content</snippet>
        </component>

       <component name="sw-media-field">
            <name>logoId</name>
        </component>
    </card>
</config>

所以我开始使用 Vue.js 编写这段代码：

{% block custom_content %}
    <template #content>
        {% block custom_content_card %}
            <sw-card-view>
                {% block custom_card_channel_config %}
                    <sw-sales-channel-config v-model="config"
                                             ref="configComponent"
                                             domain="PluginExample.settings">

                        {% block custom_config_sales_channel %}
                            <template #select="{ onInput, selectedSalesChannelId }">

                                {% block custom_config_sales_channel_card %}
                                    <sw-card position-identifier="example-sales-channel-card"
                                             :title="$tc('global.entities.sales_channel', 2)">

                                        {% block custom_config_sales_channel_card_title %}
                                            <sw-single-select v-model="selectedSalesChannelId"
                                                              labelProperty="translated.name"
                                                              valueProperty="id"
                                                              :isLoading="isLoading"
                                                              :options="salesChannels"
                                                              @change="onInput">
                                            </sw-single-select>
                                        {% endblock %}
                                    </sw-card>
                                {% endblock %}

                            </template>
                        {% endblock %}

                        {% block custom_config_cards %}
                            <template #content="{ actualConfigData, allConfigs, selectedSalesChannelId }">
                                {% block custom_config_credentials_card %}
                                    <example-config-base
                                            :actualConfigData="actualConfigData"
                                            :allConfigs="allConfigs"
                                            :selectedSalesChannelId="selectedSalesChannelId">
                                    </example-config-base>
                                {% endblock %}
                            </template>
                        {% endblock %}
                    </sw-sales-channel-config>
                {% endblock %}
            </sw-card-view>
        {% endblock %}
    </template>
{% endblock %}

这是我的

example-config-base

组件：

{% block example_config %}
    <sw-card position-identifier="example"
             :title="$tc('snippet.key')">

        {% block example_config_card_container %}
            <sw-container>

                {% block example_config_card_container_settings %}
                    <div v-if="actualConfigData">
                        {% block example_config_card_container_settings_snippet %}
                            <sw-inherit-wrapper
                                    v-model="actualConfigData['PluginExample.settings.snippet']"
                                    :inheritedValue="selectedSalesChannelId == null ? null : allConfigs['null']['PluginExample.settings.snippet']"
                                    :customInheritationCheckFunction="checkTextFieldInheritance"
                            >
                                <template #content="props">
                                    <sw-snippet-field
                                            name="PluginExample.settings.snippet"
                                            fieldType="textarea"
                                            snippet="pluginConfiguration.example"
                                            :mapInheritance="props"
                                            :disabled="props.isInherited"
                                    >
                                    </sw-snippet-field>
                                </template>
                            </sw-inherit-wrapper>
                        {% endblock %}

                        {% block example_config_card_container_settings_logo %}
                            <sw-inherit-wrapper
                                    v-model="actualConfigData['PluginExample.settings.logoId']"
                                    :inheritedValue="selectedSalesChannelId === null ? null : allConfigs['null']['PluginExample.settings.logoId']"
                                    :customInheritationCheckFunction="checkTextFieldInheritance">
                                <template #content="props">
                                    <sw-media-field name="PluginExample.settings.logoId"
                                                    :mapInheritance="props"
                                                    :media-id="props.currentValue"
                                                    @media-id-change="props.updateCurrentValue"
                                                    :disabled="props.isInherited">
                                    </sw-media-field>
                                </template>
                            </sw-inherit-wrapper>
                        {% endblock %}
                    </div>
                {% endblock %}
            </sw-container>
        {% endblock %}
    </sw-card>
{% endblock %}

根据 Shopware 文档，

sw-snippet-field

不会在系统配置中存储值，但会更改代码片段键的翻译。这并没有改变它可以使用继承包装器的事实。如果我在 config.xml 文件中执行此操作，我不知道如何对其进行编程以获得相同的效果。

检查TextField继承：

checkTextFieldInheritance(value) {
            if (typeof value !== 'string') {
                return true;
            }

            return value.length <= 0;
        },

所以目前，唯一缺少的就是缺少紫色以及这个拔掉继承值并设置新值的开关。

这就是我想要达到的效果：

Answer 1

代码片段内容不与销售渠道绑定。它们绑定到代码片段集，并且使用哪个集由各自的语言环境决定。组件

sw-snippet-field

使用当前会话中设置的区域设置作为其内容的语言。这是当前登录的管理员用户在其个人资料中设置的语言。如果当前区域设置中没有片段内容，它将回退到系统默认语言。因此，即使您可以在插件的配置中使用该组件，也不会继承任何内容，因为内容是由区域设置决定的，并且在配置面板中更改销售渠道也不会更改该区域设置。

您可以扩展

sw-snippet-field

以接受属性的销售渠道 ID。通过销售渠道 ID，它可以通过销售渠道的默认语言解析区域设置。

const { Component } = Shopware;
const { Criteria } = Shopware.Data;

Component.extend('my-custom-snippet-field', 'sw-snippet-field', {
    props: {
        salesChannelId: {
            type: String,
            required: false,
        },
    },

    computed: {
        salesChannelRepository() {
            return this.repositoryFactory.create('sales_channel');
        },
    },

    methods: {
        async updatePlaceholderValueToSnippetTranslation() {
            const criteria = new Criteria();
            criteria.addAssociation('language.locale');

            const salesChannel = await this.salesChannelRepository.get(
                this.salesChannelId, 
                Shopware.Context.api, 
                criteria
            );

            if (salesChannel?.language?.locale?.code) {
                const translation = this.getTranslationByLocale(salesChannel.language.locale.code);
                if (translation) {
                    this.textValue = translation.value;
                    return;
                }
            }

            await this.$super('updatePlaceholderValueToSnippetTranslation');
        },
    },
});

然后，您必须提供选择销售渠道的方法，并且可以将所选销售渠道的 ID 作为属性传递给您的组件扩展。用法将如下所示：

<my-custom-snippet-field
    snippet="pluginConfiguration.example"
    field-type="textarea"
    :sales-channel-id="salesChannel.id"
/>