Shopware 6 Administration: how to override block inside sw-product-variant-modal

Question

I try to override the sw_product_variant_modal_body_grid

// index.js

import template from './sw-product-variant-modal.html.twig';

const { Component } = Shopware;

Component.override('sw-product-variant-modal', {
    template,

    computed: {
        gridColumns() {
            const opexColumn = {
                property: 'test',
                dataIndex: 'test',
                label: 'test',
                routerLink: 'sw.product.detail',
                inlineEdit: 'string',
                allowResize: true,
            };
            const columns = this.$super('gridColumns');
            columns.splice(5, 0, opexColumn);


            return columns;
        }
    },

    methods: {
        fetchProductVariants() {
            this.productVariantCriteria
                .addAssociation('myExtension');

            this.$super('fetchProductVariants');
        }
    }
})

// sw-product-variant-modal.html.twig

{% block sw_product_variant_modal_body_grid %}
    {% parent %}
    {% block product_variant_modal_body_column_test %}
        <template #column-label-opex>
            {{ $t('test') }}
            <sw-help-text
                style="margin-left: 5px"
                :text="$t('tplProductList.test.helpText')"></sw-help-text>
        </template>
    {% endblock %}
{% endblock %}

With the configuration above, vue thrown a warning/error:

vue.esm.js:628 [Vue warn]: Error compiling template:

<template v-slot> can only appear at the root level inside the receiving component

446|              </template>
447|                      </sw-data-grid>
448|                      <template #column-label-test>
...

A similar overridden configuration of the sw-product-list component works as expected.

• Why does the configuration fail here?
• How to solve it?

Answer 1

The slot is placed outside of the sw-data-grid component, but it needs to be inside of it.

So, you need to use a block that's inside of the sw-data-grid component instead, for example sw_product_variant_modal_body_grid_column_media:

// sw-product-variant-modal.html.twig

{% block sw_product_variant_modal_body_grid_column_media %}
    {% parent %}
    {% block product_variant_modal_body_column_test %}
        <template #column-label-opex>
            {{ $t('test') }}
            <sw-help-text
                style="margin-left: 5px"
                :text="$t('tplProductList.test.helpText')"></sw-help-text>
        </template>
    {% endblock %}
{% endblock %}