1 reply to this topic

[Анна]

Создала новый шаблон вывода категорий в модуле в модуле JB Zoo Category List с вертикальными вкладками. У меня bootsrap, поэтому всё просто, вот, кому нужно:

<div class="row">
    <div  class="col-sm-3">
        <ul class="nav nav-tabs vtabs-left ">
            <?php foreach ($categories as $catId => $category): ?>
                <li class="<?php echo $category['active_class']; ?>"><a href="#category-tab-<?php echo $catId ?>" data-toggle="tab"><?php
                        echo $category['category_name'];
                        if (!empty($category['item_count'])) {
                            echo ' (' . $category['item_count'] . ')';
                        }
                        ?></a></li>
            <?php endforeach; ?>
        </ul>
</div>
 <div class="col-xs-9">
            <!-- Tab panes -->
        <div class="tab-content">
        <?php foreach ($categories as $catId => $category): ?>
            <div class="tab-pane" id="category-tab-<?php echo $catId ?>">

                <?php if (!empty($category['image']) || !empty($category['desc'])) : ?>
                   
                        <div class="jbcategory-image">

                            <?php if (!empty($category['image'])): ?>
                                <div class="align-<?php echo $params->get('category_image_align', 'left') ?>">
                                    <a href="<?php echo $category['cat_link'] ?>"><?php echo $category['image'] ?></a>
                                </div>
                            <?php endif; ?>

                            <?php if (!empty($category['desc'])): ?>
                                <p class="jbcategory-desc"><?php echo $category['desc'] ?></p>
                            <?php endif; ?>

                            <?php echo JBZOO_CLR; ?>
                        </div>
                   
                <?php endif; ?>

                <?php
                if (!empty($category['items'])) {
                    echo '<div class="jbcategory-items">';
                    $layout = $params->get('item_layout', 'default');

                    foreach ($category['items'] as $itemId => $item) {
                        $itemClasses = array(
                            'jbzoo-item',
                            'jbzoo-item-' . $layout,
                            'jbzoo-item-' . $item->type,
                            'jbzoo-item-' . $item->id,
                            'rborder',
                        );

                        $renderer = $modHelper->createRenderer('item');
                        ?>
                        <div class="<?php echo implode(' ', $itemClasses); ?>">
                            <?php echo $renderer->render('item.' . $layout, array('item' => $item, 'params' => $params)); ?>
                            <?php echo JBZOO_CLR; ?>
                        </div>
                    <?php
                    }
                    echo '</div>';
                }
                ?>
            </div>

        <?php endforeach; ?>
    </div>

Но столкнулась вот с чем, при загрузке страницы все вкладки неактивны. Как сделать, чтобы первому элементу списка присваивался сразу класс "active"?

Попробовала добавить

<script type="text/javascript">
    $(document).ready(function(){
    $("ul.vtabs-left li:first").addClass("active");
      }
</script> 

- не помогает ((

 

 

[Анна]

Справилась, тему можно закрывать. 

В файле шаблона script.js добавила

 

(function($){
  $(document).ready(function(){
  $("#vtabs a:first").tab('show');
  });
})(jQuery);