Я редактирую сайт, и на этом сайте используются группы данных, с которыми я не знаком (достаточно).
Текущий результат:
• В K2 у меня есть предметы в категориях, подкатегориях и подкатегориях.
• На странице товаров есть горизонтальное обозначение, показывающее каждую подкатегорию.
• На этой странице я добавил выпадающее меню в одной подкатегории. В этом выпадающем списке у меня есть несколько подкатегорий. Мне бы хотелось, чтобы при нажатии на эту подкатегорию отображались элементы из этой подкатегории.
Что мне нужно сделать, чтобы эта работа?
Если мне нужно написать больше, не стесняйтесь спрашивать, и извините.
Я постараюсь объяснить как можно лучше:
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 );
});
});