product.php

<?php /* Template Name: Products */ ?>
<?php get_header()?>

<script type="text/javascript">
<?php 
$pod = pods('product');
$params = array(
	"where" => "d.product_price"
	); 
$pod->find($params,$limit=-1);
$pod_data = $pod->data();
$product_data = [];
foreach( $pod_data as $name => $value){
	$hash = array(
		"title" => $value->product_title,
		"dimension" => $value->product_dimension,
		"short_discription" => $value->product_shortdescription,
		"product_price" => $value->product_price
		);
	array_push($product_data,$hash );

}
echo "var product_data=".json_encode($product_data).";";

?>
console.log("Encode product data ---> ",product_data);

$(document).ready(function(){
	var products = product_data;
	console.log('Products --> ', products);
	
	var sort;
	sort = function (){
				$("#productFilter1").change(function(){

				if($("#productFilter1").val() === "1"){
					alert( this.value );
					products = products.sort(function(a,b){
						return parseInt(a.product_price) > parseInt(b.product_price);

					});
					console.log(products);
				}
				else if ($("#productFilter1").val() === "2"){
					alert( this.value );
					products = products.sort(function(a,b){
						return parseInt(a.product_price) < parseInt(b.product_price);
					});
				}
			html_rendering(products);
		});
	}


	html_rendering = function (products){
		$.each(products, function(key,value){
			var data = `
			<div class="col-xs-12 col-md-6 col-lg-6 product">
			<div class="card">
			<a href="<?php echo get_page_link( get_page_by_title( productDetail )->ID ); ?>">
			<img class="card-img-top" src="<?php bloginfo('template_url'); ?>/images/carport/open_horizontal_carport.png" height="250px">
			<div class="card-block px-0">
			<h4 class="card-title">${value["title"]}</h4>
			<p class="card-text" >${value["dimension"]}</p>
			<p class="card-description mb-0" >${value["short_discription"]}</p>
			</div>
			</a>
			<div class="d-flex justify-content-between card-modify-build">
			<p class="text-danger mb-0 d-inline-flex align-items-end price" >${value["product_price"]}</p>
			<a class="btn btn-danger d-inline-flex text-white" data-toggle="modal" data-target="#requestQuoteModal">Request Quote</a>
			<a class="btn btn-danger d-inline-flex" href="#">Modify Build</a>
			</div>
			</div>
			</div>`
			$( "#row_data").append(data );
		});
	}

	
});
</script>

<section class="py-60">
	<div class="container">
		<h5 class="dealer-heading text-danger text-center">Explore Our Products</h5>
		<div class="row filters mb-5">
			<div class="col-xs-6 col-md-3 text-center align-self-center"><img src="<?php bloginfo('template_url'); ?>/images/icons/icon_filter.svg" class="mr-3" height="19px">Filters</div>
			<div class="col-xs-6 col-md-3">
				<select id="productFilter1" class="form-control" name="productFilter" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);" >
					<option value="0" selected>Price</option>
					<option value="1">Low to high</option>
					<option value="2">High to low</option>
				</select>
			</div>
			<div class="col-xs-6 col-md-3">
				<select id="productFilter2" class="form-control" name="productFilter" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
					<option value="0" selected>Roof Style</option>
					<option value="1">Standard</option>
					<option value="2">Vertical</option>
					<option value="3">Horizontal</option>
					<option value="4">Hexagon</option>
				</select>
			</div>
		</div>
		<div class="row" id="row_data">


<!-- 
					<div class="col-xs-12 col-md-6 col-lg-6 product">
						<div class="card">
							<a href="<?php# echo get_page_link( get_page_by_title( productDetail )->ID ); ?>">
								<img class="card-img-top" src="<?php# bloginfo('template_url'); ?>/images/carport/open_horizontal_carport.png" height="250px">
								<div class="card-block px-0">
									<h4 class="card-title" id="title">Open Horizontal Carport</h4>
									<p class="card-text" id="dimension">42x20x9/6</p>
									<p class="card-description mb-0" id="description">Ranging from 26’ wide and up, our reinforced buildings are commonly used for protecting investment</p>
								</div>
							</a>
							<div class="d-flex justify-content-between card-modify-build">
								<p class="text-danger mb-0 d-inline-flex align-items-end price" id="price">$ 1088</p>
								<a class="btn btn-danger d-inline-flex text-white" data-toggle="modal" data-target="#requestQuoteModal">Request Quote</a>
								<a class="btn btn-danger d-inline-flex" href="#">Modify Build</a>
							</div>
						</div>
					</div>
				-->

				
					<!-- <div class="col-xs-12 col-md-6 col-lg-6 product">
						<div class="card">
							<a href="<?php# echo get_page_link( get_page_by_title( productDetail )->ID ); ?>">
								<img class="card-img-top" src="<?php# bloginfo('template_url'); ?>/images/carport/open_horizontal_carport.png" height="250px">
								<div class="card-block px-0">
									<h4 class="card-title">Open Horizontal Carport</h4>
									<p class="card-text">42x20x9/6</p>
									<p class="card-description mb-0">Ranging from 26’ wide and up, our reinforced buildings are commonly used for protecting investment</p>
								</div>
							</a>
							<div class="d-flex justify-content-between card-modify-build">
								<p class="text-danger mb-0 d-inline-flex align-items-end price">$ 1088</p>
								<a class="btn btn-danger d-inline-flex text-white" data-toggle="modal" data-target="#requestQuoteModal">Request Quote</a>
								<a class="btn btn-danger d-inline-flex" href="#">Modify Build</a>
							</div>
						</div>
					</div> -->

				<!-- <div class="col-xs-12 col-md-6 col-lg-4 product">
					<div class="card">
						<a href="<?php# echo get_page_link( get_page_by_title( productDetail )->ID ); ?>">
							<img class="card-img-top" src="<?php# bloginfo('template_url'); ?>/images/carport/open_standard_carport.png" height="250px">
							<div class="card-block px-0">
								<h4 class="card-title">Open Standard Carport</h4>
								<p class="card-text">54x26x12/9</p>
								<p class="card-description mb-0">From Agricultural Barns to Loafing sheds, we offer a large selection of buildings for your farming…</p>
							</div>
						</a>
						<div class="d-flex justify-content-between card-modify-build">
							<p class="text-danger mb-0 d-inline-flex align-items-end price">$ 1111</p>
							<a class="btn btn-danger d-inline-flex text-white" data-toggle="modal" data-target="#requestQuoteModal">Request Quote</a>
							<a class="btn btn-danger d-inline-flex" href="#">Modify Build</a>
						</div>
					</div>
				</div>
				<div class="col-xs-12 col-md-6 col-lg-4 product">
					<div class="card">
						<a href="product_detail.html">
							<img class="card-img-top" src="<?php# bloginfo('template_url'); ?>/images/carport/half_sides_vertical_carport.png" height="250px">
							<div class="card-block px-0">
								<h4 class="card-title">Half sides vertical carport</h4>
								<p class="card-text">26x50x7</p>
								<p class="card-description mb-0">The greatest protection for your vehicle against the elements can be as simple as a single carport…</p>
							</div>
						</a>
						<div class="d-flex justify-content-between card-modify-build">
							<p class="text-danger mb-0 d-inline-flex align-items-end price">$ 1048</p>
							<a class="btn btn-danger d-inline-flex text-white" data-toggle="modal" data-target="#requestQuoteModal">Request Quote</a>
							<a class="btn btn-danger d-inline-flex" href="#">Modify Build</a>
						</div>
					</div>
				</div>

				<div class="col-xs-12 col-md-6 col-lg-4 product">
					<div class="card">
						<a href="product_detail.html">
							<img class="card-img-top" src="<?php# bloginfo('template_url'); ?>/images/carport/half_sides_standard_carport.png" height="250px">
							<div class="card-block px-0">
								<h4 class="card-title">Half Sides Standard Carport</h4>
								<p class="card-text">30x31x12</p>
								<p class="card-description mb-0">Unleash your imagination and transform your creativity into the building of your dreams. Let us he…</p>
							</div>
						</a>
						<div class="d-flex justify-content-between card-modify-build">
							<p class="text-danger mb-0 d-inline-flex align-items-end price">$ 1888</p>
							<a class="btn btn-danger d-inline-flex text-white" data-toggle="modal" data-target="#requestQuoteModal">Request Quote</a>
							<a class="btn btn-danger d-inline-flex" href="#">Modify Build</a>
						</div>
					</div>
				</div>
				<div class="col-xs-12 col-md-6 col-lg-4 product">
					<div class="card">
						<a href="product_detail.html">
							<img class="card-img-top" src="<?php# bloginfo('template_url'); ?>/images/carport/half_side_horizontal_carport.png" height="250px">
							<div class="card-block px-0">
								<h4 class="card-title">Half Sides Horizontal Carport</h4>
								<p class="card-text">8W x 5L x10H</p>
								<p class="card-description mb-0">Make your next hunting trip a success! Our hunting blinds are as strong as they are effective.</p>
							</div>
						</a>
						<div class="d-flex justify-content-between card-modify-build">
							<p class="text-danger mb-0 d-inline-flex align-items-end price">$ 1098</p>
							<a class="btn btn-danger d-inline-flex text-white" data-toggle="modal" data-target="#requestQuoteModal">Request Quote</a>
							<a class="btn btn-danger d-inline-flex" href="#">Modify Build</a>
						</div>
					</div>
				</div>
				<div class="col-xs-12 col-md-6 col-lg-4 product">
					<div class="card">
						<a href="product_detail.html">
							<img class="card-img-top" src="<?php# bloginfo('template_url'); ?>/images/carport/enclosed_standard_carport.png" height="250px">
							<div class="card-block px-0">
								<h4 class="card-title">Enclosed Standard Carport</h4>
								<p class="card-text">18′ x 26′ x 9’/7′</p>
								<p class="card-description mb-0">The popular lean-to is a great inexpensive addition to your main structure for additional storage</p>
							</div>
						</a>
						<div class="d-flex justify-content-between card-modify-build">
							<p class="text-danger mb-0 d-inline-flex align-items-end price">$ 1333</p>
							<a class="btn btn-danger d-inline-flex text-white" data-toggle="modal" data-target="#requestQuoteModal">Request Quote</a>
							<a class="btn btn-danger d-inline-flex" href="#">Modify Build</a>
						</div>
					</div>
				</div>

				<div class="col-xs-12 col-md-6 col-lg-4 product">
					<div class="card">
						<a href="product_detail.html">
							<img class="card-img-top" src="<?php# bloginfo('template_url'); ?>/images/carport/enclosed_vertical_carport.png" height="250px">
							<div class="card-block px-0">
								<h4 class="card-title">Enclosed Vertical Carport</h4>
								<p class="card-text">18x51x12</p>
								<p class="card-description mb-0">Everyone that has ever owned fabric RV covers know that they are bulky and are prone to crack or d…</p>
							</div>
						</a>
						<div class="d-flex justify-content-between card-modify-build">
							<p class="text-danger mb-0 d-inline-flex align-items-end price">$ 1042</p>
							<a class="btn btn-danger d-inline-flex text-white" data-toggle="modal" data-target="#requestQuoteModal">Request Quote</a>
							<a class="btn btn-danger d-inline-flex" href="#">Modify Build</a>
						</div>
					</div>
				</div>
				<div class="col-xs-12 col-md-6 col-lg-4 product">
					<div class="card">
						<a href="product_detail.html">
							<img class="card-img-top" src="<?php# bloginfo('template_url'); ?>/images/carport/enclosed_horizontal_carport.png" height="250px">
							<div class="card-block px-0">
								<h4 class="card-title">Enclosed Horizontal Carport</h4>
								<p class="card-text">28x36x12</p>
								<p class="card-description mb-0">Our mini-storage units are the perfect addition to any backyard. From a wide variety of models, si…</p>
							</div>
						</a>
						<div class="d-flex justify-content-between card-modify-build">
							<p class="text-danger mb-0 d-inline-flex align-items-end price">$ 1019</p>
							<a class="btn btn-danger d-inline-flex text-white" data-toggle="modal" data-target="#requestQuoteModal">Request Quote</a>
							<a class="btn btn-danger d-inline-flex" href="#">Modify Build</a>
						</div>
					</div>
				</div> -->
			</div>
		</div> <!-- container -->
	</section>
	<hr class="divider my-0">

	<div class="container py-40">
		<p class="text-center mb-0">American Steel Carport's metal structures are engineered to protect your most valuable assets, personal or commercial, for years to come! Our buildings are constructed with the strongest steel materials to provide protection, durability and resistance.</p>
	</div>
	<hr class="divider my-0">

	<section>
		<div class="container-fluid">
			<div class="row news-letter">
				<div class="col-xs-12 col-md-8 align-self-center">
					<h3 class="text-danger">SUBSCRIBE</h3>
					<p class="mb-md-0">Subscribe to our newsletter to get the latest updates and special offers.</p>
				</div>
				<div class="col-xs-12 col-md-4 align-self-center">
					<div class="input-group">
						<input type="text" class="form-control form-control-search" placeholder="Enter your email address" aria-describedby="newsletter-addon">
						<span class="input-group-addon btn btn-danger text-white ml-3" id="newsletter-addon">Subscribe Now</span>
					</div>
				</div>
			</div>
		</div>
	</section>	


	<?php get_footer()?>