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

Posted 6 апреля, 20177 yr

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

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

Цитата

Link to comment

https://ipbmafia.ru/topic/17095-kak-sdelat-filtry-v-stranicah/

Share on other sites

6 апреля, 20177 yr

comment_126366

Я себе сделал по другому) Через 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>

Цитата

TemKa_SD
1

Link to comment

https://ipbmafia.ru/topic/17095-kak-sdelat-filtry-v-stranicah/?&do=findComment&comment=126366

Share on other sites

6 апреля, 20177 yr

Author

comment_126368

Спасибо, попробую )

Цитата

Link to comment

https://ipbmafia.ru/topic/17095-kak-sdelat-filtry-v-stranicah/?&do=findComment&comment=126368

Share on other sites

6 апреля, 20177 yr

comment_126374

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

да и спойлер не помешал бы

скрин не грузится

http://prnt.sc/etcrjr

Цитата

Link to comment

https://ipbmafia.ru/topic/17095-kak-sdelat-filtry-v-stranicah/?&do=findComment&comment=126374

Share on other sites

6 апреля, 20177 yr

Author

comment_126381

Что-то не то ты мне дал (

Цитата

Link to comment

https://ipbmafia.ru/topic/17095-kak-sdelat-filtry-v-stranicah/?&do=findComment&comment=126381

Share on other sites

7 апреля, 20177 yr

comment_126406

13 часов назад, WOLF сказал:
Показать контент
andros0789, почему так мало пробелов?

да и спойлер не помешал бы

скрин не грузится
http://prnt.sc/etcrjr

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

Цитата

Link to comment

https://ipbmafia.ru/topic/17095-kak-sdelat-filtry-v-stranicah/?&do=findComment&comment=126406

Share on other sites

7 апреля, 20177 yr

comment_126411

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

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

Цитата

Link to comment

https://ipbmafia.ru/topic/17095-kak-sdelat-filtry-v-stranicah/?&do=findComment&comment=126411

Share on other sites

7 апреля, 20177 yr

comment_126416

В 06.04.2017 в 16:59, TemKa_SD сказал:

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

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

Цитата

TemKa_SD
1

Link to comment

https://ipbmafia.ru/topic/17095-kak-sdelat-filtry-v-stranicah/?&do=findComment&comment=126416

Share on other sites

7 апреля, 20177 yr

Author

comment_126421

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

Цитата

Link to comment

https://ipbmafia.ru/topic/17095-kak-sdelat-filtry-v-stranicah/?&do=findComment&comment=126421

Share on other sites

7 апреля, 20177 yr

comment_126422

5 минут назад, TemKa_SD сказал:

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

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

Цитата

Link to comment

https://ipbmafia.ru/topic/17095-kak-sdelat-filtry-v-stranicah/?&do=findComment&comment=126422

Share on other sites

8 апреля, 20177 yr

Author

comment_126428

7 часов назад, kgb сказал:

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

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

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

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

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

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

Цитата

Link to comment

https://ipbmafia.ru/topic/17095-kak-sdelat-filtry-v-stranicah/?&do=findComment&comment=126428

Share on other sites

8 апреля, 20177 yr

Author

comment_126429

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

Цитата

Link to comment

https://ipbmafia.ru/topic/17095-kak-sdelat-filtry-v-stranicah/?&do=findComment&comment=126429

Share on other sites

8 апреля, 20177 yr

comment_126433

3 часа назад, TemKa_SD сказал:

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

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

Цитата

Link to comment

https://ipbmafia.ru/topic/17095-kak-sdelat-filtry-v-stranicah/?&do=findComment&comment=126433

Sign In

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

Featured Replies

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Последние посетители 0

Account

Navigation

Messages

Уведомления

Search