Перейти к содержимому


Карусель Товаров Из Особых Разделов На Главной


  • Авторизуйтесь для ответа в теме
В этой теме нет ответов

#1 stasia

stasia

    Активный участник

  • Модераторы
  • 561 сообщений

Отправлено 25 Сентябрь 2020 - 10:45

Зайдите в Редактор шаблонов --- main.css и добавьте в самый конец шаблона код:  

#producttabs .products-grid .item {width: 100%;}


В шаблоне main.js добавьте в самый конец шаблона код:  

// Товары на главной
jQuery(function($) {
  var carouselU = $('.pdt-sale .products-grid');
	carouselU.owlCarousel({
	  items: 4,
	  itemsDesktop: [1199,3],
	  itemsDesktopSmall: [991,2],
	  itemsTablet: [767,2],
	  itemsTabletSmall: [641,1],
	  itemsMobile: [481,1],
	  responsive: true,
	  responsiveRefreshRate : 200,
	  responsiveBaseWidth: window,
	  lazyLoad: true,
	  pagination: false,
	  itemsScaleUp: true,
	  slideSpeed: 800,
	  stopOnHover: true,
	  touchDrag: false,
	  mouseDrag: false,
	  autoPlay: true,
	  addClassActive: true,
	  autoHeight: false,
	  afterAction: function (e) {
		if(this.$owlItems.length > this.options.items){
		  $('.pdt-sale .navigation').show();
		}else{
		  $('.pdt-sale .navigation').hide();
		  $('.pdt-sale .owl-carousel .owl-item').css("max-width", "300px");
		}
	  }
	});
  jQuery('.pdt-sale .navigation .prev').on('click', function(e){
	e.preventDefault();
	carouselU.trigger('owl.prev');
  });
  jQuery('.pdt-sale .navigation .next').on('click', function(e){
	e.preventDefault();
	carouselU.trigger('owl.next');
  });
});

// Новинки
jQuery(function($) {
  var carouselU = $('.pdt-new .products-grid');
	carouselU.owlCarousel({
	  items: 4,
	  itemsDesktop: [1199,3],
	  itemsDesktopSmall: [991,2],
	  itemsTablet: [767,2],
	  itemsTabletSmall: [641,1],
	  itemsMobile: [481,1],
	  responsive: true,
	  responsiveRefreshRate : 200,
	  responsiveBaseWidth: window,
	  lazyLoad: true,
	  pagination: false,
	  itemsScaleUp: true,
	  slideSpeed: 800,
	  stopOnHover: true,
	  touchDrag: false,
	  mouseDrag: false,
	  autoPlay: true,
	  addClassActive: true,
	  autoHeight: false,
	  afterAction: function (e) {
		if(this.$owlItems.length > this.options.items){
		  $('.pdt-new .navigation').show();
		}else{
		  $('.pdt-new .navigation').hide();
		  $('.pdt-new .owl-carousel .owl-item').css("max-width", "300px");
		}
	  }
	});
  jQuery('.pdt-new .navigation .prev').on('click', function(e){
	e.preventDefault();
	carouselU.trigger('owl.prev');
  });
  jQuery('.pdt-new .navigation .next').on('click', function(e){
	e.preventDefault();
	carouselU.trigger('owl.next');
  });
});

// Хиты продаж
jQuery(function($) {
  var carouselU = $('.pdt-best .products-grid');
	carouselU.owlCarousel({
	  items: 4,
	  itemsDesktop: [1199,3],
	  itemsDesktopSmall: [991,2],
	  itemsTablet: [767,2],
	  itemsTabletSmall: [641,1],
	  itemsMobile: [481,1],
	  responsive: true,
	  responsiveRefreshRate : 200,
	  responsiveBaseWidth: window,
	  lazyLoad: true,
	  pagination: false,
	  itemsScaleUp: true,
	  slideSpeed: 800,
	  stopOnHover: true,
	  touchDrag: false,
	  mouseDrag: false,
	  autoPlay: true,
	  addClassActive: true,
	  autoHeight: false,
	  afterAction: function (e) {
		if(this.$owlItems.length > this.options.items){
		  $('.pdt-best .navigation').show();
		}else{
		  $('.pdt-best .navigation').hide();
		  $('.pdt-best .owl-carousel .owl-item').css("max-width", "300px");
		}
	  }
	});
  jQuery('.pdt-best .navigation .prev').on('click', function(e){
	e.preventDefault();
	carouselU.trigger('owl.prev');
  });
  jQuery('.pdt-best .navigation .next').on('click', function(e){
	e.preventDefault();
	carouselU.trigger('owl.next');
  });
});


В Редакторе шаблонов---HTML, найдите код:

			  <div class="pdt-best pdt-content {% IF index_page_goods_empty=1 && index_page_new_goods_empty=1 %}active{% ENDIF %}">

И сразу после добавьте данный код:
  
			  <div class="navigation">
				<a href="#" class="prev"><i class="fa fa-angle-left"></i></a>
				<a href="#" class="next"><i class="fa fa-angle-right"></i></a>
			  </div>

Найдите данный код:

			  <div class="pdt-new pdt-content {% IF index_page_goods_empty=1 %}active{% ENDIF %}">

И сразу после добавьте данный код:
  
			  <div class="navigation">
				<a href="#" class="prev"><i class="fa fa-angle-left"></i></a>
				<a href="#" class="next"><i class="fa fa-angle-right"></i></a>
			  </div>


Найдите этот код:

			  <div class="pdt-sale pdt-content active">

И сразу после добавьте данный код:
  
			  <div class="navigation">
				<a href="#" class="prev"><i class="fa fa-angle-left"></i></a>
				<a href="#" class="next"><i class="fa fa-angle-right"></i></a>
			  </div>

Прикрепленные изображения

  • 10.png





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных