Wybór produktu - ProductSelector

Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.

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

Ilustracja 1. Przykładowa prezentacja komponentu na formularzu

✅ Kiedy stosować:

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

❌ Kiedy nie stosować:

• Potrzebna jest tylko prosta lista krótkich opcji. Stosuj: Radio / Tile.

Zasilenie komponentu skryptem

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

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",
        },
    ];
}

Ilustracja 2. Przykład podpięcia wyjść w komponencie zasilanym powyższym skryptem.

Ilustracja 3. Przykładowa prezentacja komponentu na formularzu

Ilustracja 4. Przykładowa prezentacja komponentu na formularzu

Wniosek demo: demoProductSelector

♿WCAG: Dobre praktyki WCAG dla low-code dev