Implementing a custom component into the default Config form

Introduction

In this post, we will discuss how to implement a custom component in the default plugin config.xml file. It is a very interesting topic when we want to add some custom components in config.xml file.

Overview

We can achieve this by creating a new component in the administration/src folder, so let’s start to implement a custom component in the default plugin config.xml

Adding a custom component in default config.xml

We add our own component in config.xml file which will be created.

add plugin configuration. docs

<?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/master/src/Core/System/SystemConfig/Schema/config.xsd">

    <card>
        <title>Plugin Configuration</title>
        <input-field>
            <name>username</name>
            <label>Username</label>
        </input-field>
        <input-field type="password">
            <name>password</name>
            <label>Password</label>
        </input-field>
        <component name="wk-api-test-button">
            <name>apiTest</name>
            <label>API Validation</label>
        </component>
    </card>
</config>

In the above code, we have added a component with the name “wk-api-test-button”, now we are going to create “wk-api-test-button” componet.

Adding custom component for config

Now we add our own component, so we create component/wk-api-test-button in administration/src folder and also create js and HTML files. first of all, we created an HTML file please have a look below in the code section.

<div>
    <sw-button-process
        :isLoading="isLoading"
        :processSuccess="isSaveSuccessful"
        @process-finish="saveFinish"
        @click="check"
    >{{ $tc('wk-api-test-button.button') }}</sw-button-process>
</div>

In the above code, we add a button for API test which is used in system config.

Now create an index.js file.

const { Component, Mixin } = Shopware;
import template from './wk-api-test-button.html.twig';

Component.register('wk-api-test-button', {
    template,

    props: ['label'],
    inject: ['wkApiTest'],

    mixins: [
        Mixin.getByName('notification')
    ],

    data() {
        return {
            isLoading: false,
            isSaveSuccessful: false,
        };
    },

    computed: {
        pluginConfig() {
            let $parent = this.$parent;

            while ($parent.actualConfigData === undefined) {
                $parent = $parent.$parent;
            }

            return $parent.actualConfigData.null;
        }
    },

    methods: {
        saveFinish() {
            this.isSaveSuccessful = false;
        },

        check() {
            this.isLoading = true;
            this.wkApiTest.check(this.pluginConfig).then((res) => {
                if (res.success) {
                    this.isSaveSuccessful = true;
                    this.createNotificationSuccess({
                        title: this.$tc('wk-api-test-button.title'),
                        message: this.$tc('wk-api-test-button.success')
                    });
                } else {
                    this.createNotificationError({
                        title: this.$tc('wk-api-test-button.title'),
                        message: this.$tc('wk-api-test-button.error')
                    });
                }

                this.isLoading = false;
            });
        }
    }
})

In the above code, we created a check method for the test API button and call the wkApiTest service. In API service we can create the HTTP request for our logic and return the response.

Thanks for reading, so I hope it will help you. Happy coding 🙂

Multi-Seller Marketplace Plugin