[Vuejs]-Shopware 6: sw-inherit-wrapper for sw-snippet-field and sw-media-field component in Vue.js

by

1👍

✅

Contents of snippet aren’t bound to sales channels. They’re bound to snippet sets and which set to be used it determined by the respective locale. The component sw-snippet-field uses the locale set in the current session for the language of its content. That’s the language the currently logged-in admin user has set in their profile. If there is not content for a snippet with the current locale, it falls back to the systems default language. So even while you may be able to use that component in the configuration of your plugin, there’ll be nothing to inherit, as the content is determined by the locale and also changing the sales channel in the configuration panel will not change that locale.

You could extend sw-snippet-field to accept a sales channel id by a property. By the sales channel id it could then resolve the locale by the default language of the sales channel.

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');
        },
    },

    watch: {
        salesChannelId() {
            this.isLoading = true;
            
            this.updatePlaceholderValueToSnippetTranslation().then(() => {
                this.isLoading = false;
            });
        },
    },

    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');
        },
    },
});

You’d then have to provide the means to select a sales channel and could pass the id of the selected sales channel as a property to your component extension. Usage would then look like this:

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

Leave a comment