Add custom input field to existing component
If you were wondering how to add a new input field to an existing module in the Administration via plugin, then you've found the right guide to cover that subject. In the following examples, you'll add a new input field to the product's detail page, to display and configure some other product data not being handled by default.
This guide does not explain how you can create a new plugin for Shopware 6. Head over to our plugin base guide to learn how to create a plugin at first:
The main entry point to customize the Administration via plugin is the
main.js file. It has to be placed into a <plugin root>/src/Resources/app/administration/src directory in order to be automatically found by Shopware 6.Your
main.js file then needs to override the Vue component using the override method of our ComponentFactory.The first parameter matches the component to override, the second parameter has to be an object containing the actually overridden properties , e.g. the new twig template extension for this component.
<plugin root>/src/Resources/app/administration/src/main.js
import template from './extension/sw-product-settings-form/sw-product-settings-form.html.twig';
Shopware.Component.override('sw-product-settings-form', {
template
});
In this case, the
sw-product-settings-form component is overridden, which reflects the settings form on the product detail page. As mentioned above, the second parameter has to be an object, which includes the actual template extension.Time to create the referenced twig template for your plugin now.
Create a file called
sw-product-settings-form.html.twig in the following directory: <plugin root>/src/Resources/app/administration/src/extension/sw-product-settings-formThe path starting from 'src' is fully customizable, yet we recommend choosing a pattern like this one.
<plugin root>/src/Resources/app/administration/src/extension/sw-product-settings-form/sw-product-settings-form.html.twig
{% block sw_product_settings_form_content %}
{% parent %}
<sw-container columns="repeat(auto-fit, minmax(250px, 1fr))" gap="0px 30px">
<sw-text-field label="Manufacturer ID" v-model="product.manufacturerId" disabled></sw-text-field>
</sw-container>
{% endblock %}
Basically the twig block
sw_product_settings_form_content is overridden here. Make sure to have a look at the Twig documentation about the template inheritance, to understand how blocks in Twig work.This block contains the whole settings form of the product detail page. In order to add a new input field to it, you need to override the block, call the block's original content (otherwise we'd replace the whole form), and then add your custom input field to it. Also, the input field is "disabled", since it should be readable only. This should result in a new input field with the label 'Manufacturer ID', which then contains the ID of the actually chosen manufacturer.
As mentioned above, Shopware 6 is looking for a
main.js file in your plugin. Its contents get minified into a new file named after your plugin and will be moved to the public directory of Shopware 6 root directory. Given this plugin would be named "AdministrationNewField", the minified javascript code for this example would be located under <plugin root>/src/Resources/public/administration/js/administration-new-field.js, once you run the command following command in your shopware root directory:Template
platform only (contribution setup)
./bin/build-administration.sh
composer run build:js:admin
Your plugin has to be activated for this to work.
Make sure to also include that file when publishing your plugin! A copy of this file will then be put into the directory
<shopware root>/public/bundles/administration/newfield/administration/js/administration-new-field.js.Your minified javascript file will now be loaded in production environments.
Last modified 30d ago