Menu Close
    Searching for an experienced eCommerce & Marketplace Development Company ?

    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

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top