@{
var _item = productsGrid.items[0];
var gridItemClass = _item.classNames;
var itemClass = _item._itemClass;
}
<?php
$itemClass = '@(itemClass)';
$mergedModes = '@_item.width_lg' . '@_item.width' . '@_item.width_sm' . '@_item.width_xs';
if ('' === $mergedModes) {
    $categories_per_row = VmConfig::get ( 'categories_per_row', 3);
    $itemClass = preg_replace('/col-(lg|md|sm|xs)-\d+/', '', $itemClass) . preg_replace('/col-(lg|md|sm|xs)-\d+/',
      'col-$1-' . round(12 / min(12, max(1, $categories_per_row))), ' col-lg-1 col-md-1 col-sm-1 col-xs-1');
}
?>
<div class="@classNames">
  <div class="container-fluid">
    <div class="separated-grid row">
    @include("header")
    <?php foreach ($this->categories as $category) : ?>
    <?php
            $categoryNameDecorator = new stdClass();
            $categoryNameDecorator->link = JRoute::_('index.php?option=com_virtuemart&view=category&virtuemart_category_id=' . $category->virtuemart_category_id, FALSE);
    $categoryNameDecorator->name = $category->category_name;
    $categoryImageDecorator = new stdClass();
    $categoryImageDecorator->image = $category->images[0];
    $categoryImageDecorator->link = $categoryNameDecorator->link;
    $categoryItems = new stdClass();
    $categoryItems->categoryName = $categoryNameDecorator;
    $categoryItems->categoryImage = $categoryImageDecorator;
    ?>
    @for(var i = 0; i < productsGrid.items.length; i++) {
    <div class="<?php echo $itemClass; ?>">
        <div class="@gridItemClass">
            @include("productsGrid/items/" + i + "/items")
        </div>
    </div>
    }
    <?php endforeach; ?>
    </div>
  </div>
</div>