0

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?

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.

| improve this answer | |
  • I think your solution is what I'm looking for, but I'm running into an issue using URL segments & Switchee to make that happen. Likely due to staring at this thing for so long now... – soire Aug 14 '15 at 15:52
  • I have the following code happening: pastie.org/10351154 as you can see, there are some conflicts in detecting the segment_2 either url_title or set_2_category_id....am I overlooking a more efficient way of doing this? – soire Aug 14 '15 at 15:53
  • Seems a little overwrought - just use {segment_2} maybe, since everything is already in your order/index template, so that's not really a variable, and you're only using {segment_3} once? Check all your hard-coded variable first (pickup, delivery, etc), then do a regex match for alpha dash last to catch what is probably a category slug? – Derek Hogue Aug 14 '15 at 15:59
  • the example I shared is a paraphrased version of a much larger site where I do use segment_3... not too familiar with regex. any info on where to look for examples of that? – soire Aug 14 '15 at 17:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.