K2 data group for sub categories

This forum is for general questions about extensions for Joomla! 3.x.

Moderators: pe7er, General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Post Reply
PieterBum
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Fri Jul 13, 2018 10:40 am

K2 data group for sub categories

Post by PieterBum » Fri Apr 05, 2019 12:53 pm

Hey all,
I'm guessing I won't find the answer here, but I'll try it anyway:

I'm editing a website, and this site uses data-groups, of which I'm not familiar (enough) with.
Example:
*category = groceries
*subcategory = drinks
*subsub(?)category = soda

Code: Select all

<li class="active" data-group="Drinks"><a href="#">Drinks</a></li>
[later, this:]

Code: Select all

<?php if($this->params->get('subCategories') && isset($this->subCategories) && count($this->subCategories)): ?>
[and:]

Code: Select all

<?php foreach($this->subCategories as $key=>$subCategory): ?>
<li data-group="<?php echo $subCategory->name; ?>">
<a href="#"><?php echo $subCategory->name; ?></a></li>
<?php endforeach; ?>
[and inside a JS, I find this:]

Code: Select all

  /* 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 );
  });
});
____
On the page, there's a button which displays "Drinks". When clicked, all the items in this category appears.
I can find the subcategory back in K2/categories, (Groceries > Drinks).

However, I now need to make a dropdown with more sub(sub)categories. So in K2/categories, I make one called "Soda". But no matter what I do, a button with <li class="active" data-group="Soda"> does not work.

PieterBum
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Fri Jul 13, 2018 10:40 am

Re: K2 data group for sub categories

Post by PieterBum » Mon Apr 08, 2019 8:27 am

so if I want to place a subsubcategory under the subcategory, I would place
<ul><strong>Tools</strong>
<li class="force-css" data-group="Soda"><a href="#">Block 1</a></li>

but that doesn't do anything. What am I supposed to type there? Nothing seems to work...

In other words, how do you make a subsubcategory, and what do I type in its data-group tag?
Do I need to add php or js somewhere to make it work?

SharkyKZ
Joomla! Ace
Joomla! Ace
Posts: 1599
Joined: Fri Jul 05, 2013 10:35 am
Location: Unknown

Re: K2 data group for sub categories

Post by SharkyKZ » Mon Apr 08, 2019 8:48 am

Is this some custom extension for K2?

PieterBum
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Fri Jul 13, 2018 10:40 am

Re: K2 data group for sub categories

Post by PieterBum » Mon Apr 08, 2019 8:52 am

SharkyKZ wrote:
Mon Apr 08, 2019 8:48 am
Is this some custom extension for K2?
I'm not sure, I'm editing a website which I did not originally created, and it's the first time I work with Joomla.

PieterBum
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Fri Jul 13, 2018 10:40 am

Re: K2 data group for sub categories

Post by PieterBum » Tue Apr 09, 2019 10:08 am

Is this hopeless?

SharkyKZ
Joomla! Ace
Joomla! Ace
Posts: 1599
Joined: Fri Jul 05, 2013 10:35 am
Location: Unknown

Re: K2 data group for sub categories

Post by SharkyKZ » Tue Apr 09, 2019 10:53 am

Can you post the entire HTML markup of this category list?

PieterBum
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Fri Jul 13, 2018 10:40 am

Re: K2 data group for sub categories

Post by PieterBum » Tue Apr 09, 2019 11:21 am

Sure

Code: Select all

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>

SharkyKZ
Joomla! Ace
Joomla! Ace
Posts: 1599
Joined: Fri Jul 05, 2013 10:35 am
Location: Unknown

Re: K2 data group for sub categories

Post by SharkyKZ » Wed Apr 10, 2019 8:08 am

This looks like the contents of the PHP script with hardcoded markup for some reason. It's a huge mess. If you want to fix it properly, you'll need to remove hardcoded content and have it generated by PHP instead. Otherwise, just post the HTML output generated by this script.


Post Reply

Return to “Extensions for Joomla! 3.x”