The default functionnality of Shopware does not shows the company name when we use the search bar in the admin panel. We have some customers only filling the company field and not using the first and lastName with text (they're adding "_" instead). So, I copied the structure from the vendor/shopware/administration/Resources/app/administration/src/app/component/structure/sw-search-bar-item/ in my custom theme and registered it in my main.js file but every change I made in my custom theme (sw-search-bar-item.html.twig) has no effects in the administration.
Here's the default shopware file's content :
{% block sw_search_bar_item %}
<!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->
<li
class="sw-search-bar-item sw-search-bar-item--v2"
:class="componentClasses"
@mouseenter="onMouseEnter($event)"
>
{% block sw_search_bar_item_icon %}
<sw-icon
v-if="iconName"
:name="iconName"
:color="iconColor"
/>
{% endblock %}
{% block sw_search_bar_item_customer %}
<router-link
v-if="type === 'customer'"
ref="routerLink"
class="sw-search-bar-item__link"
:to="{ name: 'sw.customer.detail.base', params: { id: item.id } }"
@click.native="onClickSearchResult('customer', item.id)"
>
{% block sw_search_bar_item_customer_label %}
<span
class="sw-search-bar-item__label"
>
{% block sw_search_bar_item_customer_label_name %}
<sw-highlight-text
:search-term="searchTerm"
:text="`${item.firstName} ${item.lastName}`"
/>
{% endblock %}
{% block sw_search_bar_item_customer_label_number %}
<sw-highlight-text
:search-term="searchTerm"
:text="item.customerNumber"
/>
{% endblock %}
</span>
{% endblock %}
</router-link>
{% endblock %}
{% block sw_search_bar_item_product %}
<router-link
v-else-if="type === 'product'"
ref="routerLink"
class="sw-search-bar-item__link"
:to="{ name: 'sw.product.detail.base', params: { id: item.id } }"
@click.native="onClickSearchResult('product', item.id)"
>
{% block sw_search_bar_item_product_label %}
<span
class="sw-search-bar-item__label"
>
{% block sw_search_bar_item_product_label_name %}
<sw-highlight-text
:search-term="searchTerm"
:text="productDisplayName"
/>
{% endblock %}
{% block sw_search_bar_item_product_label_number %}
<sw-highlight-text
:search-term="searchTerm"
:text="item.productNumber"
/>
{% endblock %}
</span>
{% endblock %}
</router-link>
{% endblock %}
{% block sw_search_bar_item_category %}
<router-link
v-else-if="type === 'category'"
ref="routerLink"
class="sw-search-bar-item__link"
:to="{ name: 'sw.category.detail', params: { id: item.id } }"
@click.native="onClickSearchResult('category', item.id)"
>
{% block sw_search_bar_item_category_label %}
<span class="sw-search-bar-item__label">
<sw-highlight-text
:search-term="searchTerm"
:text="item.name"
/>
</span>
{% endblock %}
</router-link>
{% endblock %}
{% block sw_search_bar_item_order %}
<router-link
v-else-if="type === 'order'"
ref="routerLink"
class="sw-search-bar-item__link"
:to="{ name: 'sw.order.detail', params: { id: item.id } }"
@click.native="onClickSearchResult('order', item.id)"
>
{% block sw_search_bar_item_order_label %}
<span
class="sw-search-bar-item__label"
>
{% block sw_search_bar_item_order_label_name %}
<sw-highlight-text
:search-term="searchTerm"
:text="`${item.orderCustomer.firstName} ${item.orderCustomer.lastName}`"
/>
{% endblock %}
{% block sw_search_bar_item_order_label_number %}
<sw-highlight-text
:search-term="searchTerm"
:text="item.orderNumber"
/>
{% endblock %}
</span>
{% endblock %}
</router-link>
{% endblock %}
{% block sw_search_bar_item_media %}
<router-link
v-else-if="type === 'media'"
ref="routerLink"
class="sw-search-bar-item__link"
:to="{ name: 'sw.media.index', params: { folderId: item.mediaFolderId }, query: { term: item.fileName } }"
@click.native="onClickSearchResult('media', item.id)"
>
{% block sw_search_bar_item_media_label %}
<span class="sw-search-bar-item__label">
<sw-highlight-text
:search-term="searchTerm"
:text="item | mediaName"
/>
</span>
{% endblock %}
</router-link>
{% endblock %}
{% block sw_search_bar_item_cms_page %}
<router-link
v-else-if="type === 'cms_page'"
ref="routerLink"
class="sw-search-bar-item__link"
:to="{ name: 'sw.cms.detail', params: { id: item.id } }"
@click.native="onClickSearchResult('cms_page', item.id)"
>
{% block sw_search_bar_item_cms_page_label %}
<span class="sw-search-bar-item__label">
<sw-highlight-text
:search-term="searchTerm"
:text="item.name"
/>
</span>
{% endblock %}
</router-link>
{% endblock %}
{% block sw_search_bar_item_landing_page %}
<router-link
v-else-if="type === 'landing_page'"
ref="routerLink"
class="sw-search-bar-item__link"
:to="{ name: 'sw.category.landingPageDetail.base', params: { id: item.id } }"
@click.native="onClickSearchResult('landing_page', item.id)"
>
{% block sw_search_bar_item_cms_landing_page_label %}
<span class="sw-search-bar-item__label">
<sw-highlight-text
:search-term="searchTerm"
:text="item.name"
/>
</span>
{% endblock %}
</router-link>
{% endblock %}
{% block sw_search_bar_item_module %}
<router-link
v-else-if="['frequently_used', 'module'].includes(type)"
ref="routerLink"
class="sw-search-bar-item__link"
:to="routeName"
>
{% block sw_search_bar_item_module_label %}
<span
class="sw-search-bar-item__label"
>
{% block sw_search_bar_item_module_label_module %}
<sw-highlight-text
:search-term="searchTerm"
:text="moduleName"
/>
{% endblock %}
{% block sw_search_bar_item_module_label_shortcut %}
<sw-shortcut-overview-item
v-if="shortcut"
title=""
:content="shortcut"
/>
{% endblock %}
{% block sw_search_bar_item_module_label_action %}
<sw-highlight-text
:text="$tc(`global.sw-search-bar-item.${item.action ? 'typeLabelAction': 'typeLabelModule'}`)"
/>
{% endblock %}
</span>
{% endblock %}
</router-link>
{% endblock %}
{% block sw_search_bar_item_other_entity %}
<router-link
v-else-if="detailRoute && displayValue.length > 0"
ref="routerLink"
class="sw-search-bar-item__link"
:to="{ name: detailRoute, params: { id: item.id } }"
>
{% block sw_search_bar_item_other_entity_label %}
<span class="sw-search-bar-item__label">
<sw-highlight-text
:search-term="searchTerm"
:text="displayValue"
/>
</span>
{% endblock %}
</router-link>
{% endblock %}
</li>
{% endblock %}
and here are the lines I need to change : :text="${item.firstName} ${item.lastName}
"
:text="${item.orderCustomer.firstName} ${item.orderCustomer.lastName}
"
I just copied the whole content in the previous file and changed these two lines to :
:text="${item.firstName} ${item.lastName} ${item.company}
"
:text="${item.orderCustomer.firstName} ${item.orderCustomer.lastName} ${item.orderCustomer.company}
"
Is there something wrong?
Here's my main.js file content :
import './app/component/structure/sw-search-bar-item';
Apparently, it was an issue coming from somewhere else because I just copied the same files and same content on another instance and... it worked fine