Перейти к содержанию

Как сделать фильтры в страницах?

TemKa_SD
 Поделиться

Рекомендуемые сообщения

TemKa_SD Основной

TemKa_SD

Опубликовано
Опубликовано

Здравствуйте.

Есть вот такая страничка у меня https://wc3.games/ht/ - тут есть фильтры, выборка. Как сделать такие же но через функционал IPS, мне нужно чтобы при выборе фильтра исчезал весь контент кроме нужного, а не просто применялась прозрачность.

Ссылка на комментарий
Поделиться на другие сайты
andros0789 Опытный

andros0789

Опубликовано
Опубликовано

Я себе сделал по другому) Через JavaScript 

<ul class="theme-grid-filter" id="theme-filter">
            <li data-filter="tf-all" class="active"><i></i>Все темы</li>
            <li data-filter="tf-dark" class=""><i></i>Тёмные</li>
            <li data-filter="tf-light" class=""><i></i>Светлые</li>
            <li data-filter="tf-image" class=""><i></i>С фонами</li>
        </ul>
! function (t, e, i, a) {
	t.fn.doubleTapToGo = function (a) {
		return !!("ontouchstart" in e || navigator.msMaxTouchPoints || navigator.userAgent.toLowerCase().match(/windows phone os 7/i)) && (this.each(function () {
			var e = !1;
			t(this).on("click", function (i) {
				var a = t(this);
				a[0] !== e[0] && (i.preventDefault(), e = a)
			}), t(i).on("click touchstart MSPointerDown", function (i) {
				for (var a = !0, o = t(i.target).parents(), n = 0; n < o.length; n++) o[n] === e[0] && (a = !1);
				a && (e = !1)
			})
		}), this)
	}
}(jQuery, window, document), $(document).ready(function () {
	$("#theme-filter li").on("click", function () {
		$("#theme-filter li").removeClass(), $(this).addClass("active");
		var t = $(this).attr("data-filter");
		"tf-all" === t ? ($("#theme-grid li").removeClass("t-in").addClass("t-out"), setTimeout(function () {
			$("#theme-grid li").removeClass("t-hide t-out").addClass("t-in")
		}, 200)) : ($("#theme-grid li").removeClass("t-in").addClass("t-out"), setTimeout(function () {
			$("#theme-grid li").removeClass("t-hide t-out").addClass("t-in"), $("#theme-grid li:not(." + t + ")").addClass("t-hide")
		}, 200))
	});
	var t = function () {
		$(".link").each(function () {
			var t = $(this).height();
			$(this).css({
				"font-size": (t / 11).toFixed(0) + "px"
			})
		})
	};
	t();
	var e = function () {
		$(".iphone_flat .screenWrap").each(function () {
			var t = $(this).height(),
				e = .2841475573 * t;
			$(this).css({
				perspective: e + "px"
			})
		})
	};
	e();
	var i = function () {
		$(".iframePreview").each(function () {
			var t = $(this).width(),
				e = $(this).parent(".screen").width();
			$(this).css({
				transform: "scale(" + e / t + ")"
			})
		})
	};
	i();
	var a = function () {
		$(".videoScale").each(function () {
			var t = $(this).height(),
				e = t / 1080;
			$(this).find("#ytplayer").css({
				transform: "scale(" + e + ")"
			})
		})
	};
	a(), $(window).resize(function () {
		t(), e(), i(), a()
	}), $(".faqs li div").hide(), $(".faqs li strong").click(function () {
		$(this).parent().find("div").slideToggle("fast")
	}), $(".why").click(function () {
		return $(".why_text").slideToggle(), !1
	}), $("ul#filter a").click(function () {
		$(this).css("outline", "none"), $("ul#filter .current").parent().find("span").hide(), $("ul#filter .current").removeClass("current"), $(this).parent().addClass("current"), $(this).parent().find("span").show();
		var t = $(this).text().toLowerCase().replace(" ", "-");
		return "all" === t ? $("ul#portfolio li.hidden").fadeIn("fast").removeClass("hidden") : $("ul#portfolio li").each(function () {
			$(this).hasClass(t) ? $(this).fadeIn("fast").removeClass("hidden") : $(this).fadeOut("fast").addClass("hidden")
		}), !1
	}), $(".closePopup").click(function () {
		return $("#pricingPopup, .popupBackground").hide(), !1
	}), $(".showPopup").click(function () {
		return $(".popupBackground").show(), !1
	}), $(".ie .iewarning").html("<strong>Important:</strong> Your browser is outdated! To view this site correctly, please <a href='http://windows.microsoft.com/en-us/internet-explorer/download-ie'>upgrade your browser</a> or use a safe, modern browser such as <a href='https://www.mozilla.org/firefox/' target='_blank'>Firefox</a>, <a href='https://www.google.com/chrome' target='_blank'>Chrome</a>, <a href='https://www.apple.com/safari/' target='_blank'>Safari</a> or <a href='http://www.opera.com/' target='_blank'>Opera</a>.")
});
@media (max-width:550px) {
	.theme-grid {
		margin:0;
		padding:0
	}
	.theme-grid>li {
		padding:0 0 80px 0;
		width:100%
	}
}
.theme-grid-filter {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
	text-align:center;
	margin-bottom:20px;
	background:#d8dee6;
	box-shadow:inset rgba(0,0,0,0.08) 0px -1px 0px
}
.theme-grid-filter li {
	padding:20px 30px;
	cursor:pointer;
	position:relative;
	-webkit-transition:color 0.1s linear;
	transition:color 0.1s linear
}
.theme-grid-filter li:hover,.theme-grid-filter li.active {
	color:#222
}
.theme-grid-filter li.active:before,.theme-grid-filter li.active:after {
	content:'';
	position:absolute;
	z-index:1;
	bottom:1px;
	left:50%;
	margin-left:-6px;
	width:12px;
	height:12px;
	border:6px solid transparent;
	border-bottom-color:rgba(0,0,0,0.08);
	box-sizing:border-box
}
.theme-grid-filter li.active:after {
	z-index:2;
	border-bottom-color:#fff;
	bottom:0px
}
.theme-grid-filter li.active {
	pointer-events:none
}

 

И создал доп поле по которому в страницах делаю выборку.

Добавил его в class="{доп поле}" 

<section id="premadeThemes">
	<ul id="theme-grid" class="theme-grid">
	
 
    
		
		
        
        
       		
              
 










































           
        
      
        
        
             
 










































               
      
      
        
        
            
				
 










































            
      
      
        
        
            
				
 










































            
      
      
        
        
            
				
 










































            
      
      
        
        
            
				
 









































<li itemscope="" itemtype="http://data-vocabulary.org/Product" class="tf-light t-in">
				    <div class="tg-card">
					    	<a href="/portfolio/vtope-r2/" title="Подробнее о Vtope" class="theme-grid-link">
								<div class="theme-grid-item" style="background-image:url('/uploads/monthly_2016_11/583b5c668c754_.PNG.027135bef11d95a59672122b35c3d297.PNG');">
									<img src="/uploads/monthly_2017_03/583b5c668c754_.thumb.PNG.d6ade120039d470994aca3e16aab2e80.PNG" alt="" itemprop="image">
								</div>
							</a>
							
							<div class="theme-grid-text">
						    	<a href="http://cmsmafia.ru/portfolio/vtope-r2/" title="Подробнее о Vtope" itemprop="url"><h4 itemprop="name">Vtope</h4></a>
						    	<span class="adjustPrice" itemprop="price">₽ 500.00</span>
						    	<div itemprop="description" style="text-align: justify; word-wrap: break-word;" data-ipstruncate="" data-ipstruncate-size="4 lines" data-ipstruncate-type="remove" class="is-truncated">
	Vtope — это приятный светлый стиль, который подойдет для любого паблика. В ходе работы были созданы макеты: главной страницы, страницы отзывы, контакты, партнеры и других страниц. Особенности дизайна сайта: тематическое оформление шапки каждой страницы сайта... </div>
					    	</div>
					    </div>
				    	
</li>
            
      
      
      
	
    </ul>
</section>

 

Ссылка на комментарий
Поделиться на другие сайты
WOLF Анонимус

WOLF

Опубликовано
Опубликовано

andros0789, почему так мало пробелов? 

:D да и спойлер не помешал бы ;) 

скрин не грузитсяo.O  

http://prnt.sc/etcrjr

Ссылка на комментарий
Поделиться на другие сайты
andros0789 Опытный

andros0789

Опубликовано
Опубликовано
13 часов назад, WOLF сказал:

 

  Показать контент

andros0789, почему так мало пробелов? 

:D да и спойлер не помешал бы ;) 

скрин не грузитсяo.O  



http://prnt.sc/etcrjr

 

 

сорян)))с телефона кидал)

Ссылка на комментарий
Поделиться на другие сайты
andros0789 Опытный

andros0789

Опубликовано
Опубликовано

Короче я сделал тупо через яваскрипт, и вкладки. К кнопкам вкладок прописал в класс дополнительное поле, то есть получается если я создавал новость (или шаблон как у меня) и при создании я выбирал "С фоном", то у меня через доп поле подставлялось  class="tf-dark, tf-image t-in"

ниже скрин как я выбираю сортировку при создании новости)

Снимок.PNG

Ссылка на комментарий
Поделиться на другие сайты
kgb Опытный

kgb

Опубликовано
Опубликовано
В 06.04.2017 в 16:59, TemKa_SD сказал:

Есть вот такая страничка у меня https://wc3.games/ht/ - тут есть фильтры, выборка. Как сделать такие же но через функционал IPS

По приведенной ссылке кастомные фильтры, т.е. созданные отдельно от движка, хотя возможно чтото от js-фреймворка IPS использовалось. В то же время в IPS есть возможность  по некоторым типам полей, в частности Stlect Box задавать фильтрацию.

1.jpg

2.jpg

3.jpg

Ссылка на комментарий
Поделиться на другие сайты
TemKa_SD Основной

TemKa_SD

Опубликовано
  • Автор
Опубликовано

kgb, Спасибо, примерно это мне и надо было. Можно через этот функционал реализовать и выборку выпадающим списком.

Ссылка на комментарий
Поделиться на другие сайты
kgb Опытный

kgb

Опубликовано
Опубликовано
5 минут назад, TemKa_SD сказал:

Можно через этот функционал реализовать и выборку выпадающим списком

Я не знаю. Попробуй.  Выпаадющий спсок отменяет мультиселект

Ссылка на комментарий
Поделиться на другие сайты
TemKa_SD Основной

TemKa_SD

Опубликовано
  • Автор
Опубликовано
7 часов назад, kgb сказал:

Я не знаю. Попробуй.  Выпаадющий спсок отменяет мультиселект

Всё супер, появилось пару проблем.

1. Как вывести ключ из выпадающего списка в шаблон?

2. Не работает вставка полей в шаблон, вставляю код: 

{$record->customFieldDisplayByKey('мой ключ', 'listing')|raw}

Вылазиет ошибка.

2017-04-08_160725.png

2017-04-08_160802.png

Ссылка на комментарий
Поделиться на другие сайты
TemKa_SD Основной

TemKa_SD

Опубликовано
  • Автор
Опубликовано

Получилось. Вместо переменной $record нужно использовать $row

Ссылка на комментарий
Поделиться на другие сайты
kgb Опытный

kgb

Опубликовано
Опубликовано
3 часа назад, TemKa_SD сказал:

Вместо переменной $record нужно использовать $row

Ну так правильно, в display-шаблонах $record, в listing-шаблонах $rows котороая потом форичится в $row {{foreach $rows as $row}}

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

×
 Поделиться
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...