Бренды на главной в теме Bestmarket

В настройках плагина в список разрешённых размеров добавьте 200.

Перейдите в приложение Сайт - Блоки и создайте там новый блок home_brands:

<div class="p-block__inner">
    <div class="h1 header {if $wa->isMobile()}header-mobile{/if}">
        Бренды
        {if !$wa->isMobile()}
            <a class="slide-prev slide-nav js-brands-prev" href="javascript:;"><i class="fa fa-chevron-left"></i></a>
            <a class="slide-next slide-nav js-brands-next" href="javascript:;"><i class="fa fa-chevron-right"></i></a>
        {/if}
    </div>
</div>
<div class="p-thumbs {if $wa->isMobile()}p-mobile-scroll{/if}">
    <div class="row js-brands">
        {foreach shopProductbrandsPlugin::getBrands() as $b}
        <div class="col-5-row">
            <a href="{$b.url}" title="{$b.name|escape}">
                {if $b.image}
                <img alt="{$b.name|escape}" src="{$wa_url}wa-data/public/shop/brands/{$b.id}/{$b.id}.200{$b.image}">
                {else}
                <span>{$b.name}</span>
                {/if}
            </a>
        </div>
        {/foreach}
    </div>
</div>
<style>
    .js-brands a {
        text-decoration: none;
        display: flex;
        height: 100px;
        text-align: center;
        justify-content: center;
        flex-direction: column;
        box-shadow: 0 5px 5px 0 rgba(126, 125, 118, 0.2);
    }
    .js-brands a img {
        max-height: 100px;
        max-width: 100%;
    }
    .js-brands a span {
        font-size: 150%;
    }
</style>
<script>
    $(function () {
        var brands = $(".js-brands");
        var prev = $('.js-brands-prev');
        var next = $('.js-brands-next');
        brands.slick({
            infinite: false,
            autoplay: true,
            autoplaySpeed: 8000,
            slidesToShow: 5,
            slidesToScroll: 5,
            rows: 0,
            dots: false,
            arrows: false,
            prevArrow: prev,
            nextArrow: next,
            responsive: [
                {
                    breakpoint: 2024, settings: { slidesToShow: 5, slidesToScroll: 5 }
                },
                {
                    breakpoint: 1000, settings: { slidesToShow: 4, slidesToScroll: 4 }
                },
                {
                    breakpoint: 800, settings: { slidesToShow: 3, slidesToScroll: 3 }
                },
                {
                    breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 }
                },
                {
                    breakpoint: 480, settings: { slidesToShow: 2, slidesToScroll: 2 }
                },
                {
                    breakpoint: 320, settings: { slidesToShow: 1, slidesToScroll: 1 }
                }
    
            ]
        });
        prev.click(function () {
            brands.slick('slickPrev');
        });
        next.click(function () {
            brands.slick('slickNext');
        });
    })
</script>

Далее перейдите в приложение Магазин - Витрина - Шаблоны

В файле home.split.html в нужном месте добавьте код:

<div class="p-block">
    {$wa->block('home_brands')}
</div>

В файл home.single.html в нужном месте добавьте код:

<div class="p-block">
    <div class="container">
        {$wa->block('home_brands')}
    </div>
</div>

Опубликовано: 20 мая 2020
Эта статья была полезна? Да Нет

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

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

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