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
2 comments
We have created a ticket on your behalf and our team will soon revert to your queries over it.
Thanks.