completed_productsPage

gistfile1.txt

<?php /* Template Name: Products */ ?>

<?php get_header(); 
$StateRelatedProducts=productsRelatedToZipcodeState();
$product_categories_data = categories(); //defined in functions.php
?>

<script type="text/javascript">
<?php
$roofstyle_pod = pods('roof_style_dropdown');
$params = array(
	"select" => "*,image.ID"
	);
$roofstyle_pod->find($params,$limit=-1);
$roofStyledropdown_pod = $roofstyle_pod->data();
$roofStyle_data = [];
foreach( $roofStyledropdown_pod as $name => $roofStyle_value){
	$roofStyle_image=pods_image_url ( $roofStyle_value->ID, $size = null, $default = 0, $force = false ) ;
	$hash = array(
		"roofStyle_image" => $roofStyle_image,
		"short_description" => $roofStyle_value->short_description,
		"name" => $roofStyle_value->name,
		);
	array_push($roofStyle_data,$hash );
}
echo "var roofStyle_dropdown=".json_encode($roofStyle_data).";";

$height_pod = pods('product_height');
$params = array();
$height_pod->find($params,$limit=-1);
$heightdropdown_data = $height_pod->data();
echo "var height_dropdown=".json_encode($heightdropdown_data).";";

$width_pod = pods('product_width');
$params = array();
$width_pod->find($params,$limit=-1);
$widthdropdown_data = $width_pod->data();
echo "var width_dropdown=".json_encode($widthdropdown_data).";";

$length_pod = pods('product_length');
$params = array();
$length_pod->find($params,$limit=-1);
$lengthdropdown_data = $length_pod->data();
echo "var length_dropdown=".json_encode($lengthdropdown_data).";";

$product_style_pod = pods('product_style');
if($_GET['category']){
	$params = array(
		"where" => "product_category.name='".$_GET['category']."'",
		);
}else{
	$params = array(
		"where" => "product_category.name='".$product_categories_data[0]->name."'",
		);
}
$product_style_pod->find($params,$limit=-1);
$productstyle_dropdown = $product_style_pod->data();
echo "var productstyle_dropdown=".json_encode($productstyle_dropdown).";";

if($StateRelatedProducts){
	$pod = pods('product');
	if($_GET['category']){
		$params = array(
			"select" => "*, product_roofstyle.name as product_roofstyle_name, product_image.ID,product_height.name as product_height,product_width.name as product_width,product_length.name as product_length,product_style.name as product_style, category.name as category_name",
		"where" => "t.name IN ($StateRelatedProducts) AND category.name ='".$_GET['category']."' ",  //Horizontal,Vertical(related to state LA) products of Carport
		"orderby" => "d.id"
		);
	} else {
		$params = array(
			"select" => "*, product_roofstyle.name as product_roofstyle_name, product_image.ID,product_height.name as product_height,product_width.name as product_width,product_length.name as product_length,product_style.name as product_style, category.name as category_name",
		"where" => "t.name IN ($StateRelatedProducts) AND category.name='".$product_categories_data[0]->name."'", //Horizontal,Vertical(related to state LA) products of Agriculture
		"orderby" => "d.id"
		);
	}
	$pod->find($params,$limit=-1);
	$pod_data = $pod->data();
	$product_data = [];
	if($pod_data){
		while($pod->fetch()){
			// $product_image=pods_image_url ( $value->ID, $size = null, $default = 0, $force = false ) ;
			$hash = array(
				"image" => $pod->display('product_image'),
				"title" => $pod->display('product_title'),
				"dimension" => $pod->display('product_dimension'),
				"short_description" => $pod->field('product_shortdescription'),
				"product_price" => $pod->field('product_price'),
				"product_height" => $pod->field('product_height') ,
				"product_width" => $pod->field('product_width'),
				"product_length" => $pod->field('product_length'),
				"roofstyle" => $pod->field('product_roofstyle_name'),
				"product_code" => $pod->field('product_code'),
				"product_category" => $pod->field('category_name'),
				"product_style" => $pod->field('product_style'),
				"product_id" => $pod->field('id'),
				"model_configuration" => $pod->display('model_configuration')
				);
			array_push($product_data,$hash );
		} //Ends While Loop
	} //Ends if Category Products  present 
} //Ends if Area Products present 
echo "var products=".json_encode($product_data).";";
echo "var product_url='".get_page_link( get_page_by_title( 'productDetail' )->ID )."';";
?>
		console.log(height_dropdown);
		// console.log(products);
		// console.log(roofStyle_dropdown);
		// console.log(height_dropdown);

		function requestedProduct(product_id){
			document.getElementById('requested_product_id').value = product_id;
		}

		$(document).ready(function(){
			roofStyleDropdown();
			heightDropdown();
			widthDropdown();
			lengthDropdown();
			productStyle();
	// product_render(products);
	function roofStyleDropdown(){
		var select = $('.product-filter2 select').attr("id","productFilter2").attr("name", "productFilter");
		select.append('<option value="Select Roof Style">Select Roof Style </option>');
		console.log(roofStyle_dropdown);
		$.each(roofStyle_dropdown, function(key,value){
			// select.append($("<option></option>").attr("value",value["roof_style_name"]).text(value["roof_style_name"]));
			select.append($("<option></option>").attr("value",value["name"]).text(value["name"]));
		});
	}
	function heightDropdown(){
		var height_select = $('.productFilter3 select').attr("id","productFilter3").attr("name", "productFilter");
		height_select.append('<option value="Select Height">Select Height </option>');
		$.each(height_dropdown, function(key,height_value){
			height_select.append($("<option></option>").attr("value",height_value["name"]).text(height_value["name"]));
		});
	}
	function widthDropdown(){
		var width_select = $('.productFilter4 select').attr("id","productFilter4").attr("name", "productFilter");
		width_select.append('<option value="Select Width">Select Width </option>');
		$.each(width_dropdown, function(key,width_value){
			width_select.append($("<option></option>").attr("value",width_value["name"]).text(width_value["name"]));
		});
	}
	function lengthDropdown(){
		var length_select = $('.productFilter5 select').attr("id","productFilter5").attr("name", "productFilter");
		length_select.append('<option value="Select Length">Select Length </option>');
		$.each(length_dropdown, function(key,length_value){
			length_select.append($("<option></option>").attr("value",length_value["name"]).text(length_value["name"]));
		});
	}
	function productStyle(){
		var url = new URL(window.location.href);
		var searchParams = new URLSearchParams(url.search);
		// alert(searchParams.get('productStyle'));
		var url_productStyle = searchParams.get('productStyle');
		if(url_productStyle){
			$('.productFilter6').show();
			var productStyle_select = $('.productFilter6 select').attr("id","productFilter6").attr("name", "productFilter6");
			productStyle_select.append('<option value="Select ProductStyle">Select ProductStyle </option>');
			$.each(productstyle_dropdown, function(key,productstyle_value){
				productStyle_select.append($("<option></option>").attr("value",productstyle_value["name"]).text(productstyle_value["name"]));
			});
			$('[name=productFilter6]').val(url_productStyle);
		}else{
			$('.productFilter6').show();
			var productStyle_select = $('.productFilter6 select').attr("id","productFilter6").attr("name", "productFilter6");
			productStyle_select.append('<option value="Select ProductStyle">Select ProductStyle </option>');
			$.each(productstyle_dropdown, function(key,productstyle_value){
				productStyle_select.append($("<option></option>").attr("value",productstyle_value["name"]).text(productstyle_value["name"]));
			});
		}
	}
	function RoofStyleDropdownText(){
		var selected_roofStyle = $("#productFilter2").val();
		if($("#productFilter2").val() === "Select Roof Style"){
			$('#roofstyle_data').html("");
			$('#roofstyle_image').html("");
		}
		$.each(roofStyle_dropdown, function(key,value){
			if(value["name"] == selected_roofStyle){
				console.log(value);
				var roofstyle_testImage=value['roofStyle_image'];
				var short_description=value["short_description"];
				console.log("Hii");
				console.log(short_description);
				// console.log("Imagee");
				// console.log(roofstyle_testImage);
				$('#roofstyle_data').html(short_description);
				$('#roofstyle_image').html('<img class="align-self-center mr-3" width="200px" src="'+roofstyle_testImage+'" alt="Product placeholder image">');
			}
		});
	}
	// if(products){
		$(document).on("change","#productFilter2",RoofStyleDropdownText);
	// }
	$('ul.product_category a').click(function(){
		var selected_category = $(this).text();
		<?php
		echo "var product_url='".get_page_link( get_page_by_title('Products')->ID )."';";
		?>
		return window.location = product_url+"?category="+selected_category;
	});
	function productFilter(){
		// debugger;
		var  filter_list = roofstyleFilter(products);
		filter_list = heightFilter(filter_list);
		filter_list = widthFilter(filter_list);
		filter_list = lengthFilter(filter_list);
		filter_list = productStyle_Filter(filter_list);
		var sorted_list = priceSort(filter_list);
		product_render(sorted_list);
	}
	if(products){
		// debugger;
		productFilter();
	}else{
		// debugger;
		$("#products_notPresent").html( "<br><h6 class='text-center'>No Products Available Related To This Area</h6><br>" );
	}
	function roofstyleFilter(prod_list){
		// debugger;
		var filter_option = $("#productFilter2").val();
		if($("#productFilter2").val() === "Select Roof Style"){
			return prod_list;
		}
		var product_filter = [];
		$.each(prod_list, function(key,value){
			if (value["roofstyle"].toLowerCase() == filter_option.toLowerCase()){
				product_filter.push(value);
			}
		});
		// console.log(product_filter);
		return product_filter
	}
	$(document).on("change","#productFilter2",productFilter);
	function heightFilter(prod_list){
		console.log(prod_list);
		var selected_height = $("#productFilter3").val();
		if($("#productFilter3").val() === "Select Height"){
			return prod_list;
		}
		var height_filter = [];
		$.each(prod_list, function(key,value){
			if (value["product_height"] == selected_height){
				height_filter.push(value);
			}
		});
		// console.log(height_filter);
		return height_filter
	}
	$(document).on("change","#productFilter3",productFilter);
	function widthFilter(prod_list){
		console.log(prod_list);
		var selected_width = $("#productFilter4").val();
		if($("#productFilter4").val() === "Select Width"){
			return prod_list;
		}
		var width_filter = [];
		$.each(prod_list, function(key,value){
			if (value["product_width"] == selected_width){
				width_filter.push(value);
			}
		});
		// console.log(width_filter);
		return width_filter
	}
	$(document).on("change","#productFilter4",productFilter);
	function lengthFilter(prod_list){
		console.log(prod_list);
		var selected_length = $("#productFilter5").val();
		if($("#productFilter5").val() === "Select Length"){
			return prod_list;
		}
		var length_filter = [];
		$.each(prod_list, function(key,value){
			if (value["product_length"] == selected_length){
				length_filter.push(value);
			}
		});
		console.log(length_filter);
		return length_filter
	}
	$(document).on("change","#productFilter5",productFilter);
	function productStyle_Filter(prod_list){
		console.log(prod_list);
		var selected_style = $("#productFilter6").val();
		if($("#productFilter6").val() === "Select ProductStyle"){
			return prod_list;
		}
		var productStyle_filter = [];
		$.each(prod_list, function(key,value){
			if (value["product_style"] == selected_style){
				productStyle_filter.push(value);
			}
		});
		// console.log(productStyle_filter);
		return productStyle_filter;
	}
	$(document).on("change","#productFilter6",productFilter);
	function priceSort(filter_list){
		var product_sort = null;
		if($("#productFilter1").val() === "1"){
			product_sort = filter_list.slice();
			product_sort.sort(function(a,b){
				return parseInt(a.product_price) > parseInt(b.product_price);
			});
			// console.log(product_sort);
		}else if($("#productFilter1").val() === "2"){
			product_sort = filter_list.slice();
			product_sort.sort(function(a,b){
				return parseInt(a.product_price) < parseInt(b.product_price);
			});
		}else{
			product_sort = filter_list;
		}
		return product_sort;
	}
	$(document).on("change","#productFilter1",productFilter);
	function product_render(product_sort){
		// debugger;
		$("#row_data").html("");
		$("#products_notPresent").html( "" );
		if((product_sort !== null) && (product_sort.length > 0 )){
			$.each(product_sort, function(key,value){
				var product_code = "";
				if(value['model_configuration']){
					product_code = '?code=' + value['model_configuration'];
				}
				var data = `
				<div class="col-xs-12 col-md-6 col-lg-4 product">
				<div class="card">
				<div id="requested-product-message${value['product_id']}"></div>
				<a href="${product_url}?product_code=${value['product_code']}">
				<div class="card-img-top" style="background-image: url('${value['image']}')"></div>
				<div class="card-block px-0">
				<h4 class="card-title text-capitalize">${value["title"]}</h4>
				<p class="card-text" >${value["dimension"]}</p>
				<input type="hidden"  id="requested_product_id" name="product_quote" value="" >
				<p class="card-description" >${value["short_description"]}</p>
				<p class="text-danger mb-0 d-inline-flex align-items-end price" >${value["product_price"]}</p>
				</div>
				</a>
				<div class="card-modify-build">
				<a class="btn btn-danger d-inline-flex text-white" onclick="requestedProduct(${value['product_id']})" data-toggle="modal" data-target="#requestQuoteModal">Request Quote</a>
				<a class="btn btn-danger d-inline-flex ml-2" href='<?php echo get_page_link( get_page_by_title( 'Build&Price' )->ID ) ?>${product_code}'>Modify Build</a>
				</div>
				</div>
				</div>`
				$( "#row_data").append(data);
			});
}else{
	$("#products_notPresent").html( "<h6>Products Are Not Available Related To This Data</h6><br>" );
}
}
});
</script>
<section class="py-60">
	<div class="container">
		<h5 class="dealer-heading text-danger text-center">Explore Our Products</h5>
		<!-- Nav tabs -->
		<!-- <div class="row"> -->
		<!-- <div class="col-md-7"> -->
		<?php
		if($_GET["category"])
			{?>
		<ul class="nav nav-tabs custom-nav-tabs border-bottom-0 mb-5 product_category" role="tablist">
			<?php
			foreach ($product_categories_data as $key => $product_category)
			{
				$product_category_name = $product_category->name;
				$category_name = preg_replace("/[^\w]+/", "-", $product_category_name);
				if($_GET["category"] == $product_category->{"name"} ){?>
				<li class="nav-item">
					<a class="nav-link mx-0 active" data-toggle="tab" href="#<?php  echo $category_name ?>" role="tab"><?php echo $product_category_name ?></a>
				</li>
				<?php
			}
			else{ ?>
			<li class="nav-item">
				<a class="nav-link mx-0 " data-toggle="tab" href="#<?php echo $category_name ?>" role="tab"><?php echo $product_category_name ?></a>
			</li>
			<?php
		}
	}?>
</ul>
<?php
}else{?>
<ul class="nav nav-tabs custom-nav-tabs border-bottom-0 mb-5 product_category" role="tablist">
	<?php
	foreach ($product_categories_data as $key => $product_category) {
		$product_category_name = $product_category->name;
		$category_name = preg_replace("/[^\w]+/", "-", $product_category_name);
		if($key==0)
			{ ?>
		<li class="nav-item active">
			<a class="nav-link mx-0 active" data-toggle="tab" href="#<?php  echo $category_name ?>" role="tab"><?php echo $product_category_name ?></a>
		</li>
		<?php
	}else{ ?>
	<li class="nav-item">
		<a class="nav-link mx-0 " data-toggle="tab" href="#<?php echo $category_name ?>" role="tab"><?php echo $product_category_name ?></a>
	</li>
	<?php
}
}
?>
</ul>
<?php
} ?>
<!-- </div> -->
<div class="float-right products_snow_loder">
	<div class="row py-30 py-0 mtm-10">
		<div class="col-md-4">
			<img src="<?php bloginfo('template_directory'); ?>/images/icons/icon_testimonials_red.svg" alt="" height="26px">
			<h5 id="ground_load" class="zipload text-danger font-montserrat-semibold"><?php echo $_SESSION['ground_snow']?></h5>
			<p class="font-montserrat-regular text-light-grey mt-2 snow-load-text font-14">GROUND SNOW LOAD</p>
		</div>
		<div class="col-md-4">
			<img src="<?php bloginfo('template_directory'); ?>/images/icons/icon_testimonials_red.svg" alt="" height="26px">
			<h5 id="ground_load" class="zipload text-danger font-montserrat-semibold"><?php echo $_SESSION['roof_snow']?></h5>
			<p class="font-montserrat-regular text-light-grey mt-2 snow-load-text font-14">ROOF SNOW (LIVE) LOAD</p>
		</div>
		<div class="col-md-4">
			<img src="<?php bloginfo('template_directory'); ?>/images/icons/icon_testimonials_red.svg" alt="" height="26px">
			<h5 id="ground_load" class="zipload text-danger font-montserrat-semibold"><?php echo $_SESSION['wind_snow']?></h5>
			<p class="font-montserrat-regular text-light-grey mt-2 snow-load-text font-14">WIND LOAD</p>
		</div>
	</div>
	<p class="font-montserrat-regular"><?php echo $_SESSION['city'].",".$_SESSION['state'].",".$_SESSION['zipcode']?></p>
</div>
<div class="clearfix"></div>
<!-- </div> -->
<?php
// unset($_SESSION['ground_snow']);
// unset($_SESSION['roof_snow']);
// unset($_SESSION['wind_snow']);
?>
<!-- Tab panes -->
<div class="tab-content">
	<div class="tab-pane active" id="carport" role="tabpanel">
		<div class="mb-3 toogleFilter_btn cp"><img src="<?php bloginfo('template_url'); ?>/images/icons/icon_filter.svg" class="mr-3" height="19px">Filters</div>
		<div class="row filters mb-5 toogleFilters">
			<div class="col-sm-6 col-md-4 col-lg-2 mb-3 mb-lg-0">
				<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>Select Price</option>
					<option value="1">Low to high</option>
					<option value="2">High to low</option>
				</select>
			</div>
			<div class="col-sm-6 col-md-4 col-lg-2 mb-3 mb-lg-0 product-filter2 productfilter">
				<select id="productFilter2" class="form-control" name="productFilter" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
				</select>
			</div>
			<div class="col-sm-6 col-md-4 col-lg-2 mb-3 mb-lg-0 productFilter3 productfilter">
				<select id="productFilter3" class="form-control" name="productFilter" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
				</select>
			</div>
			<div class="col-sm-6 col-md-4 col-lg-2 mb-3 mb-lg-0 productFilter4 productfilter">
				<select id="productFilter4" class="form-control" name="productFilter" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
				</select>
			</div>
			<div class="col-sm-6 col-md-4 col-lg-2 mb-3 mb-lg-0 productFilter5 productfilter">
				<select id="productFilter5" class="form-control" name="productFilter" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
				</select>
			</div>
			<div class="col-sm-6 col-md-4 col-lg-2 mb-3 mb-lg-0 productFilter6 productfilter" style="display:none">
				<select id="productFilter6" class="form-control" name="productFilter6"  style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);" >
				</select>
			</div>
		</div>
		<div id="" class="mt-5">
			<!-- roofStyle_image -->
			<!-- <img id="roofStyle_image" src=""></img> -->
			<!-- <div class="card-img-top" style="background-image: url('${value['image']}')"></div> -->
			<div class="media">
				<span id="roofstyle_image"></span>
				<div class="media-body align-self-center">
					<p id="roofstyle_data"></p>
				</div>
			</div>
		</div>
		
		<div class="row" id="row_data">
		</div>
		<p id="products_notPresent"></p>
	</div>
	<?php
	foreach ($product_categories_data as $key => $product_category) {
		$product_category_name = $product_category->name;
		$category_name = preg_replace("/[^\w]+/", "-", $product_category_name);?>
		<div class="tab-pane" id="<?php echo $category_name ?>" role="tabpanel">...</div>
		<?php
	}?>
</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>
	<?php if(isset($_SESSION['state'])):
	var_dump($_SESSION['state']);
	var_dump($_SESSION['ground_snow']);
	var_dump($_SESSION['roof_snow']);
	var_dump($_SESSION['wind_snow']);
	endif?>
</div>
<script>
$('.toogleFilters').hide();
$('.toogleFilter_btn').on('click',function(){
	$('.toogleFilters').toggle();
});
</script>
<?php get_footer()?>