========================================================================== */ jQuery(function ($) { // Matches "Zone Name (+KShs 500.00)" or "Zone Name (KShs 500.00)" // Captures: 1 = zone name, 2 = price (with currency), or undefined if free var PRICE_PATTERN = /^(.*?)\s*\(\+?\s*(KShs?\s?[\d,]+(?:\.\d{2})?)\)\s*$/i; function parseZoneOption(rawText) { var match = rawText.match(PRICE_PATTERN); if (match) { return { zone: match[1].trim(), price: match[2].trim() }; } // No price found in the text — treat as free / included return { zone: rawText.trim(), price: 'Free' }; } function formatZoneRow(state) { // state.text is undefined for the placeholder / loading option if (!state.id || !state.text) { return state.text; } var parsed = parseZoneOption(state.text); var $row = $( '' ); $row.find('.zone-option-name').text(parsed.zone); $row.find('.zone-option-price').text(parsed.price); return $row; } function formatZoneSelection(state) { if (!state.id || !state.text) { return state.text; } // Keep the selected/closed state as plain text (zone — price) so it // still fits neatly in the collapsed input, same as before. var parsed = parseZoneOption(state.text); return parsed.zone + (parsed.price !== 'Free' ? ' — ' + parsed.price : ''); } function enhanceZoneDropdown($select) { // Skip if we've already enhanced this one if ($select.data('zone-enhanced')) return; // If Select2 is already attached (likely, since the dropdown already // works), destroy and rebuild it with our custom templates if ($select.hasClass('select2-hidden-accessible')) { $select.select2('destroy'); } $select.select2({ templateResult: formatZoneRow, templateSelection: formatZoneSelection, width: '100%' }); $select.data('zone-enhanced', true); } function findAndEnhanceZoneSelects() { // Detects the right by content rather than a hardcoded ID, // since the exact field (billing_state, a custom field, etc.) can // vary by theme/plugin setup. Looks for a select whose options // contain "ZONE" or a KShs price — adjust this selector if your // dropdown uses different wording. $('select').each(function () { var $select = $(this); if ($select.data('zone-enhanced')) return; var optionsText = $select.find('option').map(function () { return $(this).text(); }).get().join(' '); if (/ZONE/i.test(optionsText) || /KShs?\s?[\d,]+/i.test(optionsText)) { enhanceZoneDropdown($select); } }); } // Run on initial load findAndEnhanceZoneSelects(); // WooCommerce reloads checkout fields via AJAX when address details // change (this fires the "updated_checkout" event) — re-run after that // so the dropdown doesn't revert to plain Select2 styling $(document.body).on('updated_checkout', function () { findAndEnhanceZoneSelects(); }); });