Filter Products in same Page

Is It Possible to filter products in same page of Category wich have all products under this category when i press on each filter it gets all items with as example have tag Best Seller and replace products in this page with filtered products.

Product Grid HTML

<div class="ui three column grid">
		{% for product in products %}
		<div class="column">
			<div class="ui basic segment">
				<div class="ui raised link card">
					<div class="image">
						{% for image in product.product_image.all %}
						{% if image.thumbnail %}
						<img class="ui fluid rounded image PrdctImgCtgry" src="{{ image.image.url }}">
						{% endif %}
						{% if product.tag %}
						{% include '__Snips/__Tag_Ribbon.html' %}
						{% endif %}
						{% endfor %}
					</div>
					<div class="content">
						<div class="header">{{ product.name }}</div>
						<div class="description">
							{{ product.sku }}
						</div>
					</div>
					<div class="extra content">
						{% if product.before_price %}
						<span>
							<i class="money bill alternate outline icon"></i>
							<del class="DublStrk">{{ product.before_price }}</del>
						</span>
						{% endif %}
						<span class="right floated">
							<i class="money bill alternate icon"></i>
							{{ product.price }}
						</span>
					</div>
				</div>
			</div>
		</div>
		{% endfor %}
	</div>

Tags Filter Dropdown HTML

			<div class="ui simple dropdown labeled icon fluid button FilterByCategory">
				<i class="filter icon"></i>
				<span class="text">Filter</span>
				<div class="menu">
					{% for tag in tags %}
					{% if tag.1 == 'Out Of Stock' %}
					{% else %}
					<div class="item">
						<a href="{{ category.get_absolute_url | tag.1 }}">{{ tag.1 }}</a>
					</div>
					{% endif %}
					{% endfor %}
				</div>
			</div>

Updating a page currently being displayed in the browser requires JavaScript / AJAX.

Yes, you can write some JavaScript that would catch the appropriate event, make an AJAX call, receive the returned values, and update the current page.
You would also need to write the corresponding view to receive that request and return the appropriate response.

(You can also look at HTMX as an alternative method that is, in general, much easier.)

2 Likes

Thanks Ken. will check HTMX for sure.