Yootheme ZOO - Application layout change in php - php

Question

in ZOO Application/templates/uikit/_categories.php have this code:
<?php
// init vars
$i = 0;
$columns = $this->params->get('template.categories_cols', 2);
reset($this->selected_categories);
// render rows
while ((list($key, $category) = each($this->selected_categories))) {
if ($category && !($category->totalItemCount() || $this->params->get('config.show_empty_categories', false))) continue;
if ($i % $columns == 0) echo ($i > 0 ? '</div><hr class="uk-grid-divider"><div class="uk-grid">' : '<div class="uk-grid">');
echo '<div class="uk-width-1-'.$columns.'">'.$this->partial('category', compact('category')).'</div>';
$i++;
}
if (!empty($this->selected_categories)) {
echo '</div>';
}
?>
Render look like this:
<div class="uk-grid">
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
</div>
<hr class="uk-grid-divider">
<div class="uk-grid">
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
</div>
And I want this (only one div.uk-grid for all div.uk-width* and without hr.uk-grid.divider):
<div class="uk-grid">
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
</div>
Can someone help me with this, i am not good in php?
Thanks.
My modified code which not work :(
<?php
$columns = $this->params->get('template.categories_cols', 2); // I dont know why is at end ", 2"
reset($this->selected_categories); // I dont know why is needed reset array
// render rows
while ((list($key, $category) = each($this->selected_categories))) {
if ($category && !($category->totalItemCount() || $this->params->get('config.show_empty_categories', false))) {
echo '<div class="uk-grid">'; // I dont know why is not rendered
}
echo '<div class="uk-width-1-'.$columns.'">'.$this->partial('category', compact('category')).'</div>';
}
if (!empty($this->selected_categories)) {
echo '</div>';
}
?>

Answer 1

You must have set a parameter to add two columns, that's what kicks in the code that adds the separator.
The name of the parameter is template.categories_cols it will be translated though to something in english.
This is a commercially supported extension, you might be able to get some support on their forums

Answer 2

Your best bet would be to set your columns at 1, then use UIKit's CSS to size your divs. This means you'd want your container class to be uk-grid uk-grid-width-1-3, then to remove the uk-width-1-3 from the inner divs. The added benefit here is that you can vary layout depending on your screen size > Grid Component - UIKit.
In your PHP you could remove the columns param all together. Remove the line starting with $columns..., the single spot it's echo'd '.$columns.', and you should be all set.
The PHP was using your "columns" variable to split divs (2 was the default), but if you tailor the container you can avoid the column assignment altogether.