# Wybór produktu - ProductSelector

{% hint style="info" %}
Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
{% endhint %}

Komponent służy do prezentowania użytkownikowi listy produktów do wyboru.

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FAhPm5iI0Y9BjSg9KxirR%2Fimage.png?alt=media&#x26;token=3cdf3cec-c068-4344-ba94-394810c09f1b" alt=""><figcaption><p align="center"><em><strong>Ilustracja 1.</strong> Przykładowa prezentacja komponentu na formularzu</em></p></figcaption></figure>

✅ **Kiedy stosować:**

* Wybór produktu z listy, który może mieć nazwę, opis, grafikę, link lub dodatkową treść.

:x: **Kiedy nie stosować:**

* Potrzebna jest tylko prosta lista krótkich opcji. **Stosuj**: [Radio](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/radio) / [Tile](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/kafel-tile).

## Zasilenie komponentu skryptem

Przykładowa implementacja skryptu zasilającego komponent widoczny na Ilustracji 1.

{% code lineNumbers="true" expandable="true" %}

```js
function callService(context) {
    return [
        {
            "id": "1", // unikalny identyfikator elementu
            "name": "Konto walutowe",
            "variantFor": "1", // jeśli variantFor ma wartość jak id oznacza to, że jest to produkt i jest wyświetlany jako radio
            "href": "https://przykladowyLinkDoTaryfyOplatIProwizji.pdf",
            "hrefLabel": "Otwórz Taryfę Opłat i Prowizji",
            "contentHtml": "<ul style=\"list-style: none; padding: 0; margin: 0;\"><li style=\"margin-bottom: 16px; height: 24px; display: flex; align-items: center;\"><span style=\"margin-right: 16px;\">✅</span><span>wygodne płatności gotówkowe i bezgotówkowe</span></li><li style=\"margin-bottom: 16px; height: 24px; display: flex; align-items: center;\"><span style=\"margin-right: 16px;\">✅</span><span>możliwość realizacji transakcji w Internecie</span></li></ul><div><div style=\"\">Opłata za wydanie karty: <strong>0 PLN</strong></div><div style=\"\">Opłata miesięczna za korzystanie z karty: <strong>5 PLN</strong></div></div>",
            "initValue": context.getFirstParameter('value') //jeśli chcemy zasilić komponent domyślną wartością, należy ją dodać dla pierwszego elementu
        },
        {
            "id": "1_1", // komponent będzie zapisywał tylko wartość wybranej karty. Jeśli ważna jest informacja o wybranym produkcie, id karty powinno wskazywać na produkt
            "name": "title1_1",
            "imageUrl": "/assets/productSelector/productSelectorCardTemplate1.png",
            "alt": "Karta 1_1",
            "variantFor": "1", // jeśli w polu variantFor wskazujemy id produktu (radio), taki element traktowany będzie jako karta. Należy wtedy przekazać imageUrl i alt
        },
        {
            "id": "2",
            "name": "Konto mega oszczędnościowe 0zł",
            "variantFor": "2",
            "href": "https://przykladowyLinkDoTaryfyOplatIProwizji.pdf",
            "hrefLabel": "Otwórz Taryfę Opłat i Prowizji",
            "contentHtml": "<ul style=\"list-style: none; padding: 0; margin: 0;\"><li style=\"margin-bottom: 16px; height: 24px; display: flex; align-items: center;\"><span style=\"margin-right: 16px;\">✅</span><span>wygodne płatności gotówkowe i bezgotówkowe</span></li><li style=\"margin-bottom: 16px; height: 24px; display: flex; align-items: center;\"><span style=\"margin-right: 16px;\">✅</span><span>możliwość realizacji transakcji w Internecie</span></li></ul><div><div style=\"\">Opłata za wydanie karty: <strong>0 PLN</strong></div><div style=\"\">Opłata miesięczna za korzystanie z karty: <strong>5 PLN</strong></div></div>",
        },
        {
            "id": "2_1",
            "name": "title2_1",
            "imageUrl": "/assets/productSelector/productSelectorCardTemplate1.png",
            "alt": "Karta 2_1",
            "variantFor": "2",
        },
        {
            "id": "2_2",
            "name": "title2_2",
            "imageUrl": "/assets/productSelector/productSelectorCardTemplate2.png",
            "alt": "Karta 2_2",
            "variantFor": "2",
        },
        {
            "id": "2_3",
            "name": "title2_3",
            "imageUrl": "/assets/productSelector/productSelectorCardTemplate3.png",
            "alt": "Karta 2_3",
            "variantFor": "2",
        },
    ];
}
```

{% endcode %}

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FGTw2QdTPGxKSNpSaZzb2%2Fimage.png?alt=media&#x26;token=656bb1c9-b9df-4c83-b467-8588771c3419" alt=""><figcaption><p><em><strong>Ilustracja 2.</strong> Przykład podpięcia wyjść w komponencie zasilanym powyższym skryptem.</em></p></figcaption></figure>

![Ilustracja 3. Przykładowa prezentacja komponentu na formularzu](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/jvCNt8yYt9YTaNWfFVQj/1k_files/image2025-6-10_12-25-51.png)

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FYNLIhinY38ATbRWm3ctR%2FZaznaczenie_295.png?alt=media&#x26;token=15c21658-be5d-47e2-9b0c-4f4d32fa7be0" alt="" width="563"><figcaption><p align="center"><em><strong>Ilustracja 4.</strong> Przykładowa prezentacja komponentu na formularzu</em></p></figcaption></figure>

{% hint style="info" %}
Wniosek demo: demoProductSelector
{% endhint %}

{% hint style="info" %}
♿WCAG: [Dobre praktyki WCAG dla low-code dev](https://docs.eximee.com/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki)
{% endhint %}