# Suchfeld mit Typ einschränken

**URL:** <https://forum.shopware.com/t/suchfeld-mit-typ-einschraenken/94711>\
**Category:** Programmierung\
**Created:** [7. Juni 2022 um 14:11 UTC](https://forum.shopware.com/t/suchfeld-mit-typ-einschraenken/94711 "2022-06-07T14:11:54Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![rammi22](https://avatars.discourse-cdn.com/v4/letter/r/258eb7/32.png) [@rammi22](https://forum.shopware.com/u/rammi22)\
**Post date:** [7. Juni 2022 um 14:11 UTC](https://forum.shopware.com/t/suchfeld-mit-typ-einschraenken/94711/1 "2022-06-07T14:11:54Z")

</div>

Hallo,

ich habe ien Plugin erstellt, welches über ein weiteren Tab zu den Produkt-Detail-Tabs ein template mit einem Modal öffnet. Innerhalb des Modal befindet sich eine Search-Bar:

 ![Bildschirmfoto vom 2022-06-07 15-55-51](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/0/d/0d019721019943f60f34251d7c9ebf739ff67f0e.png)

Was mit fehlt ist eine aufschlussreiche Doku, wo erklärt wird, wie ich die Search-Bar für meine Zwecke konfigurieren muß. Was ich bislang gefunden, ist die [Definition der Klasse](https://component-library.shopware.com/components/sw-search-bar), aber ohne weitere Erklärungen…

Ich brauche Infos für das `<sw-search-bar>`:

- wie kann ich die **Suche nur auf Produkte einschränken**

Auch über das umgebene Modal und dessen Konfiguration innerhalb der Administration findet sich nichts ([nur für die Storefront](https://developer.shopware.com/docs/guides/plugins/plugins/storefront/using-a-modal-window)). Dafür bräuchte ich Infos zu:

- wie den **Style vom Modal überschreiben**?

Aktuell versuche es ich direkt im template, ohne Effekt:

```auto
{% block sw_product_product_composer_overview %}
    <div>
<sw-card :large="true">
...
</sw-card>

        <style>
            .sw-modal__dialog {
                /*height: 90%;*/
                max-width: 90%;
            }
        </style>
        <sw-modal
            title="Modal box title"
            selector=".example .panel--content"
            style="height: 100%; width: 100%;"
            >
            <sw-search-bar></sw-search-bar>
{# <sw-search-bar-item :item="{ type: 'customer', entity: [{ name: 'customer name', id: 'uuid' }]}">#}
{# </sw-search-bar-item>#}
        </sw-modal>
    </div>
{% endblock %}

```

Die Klasse `sw-modal__dialog` wurde beim erstellen des Modal generiert:

````auto
<div class="sw-modal sw-modal--default" style="height: 100%; width: 100%;">
<div role="dialog" aria-labelledby="modalTitleEl" tabindex="-1" class="sw-modal__dialog sw-modal--44eae0ab7db24c3090b5ed3d70e8d085">
...
</div>
</div>```

````

VG