Limit wyboru elementów oferty w agendzie

W przypadku niektórych wydarzeń może pojawić się potrzeba, by umożliwić uczestnikom wybór limitowanej liczby elementów oferty.

Przykładowo: oferta (agenda) składa się z 20 punktów programu, a nam zależy na tym, by uczestnik mógł wybrać jedynie 5 z nich.

W takiej sytuacji najczęściej stosowanym mechanizmem będzie zastosowanie REGUŁ BLOKOWANIA ELEMENTÓW OFERTY na ekranie edycji SZABLONU REJESTRACJI.

Bywa jednak, że użycie REGUŁ BLOKOWANIA ELEMENTÓW OFERTY nie jest możliwe, ponieważ blokada ma być tylko ilościowa.

Wówczas musimy użyć sekcji KONFIGURACJA > DLA DEWELOPERÓW > custom.js, by dodać do formularza rejestracyjnego prostą funkcję w języku Javascript:

$(document).ready(function() {
    const maxSelections = 5;
    const $programCols = $('.program-container .program-col');
    const $checkboxes = $('.program-container .program-col .row-two .check-wrap .checkbox-program input[type="checkbox"]');

    $checkboxes.on('change', updateCheckboxes);

    function updateCheckboxes() {
        let checkedCount = 0;

        $checkboxes.each(function() {
            if ($(this).is(':checked')) {
                checkedCount++;
            }
        });

        if (checkedCount >= maxSelections) {
            $checkboxes.each(function() {
                if (!$(this).is(':checked')) {
                    const $parentDiv = $(this).closest('.program-col');
                    $parentDiv.css('opacity', '0.5');
                    $(this).prop('disabled', true);
                }
            });
        } else {
            $checkboxes.each(function() {
                const $parentDiv = $(this).closest('.program-col');
                $parentDiv.css('opacity', '1');
                $(this).prop('disabled', false);
            });
        }
    }
});

Po wklejeniu kodu, ekran będzie wyglądał jak poniżej:

Limit wybranych elementów oferty modyfikujemy w drugim wierszu:

const maxSelections = 5;

Po zapisaniu zmian przetestuj etap rejestracji zawierający ofertę (agendę) i upewnij się, że skrypt działa zgodnie z Twoimi oczekiwaniami.