How to add entity in the administration at the Shopware

In this blog, you are going to learn “How to add entity in the administration at Shopware.”
I hope you know the directory structure of Shopware 6 plugin, if you don’t know, see here- https://docs.shopware.com/en/shopware-platform-dev-en/internals/directory-structure.

There are two different ways of how the global search works:
1 – Global search without type specification
2 -Typed global search
The API use is differs and displayed in a different way.

The typed global search needs an instance of the JavaScript class ApiService with the key of the entity in the camel case suffixed with Service. E.g. The service key is testService when requesting service for a test. entity definition gets automatically an instance in the injection container but can be overridden so there is no additional work needed.

Add the search tag

The search tag displays the entity type that uses in the type search and is a clickable button to switch from the untype to the typed search. A service decorator use for adding the tag in order to add a type to the search type service.

const { Application } = Shopware;

Application.addServiceProviderDecorator('searchTypeService', searchTypeService => {
    searchTypeService.upsertType('test', {
        entityName: 'test',
        entityService: 'testService',
        placeholderSnippet: 'test.general.placeholderSearchBar',
        listingRoute: 'test.index'
    });

    return searchTypeService;
});

Both key and entityName use as the same to change existing types. The entity service use for the typed search. This service can override with an own implementation for customization. The placeholder snippet is a translation key when no search term entered. The listing route uses to show a link to continue the search in the module-specific listing view.

By default, the search bar does not know how to display the result items so a current search request will not show any result.
sw-search-bar-item.html.twig

{% block sw_search_bar_item_cms_page %}
    {% parent %}

    <router-link v-else-if="type === 'test'"
                 v-bind:to="{ name: 'test.detail', params: { id: item.id } }"
                 ref="routerLink"
                 class="sw-search-bar-item__link">
        {% block sw_search_bar_item_test_label %}
            <span class="sw-search-bar-item__label">
                <sw-highlight-text v-bind:searchTerm="searchTerm"
                                   v-bind:text="item.name">
                </sw-highlight-text>
            </span>
        {% endblock %}
    </router-link>
{% endblock %}

index.js

import template from './sw-search-bar-item.html.twig';
Shopware.Component.override('sw-search-bar-item', {
template
})

The sw_search_bar_item_cms_page block use as it is the last block but it is not important which Shopware type is extended as long as the Vue else-if structure is kept working.

By default, the search bar tries to resolve to the registered listing route.
sw-search-more-results.html.twig

{% block sw_search_more_results %}
    <template v-if="result.entity === 'test'">
        <a :href="'https://webkul.com/?q=' + searchTerm"
           class="sw-search-bar-item__link"
           target="_blank">
            look it
        </a>
        in the ERP instead.
    </template>
    <template v-else>
        {% parent %}
    </template>
{% endblock %}

index.js

import template from './sw-search-more-result.html.twig';
Shopware.Component.override('sw-search-more-result', {
template
})

I hope it will help you. Thanks for reading. Happy Coding 🙂
Thank You.