I'm editing a website, and this site uses data-groups, of which I'm not familiar (enough) with.
The current result is:
• In K2, I have items in categories, subcategories, and sub-subcategories.
• On the page of the items, there is a horizontal lign, showing each subcategory.
• On that page, I added a dropdown menu under one subcategory. In that dropdown, I have a few sub-subcategories. I would like that when I click on that sub-subcategory, it will show the items from that sub-subcategory.
What do I need to do to make this work? If I need to post more, feel free to ask, and sorry.
I'll try to explain as good as possible:
Category.php
defined('_JEXEC') or die;
?>
<p style="text-align:center;font-weight:bold;font-size:120%;padding:1%;background:#007dbe;color:white;margin:1% 0 0.95% 0;">OUTLET</p>
<!--<img src="https://i.ibb.co/3dk77DK/outlet3.png" style="margin: 0 0 1% 0;">-->
<div class="centered-pills" style="width:98%;margin:0 auto;background:#474747;">
<ul class="nav nav-pills" id="outlet">
<li class="filterTitle">Filter op:</li>
<li class="active" id="pointer">All</li>
<li class="active" id="drop-a-down"><a href="#">Example</a>
<ul class="drop-a-content">
<div class="column-outlet">
<ul><strong>Tools</strong>
<li class="force-css" data-group="Light"><a href="#">Tool 1</a></li>
<li class="force-css" data-group="Light"><a href="#">Tool 2</a></li>
<li class="force-css" data-group="Light"><a href="#">Tool 3</a></li>
</ul>
<ul><strong>Light</strong>
<li class="force-css" data-group="Light"><a href="#">Light 1</a></li>
<li class="force-css" data-group="Floor"><a href="#">Light 2</a></li>
<li class="force-css">Light 3</li>
<li class="force-css">Light 4</li>
</ul>
<ul><strong>Tools</strong>
<li class="force-css">Manual tools</li>
<li class="force-css">Electric tools</li>
</ul>
</div>
<div class="column-outlet">
<ul><strong>Other</strong>
<li class="force-css">Other 1</li>
<li class="force-css">Other 2</li>
<li class="force-css">Other 3</li>
</ul>
<ul><strong>Roof</strong>
<li class="force-css">Roof 1</li>
<li class="force-css">Roof 2</li>
<li class="force-css">Roof 3</li>
<li class="force-css">Roof 4</li>
</ul></div>
</ul>
</li>
<li class="active" id="drop-a-down"><a href="#">Animals</a>
<ul class="drop-a-content">
<div class="column-outlet">
<ul><strong>Blocks</strong>
<li class="force-css">Block 1</li>
<li class="force-css">Block 2</li>
<li class="force-css">Block 3</li>
</ul>
<li class="active" data-group="Category-2"><a href="#">Cats</a></li>
<li class="active" data-group="Category-3"><a href="#">Dogs</a></li>
<li class="active" data-group="Category-4"><a href="#">Birds</a></li>
<li class="active" data-group="Category-5"><a href="#">Elephants</a></li>
<li class="active" data-group="Category-6"><a href="#">Tigers</a></li>
<li class="active" data-group="Category-7"><a href="#">Lions</a></li>
<li class="active" data-group="Category-8"><a href="#">Other</a></li>
<?php foreach($this->subCategories as $key=>$subCategory): ?>
<li data-group="<?php echo $subCategory->name; ?>"><a href="#"><?php echo $subCategory->name; ?></a></li>
<?php endforeach; ?>
</ul>
</div>
<div style="text-align:center;margin-top:2%;">
Get your products now!
</div>
<div style="clear:both;"></div>
<div class="inner">
<div class="row" style="margin-top:-5%;">
<?php if($this->params->get('subCategories') && isset($this->subCategories) && count($this->subCategories)): ?>
<div class="col-md-12 col-xs-12">
<div class="centered-pills" style="width:98%;margin:0 auto;">
<ul class="nav nav-pills">
<li class="filterTitle">Filter:</li>
<li class="active" data-group="All"><a href="#">Alle</a></li>
<?php foreach($this->subCategories as $key=>$subCategory): ?>
<li data-group="<?php echo $subCategory->name; ?>"><a href="#"><?php echo $subCategory->name; ?></a></li>
<?php endforeach; ?>
</ul>
</div>
</div>
<?php else: ?>
<div class="col-md-12 col-xs-12">
<p class="text-center" style="display:none;">Promotions in: <span class="divider"></span><strong><?php echo $this->category->name; ?></strong> <span class="divider"></span><a href="acties">Show all products</a></p>
</div>
<?php endif; ?>
<?php if(isset($this->leading) && count($this->leading)): ?>
<ul id="grid">
<?php foreach($this->leading as $key=>$item): ?>
<?php $this->item=$item; echo $this->loadTemplate('item'); ?>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<div style="text-align:center;margin-top:2%;font-style:italic;font-size:75%;">
All products are property of us.
</div>
</div>
<?php if($this->params->get('catDescription')): ?>
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="disclaimer">
<?php echo $this->category->description; ?>
</div>
</div>
</div>
<?php endif; ?>
</div>
Jquery
/* initialize shuffle plugin */
var $grid = jQuery('#grid');
$grid.shuffle({
group: 'all',
itemSelector: '.portfolio-item', // the selector for the items in the grid
speed: 500 // Transition/animation speed (milliseconds)
});
/* reshuffle when user clicks a filter item */
jQuery('.nav-pills li').click(function (e) {
e.preventDefault();
// set active class
jQuery('.nav-pills li').removeClass('active');
jQuery(this).addClass('active');
// get group name from clicked item
var groupName = jQuery(this).attr('data-group');
// reshuffle grid
$grid.shuffle('shuffle', groupName );
});
});
