Implement isotope filter on product page details using ASP.NET Core MVC

Question

Implement isotope filter on product page details using ASP.NET Core MVC

While working on my .Net core project, I implemented an isotope filter dynamically. Everything seemed to be functioning correctly, however, a minor error occurred. When selecting a specific category, the position of the product did not appear as expected. Please refer to the images linked below:

View All Products

After applying the filter, the image did not change its position (it should have appeared first)

Here's a snippet of my code from Index.cshtml:

@model BornoMala.Models.ViewModels.ProductDetailsVM
<section id="portfolio" class="portfolio">
    <div class="container">
        <div class="row" data-aos="fade-up">
            <div class="col-lg-12 d-flex justify-content-center">
                <ul id="portfolio-flters">
                    <li data-filter="all" class="filter-active filter-button">All</li>
                    @foreach (var obj in Model.Categories)
                    {
                        <li class="filter-button" data-filter="@obj.Name.Replace(' ','_')">@obj.Name</li>
                    }
                </ul>
            </div>
        </div>

        <div class="row portfolio-container" data-aos="fade-up">
            @foreach (var prod in Model.Products)
            {
                <div class="col-lg-4 col-md-6 portfolio-item  filter @Model.Category.Name.Replace(' ','_')">
                   <div class="portfolio-img"><img src="@Model.ImageUrl" class="img-fluid" alt=""></div>
                    <div class="portfolio-info">
                    <h4>@Model.Title</h4>
                    <p>By <b>@Model.Title</b></p>
                    </div>
                  </div>
            }
        </div>

    </div>
</section>

In the Isotope.js section of my code:

$(window).on('load', function () {
        var portfolioIsotope = $('.portfolio-container').isotope({
            itemSelector: '.portfolio-item',
        });
});

 $(document).ready(function () {

            $(".filter-button").click(function () {
                $("#portfolio-flters li").removeClass('filter-active');
                $(this).addClass('filter-active');

                var value = $(this).attr('data-filter');
                if (value == "all") {
                    $('.portfolio-item').show('3000');
                }
                else {
                    $(".portfolio-item").not('.' + value).hide('2000');
                    $('.portfolio-item').filter('.' + value).show('2000');

                }
            });

    });

I encountered an issue where if I remove the ".portfolio-container" class from the "load window" in the Isotope.js script, the details page container loses flexibility. Feel free to check out another image showcasing this problem:

Image card displaying lack of flexibility

javascript asp.net asp.net-core asp.net-mvc-4 jquery-isotope

Answer 1

Answer №1

Here are a couple of methods you can try:

1. Modify the window onload section to:

$('.portfolio-container').isotope({
        itemSelector: '.element-item'
    });

This will display the first option, but there may be a delay in loading in my demonstration. https://i.sstatic.net/xg0GB.gif

2. Alternative approach using isotope:

Note the data-filter content within 'portfolio-filters', it may differ from yours. The idea behind this method is to invoke isotope every time you click on a different filter button

(with a different data-filter).

Modified code:

Be aware of

data-filter="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="597719363b33771738343c770b3c2935383a3c">[email protected]</a>(' ','_')">@obj.Name</li>

Data stored in database

is Digital, however you can add '.' before '@', so it can be identified by isotope.

<div class="container">
<div class="row" data-aos="fade-up">
    <div class="col-lg-12 d-flex justify-content-center">
        <ul id="portfolio-flters">
            <li data-filter="*" class="filter-active filter-button">All</li>
            @foreach (var obj in Model.Categories)
            {
                <li class="filter-button" data-filter="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f9d7b9969b93d7b798949cd7ab9c8995989a9c">[email protected]</a>(' ','_')">@obj.Name</li>
            }
        </ul>
    </div>
</div>
<div class="row portfolio-container" data-aos="fade-up">
    @foreach (var product in Model.Products)
    {
        <partial name="_IndividualProductCard" model="product" />
    }
</div>

@section Scripts
{
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script>
    $mygrid = $('.portfolio-container').isotope({
        itemSelector: '.portfolio-item'
    });

    $('#portfolio-flters').on('click', 'li', function () {
        var filterValue = $(this).attr('data-filter');
        $mygrid.isotope({ filter: filterValue });
    });
</script>
}

Data in database:

https://i.sstatic.net/7YBYu.png https://i.sstatic.net/q0saj.png

Result:

https://i.sstatic.net/qwYOl.gif

Answer 2

Here are a couple of methods you can try:

1. Modify the window onload section to:

$('.portfolio-container').isotope({
        itemSelector: '.element-item'
    });

This will display the first option, but there may be a delay in loading in my demonstration. https://i.sstatic.net/xg0GB.gif

2. Alternative approach using isotope:

Note the data-filter content within 'portfolio-filters', it may differ from yours. The idea behind this method is to invoke isotope every time you click on a different filter button

(with a different data-filter).

Modified code:

Be aware of

data-filter="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="597719363b33771738343c770b3c2935383a3c">[email protected]</a>(' ','_')">@obj.Name</li>

Data stored in database

is Digital, however you can add '.' before '@', so it can be identified by isotope.

<div class="container">
<div class="row" data-aos="fade-up">
    <div class="col-lg-12 d-flex justify-content-center">
        <ul id="portfolio-flters">
            <li data-filter="*" class="filter-active filter-button">All</li>
            @foreach (var obj in Model.Categories)
            {
                <li class="filter-button" data-filter="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f9d7b9969b93d7b798949cd7ab9c8995989a9c">[email protected]</a>(' ','_')">@obj.Name</li>
            }
        </ul>
    </div>
</div>
<div class="row portfolio-container" data-aos="fade-up">
    @foreach (var product in Model.Products)
    {
        <partial name="_IndividualProductCard" model="product" />
    }
</div>

@section Scripts
{
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script>
    $mygrid = $('.portfolio-container').isotope({
        itemSelector: '.portfolio-item'
    });

    $('#portfolio-flters').on('click', 'li', function () {
        var filterValue = $(this).attr('data-filter');
        $mygrid.isotope({ filter: filterValue });
    });
</script>
}

Data in database:

https://i.sstatic.net/7YBYu.png https://i.sstatic.net/q0saj.png

Result:

https://i.sstatic.net/qwYOl.gif

Answer 3

Answer №2

@Tisa I've implemented your code as instructed Index.cshtml

<section  class="portfolio">
    <div class="container">
        <div class="row" data-aos="fade-up">
            <div class="col-lg-12 d-flex justify-content-center">
                <ul id="portfolio-flters">
                    <li data-filter="*" class="filter-active filter-button">All</li>
                    @foreach (var obj in Model.Categories)
                    {
                        <li class="filter-button" data-filter="@obj.Name.Replace(' 
                        ','_')">@obj.Name</li>

                    }

                </ul>
            </div>
        </div>
        <div class="row portfolio-container" data-aos="fade-up">
            @foreach (var product in Model.Products)
            {
                <partial name="_IndividualProductCard" model="product" />
            }

        </div>

    </div>
</section>

_IndividualProductCard.cshtml

@model BornoMala.Models.Product
<div class="col-lg-4 col-md-6 portfolio-item  filter @Model.Category.Name.Replace(' ','_')">
    <div class="portfolio-img ">
        <img src="@Model.ImageUrl" width="100" height="50" />
    </div>
</div>

 @section Scripts
    {
        <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
        <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
        <script>
            $mygrid = $('.portfolio-container').isotope({
                itemSelector: '.portfolio-item'
            });

            $('#portfolio-flters').on('click', 'li', function () {
                var filterValue = $(this).attr('data-filter');
                $mygrid.isotope({ filter: filterValue });
            });
        </script>
    }

product model

namespace project.Models
{
    public class Product
    {
        [Key]
        public int Id { get; set; }

        [Required]
        public string Title { get; set; }

        [Required]
        public string Description { get; set; }

        [Required]
        public string Artist { get; set; }

        [Required]
        [Range(1,1000)]
        public double Price { get; set; }

        public string ImageUrl { get; set; }

        [Required]
        public int CategoryId { get; set; }

        [ForeignKey("CategoryId")]
        public Category Category { get; set; }

        [Required]
        public int StyleId { get; set; }

        [ForeignKey("StyleId")]
        public Style Style { get; set; }
    }
}

productdetailsVM

namespace project.Models.ViewModels
{
    public class ProductDetailsVM
    {
        public IEnumerable<Product> Products { get; set; }
        public IEnumerable<Category> Categories { get; set; }
        
    }
}

All category images are displaying except for others where no image is shown. Blank image link

I have resolved the filtering issue using jQuery, but the problem with the image position remains due to not calling '"$mygrid"'. How can this be resolved?

@section Scripts{

    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
   <script>
            $mygrid = $('.portfolio-container').isotope({
                itemSelector: '.portfolio-item'
            });

            $(".filter-button").click(function(){

                var value = $(this).attr('data-filter');
                if(value == "all")
                 {
                   $('.filter').show('0010');
                 }
            else
                  {
                    $(".filter").not('.'+value).hide('0010');
                    $('.filter').filter('.'+value).show('0010');

               }
            });
   </script>

Answer 4

@Tisa I've implemented your code as instructed Index.cshtml

<section  class="portfolio">
    <div class="container">
        <div class="row" data-aos="fade-up">
            <div class="col-lg-12 d-flex justify-content-center">
                <ul id="portfolio-flters">
                    <li data-filter="*" class="filter-active filter-button">All</li>
                    @foreach (var obj in Model.Categories)
                    {
                        <li class="filter-button" data-filter="@obj.Name.Replace(' 
                        ','_')">@obj.Name</li>

                    }

                </ul>
            </div>
        </div>
        <div class="row portfolio-container" data-aos="fade-up">
            @foreach (var product in Model.Products)
            {
                <partial name="_IndividualProductCard" model="product" />
            }

        </div>

    </div>
</section>

_IndividualProductCard.cshtml

@model BornoMala.Models.Product
<div class="col-lg-4 col-md-6 portfolio-item  filter @Model.Category.Name.Replace(' ','_')">
    <div class="portfolio-img ">
        <img src="@Model.ImageUrl" width="100" height="50" />
    </div>
</div>

 @section Scripts
    {
        <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
        <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
        <script>
            $mygrid = $('.portfolio-container').isotope({
                itemSelector: '.portfolio-item'
            });

            $('#portfolio-flters').on('click', 'li', function () {
                var filterValue = $(this).attr('data-filter');
                $mygrid.isotope({ filter: filterValue });
            });
        </script>
    }

product model

namespace project.Models
{
    public class Product
    {
        [Key]
        public int Id { get; set; }

        [Required]
        public string Title { get; set; }

        [Required]
        public string Description { get; set; }

        [Required]
        public string Artist { get; set; }

        [Required]
        [Range(1,1000)]
        public double Price { get; set; }

        public string ImageUrl { get; set; }

        [Required]
        public int CategoryId { get; set; }

        [ForeignKey("CategoryId")]
        public Category Category { get; set; }

        [Required]
        public int StyleId { get; set; }

        [ForeignKey("StyleId")]
        public Style Style { get; set; }
    }
}

productdetailsVM

namespace project.Models.ViewModels
{
    public class ProductDetailsVM
    {
        public IEnumerable<Product> Products { get; set; }
        public IEnumerable<Category> Categories { get; set; }
        
    }
}

All category images are displaying except for others where no image is shown. Blank image link

I have resolved the filtering issue using jQuery, but the problem with the image position remains due to not calling '"$mygrid"'. How can this be resolved?

@section Scripts{

    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
   <script>
            $mygrid = $('.portfolio-container').isotope({
                itemSelector: '.portfolio-item'
            });

            $(".filter-button").click(function(){

                var value = $(this).attr('data-filter');
                if(value == "all")
                 {
                   $('.filter').show('0010');
                 }
            else
                  {
                    $(".filter").not('.'+value).hide('0010');
                    $('.filter').filter('.'+value).show('0010');

               }
            });
   </script>

Implement isotope filter on product page details using ASP.NET Core MVC

Answer №1

Answer №2

Similar questions

Incorporate a variable within the ng-repeat loop

Updating the icon of an action column dynamically in Ext JS4

Click on any checkbox to select all checkboxes at once

Transform a legitimate web address into an acceptable file path

Remove a file from a directory using AJAX in an ASP.NET C# application

Managing relationships between tables in Entity Framework Core 2 through foreign key constraints

Guide to cycling through Promise results and populating a form

Utilizing HTML5 to automatically refresh the page upon a change in geolocation

Is there a way to save HTML form data to a CSV file within a designated directory?

Tips on integrating googleapis with apps script

Developing a dynamic table using data retrieved from an API within a JS React Bootstrap framework

Utilizing the Facebook Like Button with ASP.NET MVC in C#

When using addClass("test"), it throws an error message: TypeError: undefined is not a function

Calling a function after a value has been updated

Creating a Cloudinary Angular URL: A Step-by-Step Guide

Tips for resolving the issue of "Validation procedure indicates that the remote certificate is invalid"

DiscordjsError: The client attempted to use a token that was not accessible

What makes the ng-file-upload Upload service so special?

How can I modify the value of a CSS animation rule in AngularJS?

Encountering Axios CanceledError while attempting to forward a POST request using Axios