Skip to content

<script>
	// Ajax call to get a single dealer
	// fetch_individual_dealer() in functions.php
	function fetch_individual_dealer_information(id) {
		// We'll pass this variable to the PHP function fetch_dealers
		var dealer_id = id;
		var ajaxurl = "<?php echo admin_url('admin-ajax.php')?>";
		var mobile_dealer = $('#mobile-dealer');
		var loader = $('.uil-spin-css-container');
		loader.show();
		// This does the ajax request
		if (dealer_id) {
			$.ajax({
				url: ajaxurl,
				data: {
					'action':'fetch_individual_dealer',
					'dealer_id' : dealer_id
				},
				success:function(data) {
					// console.log(data);
					loader.hide();
					mobile_dealer.empty();
					mobile_dealer.append(data);
				},
				error: function(errorThrown){
					console.log(errorThrown);
				}
			}); 
		} else {
	}
}

$("#dealers").change(function() {
	fetch_individual_dealer_information(marker_id);
});

</script>

<div class='uil-spin-css-container'>
	<div class='uil-spin-css'>
		<div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div>
	</div>
</div>

<div id="mobile-dealer" class="visible-xs">
	<article>
		<div class="row">
			<div class="col-xs-4"><img src="http://website.com/wp-content/uploads/2016/04/image-150x150.jpg" class="img-responsive"></div>
			<div class="col-xs-8">
				<h5>Outdoor World</h5>
				<h6>Bunbury</h6>
				<p>4 Halifax Road, Bunbury, WA, 6230<br>
				<strong>Phone:</strong> 08 9725 6166</p>
			</div>
		</div>
		<a href="https://www.google.com/maps?daddr=-33.358775,115.66869199999996" class="btn white">Get Directions</a>
		<a href="http://website.com/blog/dealer/bunbury/" class="btn arrow black">Dealer Details</a>
	</article>
</div>

In Functions.php


function fetch_individual_dealer() {
	// The $_REQUEST contains all the data sent via ajax
	if ( isset($_REQUEST) ) {
		$dealer_id = $_REQUEST['dealer_id'];
		$dealer_suburb = get_the_title($dealer_id);
		$dealer_name = get_field('dealer_name', $dealer_id);
		$dealer_phone = get_field('delaer_phone', $dealer_id);
		$dealer_address = get_field('dealer_store_address', $dealer_id);
		$dealer_image = get_field('featured_image', $dealer_id);
		$dealer_image_thumbnail = $dealer_image['sizes']['thumbnail'];

		$categories = get_the_terms( $post->ID, 'dealer_state' );
		if ($dealer_image_thumbnail) {
			$image_column = '<div class="col-xs-4"><img src="'.$dealer_image_thumbnail.'" class="img-responsive"></div>';
		} else {
			$image_column = '';
		}
		$html = '
			<article>
				<div class="row">
					'.$image_column.'
					<div class="col-xs-8">
						<h5>'.$dealer_name.'</h5>
						<h6>'.$dealer_suburb.'</h6>
						<p>'.$dealer_address['address'].'<br>
						<strong>Phone:</strong> '.$dealer_phone.'</p>
					</div>
				</div>
				<a href="https://www.google.com/maps?daddr='.$dealer_address['lat'].','.$dealer_address['lng'].'" class="btn white">Get Directions</a>
				<a href="'. get_permalink($dealer_id).'" class="btn arrow black">Dealer Details</a>
			</article>
		';
		echo $html;
	}
	// Always die in functions echoing ajax content
	wp_die();
}

add_action( 'wp_ajax_nopriv_fetch_individual_dealer', 'fetch_individual_dealer' );
add_action( 'wp_ajax_fetch_individual_dealer', 'fetch_individual_dealer' );