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


Переключение новостей табами.

Автор metry, 02 июня 2020 17:13

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

#1 metry

metry

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

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

Отправлено 02 Июнь 2020 - 17:13

Для внесения изменений зайдите в Редактор шаблонов-->HTML и найдите код:

	<!-- Если в тарифном плане подключен модуль новостей -->
	{% IF TARIFF_FEATURE_NEWS && index_page %}
	{% IF news_list_all_empty=0 || news_list_shop_empty=0 %}
	<div id="news">
	  <div class="container">
		<div class="block-title">
		  <h2 class="title"><a href="{NEWS_ALL_URL}" title="Список новостей магазина">Новости</a></h2>
		</div>
		<div class="block-news owl-carousel">
		  <!--  Если есть список из любых новостей и если в тарифном плане подключен модуль новостей -->
		  {% IFNOT news_list_all_empty %}
			{% FOR news_list_all %}
			  <div class="item">
				<div class="post-content">
				  <div class="title"><a href="{news_list_all.URL}" title="Перейти к странице &laquo;{news_list_all.TITLE}&raquo;">{news_list_all.TITLE}</a></div>
				  {% IF news_list_all.SHOW_TIME %}<div class="date">{news_list_all.TIME | date("d")}-{news_list_all.TIME | date("m")}-{news_list_all.TIME | date("y")}</div>{% ENDIF %}
				  <div class="description"><p>{news_list_all.TEXT_SHORT}</p></div>
				  <a href="{news_list_all.URL}" class="more" >Подробнее <i class="fa fa-angle-right" aria-hidden="true"></i></a>
				</div>
			  </div>
			{% ENDFOR %}
		  {% ENDIF %}
		  <!--  /END Если есть список из любых новостей и если в тарифном плане подключен модуль новостей -->
		  <!-- Если есть список новости магазина и если в тарифном плане подключен модуль новостей -->
		  {% IFNOT news_list_shop_empty %}
			{% FOR news_list_shop %}
			  <div class="item">
				<div class="post-content">
				  <div class="title"><a href="{news_list_shop.URL}" title="Перейти к странице &laquo;{news_list_shop.TITLE}&raquo;">{news_list_shop.TITLE}</a></div>
				  {% IF news_list_shop.SHOW_TIME %}<div class="date">{news_list_shop.TIME | date("d")}-{news_list_shop.TIME | date("m")}-{news_list_shop.TIME | date("y")}</div>{% ENDIF %}
				  <div class="description"><p>{news_list_shop.TEXT_SHORT}</p></div>
				  <a href="{news_list_shop.URL}" class="more" >Подробнее <i class="fa fa-angle-right" aria-hidden="true"></i></a>
				</div>
			  </div>
			{% ENDFOR %}
		  {% ENDIF %}
		  <!-- /END Если есть список новости магазина и если в тарифном плане подключен модуль новостей -->
		</div>
	  </div>
	</div>
	{% ENDIF %}
	{% ENDIF %}
	<!-- /END Если в тарифном плане подключен модуль новостей -->

замените на:


	<!-- Если в тарифном плане подключен модуль новостей -->
	{% IF index_page %}
	{% IF news_list_all_empty=0 || news_list_shop_empty=0 || news_list_articles_empty=0 ||  news_list_mass_media_empty=0 %}
	<div id="news">
	  <div class="container">
		<div class="block-bg">
		  <!-- Новости разбиты на Статьи/Материалы СМИ/Новости магазина -->
		   {% IF news_list_all_empty %}
			<div class="block-title">
			  <ul class="tabs-headerList unstyled">
				{% IFNOT news_list_shop_empty %}
				<li class="tabs-headerItem active">
				 <h2 class="title"><a class="tabs-headerLink" href="#news_list_shop" data-href="news_list_shop">Новости</a></h2>
				</li>
				{% ENDIF %}
				{% IFNOT news_list_articles_empty %}
				<li class="tabs-headerItem {% IF news_list_shop_empty=1 %}active{% ENDIF %}">
				 <h2 class="title"><a class="tabs-headerLink" href="#news_list_articles" data-href="news_list_articles">Статьи</a></h2>
				</li>
				{% ENDIF %}
				{% IFNOT news_list_mass_media_empty %}
				<li class="tabs-headerItem {% IF news_list_shop_empty=1 && news_list_articles_empty=1 %}active{% ENDIF %}">
				 <h2 class="title"><a class="tabs-headerLink" href="#news_list_mass_media" data-href="news_list_mass_media">Материалы СМИ</a></h2>
				</li>
				{% ENDIF %}
			  </ul>
			</div>
			<div class="tabs-body row">
			  <div class="preloader"><span class="content-loading"></span></div>
			  {% IFNOT news_list_shop_empty %}
			  <div id="news_list_shop" class="tabs-content active">
				<div class="block-news news_list_shop owl-carousel">
				  <!-- Если есть список новости магазина и если в тарифном плане подключен модуль новостей -->
				  {% IFNOT news_list_shop_empty %}
					{% FOR news_list_shop %}
					  <div class="item">
						<div class="post-content">
						  <a href="{news_list_shop.URL}" title="{news_list_shop.TITLE}">
							<img class="news-image owl-lazy" data-src="{% IF news_list_shop.IMG %}{news_list_shop.IMG}{% ELSE %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ENDIF %}">
							<div class="title">{news_list_shop.TITLE}</div>
						  </a>
						  <div class="description">{% IF news_list_shop.TEXT_SHORT %}<p>{news_list_shop.TEXT_SHORT}</p>{% ENDIF %}</div>
						  <a href="{news_list_shop.URL}" class="button small">Подробнее</a>
						</div>
					  </div>
					{% ENDFOR %}
				  {% ENDIF %}

				  </div>
			  </div>
			  {% ENDIF %}
			  {% IFNOT news_list_articles_empty %}
			  <div id="news_list_articles" class="tabs-content {% IF news_list_shop_empty=1 %}active{% ENDIF %}">
				<div class="block-news news_list_article owl-carousel">
				  <!-- Если есть список статей магазина и если в тарифном плане подключен модуль новостей -->
				  {% IFNOT news_list_articles_empty %}
					{% FOR news_list_articles %}
					  <div class="item">
						<div class="post-content">
						  <a href="{news_list_articles.URL}" title="{news_list_articles.TITLE}">
							<img class="news-image owl-lazy" data-src="{% IF news_list_articles.IMG %}{news_list_articles.IMG}{% ELSE %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ENDIF %}">
							<div class="title">{news_list_articles.TITLE}</div>
						  </a>
						  <div class="description">{% IF news_list_articles.TEXT_SHORT %}<p>{news_list_articles.TEXT_SHORT}</p>{% ENDIF %}</div>
						  <a href="{news_list_articles.URL}" class="button small" >Подробнее</a>
						</div>
					  </div>
					{% ENDFOR %}
				  {% ENDIF %}
				  <!-- /Если есть список статей магазина и если в тарифном плане подключен модуль новостей -->
				</div>
			  </div>
			  {% ENDIF %}
			  {% IFNOT news_list_mass_media_empty %}
			  <div id="news_list_mass_media" class="tabs-content {% IF news_list_shop_empty=1 && news_list_articles_empty=1 %}active{% ENDIF %}">
				<div class="block-news news_list_mass_media owl-carousel">
				  <!-- Если есть список материалов СМИ магазина и если в тарифном плане подключен модуль новостей -->
				  {% IFNOT news_list_mass_media_empty %}
					{% FOR news_list_mass_media %}
					  <div class="item">
						<div class="post-content">
						  <a href="{news_list_mass_media.URL}" title="{news_list_mass_media.TITLE}">
							<img class="news-image owl-lazy" data-src="{% IF news_list_mass_media.IMG %}{news_list_mass_media.IMG}{% ELSE %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ENDIF %}">
							<div class="title">{news_list_mass_media.TITLE}</div>
						  </a>
						  <div class="description">{% IF news_list_mass_media.TEXT_SHORT %}<p>{news_list_mass_media.TEXT_SHORT}</p>{% ENDIF %}</div>
						  <a href="{news_list_mass_media.URL}" class="button small" >Подробнее</a>
						</div>
					  </div>
					{% ENDFOR %}
				  {% ENDIF %}
				  <!-- /Если есть список материалов СМИ магазина и если в тарифном плане подключен модуль новостей -->			
				</div>				  
			  </div>
			  {% ENDIF %}
			</div>
		   {% ELSE %}
		   <!-- Все новости-->
			<div class="block-title">
			  <h2 class="title">
				<a href="{NEWS_ALL_URL}" title="Список новостей магазина">Новости</a>
			  </h2>
			</div>
			<div class="preloader"><span class="content-loading"></span></div>
			<div class="block-news all owl-carousel">
			  <!--  Если есть список из любых новостей и если в тарифном плане подключен модуль новостей -->
			  {% IFNOT news_list_all_empty %}
				{% FOR news_list_all %}
				  <div class="item">
					<div class="post-content">
					  <a href="{news_list_all.URL}" title="{news_list_all.TITLE}">
						<img class="news-image owl-lazy" data-src="{% IF news_list_all.IMG %}{news_list_all.IMG}{% ELSE %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ENDIF %}">
						<div class="title">{news_list_all.TITLE}</div>
					  </a>
					  <div class="description">{% IF news_list_all.TEXT_SHORT %}<p>{news_list_all.TEXT_SHORT}</p>{% ENDIF %}</div> 
					  <a href="{news_list_all.URL}" class="button small" >Подробнее</a>
					</div>
				  </div>
				{% ENDFOR %}
			  {% ENDIF %}
			  <!--  /END Если есть список из любых новостей и если в тарифном плане подключен модуль новостей -->
			</div>
		   {% ENDIF %}
		</div>
	  </div>
	</div>
	{% ENDIF %}
	{% ENDIF %}


далее зайдите в Редактор шаблонов-->main.js и найдите:

  // Слайдер новостей
  $("#news .owl-carousel").owlCarousel({
	items: 2,
	loop: false,
	rewind: true,
	lazyLoad: false,
	nav: false,
	dots: false,
	autoplay: true,
	autoplayHoverPause: true,
	autoHeight: false,
	smartSpeed: 500,
	mouseDrag: true,
	touchDrag: true,
	pullDrag: true,
	responsiveClass:true,
	responsive:{
	  0:{items:1},
	  768:{items:1},
	  992:{items:2}
	}
  });

замените на:


  // Клик по табам новостей
  $('#news .tabs-headerList').on('click', '.tabs-headerLink', function(event){
	event.preventDefault()
   
	var $link = $(this);
	var $parent = $link.closest('.tabs-headerItem');
	var tabId = $link.data('href');
   
	if ($parent.hasClass('active')){
	  return;
	};

	$parent.addClass('active').siblings().removeClass('active')
	$('#news .tabs-body .tabs-content').removeClass('active').filter('[id="' + tabId +'"]').addClass('active');
  })
 
  // Слайдер новостей (все новости без группировки)
  $("#news .all.owl-carousel").owlCarousel({
	items: 3,
	loop: false,
	rewind: true,
	lazyLoad: true,
	nav: false,
	dots: false,
	autoplay: false,
	autoplayTimeout: 5000,
	autoplayHoverPause: true,
	autoHeight: false,
	smartSpeed: 500,
	mouseDrag: true,
	touchDrag: true,
	pullDrag: true,
	responsiveClass:true,
	responsive:{
	  0:{items:1},
	  768:{items:2},
	  992:{items:3},
	  1199:{items:4}
	}
  });
  // Слайдер новостей (группы)
  $("#news .owl-carousel").owlCarousel({
	items: 3,
	loop: false,
	rewind: true,
	lazyLoad: true,
	nav: false,
	dots: false,
	autoplay: false,
	autoplayTimeout: 5000,
	autoplayHoverPause: true,
	autoHeight: false,
	smartSpeed: 500,
	mouseDrag: true,
	touchDrag: true,
	pullDrag: true,
	responsiveClass:true,
	responsive:{
	  0:{items:1},
	  768:{items:2},
	  992:{items:3},
	  1199:{items:4}
	}
  });
  function changeNavBtn(event){
	var items = event.item.count;
	var size = event.page.size;
	var $nav = $(event.target).siblings('.block-title').find('.navigation');
   
	if (items >= size){
	  $nav.show();
	} else {
	  $nav.hide();
	}
  }

далее зайдите в Редактор шаблонов-->main.css и найдите:


/*** Новости ***/
#news {background-color: #efefef;padding: 0px 0 60px;}
#news .block-news .item {position: relative;padding: 10px 10px 0;}
#news .block-news .post-content {position: relative;left: -5px;background-color: #fff;text-align: left;padding: 40px;min-height: 212px;}
#news .block-news .title {min-height: auto;margin-bottom: 9px;border: 0;}
#news .block-news .title a {display: block;overflow: hidden;line-height: 20px;text-transform: uppercase;font-size: 18px;font-weight: 600;letter-spacing: -0.001em;margin-bottom: 12px;white-space: nowrap;text-overflow: ellipsis;}
#news .block-news .date {display: inline-block;background-color: #019934;color: #fff;font-size: 14.5px;letter-spacing: 0.1em;font-family: 'PT Sans Narrow', sans-serif;float: none;text-align: left;padding: 8px;font-weight: 300;margin-bottom: 8px;}
#news .block-news .description {line-height: 25px;font-size: 15px;letter-spacing: 0.03em;padding: 0;margin-bottom: 15px;}
#news .block-news .description > p {margin: 0;max-height: 108px;overflow: hidden;}
#news .block-news .more {text-transform: uppercase;font-size: 13px;font-weight: 700;letter-spacing: 0.03em;}

замените на:

/*** Новости ***/
#news .block-bg {position: relative;background-color: #fff;overflow: hidden;}
#news .block-news .item {position: relative;transition: all .3s;}
#news .block-news .post-content {position: relative;background-color: #fff;background: #fff;margin: 0 auto;min-height: 210px;text-align: left;transition: all .3s;}
#news .block-title .title {box-shadow: none}
#news .block-news .title {min-height: auto;margin-bottom: 9px;border: 0}
#news .block-news .post-content a .title {display: block;overflow: hidden;line-height: 20px;font-size: 16px;color: #2a3034;margin-bottom: 5px;height: 40px;transition: all .3s;}
#news .block-news .post-content a .title:hover {color: #ff9302}
#news .block-news .news-image {display: block;margin: 0 auto;width: auto;max-width: 100%;max-height: 100px;margin-bottom: 10px;}
#news .block-news .description {line-height: 1.5;font-size: 13px;padding: 0;margin-bottom: 15px;height: 40px;overflow: hidden}
#news .block-news .description > p {margin: 0}
#news .block-news .more {text-transform: uppercase;font-size: 13px;font-weight: 700}
#news .tabs-headerList {overflow-y: hidden;}
#news .tabs-headerList .tabs-headerItem {display: inline-block;position: relative;vertical-align: middle;margin-right: 16px;}
#news .tabs-headerList .tabs-headerItem h2.title {color: #98a4ac;}
#news .tabs-headerList .tabs-headerItem.active h2.title {color: #fff;background:#019394;padding:0px 10px}
#news .tabs-headerList .tabs-headerItem:last-child:after {display: none;}
#news .tabs-headerList .tabs-headerItem .tabs-headerLink {display: block;border-bottom: 1px dotted transparent;transition: all 0.3s;}
#news .tabs-headerList .tabs-headerItem:hover .tabs-headerLink {color: #212b2d;}
#news .tabs-headerList .tabs-headerItem.active .tabs-headerLink {color: #fff;}
#news .tabs-body {position: relative;margin-top: 14px;}
#news .tabs-body .tabs-content {display: none}
#news .tabs-body .tabs-content.active {display: block;	padding: 20px;}
.nojs #news .preloader {display: none}
.nojs #news .tabs-body .tabs-content {display: block}

Теперь зайдите в раздел Настройки-->Основные и отключите группировку новостей.1.png


Получим вот такой результат: 2.png
Обратно в Главная


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Туризм
  5. → Главная
  6. Privacy Policy