Home / eCommerce / AffiliateWP — Searchable Checkout Referrals Dropdown WPCode Description
Duplicate Snippet

Embed Snippet on Your Site

AffiliateWP — Searchable Checkout Referrals Dropdown WPCode Description

Applies Select2 to the affiliate selector dropdown at checkout to make it searchable. Handles WooCommerce classic and block-based checkout.

Code Preview
php
<?php
add_action( 'wp_enqueue_scripts', function() {
    if ( ! function_exists( 'is_checkout' ) || ! is_checkout() ) {
        return;
    }
    wp_enqueue_style( 'affwp-select2' );
    wp_enqueue_script( 'affwp-select2' );
    // Hide WC Blocks floating label + chevron -- Select2 replaces the UI entirely
    wp_add_inline_style( 'affwp-select2', '
        .wc-block-components-select-input-affiliatewp-checkout_referrals-affiliate .wc-blocks-components-select__label,
        .wc-block-components-select-input-affiliatewp-checkout_referrals-affiliate .wc-blocks-components-select__expand {
            display: none !important;
        }
        .wc-block-components-select-input-affiliatewp-checkout_referrals-affiliate .select2-container {
            width: 100% !important;
        }
        .wc-block-components-select-input-affiliatewp-checkout_referrals-affiliate .select2-selection--single {
            height: 48px !important;
            border: 1px solid #767676 !important;
            border-radius: 4px !important;
            display: flex !important;
            align-items: center !important;
        }
        .wc-block-components-select-input-affiliatewp-checkout_referrals-affiliate .select2-selection__rendered {
            padding: 0 16px !important;
            line-height: normal !important;
            color: #3d3d3d !important;
        }
        .wc-block-components-select-input-affiliatewp-checkout_referrals-affiliate .select2-selection__arrow {
            height: 46px !important;
        }
        .wc-block-components-select-input-affiliatewp-checkout_referrals-affiliate .select2-selection__placeholder {
            color: #767676 !important;
        }
    ' );
    wp_add_inline_script( 'affwp-select2', '
        (function($) {
            function initAffiliateSelect2() {
                // Classic checkout
                var $classicSelect = $("select[name=\'woocommerce_affiliate\']");
                if ( $classicSelect.length && ! $classicSelect.hasClass("select2-hidden-accessible") ) {
                    $classicSelect.select2({
                        placeholder: "Search for a VIP member...",
                        allowClear: true
                    });
                }
                // Block checkout
                var $blockSelect = $("select[name=\'order_affiliatewp/checkout_referrals/affiliate\']");
                if ( $blockSelect.length && ! $blockSelect.hasClass("select2-hidden-accessible") ) {
                    $blockSelect.select2({
                        placeholder: "Who should be awarded commission for this purchase?",
                        allowClear: true
                        // No dropdownParent -- appends to body for full z-index freedom
                    });
                    // Dispatch native change event so WC Blocks React state updates
                    $blockSelect.on("select2:select select2:unselect", function() {
                        this.dispatchEvent(new Event("change", { bubbles: true }));
                    });
                }
            }
            $(document).ready(function() {
                initAffiliateSelect2();
            });
            if ( typeof MutationObserver !== "undefined" ) {
                var checkoutContainer = document.querySelector(".wc-block-checkout");
                if ( checkoutContainer ) {
                    new MutationObserver(function() {
                        initAffiliateSelect2();
                    }).observe( checkoutContainer, { childList: true, subtree: true } );
                }
            }
        })(jQuery);
    ' );
} );

Comments

Add a Comment