Isotope using foreach loop

[peterpp]

Hi,

  I have a parent page named Clients. It has several child pages. I have listed all my clients under Clients. 

I have another page as named Categories. It also has several child pages. I have placed technologies used for clients , sectors etc.

I have created a PageField for Clients child pages, so that i can select Categories child pages.

I am displaying all Categories as a button or tab. When i click on any button or tab(Categories child page), i want to display all Clients child pages of that category. For example if i click Processwire tab or button, all pages that have PageField value processwire should be displayed. 

I am using isotope. 

My code is as below:

page_select is a pagefield.

 <script type="text/javascript">

$(document).ready(function() {

$('#filterOptions li a').click(function() {

// fetch the class of the clicked item

 

 

 

 

var ourClass = $(this).attr('class');

 

var category = $(ourClass).val();

 

console.log("'."+ourClass+"'");

 

// reset the active class on all the buttons

$('#filterOptions li').removeClass('active');

// update the active state on our clicked button

$(this).parent().addClass('active');

 

if(ourClass == 'all-clients-1') {

// show all our items

$('#ourHolder').children('div.item').show(1000);

}

else {

// hide all elements that don't share ourClass

$('#ourHolder').children('div:not(.' + ourClass + ')').hide(1000);

// show all elements that do share ourClass

$('#ourHolder').children('div.' + ourClass).show(1000);

}

return false;

});

});

</script>

 

<div class="wrapper">

<div class="row body-padding">

<?php

$p=$pages->get(1151)->children("include=all");

$i=1;

echo "<ul id='filterOptions'>";

foreach ($p as $k) {

echo "<li><a href='#' class='all-clients-$i'>$k->title</a></li>";

$i++;

}

echo "</ul>";

?>

 

<div id="ourHolder">

<div class="row item all-clients-1">

      <?php 

     $posts = $pages->find("template=clients-detail,include=all, page_select=All");

echo "<ul>";

  foreach ($posts as $k) {

$image=$k->landing_page_image;

   echo "<a href='{$image->description}' target='_blank'>

   <li class='large-2 columns clients'><img src='{$image->httpUrl}' /></li></a>";

 }

echo "</ul>";

 ?>

</div>

 

<div class="row item all-clients-2">

  <?php 

$posts = $pages->find("template=clients-detail, include=all, page_select=Processwire");

echo "<ul>";

 foreach ($posts as $k) {

$image=$k->landing_page_image;

echo "<a href='{$image->description}' target='_blank'>

    <li class='large-3 columns clients'><img src='{$image->httpUrl}' /></li></a>";

        }

echo "</ul>";

 ?>

</div>

 

<div class="item all-clients-3">

<?php 

$posts = $pages->find("template=clients-detail, include=all, page_select=PHP");

echo "<ul>";

foreach ($posts as $k) {

$image=$k->landing_page_image;

echo "<a href='{$image->description}' target='_blank'>

<li class='large-3 columns clients'><img src='{$image->httpUrl}' /></li></a>";

}

echo "</ul>";

?>

</div>

 

</div>

</div>

 

</div>

It is working fine but everytime i have to write a block for each category, like above, i have to write for All, Processwire, PHP and so on....  I want it to  happen using foreach loop. So that i dont have write code for each pagefield value. 

Plz help me..

Regards,

Pravin

[Martijn Geerts]

Pravin 

I think you would have more change to get you post answered when you make your post more readable.

Use the [] button for better readability of the code.

[ESRCH]

Hi,

Here is the formatted version (I did it to see how I could help).

<script type="text/javascript">
	$(document).ready(function() {
		$('#filterOptions li a').click(function() {

			// fetch the class of the clicked item
			var ourClass = $(this).attr('class');
			var category = $(ourClass).val();
			console.log("'."+ourClass+"'");

			// reset the active class on all the buttons
			$('#filterOptions li').removeClass('active');

			// update the active state on our clicked button
			$(this).parent().addClass('active');
			 
			if(ourClass == 'all-clients-1') {
				// show all our items
				$('#ourHolder').children('div.item').show(1000);
			} else {
				// hide all elements that don't share ourClass
				$('#ourHolder').children('div:not(.' + ourClass + ')').hide(1000);
				// show all elements that do share ourClass
				$('#ourHolder').children('div.' + ourClass).show(1000);
			}
			return false;
		});
	});
</script>
 
<div class="wrapper">
	<div class="row body-padding">
		<?php
			$p=$pages->get(1151)->children("include=all");
			$i=1;
			echo "<ul id='filterOptions'>";
			foreach ($p as $k) {
				echo "<li><a href='#' class='all-clients-$i'>$k->title</a></li>";
				$i++;
			}
			echo "</ul>";
		?>
	 
		<div id="ourHolder">
			<div class="row item all-clients-1">
				<?php 
					$posts = $pages->find("template=clients-detail,include=all, page_select=All");
					echo "<ul>";
					foreach ($posts as $k) {
						$image=$k->landing_page_image;
						echo "<a href='{$image->description}' target='_blank'>
						<li class='large-2 columns clients'><img src='{$image->httpUrl}' /></li></a>";
					}
					echo "</ul>";
				?>
			</div>
			 
			<div class="row item all-clients-2">
				<?php 
					$posts = $pages->find("template=clients-detail, include=all, page_select=Processwire");
					echo "<ul>";
					foreach ($posts as $k) {
						$image=$k->landing_page_image;
						echo "<a href='{$image->description}' target='_blank'>
						<li class='large-3 columns clients'><img src='{$image->httpUrl}' /></li></a>";
					}
					echo "</ul>";
				?>
			</div>
			 
			<div class="item all-clients-3">
				<?php 
					$posts = $pages->find("template=clients-detail, include=all, page_select=PHP");
					echo "<ul>";
					foreach ($posts as $k) {
						$image=$k->landing_page_image;
						echo "<a href='{$image->description}' target='_blank'>
						<li class='large-3 columns clients'><img src='{$image->httpUrl}' /></li></a>";
					}
					echo "</ul>";
				?>
			</div>
		 
		</div>
	</div>
 
</div>

[ESRCH]

Hi Pravin,

I had a look at your code, and it seems that you are trying to do Isotope's manually. Below is a possible way of achieving your goal with Isotope.

My assumptions are:

• The page with id 1151 is the Categories page, under which the different categories live.
• page_select is the field in the "client-details" template that refers to a category (you should maybe rename it to "category")
• There is only one category per client

I used the category id as the filter class (prepending a "c" since a class name must start with a letter, underscore or hyphen).

<?php 

function categoryClass($client) {
	return "c" . $client->page_select->id;
}

 ?>

<script type="text/javascript">
	$(document).ready(function() {
		// Initialize Isotope
		$("#ourHolder").isotope({
			itemSelector: ".item"
		});

		// Filter buttons
		$('#filterOptions li a').click(function() {
			var filterValue = $(this).attr('data-filter');
			$container.isotope({filter: filterValue});
		});
	});
</script>
 
<div class="wrapper">
	<div class="row body-padding">
		<!-- Filter options -->
		<ul id="filterOptions">
			<li><a href="#" data-filter="*">All</a></li>
			<?php foreach ($pages->get(1151)->children("include=all") as $category): ?>
				<li><a href="#" data-filter=".c<?php echo $category->id; ?>"><?php echo $category->title; ?></a></li>
			<?php endforeach ?>
		</ul>

		<!-- Items -->
		<div id="ourHolder">
			<?php foreach ($pages->find("template=clients-detail, include=all") as $client): ?>
				<ul class="row item <?php echo categoryClass($client); ?>">
					<a href="<?php echo $client->landing_page_image->description ?>">
						<li class="large-2 columns clients"><img src="<?php echo $client->landing_page_image->httpUrl; ?>"></li>
					</a>
				</ul>
			<?php endforeach ?>
		 
		</div>
	</div>
 
</div>

If you have several categories per client, just modify the categoryClass function to return "c1234 c5678 " instead of just "c1234":

function categoryClass($client) {
	$classes = "";
	foreach ($client->page_select as $category) {
		$classes .= "c" . $category->id . " ";
	}
	return $classes;
}

I haven't tested this, so if it doesn't work, please let me know.

I hope that this helps.

[peterpp]

Hi Pravin,

I had a look at your code, and it seems that you are trying to do Isotope's manually. Below is a possible way of achieving your goal with Isotope.

My assumptions are:

• The page with id 1151 is the Categories page, under which the different categories live.
• page_select is the field in the "client-details" template that refers to a category (you should maybe rename it to "category")
• There is only one category per client

I used the category id as the filter class (prepending a "c" since a class name must start with a letter, underscore or hyphen).

<?php 

function categoryClass($client) {
	return "c" . $client->page_select->id;
}

 ?>

<script type="text/javascript">
	$(document).ready(function() {
		// Initialize Isotope
		$("#ourHolder").isotope({
			itemSelector: ".item"
		});

		// Filter buttons
		$('#filterOptions li a').click(function() {
			var filterValue = $(this).attr('data-filter');
			$container.isotope({filter: filterValue});
		});
	});
</script>
 
<div class="wrapper">
	<div class="row body-padding">
		<!-- Filter options -->
		<ul id="filterOptions">
			<li><a href="#" data-filter="*">All</a></li>
			<?php foreach ($pages->get(1151)->children("include=all") as $category): ?>
				<li><a href="#" data-filter=".c<?php echo $category->id; ?>"><?php echo $category->title; ?></a></li>
			<?php endforeach ?>
		</ul>

		<!-- Items -->
		<div id="ourHolder">
			<?php foreach ($pages->find("template=clients-detail, include=all") as $client): ?>
				<ul class="row item <?php echo categoryClass($client); ?>">
					<a href="<?php echo $client->landing_page_image->description ?>">
						<li class="large-2 columns clients"><img src="<?php echo $client->landing_page_image->httpUrl; ?>"></li>
					</a>
				</ul>
			<?php endforeach ?>
		 
		</div>
	</div>
 
</div>

If you have several categories per client, just modify the categoryClass function to return "c1234 c5678 " instead of just "c1234":

function categoryClass($client) {
	$classes = "";
	foreach ($client->page_select as $category) {
		$classes .= "c" . $category->id . " ";
	}
	return $classes;
}

I haven't tested this, so if it doesn't work, please let me know.

I hope that this helps.

HI  Esrch,

   Thanx for your help. One client can have multiple categories.

Regards,

Pravin