Isotope using foreach loop

peterpp · January 20, 2015

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.

$(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>

<?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>";

?>

<?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>

<?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>

<?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>

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 · January 20, 2015

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 · January 20, 2015

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 · January 20, 2015

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 · January 20, 2015

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">
		
		<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>

		
		<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

Sign In

Isotope using foreach loop

Recommended Posts

peterpp

Martijn Geerts

ESRCH

ESRCH

peterpp

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Browse

Activity

My Activity Streams

Support

Store

My Details