Добавить новый слайдер (TopShop, TopStyle)

TopShop

1) Добавить в HTML код шаблона

{$promos = $wa->shop->productSet("promo")}
<div class="h3 text-center home-header">Заголовок блока
    <span class="arrow">
        <a href="#" class="js-slider-prev-1"><i class="fa fa-angle-left"></i></a>
        <a href="#" class="js-slider-next-1"><i class="fa fa-angle-right"></i></a>
    </span>
</div>
<div class="row container-catalog custom-slider js-slider-1">
    {include file="`$wa_active_theme_path`/list-thumbs.html" products=$promos}
</div>

• promo - id списка блока
• js-slider-next-1 - стрелка прокрутки слайдера (эта строчка прописывается в JS файле ниже)
• js-slider-prev-1 - стрелка прокрутки слайдера (эта строчка прописывается в JS файле ниже)
• js-slider-1 - индефикатор слайдера (эта строчка прописывается в JS файле ниже)

2) Добавить в shop.js найти строку кода

$(document).ready(function () {

После этой строчке вставить код отображения слайдера

$(".js-slider-1").owlCarousel({
    loop: true,
    items: 5,
    margin: 20,
    autoHeight: true,
    pagination: false,
    itemsDesktop: [1199, 5],
    itemsDesktopSmall: [1170, 4],
    itemsTablet: [968, 3],
    itemsTabletSmall: [768, 2],
    itemsMobile: [500, 2],
    paginationSpeed: 800,
    rewindSpeed: 1000,
    autoPlay: 15000,
    stopOnHover: false,
    center: true,
});

$(".js-slider-prev-1").click(function () {
    $(".js-slider-1").trigger("owl.prev");
    return false;
});
$(".js-slider-next-1").click(function () {
    $(".js-slider-1").trigger("owl.next");
    return false;
});

3) Добавить в файл стилей код

.container-catalog .custom-slider .adaptive {
    display: flex;
    flex-direction: column;
}
.custom-slider .adaptive {
    width: 100%;
    padding-left: 0;
    padding-right: 10px;
}

Для каждого нового слайдера менять все переменные js-slider-prev-1, js-slider-next-1, js-slider-1 на новые, например на js-slider-prev-2, js-slider-next-2, js-slider-2 во всех строчках кода

TopStyle

<div class="h3 text-center home-header">{if $theme_settings.homepage_bestseller_title}{str_replace('{$date}', $smarty.now|wa_datetime:"humandate", $theme_settings.homepage_bestseller_title)}{/if}</div>

на

<div class="h3 text-center home-header">{if $theme_settings.homepage_bestseller_title}{str_replace('{$date}', $smarty.now|wa_datetime:"humandate", $theme_settings.homepage_bestseller_title)}{/if}
<span class="arrow">
	<a href="#" class="slider-product-next-1"><i class="fa fa-angle-left"></i></a>
	<a href="#" class="slider-product-prev-1"><i class="fa fa-angle-right"></i></a>
</span>
</div>

Заменить

<div class="row container-catalog">
	{include file="`$wa_active_theme_path`/list-thumbs.html" products=$bestsellers}
</div>

на код

<div class="row main-slider-product-home-1 owl-carousel owl-theme">
	{include file="`$wa_active_theme_path`/list-thumbs.html" products=$bestsellers}
</div>

Добавить в shop.js код после // Sliders product list

var main_slider_product_home_1 = $(".main-slider-product-home-1").length;
if (main_slider_product_home_1) {
	$(".main-slider-product-home").owlCarousel({
		loop: true,
		items: 4,
		margin: 18,
		autoHeight: true,
		pagination: false,
		autoplay: true,
		autoplayTimeout: 500000,
		responsive: {
			1199: {
				items: 4,
			},
			1170: {
				items: 4,
			},
			968: {
				items: 4,
			},
			768: {
				items: 3,
			},
			500: {
				items: 2,
				margin: 0,
			},
			100: {
				items: 2,
				margin: 0,
			},
		},
		paginationSpeed: 800,
		rewindSpeed: 1000,
		autoPlay: 15000,
		stopOnHover: false,
		dots: false
	});

	$(".slider-product-next-1").click(function () {
		$(".main-slider-product-home-1").trigger("prev.owl.carousel");
		return false;
	});
	$(".slider-product-prev-1").click(function () {
		$(".main-slider-product-home-1").trigger("next.owl.carousel");
		return false;
	});
}

В user.css добавить код

.main-slider-product-home-1 {
  margin-left: 0;
}
.main-slider-product-home-1 .adaptive {
  width: 100%;
  padding-left: 0;
  padding-right: 10px;
}
.main-slider-product-home-1 .adaptive .thumbnail:hover {
  border: 1px solid #cccccc;
  box-shadow: none;
}
.main-slider-product-home-1 .adaptive .thumbnail:hover .offers {
  padding: 10px;
  border-top: 1px solid #cccccc;
  background: #f6f6f6;
}
.main-slider-product-home-1 .adaptive .thumbnail:hover .image-block img {
  transform: scale(1.05);
  opacity: 0.7;
}