I have a website showing some products. Like many other websites, I am trying to filters the results. I have a color filter. I am showing the color thumbnails and on selecting any color thumbnail, the page will redirect and load products with that color. Now I have an extra <div>
where I am showing the thumbnails from the active colors. So once an user selects a color thumbnail, it should reload the page with the color filtered products and the selected thumbnail should be visible in the active filter div
. How can I do that?
Following is my code:
<?
$uri = $this->web->uri;
if (!strrpos($this->web->uri, '?')){
$uri .= '?';
} else {
$uri .= '&';
}
?>
<div class='filter'>
<p class='filter_title'>Colors</p>
<div class='colors'>
<? foreach ($model->allColors as $color) { ?>
<a href="<?=$uri.'color='.$color->id?>" class='color' style="background-image:url(<?=$color->getThumbnail();?>)" >
</a>
<? } ?>
</div>
<div class='active_colors'>
<p class='filter_p'>Active colors</p>
<div class='act_color'>
//Here where I want the selected color thumbnail.
</div>
</div>
</div>
Any help is appreciated.
Just do another loop and print the thumbnails if they are selected.
<div class='filter'>
<p class='filter_title'>Colors</p>
<div class='colors'>
<? foreach ($model->allColors as $color) { ?>
<a href="<?= $uri.'color'.$color->id.'=1' ?>" class='color' style="background-image:url(<?= $color->getThumbnail(); ?>)" >
</a>
<? } ?>
</div>
<div class='active_colors'>
<p class='filter_p'>Active colors</p>
<div class='act_color'>
//Here where I want the selected color thumbnail.
<? foreach ($model->allColors as $color) : ?>
<? if(isset($_GET['color'.$color->id] ): ?>
<a href="<?= $uri ?>" class='color' style="background-image:url(<?= $color->getThumbnail(); ?>)" ></a>
<? endif; ?>
<? endforeach; ?>
</div>
</div>
</div>