Isotope and Items?

I am currently working with items in Dynamicweb. Each item contains x-amount of fields (text, images and etc.)

I am curious whether anyone have experience in isotope filtering/sorting on items. As far as I know, each item needs a category (from which it can be sorted/filtered in isoptope) and of course, the user has to click on each of these categories to do the actual filtering/sorting.

I am a bit confused on how to accomplish this in the most efficient way. I was thinking of making x-amount of checkboxes (one for each category) and somehow make isotope sort in these values, by getting these when publishing the items.

Frontend would be like...

CAT A - CAT B - CAT C..

*Click* CAT A -> items with the checkbox CAT A checked will be shown ..

*Click* CAT B -> items with the checkbox CAT B checked will be shown

etc...

Any suggestions or best-practice on this matter?

It's probably not best practice, but this piece of code does the job:

@using Dynamicweb.Content.Items;

@functions {
    public List<string> GetCategories(Item item)
    {
        var categories = new List<string>();
        var value = item["Categories"] as string;
        if (value != null)
        {
            categories.AddRange(value.Split(','));
        }
        return categories;
    }
}

@{
    var allCategories = new SortedSet<string>();
    var items = new List<Item>();
    foreach (var i in GetLoop("ItemPublisher:Items.List"))
    {
        var item = Item.GetItemById("Thread_34310", i.GetString("ItemPublisher:Item.Field.Id"));
        items.Add(item);
        foreach (var c in GetCategories(item))
        {
            allCategories.Add(c);
        }
    }
}

<div class="filter">
    <ul>
        <li>
            <a href="#" data-filter="*" class="current">*</a>
        </li>
        @foreach (var c in allCategories)
        {
            <li>
                <a href="#" data-filter=".@c">@c</a>
            </li>
        }
    </ul>
</div>

<div class="container">

    @foreach (var item in items)
    {
        <div class="item @string.Join(" ", GetCategories(item))">
            <h1>@item["Title"]</h1>
            <p>@item["Categories"]</p>
        </div>
    }
</div>

<script>
(function (window, $, undefined) {
    $(window).load(function () {
        var $container = $('.container');
        $container.isotope({
            filter: '*',
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });

        $('.filter a').click(function () {
            $('.filter .current').removeClass('current');
            $(this).addClass('current');

            var selector = $(this).attr('data-filter');
            $container.isotope({
                filter: selector,
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
            });
            return false;
        });
    });
}(window, jQuery))</script>
08-3277-CR

@using Dynamicweb.Content.Items;

@functions {
    public List<string> GetCategories(Item item)
    {
        var categories = new List<string>();
        var value = item["Categories"] as string;
        if (value != null)
        {
            categories.AddRange(value.Split(','));
        }
        return categories;
    }
}

@{
    var allCategories = new SortedSet<string>();
    var items = new List<Item>();
    foreach (var i in GetLoop("ItemPublisher:Items.List"))
    {
        var item = Item.GetItemById("Thread_34310", i.GetString("ItemPublisher:Item.Field.Id"));
        items.Add(item);
        foreach (var c in GetCategories(item))
        {
            allCategories.Add(c);
        }
    }
}

<div class="filter">
    <ul>
        <li>
            <a href="#" data-filter="*" class="current">*</a>
        </li>
        @foreach (var c in allCategories)
        {
            <li>
                <a href="#" data-filter=".@c">@c</a>
            </li>
        }
    </ul>
</div>

<div class="container">

    @foreach (var item in items)
    {
        <div class="item @string.Join(" ", GetCategories(item))">
            <h1>@item["Title"]</h1>
            <p>@item["Categories"]</p>
        </div>
    }
</div>

<script>
(function (window, $, undefined) {
    $(window).load(function () {
        var $container = $('.container');
        $container.isotope({
            filter: '*',
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });

        $('.filter a').click(function () {
            $('.filter .current').removeClass('current');
            $(this).addClass('current');

            var selector = $(this).attr('data-filter');
            $container.isotope({
                filter: selector,
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
            });
            return false;
        });
    });
}(window, jQuery))</script>

Remember to put in the right item type system name ("Thread_34310" is used in the example).

Best regards,
Mikkel

Developer forum

Isotope and Items?

Replies