Low Seg2Cat and MixItUp

Question

I have a bakery site that uses Switchee to use a single template to serve up multiple "pages", the content of each case is a snippet.

On my order page, I have channel entries products whose categories are being filtered by using the jQuery plugin MixItUp. This is working fine, but when I want to send a "deep link" to the order page to display ONLY the category in a URL hash

http://www.example.com/order#cakes

I cannot figure out for the life of me how to make this work. My js code in the footer is as such:

<script>
$(document).ready(function(){

    // check if there is a url hash, and if so, 
    // save it as a variable and prepend a '.' to the start - e.g. '.blue'
    // else, set variable as the default "all"

    var filterOnLoad = window.location.hash ? '.'+window.location.hash : 'all';

    // Instantiate MixItUp:
    $('#Container').mixItUp();
    load: {
            filter: filterOnLoad
        };
    controls: {
            activeClass: 'favorite-filter'
        };
    animation: {
            enable: 'true'
            effects: 'stagger'

        };
});

Which is code that I got from the MixItUp forums for using this technique in a general sense. I'm wondering if it is possible to use Low Seg2Cat after a hash? Here is my template code inside this snippet:

<div class="w-section content">
<div class="w-container">
    <h1 class="h1-order">Order</h1>
    {exp:low_variables:single var="lv_disclaimer_turnaround"}
    <div class="order-filter">
        <!-- <a class="filter-link favorite-filter" href="#">Best Sellers</a> -->

        {exp:channel:categories category_group="1" style="linear" sort="asc"}
        <div class="filter-link filter" data-filter=".{category_url_title}">{category_name}</div>
        {/exp:channel:categories}
        <div class="filter-link filter" data-filter="all">All</div>
    </div>

    <div id="Container">
            {exp:channel:entries 
                channel="products" 
                disable="category_fields|member_data|pagination"
                limit="200"
                orderby="random"
                sort="random"
                status="Open"
            }

                    <a class="w-inline-block tn mix {categories backspace='1'}{category_url_title} {/categories}" href="/order/{url_title}/">{if gluten_free == "no"}{if:else}<img class="gluten-free" src="/assets/images/gluten-free.svg">{/if}{if product_favorite == "no"}{if:else}<img class="favorite" src="/assets/images/favorite.svg">{/if}{exp:channel_images:images entry_id="{entry_id}"}<img src="{image:url:thumb}" alt="{title} - {site_name}" class="tn-img">{/exp:channel_images:images}
                        <div>{title}</div>
                    </a>



            {/exp:channel:entries}  
    </div>
</div>

Any suggestions as to how to achieve this or where I'm fumbling?

Answer 1

In short: no. Low Seg2Cat looks at full segments, which in your example is order#cakes, not order, nor cakes.

Your better bet is to, rather than use a hash in your URL to indicate a filter, simply append the category_url_title as a new segment. So, link your filters to order/{category_url_title}, and then manually change your URL to that link when your MixItUp filters are clicked. (You could even use the History API to do this and preserve back/forward states in the browser.)

That way your URLs can load fine without JS by using the standard Low Seg2Cat behaviour, e.g.,

 {exp:channel:entries 
            channel="products" 
            disable="category_fields|member_data|pagination"
            limit="200"
            orderby="random"
            status="Open"
            {if segment_2_category_id}category="{segment_2_category_id}"{/if}
        }

(You could then also remove your check for the existing filter in the URL in your JS.)

You'd also want to check for the existing category segment to apply whatever "active" classes you're using on your filter links.