Snippets

Oscar García Arenas Switcher with select2 and flags

Created by Oscar García Arenas last modified
<?php
/**
 * Init hooks on the front-end init.
 */
function wcpbc_switcher_flags_init() {
	
	add_action( 'wp_enqueue_scripts', 'wcpbc_load_switcher_flags_scripts', 20 );
	add_action( 'wp_footer', 'wcpbc_switcher_flags_script', 20 );
}
add_action( 'wc_price_based_country_before_frontend_init', 'wcpbc_switcher_flags_init' );

/**
 * Enqueue required scripts and styles on the front-end init.
 */
function wcpbc_load_switcher_flags_scripts() {
	/**
	 * SelectWoo (Select2).
	 *
	 * @see https://select2.org/
	 */
	wp_enqueue_script( 'selectWoo' );
	wp_enqueue_style( 'select2' );

	/** 
	 * World flags.
	 *
	 * @see https://github.com/lafeber/world-flags-sprite
	 */
	wp_enqueue_style( 'world-flags-sprite', '//github.com/downloads/lafeber/world-flags-sprite/flags16.css', array(), '0.0.2' );
}

/**
 * Outpus the script that initializes the select2
 */
function wcpbc_switcher_flags_script() {
?>
<script>
;( function( $ ) {
	var switcher_flags = {
		template: function( data ) {
			if ( ! data.id ) {
				return data.text;
			}
			var flag     = '';
			var currency = $(data.element).data('currency');

			if (typeof currency !== 'undefined' && currency ) {
				if ('EUR' === currency) {
					flag = '_European_Union';
				} else if( 'X' !== currency.substring(0,1) ) {
					flag = currency.toLowerCase().substring(0,2);
				}
			}

			if ( ! flag ) {
				flag = 'ca' === data.id.toLowerCase() ? data.id.toLowerCase() : 'us';
				
			}
			var $element = $( '<span><i class="flag" style="vertical-align: sub;margin-right: 6px;"></i><span></span></span>' );
			$element.find('i.flag').addClass(flag);
			$element.find('span').text(data.text);

			return $element;
		},

		selectionTemplate: function( data ) {
			var el = switcher_flags.template( data );
			return el.html();
		},

		afterSelectionTemplate: function() {
			$('.wc-price-based-country .select2-selection__rendered').each( function(){
				var text = $(this).text();
				if ( text.indexOf('span>') > 0 ) {
					$(this).html( text );
				}
			});
		},

		init_select2: function() {
			$('select.wcpbc-currency-switcher,select.wcpbc-country-switcher').select2({
				dropdownCssClass: 'f16 :all: wcpbc-switcher',
				containerCssClass: 'f16',
				templateResult: switcher_flags.template,
				templateSelection:  switcher_flags.selectionTemplate,
				minimumResultsForSearch: Infinity,
				width: 'auto'
			});

			switcher_flags.afterSelectionTemplate();

			$('select.wcpbc-currency-switcher,select.wcpbc-country-switcher').on('change', function(){
				switcher_flags.afterSelectionTemplate();
			});
		},

		init: function() {

			$(document).ready(switcher_flags.init_select2);

			/*
			 * After AJAX geolocation.
			 */ 
			$(document.body).on('wc_price_based_country_after_ajax_geolocation', switcher_flags.init_select2);
		}
	};
	
	switcher_flags.init();
})( jQuery );
</script>
<?php
}

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.