Категории с подкатегориями на главной Default

Добавьте код в файл home.html

    <section class="categories">
    {$categories = $wa->shop->categories(0, 1, true)}
    <div class="categories-wrapper">
    {foreach $categories as $c}
        <div class="cat">
            <h3><a href="{$c.url}">{$c.name|escape} »</a></h3>
            <a class="cat-img" href="{$c.url}">
                 {if $c.image}
                 <img border="0" src="{$wa_url}wa-data/public/shop/categories/{$c.id}/{$c.id}{$c.image}" alt="{$c.name|escape}">
                 {/if}
            </a>
            <div class="cat-sub">
                {foreach $c.childs as $sc}
                    <a href="{$sc.url}">• {$sc.name|escape}</a>
                {/foreach}
            </div>
        </div>
    {/foreach}
    </div>
    </section>

И добавить стили в файл .css

section.categories {
    margin-top: 20px;
}
section.categories div.cat {
    display: inline-block;
    width: 48%;
    margin: 0 1% 0 0;
    padding: 0 0 10px 0;
    vertical-align: top;
}
section.categories div.cat .cat-img {
    float: left;
    width: 150px;
}
section.categories div.cat .cat-sub {
    margin-left: 150px;
}
section.categories div.cat .cat-img img {
    width: 100%;
    max-width: 200px;
}
section.categories div.cat .cat-sub a {
    display: block;
    padding-left: 5px;
}
@media screen and (max-width: 1024px) {
    section.categories div.cat .cat-img {
        float: none;
    }
    section.categories div.cat .cat-sub {
        margin-left: 0;
    }
}
Опубликовано: 20 июня 2017
Эта статья была полезна? Да Нет

0 комментариев

    Добавить комментарий

    Чтобы добавить комментарий, зарегистрируйтесь или войдите