טעינת שדה עיר בחנות WooCommerce בצורה דינמית

שלב 1 -
יצירת לינק לטעינת הכתובות

באתר של רשות האוכלוסין קיימת רשימה של כתובות בישראל בה ניתן להשתמש. בלינק המצורף כאן ניתן להוריד אותה בפורמט XML לטובת שימוש באתר.

בדוגמה המצורפת הקובץ הועלה לroot בשם cities_new.xml לאחר סינון התוכן לאחזקת שמות הערים בלבד ובתוספת קידוד מתאימה. הלינק בסיום: https://www.nintay.com/cities_new.xml

שלב 2 -
שימוש בלינק שהתקבל בשדה הצ'קאאוט

את הקוד המצורף ניתן להטמיע בתבנית בתוך functions.php

 

//load autocomplete script in footer(checkout)
<?php
add_action('wp_footer', function(){
	if( !is_checkout() )
		return;
	
	$url = '.../cities_new.xml';
	$xml = simplexml_load_file( $url );
	$nodes = $xml->channel->item;
	$cities = array();
	if( $nodes ){
		foreach( $nodes as $node ){
			$n = (array)$node;
			if( isset( $n["city"] ) && !empty( $n["city"] ) ){
				$city = str_replace( " )", "(", $n["city"] );
				$city = str_replace( "(", ")", $city );
				$cities[] = trim( $city );
			}
		}
	}
	?>
	<script>
	jQuery(document).ready(function($){
		function _isContains(json, value) {
			let contains = false;
			Object.keys(json).some(key => {
				contains = typeof json[key] === 'object' ? _isContains(json[key], value) : json[key] === value;
					return contains;
			});
			return contains;
		}
		var substringMatcher = function(strs) {
			return function findMatches(q, cb) {
				var matches, substringRegex;
				// an array that will be populated with substring matches
				matches = [];
				// regex used to determine if a string contains the substring `q`
				substrRegex = new RegExp(q, 'i');

				// iterate through the pool of strings and for any string that
				// contains the substring `q`, add it to the `matches` array
				$.each(strs, function(i, str) {
					if (substrRegex.test(str)) {
						matches.push(str);
					}
				});
				cb(matches);
			};
		};
		var cities = <?php echo json_encode( $cities ); ?>;
		
		$('#billing_city').typeahead({
			hint: false,
			highlight: true,
			minLength: 1
		},{
			name: 'City',
			limit: 10,
			source: substringMatcher(cities)
		}).on( 'typeahead:selected', function($e, data){
			$('#billing_city').val( data );
		}).on( 'change blur', function($e, data){
			if( !_isContains( cities, $('#billing_city').val() ) ){
				$('#billing_city').val( '' );
			}
		});
	});
	</script>
	<?php
}); 

שלב 3 -
הוספת טעינה מהירה ועיצוב

//enqueue typehead script
function foody_typehead_scripts_cb() {
	wp_enqueue_style( 'typeahead-css', get_stylesheet_directory_uri() . '/assets/css/typeahead.css' );
    wp_enqueue_script( 'typeahead-js', get_stylesheet_directory_uri() . '/assets/js/typeahead.bundle.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'foody_typehead_scripts_cb' );