Last active
April 15, 2026 07:29
-
-
Save pramodjodhani/4f87a7031af5804c218fbdf1e9ca720d to your computer and use it in GitHub Desktop.
Orderable set minimum limit for addon checkbox
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| function orderable_set_minimum_selection() { | |
| ?> | |
| <script> | |
| /** | |
| * Orderable: Enforce Minimum Selections for Checkbox Addons | |
| * | |
| * Instructions: | |
| * 1. Update the 'minSelections' object below. | |
| * 2. Use the exact Title of your field as the key. | |
| * 3. Set the minimum number of selections as the value. | |
| */ | |
| (function($) { | |
| // --- CONFIGURATION START --- | |
| const minSelections = { | |
| 'Color': 2, // Set 'Toppings' to require at least 2 selections | |
| }; | |
| // --- CONFIGURATION END --- | |
| /** | |
| * Main validation function | |
| */ | |
| function validateOrderableMinSelections( $triggerEl ) { | |
| const $drawer = $('.orderable-drawer'); | |
| const $productForm = $('.single-product form.cart'); | |
| let $container; | |
| if ( $triggerEl ) { | |
| // Determine container based on which element is the actual parent of the changed input. | |
| $container = $triggerEl.closest( $drawer ).length ? $drawer : $productForm; | |
| } else { | |
| $container = $drawer.length ? $drawer : $productForm; | |
| } | |
| if (!$container.length) return; | |
| let allConditionsMet = true; | |
| const $actionBtn = $container.find('.orderable-product__add-to-order, .orderable-product__update-cart-item'); | |
| $container.find('.orderable-product-fields--visual_checkbox').each(function() { | |
| const $field = $(this); | |
| const title = $field.data('field-name'); | |
| const min = minSelections[title]; | |
| if (min) { | |
| const selectedCount = $field.find('input:checked').length; | |
| const $error = $field.find('.orderable-min-selection-error'); | |
| if (selectedCount < min) { | |
| // Mark as invalid so Orderable blocks the submission | |
| $field.addClass('orderable-field--invalid'); | |
| allConditionsMet = false; | |
| // Display error message | |
| if (!$error.length) { | |
| $field.append('<div class="orderable-min-selection-error" style="color: #e24c4c; font-size: 0.85em; margin-top: 8px; font-weight: 500;">Please select at least ' + min + ' options.</div>'); | |
| } | |
| } else { | |
| $field.removeClass('orderable-field--invalid'); | |
| $error.remove(); | |
| } | |
| } | |
| }); | |
| // Handle the Add to Order button state in the side drawer | |
| if ($drawer.length) { | |
| if (!allConditionsMet) { | |
| $actionBtn.attr('disabled', 'disabled').css('opacity', '0.6'); | |
| } else { | |
| // Only re-enable if no other fields have native validation errors | |
| if ($drawer.find('.orderable-field--invalid').length === 0) { | |
| $actionBtn.removeAttr('disabled').css('opacity', ''); | |
| } | |
| } | |
| } | |
| } | |
| // Trigger validation on selection changes | |
| $(document).on('change', '.orderable-product-fields--visual_checkbox input', function() { | |
| // Delay slightly to allow Orderable's native validation to run first. | |
| // Pass the changed input so we can resolve the correct container. | |
| const $changedInput = $(this); | |
| setTimeout( function() { validateOrderableMinSelections( $changedInput ); }, 100 ); | |
| }); | |
| // Trigger validation when the side drawer opens | |
| $(document.body).on('orderable-drawer.opened', function() { | |
| validateOrderableMinSelections(); | |
| }); | |
| // Prevent form submission on Single Product pages if conditions aren't met | |
| $(document).on('submit', '.single-product form.cart', function(e) { | |
| validateOrderableMinSelections(); | |
| if ($(this).find('.orderable-field--invalid').length > 0) { | |
| e.preventDefault(); | |
| alert('Please check the required selections.'); | |
| return false; | |
| } | |
| }); | |
| })(jQuery); | |
| </script> | |
| <?php | |
| } | |
| add_action( 'wp_footer', 'orderable_set_minimum_selection' ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment