WWOF – Force Default Quantity to 0 and Auto-tick the Add to Cart Checkbox

/**

 * WWOF v3 (Ant Design Vue): Force default qty to 0 and auto-tick the Add to Cart checkbox

 * (Supports both manual typing and up/down arrow clicks)

 */

add_action( 'wp_footer', 'wwof_v3_antdesign_qty_checkbox_script_final', 999 );

function wwof_v3_antdesign_qty_checkbox_script_final() {

    ?>

    <script type="text/javascript">

        document.addEventListener('DOMContentLoaded', function() {

            // 1. Helper to force native values so Vue & Ant Design accept the change

            function setNativeValue(element, value) {

                const valueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;

                if (valueSetter) {

                    valueSetter.call(element, value);

                } else {

                    element.value = value;

                }

                element.dispatchEvent(new Event('input', { bubbles: true }));

            }

            // 2. Observer to catch the rows as Ant Design renders them and force to 0

            const observer = new MutationObserver(function(mutations) {

                mutations.forEach(function(mutation) {

                    if (mutation.addedNodes.length) {

                        mutation.addedNodes.forEach(function(node) {

                            if (node.nodeType === 1) { 

                                const qtyInputs = node.querySelectorAll ? node.querySelectorAll('.wwof-row .ant-input-number-input') : [];

                                qtyInputs.forEach(function(input) {

                                    if (input.getAttribute('data-wwof-fixed') !== 'true') {

                                        input.setAttribute('data-wwof-fixed', 'true');

                                        // Strip away Ant Design's hardcoded minimum limit

                                        input.setAttribute('aria-valuemin', '0');

                                        input.setAttribute('min', '0');

                                        // Give the framework a split-second to finish, then force 0

                                        setTimeout(function() {

                                            setNativeValue(input, '0'); 

                                        }, 50);

                                    }

                                });

                            }

                        });

                    }

                });

            });

            // Start watching the page

            observer.observe(document.body, { childList: true, subtree: true });

            // 3. Shared function to sync the checkbox based on the row's quantity

            function syncRowCheckbox(row) {

                if (!row) return;

                const input = row.querySelector('.ant-input-number-input');

                const checkbox = row.querySelector('.add-to-cart-checkbox input[type="checkbox"]');

                if (!input || !checkbox) return;

                const val = parseFloat(input.value);

                const qty = isNaN(val) ? 0 : val;

                const isChecked = checkbox.checked;

                // Simulate a real mouse click to ensure Vue registers the cart update

                if (qty > 0 && !isChecked) {

                    checkbox.click(); 

                } else if (qty <= 0 && isChecked) {

                    checkbox.click();

                }

            }

            // 4. Trigger sync when manually TYPING in the input

            document.body.addEventListener('input', function(e) {

                if (e.target.matches('.wwof-row .ant-input-number-input')) {

                    syncRowCheckbox(e.target.closest('.wwof-row'));

                }

            });

            // 5. Trigger sync when CLICKING the Ant Design up/down arrows

            document.body.addEventListener('click', function(e) {

                // Check if the clicked element is one of the up/down arrows

                const arrowHandler = e.target.closest('.ant-input-number-handler');

                if (arrowHandler) {

                    const row = arrowHandler.closest('.wwof-row');

                    if (row) {

                        // Wait 50ms for Ant Design to finish updating the input's value, then sync

                        setTimeout(function() {

                            syncRowCheckbox(row);

                        }, 50);

                    }

                }

            });

        });

    </script>

    <?php

}

// 6. Ensure WooCommerce core allows 0 as a minimum quantity

add_filter( 'woocommerce_quantity_input_min', '__return_zero', 999 );