Бренды на главной в теме 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>
Чтобы добавить комментарий, зарегистрируйтесь или войдите
0 комментариев