Extending administration components not working

[jeroenbalk-adwise]

Hello,

I tried to extend a component in the administration, like explained on this page: https://docs.shopware.com/en/shopware-platform-dev-en/developer-guide/administration/inheritance

I want to add an extra menu option in the sidebar list on the Content -> Shopping Experiences page. So I created a plugin with the cli. In /src/Resources/app/administration/src/main I created the following code:

Component.extend('sw-cms-list-custom', 'sw-cms-list', {
    computed: {
        sortPageTypes() {
            return [
                { value: '', name: this.$tc('sw-cms.sorting.labelSortByAllPages'), active: true },
                { value: 'page', name: this.$tc('sw-cms.sorting.labelSortByShopPages') },
                { value: 'landingpage', name: this.$tc('sw-cms.sorting.labelSortByLandingPages') },
                { value: 'product_list', name: this.$tc('sw-cms.sorting.labelSortByCategoryPages') },
                { value: 'custom_form', name: 'Custom form' }
            ];
        }
    }
});

When I changed the original sw-cms-list the new item pops up.

I rebuild the administration and cleared the cache. But the extend is not overriding the original sortPageTypes(). The main.js file is loaded though, because putting an console.log shows up.

Is the documentation not right?

[almare]

Do you want to override or extend? Like the name said extend and override. It's not the same. Try to override and make a const sortPageTypes = this.$super('sortPageTypes'). call in your function and add your sort type then.

[jeroenbalk-adwise]

@almare I want to override just the computed method. Like in this example: https://docs.shopware.com/en/shopware-platform-dev-en/developer-guide/administration/inheritance#extending-methods-and-computed-properties

It says I need to extend, not override. I also want to leave the other methods untouched.

[almare]

Than you have implement your new component on your own in a template. This means you have to add somewhere <sw-cms-list-custom><sw-cms-list-custom> Until you don't add your new component nothing will happen, because yo created a new component! But this new component is not used anywhere, right? With extend you create new components you have implement yourself in a template. With override you extend an already existing component with new functionality.

It says I need to extend, not override. I also want to leave the other methods untouched.

If you don't want to change the other methods don't touch them :)

Sometimes you need to change the logic of a method or a computed property while you are extending/overriding a component.

Like they said extend or overwrite (New own component or overwrite "extend" existing one)

[jeroenbalk-adwise]

Okay, so if I want to add one menu-option to the existing administration component I need to override instead of extend, in which I only re-define the methods I want to change? Like this:

Component.override('sw-cms-list', {
    computed: {
        sortPageTypes() {
            return [
                { value: '', name: this.$tc('sw-cms.sorting.labelSortByAllPages'), active: true },
                { value: 'page', name: this.$tc('sw-cms.sorting.labelSortByShopPages') },
                { value: 'landingpage', name: this.$tc('sw-cms.sorting.labelSortByLandingPages') },
                { value: 'product_list', name: this.$tc('sw-cms.sorting.labelSortByCategoryPages') },
                { value: 'custom_form', name: 'Custom form' }
            ];
        }
    }
});

Like this? Or did I miss something?

[almare]

Try this one

Component.override('sw-cms-list', {
    computed: {
        sortPageTypes() {
           // We don't want to type to much so we get the already defined sort types
            const types = this.$super('sortPageTypes');
           // Now we have the default types, let's add our stuff
            types.push( { value: 'custom_form', name: 'Custom form' });
            // Everything is nice we retrun the expected sortTypes array
            return types;
        }
    }
});
`
Something like this

[jeroenbalk-adwise]

Thanks! I'll try soon and let you know! :)

This in my administration main.js file of my custom plugin will be enough? :)

[almare]

nope... :-) add this file to your main.js. Otherwise the system doesn't know that the file exists. Bu I guess that's close

[jeroenbalk-adwise]

Yeah, added this code to this file: development/custom/plugins/CustomForms/src/Resources/app/administration/src/main.js

build administration, cleared cache, refreshed browser with clearing browsercache and it works! :) Thanks so much.

[shyim]

We had issues with multiple overriding. This is fixed in newest Version