Add custom input field to existing component

Overview

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.

Prerequisites

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:

Plugin Base Guide

Injecting into the Administration

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.

Adding the custom template

Time to create the referenced twig template for your plugin now.

INFO

We're dealing with a TwigJS template here.

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-form

INFO

The 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.

Loading the JS files

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:

INFO

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.