Hide Payment Amount Widgets When Related Events Are Full

A Payment Amount widget can stay active after a selected related event reaches capacity. The Related Event widget disables the full event, but selection-based conditional logic can continue to evaluate as true. Use custom JavaScript to set numeric indicator fields when Slate marks a related event as full or reports that no events are available. Conditional logic can then remove the Payment Amount from the total and show an unavailable message.

📝 Note

This configuration affects payment totals and uses custom JavaScript. Test every related-event, guest, and payment combination in a test environment before you use it on a live form. Retest the form after you change its fields, related-event setup, capacity settings, or script.

⭐ Get Inspired

This article was adapted from a post by Technolutions staff in the Slate Community Forums' Get Inspired space.

Before you begin

Complete the related-event and payment setup first:

• Add a Related Event widget and give it a unique Export Key.

• Configure the related event's registrant limit and guest settings.

• Add the Payment Amount and Payment Form widgets.

• Use one mapped Related Event widget for each separately priced choice.

If one Related Event widget lists several events and any listed event becomes full, this script marks the entire widget as unavailable. Separate the priced choices into individual widgets before you use this configuration.

📖 Related Events

📖 Payment Widgets in Forms

Adding indicator fields

1. Add a Text Box field for each Related Event widget that controls a Payment Amount.

2. Configure the following settings:

   • Label: Enter an internal description, such as Pre-Game Event Unavailable.

   • Data Type: Select Real.

   • Export Key: Enter a unique key, such as preGameUnavailable.

   • Options: Select Hidden / accessible through script.

3. Place the indicator field in the same registration block as its Related Event widget. For a form without registration blocks, the indicator can appear anywhere on the form.

4. Optional: Add one more hidden Text Box field outside any registration block. Give it a Data Type of Real and an export key such as allRelatedEventsUnavailable. The script sets this field to 1 when all mapped related-event indicators are set to 1.

Adding the script

1. From the form, select Edit Scripts / Styles.

2. On the Custom Scripts tab, add the following script:

   $(function() {
       const eventMappings = {
           "REPLACE WITH EXPORT KEY OF RELATED EVENT": "REPLACE WITH EXPORT KEY OF LOGIC FIELD",
           "REPLACE WITH EXPORT KEY OF ANOTHER RELATED EVENT": "REPLACE WITH EXPORT KEY OF CORRESPONDING LOGIC FIELD"
       };
   
       const noEventsExport = "REPLACE WITH EXPORT KEY OF NO RELATED EVENTS";
       const NO_EVENTS_TEXT = "There are no other available events to display for this date.";
   
       function isFullOrNoEvents($related) {
           const hasNoEvents = $related.find('span').filter((_, el) =>
               $.trim(el.textContent) === NO_EVENTS_TEXT
           ).length > 0;
   
           const hasFull = $related.find('.form_response.full').length > 0;
   
           return hasNoEvents || hasFull;
       }
   
       function getBlock($related) {
           const $row = $related.closest('tr.column, tr');
           if ($row.length) return $row;
   
           const $form = $related.closest('.form_page, form').first();
           return $form.length ? $form : $(document);
       }
   
       function updateAll() {
           Object.entries(eventMappings).forEach(([related, indicator]) => {
               $(`[data-export="${related}"]`).each(function() {
                   const $related = $(this);
                   const $block = getBlock($related);
                   const $input = $block.find(`[data-export="${indicator}"] input[type="text"]`).first();
   
                   if ($input.length) {
                       const value = isFullOrNoEvents($related) ? "1" : "";
                       if ($input.val() !== value) $input.val(value).triggerHandler("change");
                   }
               });
           });
   
           const $noEvents = $(`[data-export="${noEventsExport}"] input[type="text"]`).first();
           if (!$noEvents.length) return;
   
           const allSet = Object.values(eventMappings).every(indicator => {
               const inputs = $(`[data-export="${indicator}"] input[type="text"]`)
                   .filter((_, el) => !$(el).closest('tbody.replicate_template').length)
                   .toArray();
   
               return inputs.length > 0 && inputs.every(input =>
                   $.trim($(input).val()) === "1"
               );
           });
   
           const value = allSet ? "1" : "";
           if ($noEvents.val() !== value) $noEvents.val(value).triggerHandler("change");
       }
   
       updateAll();
       new MutationObserver(updateAll).observe(document.body, {
           childList: true,
           subtree: true,
           attributes: true,
           attributeFilter: ['class', 'style', 'aria-hidden']
       });
       $(document).on('change', '[data-export] input[type="checkbox"]', updateAll);
   });

3. In eventMappings, replace each placeholder with the export key of a Related Event widget and its corresponding indicator field.

   

4. Replace the noEventsExport placeholder with the global indicator export key. If you did not create this optional field, the script skips this value.

5. If the Related Event widget uses a Custom Unavailable Message, replace NO_EVENTS_TEXT with that exact message.

6. Select Save.

Adding conditional logic

Showing an unavailable message

1. Add an Instructions field with the message that should appear when an event is unavailable.

2. Add a conditional logic filter for the corresponding numeric indicator field.

3. Set the filter to show the Instructions field when the indicator is greater than 0.

   

4. Select Save.

Use the global indicator when one message should appear only after all mapped related-event choices are unavailable.

Removing the Payment Amount

1. Edit the Payment Amount widget for the related event.

2. Configure the following conditional logic filters with an AND relationship:

   • The Related Event field contains the event that requires the charge.

   • Form Field Exists is set to NOT EXISTS for the corresponding indicator field.

   

3. Select Save.

When the script sets the indicator to 1, the second condition fails. Slate disables the Payment Amount field and recalculates the total without that amount.

Testing the form

Test each mapped event in a test environment:

1. Confirm that selecting an available related event adds the correct Payment Amount.

2. Make the related event full. Confirm that Slate shows the full message, the indicator is set to 1, the Payment Amount is removed, and the total decreases.

3. Restore event availability. Confirm that the indicator clears and the original behavior returns.

4. Test the no-events message and the global indicator, if used.

5. For registration blocks, add and remove several registrants. Confirm that each indicator controls only the Payment Amount in the same block.

📖 Form Conditional Logic